skills.rest
ArthurZizumbo
ArthurZizumboCOMMUNITY
Explore all skills by this author →
GitHub

portal-frontend-composables

Create Nuxt 4 composables, Pinia stores, and route middleware for session and dashboard state.

Updated Jul 27, 2026
Search Tags:#typescript#composables#pinia#nuxt 4#role guards#route middleware#httponly jwt
One-click install
npx skills add https://github.com/ArthurZizumbo/karisma-data --skill portal-frontend-composables-arthurzizumbo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: portal-frontend-composables
Source: https://github.com/ArthurZizumbo/karisma-data/tree/main/.claude/skills/portal-frontend-composables
Command: npx skills add https://github.com/ArthurZizumbo/karisma-data --skill portal-frontend-composables-arthurzizumbo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a Nuxt 4 frontend with secure session handling, role-based access, and shared dashboard-to-chat state requires consistent patterns that are easy to get wrong, such as leaking JWTs to client JavaScript or wrapping massive API payloads in deep reactivity. ## Core Features & Use Cases - Session composable with httpOnly JWT cookies: Implements useSession with login, profile fetching, and role-based hasScope guards without exposing tokens to client JavaScript. - Route middleware and module visibility: Provides a global auth middleware that redirects unauthenticated users and hides modules based on role scope. - Shared dashboard-chat Pinia store (TwinBI pattern): Sends active dashboard filters as agent context with every chat query, including a "summarize current view" action. - Use Case: A directivo opens the dashboard, drills down into a chart, and clicks "Resumir vista actual" — the store serializes the active filters and sends them as context to the chat agent via useChatStream. ## Quick Start Ask the AI to create a useSession composable and global auth middleware for the Nuxt 4 portal using httpOnly cookie authentication with role-based route guards.

Frequently Asked Questions about portal-frontend-composables

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement role-based route guards in Nuxt 4 middleware?▼

Define a global route middleware with defineNuxtRouteMiddleware that fetches the user profile and checks to.meta.requiredRole against a hasScope helper. Roles are ordered (operativo, analista, directivo, admin) and compared by index, redirecting unauthorized users to their role home.

How to store JWT tokens securely in a Nuxt frontend?▼

Store the JWT in an httpOnly cookie set by the backend so client JavaScript never reads the token. The client fetches the user profile from /api/auth/me and the cookie is sent automatically; never use localStorage for tokens.

Does Nuxt 4 useFetch handle large API payloads efficiently?▼

Yes, Nuxt 4 useFetch returns data as a shallowRef by default, avoiding deep reactivity proxies over massive payloads like 1M-point series. Never wrap such payloads in reactive() or use deep watchers on them.

How do I share dashboard filter state with a chat agent in Pinia?▼

Use a shared Pinia store holding the dashboard filters and expose a getter that serializes them as agent context. Pass that context with every chat send call so the backend injects the active filters into the agent.

When should state live in Pinia instead of composables in Nuxt?▼

Cross-component state must always live in a Pinia store, while composables return reactive state plus actions for local use. Never export bare ref or reactive objects between files, as this breaks state isolation and predictability.

Related Skills

Explore More Software Engineering Skills→
0xShe0xShe
386

php-session-cookie-audit

Analyze PHP source code for session and cookie security flaws.

Community
Advanced
tokijhtokijh

use-design-system/Menu

Implement accessible dropdown menus with keyboard navigation for React applications.

Community
Intermediate
YusufkotavomYusufkotavom

api-sse-integration

Standardize API-SSE contracts between backend and frontend to prevent integration drift.

Community
Advanced
YuDefineYuDefine
45

nuxt-auth-utils

Enable cookie-based authentication in Nuxt apps with OAuth handlers.

Official
Advanced