# Prompt para IA - PharmData Design System

> Copie e cole este prompt ao iniciar uma nova sessão com IA para trabalhar no Design System.

---

## PROMPT

```
Você está trabalhando no PharmData Design System. SIGA ESTAS REGRAS OBRIGATÓRIAS:

## CORES - NUNCA HARDCODE

❌ PROIBIDO:
- background: white, #fff, #ffffff
- color: #333, #1f2937
- Classes: bg-white, bg-gray-*, text-gray-*, border-gray-*

✅ OBRIGATÓRIO:
- background: var(--cloud), var(--arctic-mist)
- color: var(--graphite-depth), var(--soft-steel)
- Classes: bg-cloud, bg-arctic-mist, text-graphite-depth, text-soft-steel

## MAPEAMENTO DE CORES

| Propósito | CSS Variable | Tailwind Class |
|-----------|-------------|----------------|
| Background principal | var(--cloud) | bg-cloud |
| Background cards | var(--arctic-mist) | bg-arctic-mist |
| Texto principal | var(--graphite-depth) | text-graphite-depth |
| Texto secundário | var(--soft-steel) | text-soft-steel |
| Bordas | var(--soft-arctic) | border-soft-arctic |
| Accent/Links | var(--teal-intense) | text-teal-intense |

## DARK MODE

O dark mode é AUTOMÁTICO quando você usa variáveis CSS.
NUNCA crie overrides manuais como:
```css
html.dark-mode .componente { background: #161b22 !important; }
```

## ANTES DE CADA MODIFICAÇÃO

1. Verifique se há bg-white ou background: white - substitua
2. Verifique se há text-gray-* ou color: #xxx - substitua
3. Teste em light E dark mode
4. Execute: ./scripts/validate-colors.sh

## ARQUIVOS IMPORTANTES

- tokens/colors.css - FONTE ÚNICA de cores
- showcase/shared/tailwind-config.js - Config Tailwind
- docs/ARCHITECTURE_ANALYSIS.md - Documentação completa
```

---

## Versão Curta (Para Contexto Limitado)

```
REGRAS DO DESIGN SYSTEM:
1. NUNCA use bg-white, text-gray-*, background: white, color: #xxx
2. SEMPRE use bg-cloud, text-graphite-depth, var(--cloud), var(--soft-steel)
3. Dark mode é automático via variáveis - não crie overrides !important
4. Valide com ./scripts/validate-colors.sh antes de commitar
```

---

## Versão para Commit Messages

```
Ao criar commits neste projeto, verifique:
- Nenhum bg-white ou bg-gray-* em HTML
- Nenhum background: white em CSS
- Todas as cores usam var(--nome) ou classes semânticas (bg-cloud, text-graphite)
```

---

## Prompt Completo v3.1 (Com Novos Recursos)

```
Você está trabalhando no PharmData Design System v3.1. SIGA ESTAS REGRAS:

## CORES - NUNCA HARDCODE
- PROIBIDO: background: white, #fff, color: #333, bg-white, text-gray-*
- CORRETO: var(--cloud), var(--graphite-depth), bg-cloud, text-soft-steel

## ÍCONES - APENAS FONT AWESOME
- NUNCA use emojis no código
- Drops têm ícones automáticos via Font Awesome
- Use .drop-no-icon para remover ícone

## DROPS COM ÍCONES
Os drops farmacêuticos já possuem ícones:
- .drop-dec (fa-pills), .drop-sub (fa-dna), .drop-lab (fa-industry)
- .drop-cnc (fa-flask), .drop-fofa (fa-syringe), .drop-emb (fa-boxes-stacked)

## MODO COMPACTO
- Use .density-compact ou data-density="compact" para interfaces densas
- Use .density-comfortable para touch/acessibilidade

## ATALHOS DE TECLADO
- Use <kbd>A</kbd> para estilizar teclas
- Use .has-shortcut com data-shortcut="X" para indicadores
- Workflow: A=aprovar, R=rejeitar, N/→=próximo, P/←=anterior

## BREADCRUMB FARMACÊUTICO
Use .breadcrumb-pharma com data-level para hierarquia:
- composicoes, formulacoes, embalagens, apresentacoes
- Cada nível tem cor automática do sistema de drops

## SKELETON LOADERS
Use skeletons para loading states:
- .skeleton-line, .skeleton-circle, .skeleton-drop
- .skeleton-substance-card, .skeleton-enrichment-card

## DARK MODE
É AUTOMÁTICO via variáveis CSS. NUNCA crie overrides !important.

## ARQUIVOS NOVOS (v3.1)
- tokens/density.css - Modos compact/comfortable
- tokens/keyboard-shortcuts.css - Estilos para workflow
- tokens/skeleton.css - Loading states
```

---

## Referência Rápida de Classes

```
BACKGROUNDS:
bg-cloud, bg-arctic-mist, bg-soft-arctic

TEXTO:
text-graphite-depth, text-soft-steel

ACCENT:
bg-teal-intense (cor ajustada para #1a8b7d - melhor contraste)

DROPS:
.drop .drop-[tipo] .drop-pill .drop-sm
Tipos: dec, sub, lab, cnc, gts, fofa, fap, via, emb, cap, chg, unk

DENSIDADE:
.density-compact, .density-comfortable, [data-density="compact"]

BREADCRUMB:
.breadcrumb-pharma com data-level="composicoes|formulacoes|embalagens|apresentacoes"

SKELETON:
.skeleton-line, .skeleton-drop, .skeleton-substance-card
```