SrRusian/atomic-page-builder

Construtor de Páginas Atômicas

Componha páginas a partir de componentes existentes. Esta skill monta; atomic-design cria.

Regras

Faça	Não faça
Importar componentes do sistema de design	Criar novos átomos, moléculas ou organismos
Extrair valores de layout da fonte de design (Figma, especificação, mockup)	Adivinhar grid, gaps ou padding
Usar estilos com escopo que leiam de tokens	Hardcodar valores (#333, 24px)
Corresponder exatamente ao design, incluindo comportamento responsivo	Arredondar valores ou adicionar "melhorias"
Usar apenas a biblioteca de componentes do projeto	Incluir uma biblioteca de UI externa que o projeto não usa

Passagem para atomic-design

Mude para atomic-design quando:

• um átomo, molécula ou organismo necessário não existir;
• um novo token for necessário;
• um valor de token tiver mudado no design e precisar ser atualizado primeiro.

Fluxo de trabalho

1. Obter a especificação de layout. Se existir uma fonte de design (Figma via MCP, uma especificação, uma captura de tela), extraia dela grid, gaps, padding, margens e breakpoints. Se não existir, peça uma ou declare as suposições explicitamente. Anote sobrescritas específicas da página.
2. Inventário. Liste os componentes que o projeto já possui (átomos, moléculas, organismos, templates) com suas props.
3. Análise de lacunas. Mapeie cada região da página para um componente existente. Liste qualquer item não correspondido.
4. Construir ou parar.
   • Tudo existe: componha a página, correspondendo à especificação 1:1.
   • Algo está faltando: pare, relate as lacunas e mude para atomic-design.
5. Verificar. Compare com o design nas larguras de dispositivo móvel, tablet e desktop.

Padrão de página

/** Página Dashboard. Layout de: <link de design ou id do nó> */
import { DashboardLayout } from '@/design-system/templates/DashboardLayout';
import { Card } from '@/design-system/molecules/Card';
import { DataTable } from '@/design-system/organisms/DataTable';
import styles from './Dashboard.module.css';

export const Dashboard = () => (
  <DashboardLayout>
    <div className={styles.statsGrid}>
      <Card title="Receita">$12.450</Card>
    </div>
    <DataTable colunas={colunas} dados={dados} />
  </DashboardLayout>
);

.statsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}
@media (min-width: 768px) {
  .statsGrid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-6); }
}

Adapte os caminhos de importação e a abordagem de estilização ao projeto.

Verificação

Renderize a página em um navegador real (playwright-cli) em 375, 768 e 1440px nos modos claro e escuro, leia o console e compare com a fonte de design. Verifique também ordem de cabeçalhos, pontos de referência, fluxo de teclado e estados de carregamento, vazio e erro.

Funciona com

Necessidade	Skill ou ferramenta
Componente ou token faltando	atomic-design (companheiro obrigatório)
Crítica ou polimento no nível da página	impeccable
Auditoria de acessibilidade	fixing-accessibility, design:accessibility-review
Metadados da página, títulos, Open Graph	fixing-metadata
Passagem para engenharia	design:design-handoff

Regras extras

• Componha nos slots do template; não acesse os internos de um componente nem sobrescreva seus estilos.
• Estilos específicos da página se limitam a layout (grid, gaps, posicionamento); qualquer coisa visual pertence a um componente ou token.
• Nunca copie e cole um componente para ajustá-lo; solicite uma variante através do atomic-design.
• Passe conteúdo real e representativo (nomes longos, listas vazias, erros) ao verificar a página.
• Defina o título do documento e um h1 por página.
• Um arquivo de página contém apenas composição e conexão de dados; nenhuma lógica de UI reutilizável.

Referências

Arquivo	Leia quando
references/design-source-extraction.md	Extrair valores de layout e escrever a especificação da página
references/inventory-and-gaps.md	Inventariar componentes e encontrar lacunas
references/composition-patterns.md	Layouts, slots, estados de dados, ordem de importação

Checklist de saída

• Valores de layout vêm da fonte de design, não de suposições
• Comportamento responsivo corresponde ao design
• Todas as importações vêm do sistema de design do projeto
• Zero valores hardcodados
• Zero novos componentes
• Link do design documentado no arquivo da página