メニュー
Integração e uso dos componentes UI do projeto Vue 3. Os componentes vêm do shadcn-vue (estilizados) e Reka UI (primitivos). Use quando criando componentes UI, formulários, ou precisando de componentes de interface.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | ui-components |
| description | Integração e uso dos componentes UI do projeto Vue 3. Os componentes vêm do shadcn-vue (estilizados) e Reka UI (primitivos). Use quando criando componentes UI, formulários, ou precisando de componentes de interface. |
Guidelines completas para integração e uso dos componentes UI no projeto Vue 3 FSD. Os componentes são baseados em shadcn-vue e Reka UI.
src/shared/components/src/shared/components/Os componentes estão em src/shared/components/. Cada pasta contém um ou mais componentes com index.ts para exportação.
// Importação de componentes UI do projeto
import { Button } from '@/shared/components/button'
import { Input } from '@/shared/components/input'
import {
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/shared/components/form'
Catálogo completo: components.md — lista de componentes, props e exemplos.
Padrão: Criar wrapper custom que usa componentes do projeto internamente.
Princípios do Tailwind CSS v4. Configuração CSS-first, container queries, padrões modernos, arquitetura de design tokens.
Desenvolve formulários com VeeValidate e Zod seguindo padrões do projeto. Use quando criando formulários, schemas de validação ou integrando validação com i18n.
Desenvolve aplicações Vue 3 seguindo arquitetura Feature-Sliced Design (FSD), implementando lazy loading, code splitting, e padrões de performance. Use quando desenvolvendo features, componentes, ou trabalhando com Vue 3 neste projeto.
Desenvolve testes unitários com Vitest e testes E2E com Playwright seguindo padrões do projeto. Use quando criando ou modificando testes, ou quando precisar de templates e padrões de teste.