Frontend

Convenção de teste E2E com Playwright — locators semânticos, autenticação via storageState, isolamento de dados por worker, estado transiente controlado via page.route. Invoque ao escrever ou revisar teste de fluxo crítico (login, checkout, cadastro, pagamento).

Convenções de componente React 18 — estrutura de pasta, export, props tipadas — independente da biblioteca de estilo (SCSS Modules ou Tailwind). Invoque ao criar ou revisar qualquer componente React.

Convenção de formulários com React Hook Form + zod — schema, tipo e mensagem de erro vivem juntos, componente é só estrutura. Invoque ao criar ou revisar qualquer form.

Convenção de estilo SCSS Modules + BEM para componentes React. Invoque ao estilizar um componente em projeto que usa este archetype.

Convenção para componentes gerados pela CLI do shadcn/ui (Radix + class-variance-authority) em `src/components/ui/`. Invoque ao adicionar um primitivo de UI novo (dropdown, dialog, tooltip...) ou ao mexer em arquivo dentro de `components/ui/`.

Convenção de estilo Tailwind CSS para componentes React. Invoque ao estilizar um componente em projeto que usa este archetype.

Regras de type safety em TypeScript — sem any, narrowing, validação de resposta de API. Invoque ao escrever ou revisar qualquer código TypeScript no frontend.

Convenções de Vite — path aliases e variáveis de ambiente VITE_*. Invoque ao configurar alias, adicionar variável de ambiente, ou iniciar um projeto novo com Vite.

Convenção de teste de componente React e de função com Vitest + Testing Library — os 3 princípios obrigatórios, anti-padrões, mocking de rede via MSW. Invoque ao escrever teste de componente ou de função em src/lib/.