---
name: new-component
description: Cria um novo componente React seguindo os padrões do projeto
argument-hint: "[NomeDoComponente]"
allowed-tools: Read, Write, Edit, Glob, Grep
---

# Criar Componente: $ARGUMENTS

## Passos

1. **Ler componentes existentes como referência:**
   - `app/voluntarios/_components/FormularioCadastro.tsx` — padrão de form
   - `app/voluntarios/_components/GradeHorarios.tsx` — padrão de grid interativo
   - `app/dashboard/_components/EstatisticasCard.tsx` — padrão de card
   - `app/dashboard/_components/ListaVoluntarios.tsx` — padrão de lista

2. **Identificar a página alvo e criar arquivo:**
   - Nome do arquivo em PascalCase: `$ARGUMENTS.tsx`
   - Colocar em `app/[pagina]/_components/`

3. **Estrutura do componente:**
   - `"use client"` no topo (se interativo)
   - Interface de props: `interface ${ARGUMENTS}Props { ... }`
   - Export default da função componente
   - useState para estado local
   - Ícones de `lucide-react`
   - Tailwind para styling

4. **Integração:**
   - Importar server actions de `../_actions/` se necessário
   - Implementar loading states nos botões e forms
   - Feedback visual para erros e sucesso

## Convenções
- Nomes em PascalCase português (ex: `CartaoEstatistica`)
- Props interface com sufixo `Props`
- Sem estado global — useState local
- Cores e layout conforme padrões em `.claude/rules/ui-patterns.md`