Gerador de Padrões de UI

Quando Usar

Use esta habilidade quando precisar gerar um padrão de UI composto (layout de card, lista, seção de formulário, grid, etc.) usando os primitivos do sistema de design.

Quando NÃO Usar

• Para um único componente primitivo → use /ss-component
• Para uma tela mobile completa → use /ss-page
• Para um fluxo de usuário completo de várias páginas → use /ss-flow
• Para tokens de design e decisões de cores/espaçamento → use /ss-tokens

Tipo de padrão: $0 Descrição: $ARGUMENTS

Tipos de Padrão Disponíveis

Padrões de Layout

• card-section: Card com título + conteúdo dentro de uma seção da página (mx-6)
• grid-2col: Grid de 2 colunas de cards (grid grid-cols-2 gap-4 px-6)
• scroll-horizontal: Lista de cards com rolagem horizontal (flex gap-3 overflow-x-auto scrollbar-hide)
• list-section: Lista vertical de itens dentro de um card
• form-section: Formulário com inputs rotulados em um card
• stat-grid: Grid de componentes StatCard

Padrões de Exibição de Dados

• data-table: Tabela com cabeçalho e linhas
• detail-card: Exibição de pares chave-valor
• chart-card: Wrapper de card para um gráfico Recharts
• ranking-list: Ranking numerado com destaque

Padrões Interativos

• action-sheet: Bottom sheet com botões de ação
• filter-bar: Barra horizontal de filtros/abas
• search-header: Input de busca na área do cabeçalho

Instruções

1. Leia a referência do sistema de design:

   • CLAUDE.md para convenções
   • components/ui/ para primitivos disponíveis
   • components/patterns/ para padrões existentes

2. Componha o padrão a partir de componentes existentes — NÃO recrie primitivos.

3. Siga as regras de layout do sistema de design:

   • Cards: bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]
   • Wrapper de seção: mx-6 para margem horizontal
   • Título da seção: text-foreground font-bold text-[18px] mb-4
   • Espaçamento da lista: space-y-3
   • Espaçamento do grid: gap-4

4. Use tokens semânticos para todas as propriedades visuais.

5. Torne o padrão um componente reutilizável com props para conteúdo dinâmico.

Exemplo

Solicitação do usuário:

Gere um padrão de UI composto (layout de card, lista, seção de formulário, grid, etc.) usando os primitivos do sistema de design.

Limitações

• Use esta habilidade apenas quando a tarefa corresponder claramente à sua origem 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.