Scaffold de Página Mobile

Quando Usar

Use esta habilidade quando precisar criar uma nova página/tela mobile usando os padrões de layout do StyleSeed.

Quando NÃO Usar

• Para um único padrão composto dentro de uma página existente → use /ss-pattern
• Para telas apenas para desktop — esta habilidade é mobile-first
• Para estrutura de navegação de várias páginas → use /ss-flow primeiro
• Para ajustar uma página existente — edite o arquivo diretamente

Criar uma nova página: $0 Descrição: $ARGUMENTS

Instruções

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

   • CLAUDE.md para estrutura de arquivos e convenções
   • components/patterns/page-shell.tsx para layout de página
   • components/patterns/top-bar.tsx para o padrão de cabeçalho
   • components/patterns/bottom-nav.tsx para navegação

2. Modelo de estrutura da página:

import { PageShell, PageContent } from "@/components/patterns/page-shell"
import { TopBar, TopBarAction } from "@/components/patterns/top-bar"
import { BottomNav } from "@/components/patterns/bottom-nav"

export default function PageName() {
  return (
    <PageShell>
      <TopBar
        logo={/* logo or page title */}
        subtitle={/* optional subtitle */}
        actions={/* optional action buttons */}
      />
      <PageContent>
        {/* Page sections with space-y-6 */}
      </PageContent>
      <BottomNav items={[/* nav items */]} activeIndex={0} />
    </PageShell>
  )
}

3. Regras de layout:

   • Container: max-w-[430px] (viewport mobile)
   • Fundo da página: bg-background
   • Preenchimento horizontal da seção: px-6
   • Espaçamento vertical da seção: space-y-6
   • Preenchimento inferior para navegação: pb-24
   • Cards: bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]

4. Use tokens semânticos para todas as cores — nunca codifique valores hex diretamente.

5. Componha a página a partir de componentes existentes (ui/ e patterns/) sempre que possível.

6. Área segura: inclua preenchimento env(safe-area-inset-*) para dispositivos modernos.

7. Verificação pós-geração (OBRIGATÓRIO): Após criar a página, verifique contra as Regras de Ouro:

   • Todo o conteúdo está dentro de cards (sem conteúdo de fundo "nu")
   • Apenas a cor --brand usada para acentos (sem outras cores de acento)
   • Nenhum valor hex codificado diretamente (todos tokens semânticos)
   • Tipos de seção alternados (nenhum tipo idêntico em sequência)
   • Números têm proporção de 2:1 com unidades
   • Espaçamento usa múltiplos de 6px (p-1.5, p-3, p-6)
   • mx-6 para cards únicos, px-6 para grids/carrosséis
   • Alvos de toque ≥ 44px em todos os elementos interativos Se alguma violação for encontrada, corrija-a antes de apresentar a página ao usuário.

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.