---
name: design-to-tasks
description: Quebrar brief, IA e handoff visual em tasks SDD verticais, pequenas e verificáveis. Use em Tasks ou Refinement quando uma feature de UI/UX/CLI/TUI precisa virar backlog, critérios Gherkin, ordem de implementação, arquivos prováveis e validação visual.
---

# Design To Tasks SDD

## Objetivo

Converter design em fatias verticais de entrega. Cada task deve produzir algo que possa ser visto, testado e revisado isoladamente.

## Entradas

- PRD e critérios de aceite.
- Brief ou handoff de `experience-design`.
- IA de `information-architecture`, quando existir.
- Diagramas de `artifact-diagrams`, incluindo Mermaid e Excalidraw de planejamento quando existirem.
- Tokens/lacunas de `design-tokens`.
- Componentes, rotas, styles e testes existentes.

## Procedimento

1. Inventarie componentes: reutilizar, modificar ou criar.
2. Inventarie estados: default, loading, vazio, erro, sucesso, disabled, hover/focus, permissões, dados longos.
3. Use diagramas Mermaid/Excalidraw para identificar dependências, bifurcações, estados e fluxos paralelos.
4. Ordene por dependência, risco e prioridade visual.
5. Escreva tasks como fatias verticais: estrutura + estilo + interação + validação.
6. Inclua critério Gherkin ou evidência visual esperada.
7. Gere um prompt agent standalone para cada task, suficiente para qualquer LLM executar a entrega sem depender da conversa anterior.

## Template

```md
## Tasks de design

### Foundation
- [ ] <task>: <resultado verificável>
  - Reusa:
  - Modifica/cria:
  - Evidência:

### Core UI
- [ ] <task>
  - Estados:
  - Critério:

### Interações e estados
- [ ] <task>
  - Dado:
  - Quando:
  - Então:

### Responsivo e acessibilidade
- [ ] <task>
  - Breakpoints:
  - A11y:

### Review
- [ ] Rodar `visual-review` com screenshots/evidência dos estados críticos.
```

## Prompt agent por task

Use este bloco dentro da task ou em `## Prompts Agent`:

```md
### T-XX — <nome da task>

#### Prompt Agent
Você é um agente de código executando uma task SDD isolada no workspace.

Origem:
- PRD: `docs/<slug>/02-prd.md`
- Tech Spec: `docs/<slug>/03-techspec.md`
- Tasks: `docs/<slug>/04-tasks.md`
- Diagramas relevantes: <Mermaid no artefato | Excalidraw em assets | não aplicável>

Objetivo:
- <resultado verificável>

Escopo:
- Incluir: <mudanças permitidas>
- Não incluir: <fora do escopo>

Arquivos prováveis:
- <path>: <ação esperada>

Regras e constraints:
- Preserve alterações locais existentes.
- Reuse padrões/componentes reais do projeto.
- Não invente contrato, rota, token ou estado sem confirmar.

Validação:
- <comando/check esperado ou instrução para descobrir o comando no repo>

Saída final:
- Resumo, arquivos alterados, comandos executados, evidências, decisões, riscos e pendências.
```

## Regras

- Não crie task só para "montar estrutura de arquivos".
- Não separe HTML, CSS e JS em tasks artificiais se a entrega real é uma interface.
- Não crie task para componente que já existe e será usado sem alteração.
- Se a primeira task não valida a direção visual principal, reordene.
- Se houver Excalidraw de planejamento, cada task relevante deve apontar para o trecho ou fluxo que implementa.
