Prompt Templates

7 templates de prompt prontos para uso em sessões Claude. Cole o prompt relevante no início da sessão para garantir aderência ao DS. Ver também: docs/prompts/ no repositório.

1. Feature com DS

Use ao iniciar construção de qualquer tela ou feature para um produto.

Você está construindo uma tela para o produto [PRODUTO] (tema: [SLUG]).

REGRAS OBRIGATÓRIAS — Design System Rank v1.0:
1. Aplicar: <html data-ds-theme="[slug]">
2. CSS: <link rel="stylesheet" href="/dist/ds.css">
3. Classes: SOMENTE .ds-* (nunca criar classes custom sem prefixo)
4. Valores: SOMENTE var(--ds-*) — zero hex, zero px fora da escala
5. Gráficos: SOMENTE DSCharts.* — nunca new Chart() direto
6. Verificar tokens em ds/tokens/*.css antes de usar qualquer --ds-*

Antes de escrever qualquer CSS, fazer:
grep -r "^  --ds-" ds/tokens/ ds/themes/base.css

Se precisar de valor fora do DS, marcar com:
/* DS-EXCEPTION: razão */

2. Auditoria DS

Use para auditar código existente e identificar violações do DS.

Audite o código a seguir quanto ao Design System Rank v1.0.

Verificar:
1. DS001/DS002: Cores hex/rgb() hardcoded? → substituir por var(--ds-color-*)
2. DS010: padding/margin com px fora da escala? → var(--ds-space-*)
3. DS020: font-size manual? → var(--ds-font-size-*)
4. DS050: new Chart() direto? → DSCharts.*
5. DS060: style="color:..." inline? → mover para classe ds- ou var()
6. Tema: data-ds-theme presente no <html>? Slug correto?
7. Classes: prefixo .ds-* em todos os componentes?

Para cada violação:
- Linha e código atual
- Código correto com token DS
- Código da regra (DS001, DS010, etc.)

Ao final: APROVADO ou REPROVADO com contagem por severidade.

3. Chart com DS

Use ao adicionar qualquer gráfico a uma tela.

Adicione um gráfico de [tipo: line/bar/donut/pie/sparkline] a esta tela.

OBRIGATÓRIO — usar DSCharts wrapper:

// Linha
DSCharts.line('[canvas-id]', {
  labels: [...],
  datasets: [{ label: '...', data: [...] }],
  area: false // true para área preenchida
});

// Barra
DSCharts.bar('[canvas-id]', {
  labels: [...],
  datasets: [{ label: '...', data: [...] }]
});

// Donut
DSCharts.donut('[canvas-id]', {
  labels: [...],
  data: [...]
});

Canvas HTML:
<div class="ds-chart-card">
  <div class="ds-chart-card__header">
    <h3 class="ds-chart-card__title">[título]</h3>
  </div>
  <div class="ds-chart-canvas">
    <canvas id="[canvas-id]"></canvas>
  </div>
</div>

NUNCA usar new Chart() diretamente.
NUNCA usar echarts, d3, ou outras libs.
Cores são aplicadas automaticamente pelo tema ativo.

4. Novo Componente DS

Use ao criar um componente novo para o DS (não para produtos).

Crie um novo componente CSS para o Design System Rank.

Nome: [nome-do-componente]
Categoria: [base|feedback|form|navigation|data|analytics|product]
Arquivo: ds/components/[categoria]/[nome].css

REGRAS OBRIGATÓRIAS:
1. Zero valores hardcoded — APENAS var(--ds-*)
2. BEM: .ds-[componente]__[elemento]--[modificador]
3. Variantes de tamanho: --sm, --md, --lg
4. Variantes de estado: --active, --disabled, --error, --success
5. Verificar tokens ANTES de escrever:
   grep -r "^  --ds-" ds/tokens/ ds/themes/base.css

Após criar o arquivo CSS:
1. Adicionar @import no ds/components/[categoria]/index.css
2. Fazer rebuild: npm run build
3. Verificar que dist/ds.css inclui o novo componente

5. Migração para DS

Use ao migrar uma tela ou produto existente para o DS.

Migre esta tela para o Design System Rank v1.0.

Produto: [nome]
Tema: [slug]

Passos:
1. Adicionar <html data-ds-theme="[slug]">
2. Substituir CSS customizado por classes .ds-* equivalentes
3. Substituir valores hardcoded por var(--ds-*)
4. Substituir gráficos por DSCharts.*
5. Preservar lógica de negócio — apenas visual muda

Para cada substituição:
- Antes: código original
- Depois: código DS

Manter DS-EXCEPTION para:
- Parceiros com cores de marca obrigatórias
- Casos sem equivalente no DS

Ao final, rodar auditoria:
python scripts/ds_audit.py --path . --format terminal

6. Aplicar DS em Produto

Use ao iniciar a adoção do DS em um produto inteiro.

Aplique o Design System Rank v1.0 no produto [PRODUTO].

Tema: [slug] (modo: [light|dark])
Arquivo base: [caminho do HTML base / template Jinja2]

Checklist de adoção:
[ ] Copiar dist/ds.css para vendor/design-system-rank/v1.0.0/
[ ] Adicionar <link rel="stylesheet"> no template base
[ ] Aplicar data-ds-theme="[slug]" no <html>
[ ] Substituir layout por .ds-app-shell + sidebar + topbar
[ ] Migrar componentes de maior visibilidade primeiro (header, nav, cards KPI)
[ ] Migrar formulários
[ ] Migrar tabelas de dados
[ ] Migrar gráficos para DSCharts.*
[ ] Rodar ds_audit.py e resolver erros críticos
[ ] Testar dark mode (trocar tema no switcher)

Prioridade: componentes acima da dobra primeiro.

7. Auditoria Pós-Migração

Use após migrar um produto para validar aderência completa.

Execute auditoria pós-migração do Design System Rank no produto [PRODUTO].

1. Rodar auditor automático:
   python scripts/ds_audit.py --path [path] --format html --output audit-results/[produto].html

2. Verificar manualmente:
   - Todas as telas têm data-ds-theme correto?
   - AppShell renderiza corretamente? (sidebar + topbar + content)
   - Gráficos respondem à troca de tema?
   - Estados vazios (EmptyState) presentes?
   - Estados de loading/error cobertos?

3. Testar troca de tema:
   window.DSThemes.set('base'); // light
   window.DSThemes.set('[slug]'); // produto

4. Verificar responsividade em mobile (sidebar colapsada)

5. Relatório final:
   - Total de violações: X (Y error, Z warning)
   - Cobertura de componentes DS: X%
   - Componentes custom sem DS: [lista]
   - Aprovado para produção: SIM/NÃO
Copiado!