Gerador de Componentes de UI

Quando Usar

Use esta habilidade quando precisar gerar um novo componente de UI seguindo as convenções de design do StyleSeed.

Quando NÃO Usar

• Para scaffolding de página inteira → use /ss-page
• Para padrões compostos de múltiplos componentes → use /ss-pattern
• Para ajustar um componente existente — apenas edite o arquivo diretamente
• Para projetos que não são do StyleSeed (sem diretório components/ui/ ou sem Tailwind v4)

Gerar um novo componente: $0 Descrição: $ARGUMENTS

Instruções

1. Primeiro, leia o "seed" do sistema de design para contexto:

   • Leia CLAUDE.md para convenções de componentes
   • Leia css/theme.css para tokens de design disponíveis
   • Leia components/ui/button.tsx como um padrão de referência

2. Siga estas convenções rigorosamente:

   • Use a declaração function (não const)
   • Adicione o atributo data-slot="component-name"
   • Use cn() de @/components/ui/utils para toda a mesclagem de className
   • Use React.ComponentProps<> para tipagem de props
   • Sempre suporte a prop className para overrides
   • Use CVA (class-variance-authority) se o componente tiver variantes
   • Use tokens de cores semânticos (bg-card, text-foreground) — nunca hex inline

3. Uso de tokens de design:

   • Cores: text-foreground, bg-card, text-brand, text-muted-foreground, border-border
   • Sombras: shadow-[var(--shadow-card)], shadow-[var(--shadow-elevated)]
   • Raio: rounded-md, rounded-lg, rounded-2xl
   • Espaçamento: múltiplos de 6px (p-1.5, p-3, p-6)
   • Movimento: duration-[var(--duration-fast)], ease-[var(--ease-default)]

4. Regras de tipografia:

   • Display (36-48px): leading-none tracking-[-0.02em]
   • Heading (18-24px): leading-snug tracking-[-0.01em]
   • Body (14-17px): leading-normal (tracking padrão)
   • Caption em maiúsculas (10-13px): tracking-[0.05em]
   • Use o atalho size-* em vez de w-* h-*
   • Use ms-*/me-* em vez de ml-*/mr-* (propriedades lógicas)

5. Requisitos de acessibilidade:

   • Alvo mínimo de toque: 44x44px (min-h-11 min-w-11)
   • Suporte para passagem de atributos aria-*
   • Use focus-visible:ring-2 focus-visible:ring-ring para foco de teclado
   • Respeite prefers-reduced-motion para animações

6. Exporte o componente como um export nomeado (não padrão)

7. Coloque o arquivo no diretório apropriado:

   • Primitivo/reutilizável → src/components/ui/
   • Padrão composto → src/components/patterns/

Exemplo

Solicitação do usuário:

Gerar um novo componente de UI seguindo as convenções de design do StyleSeed.

Limitações

• Use esta habilidade apenas quando a tarefa corresponder claramente à sua origem anterior e ao contexto do projeto local.
• Verifique comandos, código gerado, dependências, credenciais e comportamento de serviços externos antes de aplicar alterações.
• Não trate exemplos como substitutos para testes específicos do ambiente, revisão de segurança ou aprovação do usuário para ações destrutivas ou custosas.