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

portal-frontend-components

Create Vue 3 and Nuxt 4 components with Tailwind v4 design tokens for a financial data portal.

Updated Jul 27, 2026
Search Tags:#typescript#design tokens#tailwind css#frontend components#vue 3#skeleton loading#nuxt 4
One-click install
npx skills add https://github.com/ArthurZizumbo/karisma-data --skill portal-frontend-components-arthurzizumbo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: portal-frontend-components
Source: https://github.com/ArthurZizumbo/karisma-data/tree/main/.claude/skills/portal-frontend-components
Command: npx skills add https://github.com/ArthurZizumbo/karisma-data --skill portal-frontend-components-arthurzizumbo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a consistent Vue 3 / Nuxt 4 frontend for a financial data portal requires enforcing many project-specific rules: Spanish-only UI strings, Lazy-prefixed heavy components, design tokens derived from a LaTeX style file, and skeleton/empty/error states without layout shift. This Skill encodes all of those conventions so generated components comply on the first pass. ## Core Features & Use Cases - Component scaffolding by domain: Pages, chat tool-call cards, dashboard insight cards, admin user management, and common skeleton/empty states, all following the Nuxt 4 app/ directory structure with typed <script setup lang="ts">. - Design token enforcement: Tailwind v4 @theme tokens generated from uxdoc.sty, prohibiting hand-written colors and ensuring UI matches course documents. - State handling patterns: Four-state ToolCallCard (announced/running/done/error), skeleton blocks with reserved dimensions to prevent layout shift, and SSR-safe client-only code. - Use Case: Ask the assistant to build the /admin/usuarios panel and receive a UserTable with soft-delete confirmation, a UserFormModal handling 409 duplicate errors, and admin-role middleware, all in Spanish with correct tokens. ## Quick Start Create the ToolCallCard component for the chat panel with its four states using the portal frontend conventions.

Frequently Asked Questions about portal-frontend-components

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

FAQPage Schema
How do I create Nuxt 4 components with the app directory structure?▼

Place pages, components, layouts, composables, and middleware under the `app/` directory, and use `<script setup lang="ts">` with typed props and emits via generics. Heavy components like charts and modals get a `Lazy` prefix so they stay out of the initial bundle.

How to prevent layout shift with skeleton loading states in Vue?▼

Render a SkeletonBlock component with a fixed height matching the real content while data is pending, then swap to an empty state or the content. Reserving dimensions upfront eliminates cumulative layout shift during loading transitions.

How do I share design tokens between LaTeX documents and Tailwind CSS?▼

Define colors once in a LaTeX style file with \definecolor, then run a generator script that emits a Tailwind v4 `@theme` block in the main CSS file. The derivation flows one way from the style file to the interface, so tokens are never edited by hand.

Does this Nuxt project support i18n or multiple languages?▼

No, the UI is Spanish-only with strings written directly in templates. Using `useI18n()`, `t('key')`, or locale files is explicitly prohibited in this project.

How do I make Vue components SSR-safe when accessing window or document?▼

Guard any browser API access with `import.meta.client` before touching `window` or `document`. This prevents server-side rendering errors in Nuxt when components execute on the server.

How should an admin user management panel handle duplicate user errors?▼

Display 409 conflict errors inline next to the offending field in the form modal, and require an explicit confirmation modal before soft-deleting a user. Passwords must never be rendered or logged.

Related Skills

Explore More Software Engineering Skills→
PolicyEnginePolicyEngine

policyengine-tailwind-shadcn

Bridge PolicyEngine design tokens to Tailwind v4 utilities via @theme inline blocks.

Official
Intermediate
smile95137asmile95137a

新增功能 API Skill

Scaffold complete CRUD modules with admin and API routes.

Community
Advanced
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
graphifgraphif
4.4k

shadcn

Manages shadcn/ui components via CLI for adding, searching, styling, and composing React UI.

Official
Advanced