@maestro-ai/mcp-server 5.7.0 → 6.1.0

package/dist/content/skills/specialist-design/resources/checklists/gate-checklist.md

@@ -0,0 +1,45 @@
+# Gate Checklist — Design
+
+> **Score mínimo para aprovação:** 70/100  
+> **Itens críticos:** Devem TODOS estar ✅ para aprovar
+
+## Itens Críticos
+
+| # | Item | Peso | Critério Pass |
+|---|------|------|---------------|
+| 1 | **Jornada do usuário principal mapeada** | 15 | Etapas, ações, telas e emoções do fluxo principal completo |
+| 2 | **Wireframes cobrem telas do MVP** | 20 | Cada tela com layout, componentes e interações descritas |
+| 3 | **Design system definido** | 15 | Cores (primary, secondary, error), tipografia (3+ tamanhos), componentes base (5+) |
+
+## Itens Importantes
+
+| # | Item | Peso | Critério Pass |
+|---|------|------|---------------|
+| 4 | **Navegação e mapa de telas** | 10 | Hierarquia de URLs/telas, padrão de navegação por dispositivo |
+| 5 | **Estados de UI documentados** | 10 | Loading, empty, error e success para fluxo principal |
+| 6 | **Acessibilidade WCAG 2.1 AA** | 10 | Checklist com contraste, labels, keyboard nav, focus visible |
+| 7 | **Responsividade mobile-first** | 10 | Breakpoints definidos, adaptação por dispositivo |
+
+## Itens Desejáveis
+
+| # | Item | Peso | Critério Pass |
+|---|------|------|---------------|
+| 8 | **Personas com cenários de UI** | 5 | Cada persona com cenário específico de interação |
+| 9 | **Referências visuais citadas** | 3 | Apps/sites de referência mencionados |
+| 10 | **Tom visual definido** | 2 | Personalidade e sensação do produto |
+
+## Scoring
+
+- **≥ 70:** Aprovado automaticamente
+- **50-69:** Aprovação manual — wireframes incompletos ou design system parcial
+- **< 50:** Bloqueado — wireframes ausentes ou sem design system
+
+## Instruções de Correção
+
+| Item Faltando | Como Corrigir |
+|---------------|---------------|
+| Jornada incompleta | Mapear etapa a etapa: entrada → orientação → ação → feedback → retorno |
+| Wireframes faltando | Descrever cada tela: URL, layout ASCII, componentes, interações |
+| Sem design system | Definir: 6+ cores com tokens, 4+ tamanhos de tipografia, 5+ componentes base |
+| Sem estados de UI | Para cada fluxo: loading (skeleton), empty (ilustração + CTA), error (retry) |
+| Sem acessibilidade | Aplicar checklist WCAG: contraste, labels, keyboard, focus, alt text |

package/dist/content/skills/specialist-design/resources/examples/example-design.md

@@ -0,0 +1,294 @@
+# Design Doc — TaskFlow
+
+> **Fase:** 2 · Design  
+> **Data:** 2026-03-01  
+> **Status:** Aprovado  
+> **Base:** Discovery (`docs/01-discovery/discovery.md`)
+
+---
+
+## 1. Visão do Sistema
+
+### 1.1 Propósito
+
+TaskFlow é uma plataforma web de gestão de tarefas para PMEs brasileiras com equipes de 5-20 pessoas. Centraliza projetos, tarefas e comunicação num único lugar com foco em simplicidade e produtividade.
+
+### 1.2 Tom Visual
+
+| Aspecto | Definição |
+|---------|-----------|
+| **Personalidade** | Profissional mas acessível — não corporativo, não infantil |
+| **Sensação** | Limpo, organizado, produtivo — como uma mesa arrumada |
+| **Referências** | Linear (foco e simplicidade), Notion (flexibilidade), Todoist (clareza) |
+
+---
+
+## 2. Personas e Cenários
+
+### Persona 1: Marina — Gerente de Projetos
+
+**Cenário principal:** Marina abre o TaskFlow no notebook às 8h para checar status dos 4 projetos. Precisa ver quais tarefas estão atrasadas e quem está bloqueado — em 30 segundos, sem clicar em cada projeto.
+
+**Necessidades de UI:**
+- Dashboard com resumo de TODOS os projetos visível sem scroll
+- Indicadores visuais de atraso (vermelho) e risco (amarelo)
+- Filtro rápido por "minhas tarefas" vs "do time"
+
+### Persona 2: Carlos — Tech Lead
+
+**Cenário principal:** Carlos abre o TaskFlow no monitor durante a daily standup. Compartilha tela mostrando o kanban do sprint atual. Precisa mover tarefas rapidamente e ver quem está com carga alta.
+
+**Necessidades de UI:**
+- Kanban com drag-and-drop fluido e responsivo
+- Visualização de carga por membro (avatar + contagem)
+- Quick-add de tarefa sem sair do board
+
+---
+
+## 3. Mapa de Jornada do Usuário
+
+### Jornada: Criar e acompanhar tarefa (fluxo principal)
+
+| Etapa | Ação do Usuário | Tela | Emoção | Oportunidade |
+|-------|-----------------|------|--------|-------------|
+| 1. Login | Acessa app, faz login com Google | Login page | Neutro | Login em 1 clique (OAuth) |
+| 2. Dashboard | Vê resumo dos projetos | Dashboard | Orientado | Highlight de tarefas atrasadas |
+| 3. Seleciona projeto | Clica no projeto ativo | Kanban board | Focado | Último projeto aberto por padrão |
+| 4. Cria tarefa | Clica "+" ou usa quick-add | Modal/Inline form | Produtivo | Templates de tarefa por tipo |
+| 5. Detalha | Adiciona descrição, responsável, prazo | Task detail drawer | Confiante | Sugestões de responsável baseado em carga |
+| 6. Move tarefa | Drag-and-drop para "Doing" | Kanban board | Satisfeito | Animação suave de transição |
+| 7. Verifica progresso | Volta ao dashboard | Dashboard atualizado | Confiante | Gráfico de burndown atualizado |
+
+---
+
+## 4. Arquitetura de Informação
+
+### 4.1 Mapa de Navegação
+
+```
+[TaskFlow]
+├── / (Landing page - marketing)
+├── /login
+├── /register
+├── /app (Área autenticada)
+│   ├── /dashboard (Home — resumo de todos os projetos)
+│   ├── /projects
+│   │   ├── /projects (Lista de projetos)
+│   │   ├── /projects/new (Criar projeto)
+│   │   └── /projects/[id] (Kanban board do projeto)
+│   │       └── /projects/[id]/tasks/[taskId] (Detalhe - drawer)
+│   ├── /my-tasks (Minhas tarefas - cross-project)
+│   ├── /notifications
+│   ├── /settings
+│   │   ├── /settings/profile
+│   │   └── /settings/team
+│   └── /invite/[token] (Aceitar convite)
+└── /404
+```
+
+### 4.2 Padrão de Navegação
+
+| Dispositivo | Padrão | Componente |
+|-------------|--------|-----------|
+| **Desktop** | Sidebar fixa (240px) + Header com search | Sidebar: logo, nav items, user menu |
+| **Mobile** | Bottom tabs (4 itens) + Hamburger para secundários | Dashboard, Projetos, Minhas Tarefas, Mais |
+| **Tablet** | Sidebar colapsável (60px ícones) + Header | Toggle com botão hamburger |
+
+---
+
+## 5. Design System
+
+### 5.1 Cores
+
+| Token | Valor | Uso |
+|-------|-------|-----|
+| `--primary` | #2563EB (blue-600) | Botões primários, links, seleção ativa |
+| `--primary-hover` | #1D4ED8 (blue-700) | Hover em botões primários |
+| `--secondary` | #64748B (slate-500) | Textos secundários, ícones inativos |
+| `--background` | #FFFFFF | Fundo principal |
+| `--surface` | #F8FAFC (slate-50) | Cards, sidebar, painéis |
+| `--border` | #E2E8F0 (slate-200) | Bordas de cards e inputs |
+| `--error` | #EF4444 (red-500) | Erros, tarefas atrasadas, ações destrutivas |
+| `--success` | #22C55E (green-500) | Tarefas concluídas, status ok |
+| `--warning` | #F59E0B (amber-500) | Prazos próximos, alertas |
+| `--info` | #3B82F6 (blue-500) | Informações, dicas |
+
+### 5.2 Tipografia
+
+| Elemento | Fonte | Tamanho | Peso |
+|----------|-------|---------|------|
+| **H1** | Inter | 28px / 1.75rem | 700 Bold |
+| **H2** | Inter | 22px / 1.375rem | 600 Semibold |
+| **H3** | Inter | 18px / 1.125rem | 600 Semibold |
+| **Body** | Inter | 15px / 0.9375rem | 400 Regular |
+| **Small** | Inter | 13px / 0.8125rem | 400 Regular |
+| **Code** | JetBrains Mono | 13px | 400 Regular |
+
+### 5.3 Componentes Base
+
+| Componente | Variantes | Tamanhos |
+|-----------|-----------|----------|
+| **Button** | Primary, Secondary, Ghost, Destructive, Icon | sm (32px), md (36px), lg (40px) |
+| **Input** | Text, Password, Search, Select, Textarea | sm, md |
+| **Card** | Default, Elevated, Interactive (hover shadow) | — |
+| **Badge** | Default (gray), Priority (P1-red, P2-orange, P3-blue, P4-gray) | sm, md |
+| **Avatar** | Image, Initials (colorido por nome) | xs (24), sm (32), md (40), lg (48) |
+| **Modal** | Default, Confirm (danger), Form | sm (400px), md (560px), lg (720px) |
+| **Toast** | Success, Error, Warning, Info | auto-dismiss 5s |
+| **Drawer** | Right-side, 480px width | — |
+| **KanbanColumn** | Com header, contagem, add button | fluid width |
+| **TaskCard** | Com título, badge de prioridade, avatar, prazo | — |
+
+---
+
+## 6. Wireframes
+
+### Tela 1: Dashboard
+
+**URL:** `/app/dashboard`  
+**Persona:** Marina — verificação rápida de status  
+**Objetivo:** Ver resumo de todos os projetos em 30 segundos
+
+**Layout:**
+```
+┌─────────────────────────────────────────────────────────┐
+│ [Sidebar 240px]  │  [Header: "Dashboard" | Search | 🔔 Bell | Avatar] │
+│                  │                                              │
+│ 🏠 Dashboard     │  ┌─────────────────────────────────────────┐ │
+│ 📁 Projetos      │  │ Resumo: 12 tarefas pendentes | 3 atrasadas │
+│ ✅ Minhas Tarefas│  └─────────────────────────────────────────┘ │
+│ ⚙️ Config        │                                              │
+│                  │  ┌──────────┐ ┌──────────┐ ┌──────────┐    │
+│ ──────────       │  │ Projeto A│ │ Projeto B│ │ Projeto C│    │
+│ Projetos:        │  │ 5 doing  │ │ 2 doing  │ │ 1 doing  │    │
+│  • Projeto A     │  │ 1 atrasada│ │ 0 atrasada│ │ 2 atrasada│  │
+│  • Projeto B     │  │ ████░ 60%│ │ ██░░░ 40%│ │ ███░░ 55%│   │
+│  • Projeto C     │  └──────────┘ └──────────┘ └──────────┘    │
+│                  │                                              │
+│                  │  ┌─ Tarefas Atrasadas ──────────────────────┐│
+│                  │  │ 🔴 Design da landing page - Projeto A     ││
+│                  │  │ 🔴 API de autenticação - Projeto C        ││
+│                  │  │ 🔴 Testes E2E do checkout - Projeto C     ││
+│                  │  └──────────────────────────────────────────┘│
+└─────────────────────────────────────────────────────────────────┘
+```
+
+**Componentes:** SummaryBar, ProjectCard (grid 3 cols), OverdueTaskList  
+**Interações:** Click em ProjectCard → navega para kanban. Click em tarefa atrasada → abre drawer.
+
+### Tela 2: Kanban Board
+
+**URL:** `/app/projects/[id]`  
+**Persona:** Carlos — gestão visual do sprint  
+**Objetivo:** Ver e mover tarefas entre status com drag-and-drop
+
+**Layout:**
+```
+┌──────────────────────────────────────────────────────────────┐
+│ [Sidebar] │ [Header: "Projeto A" | Filtros | + Nova Tarefa]  │
+│           │                                                   │
+│           │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐│
+│           │ │ To Do(5)│ │Doing(3) │ │Review(2)│ │ Done(8) ││
+│           │ │         │ │         │ │         │ │         ││
+│           │ │┌───────┐│ │┌───────┐│ │┌───────┐│ │┌───────┐││
+│           │ ││🔴 P1  ││ ││🟡 P2  ││ ││🔵 P3  ││ ││✅     │││
+│           │ ││Design ││ ││API    ││ ││Tests  ││ ││Login  │││
+│           │ ││📅 Mar5││ ││👤Carlos││ ││👤Ana  ││ ││👤João │││
+│           │ │└───────┘│ │└───────┘│ │└───────┘│ │└───────┘││
+│           │ │┌───────┐│ │┌───────┐│ │         │ │         ││
+│           │ ││🟡 P2  ││ ││🔵 P3  ││ │         │ │         ││
+│           │ ││Backend││ ││Docs   ││ │         │ │         ││
+│           │ │└───────┘│ │└───────┘│ │         │ │         ││
+│           │ └─────────┘ └─────────┘ └─────────┘ └─────────┘│
+└──────────────────────────────────────────────────────────────┘
+```
+
+**Componentes:** KanbanColumn (flex horizontal, scroll horizontal em mobile), TaskCard (draggable), FilterBar  
+**Interações:** Drag-and-drop entre colunas. Click em TaskCard → abre TaskDetailDrawer à direita. Quick-add via input no topo de cada coluna.
+
+### Tela 3: Task Detail (Drawer)
+
+**URL:** `/app/projects/[id]/tasks/[taskId]` (drawer overlay)  
+**Objetivo:** Ver e editar detalhes completos de uma tarefa
+
+**Layout:**
+```
+┌──────────────────────────────────────────┐
+│ [Drawer 480px - right side]               │
+│                                          │
+│ ╳ Fechar                                 │
+│                                          │
+│ # Design da Landing Page                 │
+│ 🔴 P1 - Alta  │  📁 Projeto A           │
+│                                          │
+│ ──────────────────────────────           │
+│ **Responsável:** 👤 Marina               │
+│ **Prazo:** 📅 5 Mar 2026 (atrasado!)     │
+│ **Status:** To Do → [dropdown]           │
+│ **Labels:** design, frontend             │
+│ ──────────────────────────────           │
+│                                          │
+│ ## Descrição                             │
+│ Criar landing page responsiva seguindo   │
+│ o design system definido...              │
+│                                          │
+│ ## Subtarefas (2/4)                      │
+│ ✅ Definir copy principal                │
+│ ✅ Escolher imagens                      │
+│ ☐ Implementar mobile                     │
+│ ☐ Implementar desktop                    │
+│                                          │
+│ ## Comentários                           │
+│ 👤 Carlos: "Priorizar mobile-first"      │
+│ 📅 1 Mar 2026                            │
+│                                          │
+│ [Input: Adicionar comentário...]         │
+└──────────────────────────────────────────┘
+```
+
+---
+
+## 7. Estados de UI
+
+### Fluxo: Dashboard
+
+| Estado | Visual | Comportamento |
+|--------|--------|--------------|
+| **Loading** | 3 skeleton cards em grid + skeleton da SummaryBar | Shimmer animation, 1-2s |
+| **Empty** | Ilustração de foguete + "Crie seu primeiro projeto!" + botão CTA azul | Redireciona para /projects/new |
+| **Error** | Banner vermelho no topo "Erro ao carregar projetos" + botão "Tentar novamente" | Retry com exponential backoff |
+| **Success** | Grid de ProjectCards + SummaryBar + OverdueTaskList | Dados reais, atualiza a cada 30s |
+
+### Fluxo: Kanban Board
+
+| Estado | Visual | Comportamento |
+|--------|--------|--------------|
+| **Loading** | 4 colunas skeleton com 3 task cards skeleton cada | Shimmer |
+| **Empty** | Colunas vazias + mensagem central "Nenhuma tarefa ainda" + botão "Criar tarefa" | Template de tarefa pré-preenchido |
+| **Error** | Banner + "Erro ao carregar tarefas" + Retry | Fallback: mostrar cache local |
+| **Success** | Colunas com TaskCards, drag-and-drop ativo | Optimistic updates no drag |
+
+---
+
+## 8. Acessibilidade
+
+### 8.1 Checklist WCAG 2.1 AA
+
+- [x] Contraste ≥ 4.5:1 para texto (blue-600 em white = 4.7:1 ✅)
+- [x] Todos os inputs com label visível (não apenas placeholder)
+- [x] Navegação completa via Tab (sidebar → header → content → drawer)
+- [x] Focus ring visível (2px blue-500 com offset)
+- [x] Imagens de avatar com alt="Avatar de [nome]"
+- [x] Headings em ordem correta (H1 por page, H2 por seção)
+- [x] Botões com ícone têm aria-label (ex: aria-label="Fechar drawer")
+- [x] Skip-to-content link oculto visível com Tab
+- [x] Drag-and-drop tem alternativa de teclado (Arrow keys + Enter para mover)
+- [x] Toasts têm role="alert" e aria-live="polite"
+
+### 8.2 Responsividade
+
+| Breakpoint | Largura | Adaptação |
+|-----------|---------|-----------|
+| **Mobile** | < 640px | Sidebar vira bottom tabs (4 itens). Kanban: scroll horizontal. Cards: full width |
+| **Tablet** | 640-1024px | Sidebar colapsável (60px). Kanban: 3 colunas visíveis. Dashboard: grid 2 cols |
+| **Desktop** | > 1024px | Sidebar fixa (240px). Kanban: 4+ colunas. Dashboard: grid 3 cols |

package/dist/content/skills/specialist-design/resources/reference/guide.md

@@ -0,0 +1,67 @@
+# Guia de Referência — Design
+
+## Frameworks de UX Design
+
+### Design Thinking (5 etapas)
+1. **Empatia** — Entender o usuário real, não o imaginado
+2. **Definição** — Sintetizar a dor principal em 1 frase
+3. **Ideação** — Gerar múltiplas soluções antes de escolher
+4. **Prototipagem** — Wireframe rápido para validar
+5. **Teste** — Validar com usuários reais (ou cenários)
+
+### Jornada do Usuário
+- Mapear ANTES de desenhar telas
+- Etapas: Entrada → Orientação → Ação → Feedback → Retorno
+- Cada etapa tem: ação, tela, emoção, oportunidade de melhoria
+- Fluxo principal primeiro, fluxos alternativos depois
+
+### Atomic Design
+| Nível | Exemplo | Quando usar |
+|-------|---------|-------------|
+| **Atoms** | Button, Input, Badge | Componentes unitários reutilizáveis |
+| **Molecules** | SearchBar (Input+Button), Card | Combinações simples de atoms |
+| **Organisms** | Header, Sidebar, TaskList | Seções completas da UI |
+| **Templates** | DashboardLayout, KanbanLayout | Estrutura sem dados reais |
+| **Pages** | Dashboard, ProjectBoard | Templates com dados reais |
+
+## Design System — Mínimo Viável
+
+### Cores obrigatórias (8 tokens)
+`primary`, `primary-hover`, `secondary`, `background`, `surface`, `error`, `success`, `warning`
+
+### Tipografia obrigatória (5 níveis)
+H1, H2, H3, Body, Small — com fonte, tamanho e peso definidos
+
+### Componentes obrigatórios (8 mínimos)
+Button, Input, Card, Badge, Avatar, Modal, Toast, Table
+
+## Acessibilidade WCAG 2.1 AA — Resumo
+
+| Critério | Regra | Ferramenta de teste |
+|----------|-------|---------------------|
+| Contraste | ≥ 4.5:1 texto normal, ≥ 3:1 texto grande | WebAIM Contrast Checker |
+| Labels | Todo input com `<label>` associado, não só placeholder | Lighthouse |
+| Keyboard | Tab navega tudo, Enter ativa, Escape fecha | Teste manual |
+| Focus | Outline visível em elementos interativos | CSS `:focus-visible` |
+| Alt text | Imagens informativas com alt descritivo | HTML validator |
+| Headings | H1→H2→H3 sem pular níveis | axe DevTools |
+| Aria | Botões com ícone precisam de `aria-label` | axe DevTools |
+
+## Estados de UI — Os 4 Obrigatórios
+
+| Estado | O que mostrar | Anti-pattern |
+|--------|--------------|-------------|
+| **Loading** | Skeleton/shimmer no layout final | Spinner genérico sem contexto |
+| **Empty** | Ilustração + mensagem + CTA | Tela em branco |
+| **Error** | Mensagem clara + ação de retry | "Erro desconhecido" |
+| **Success** | Dados reais + interações ativas | Página sem feedback visual |
+
+## Anti-patterns de Design
+
+| Anti-pattern | Correção |
+|-------------|----------|
+| Wireframes sem estados de UI | Documentar loading/empty/error para CADA tela |
+| Design system "depois" | Definir cores, tipo e componentes ANTES dos wireframes |
+| Ignorar mobile | Mobile-first: começar pelo menor breakpoint |
+| Copiar referência sem adaptar | Usar como inspiração, adaptar para o contexto do projeto |
+| Wireframes com dados falsos bonitos | Usar dados realistas: nomes reais, textos de tamanho real |

package/dist/content/skills/specialist-design/resources/templates/design-doc.md

@@ -0,0 +1,232 @@
+# Design Doc — [NOME DO PROJETO]
+
+> **Fase:** 2 · Design  
+> **Data:** [DATA]  
+> **Autor:** Especialista de Design + Usuário  
+> **Status:** Draft | Em Revisão | Aprovado  
+> **Base:** Discovery Doc (`docs/01-discovery/discovery.md`)
+
+---
+
+## 1. Visão do Sistema
+
+### 1.1 Propósito
+
+[PREENCHER — O que o sistema é e para quem, em 2-3 frases. Extrair do Discovery.]
+
+### 1.2 Tom Visual
+
+| Aspecto | Definição |
+|---------|-----------|
+| **Personalidade** | [Ex: Profissional e acessível, não corporativo demais] |
+| **Sensação** | [Ex: Limpo, organizado, produtivo] |
+| **Referências** | [Ex: Notion (simplicidade), Linear (foco), Stripe (elegância)] |
+
+---
+
+## 2. Personas e Cenários
+
+<!-- Resumo das personas do Discovery com cenários de uso específicos para design -->
+
+### Persona 1: [NOME]
+
+**Cenário principal:** [Ex: "Maria abre o app no celular durante o café da manhã para checar tarefas do dia. Precisa ver tudo em 10 segundos sem scrollar muito."]
+
+**Necessidades de UI:**
+- [Ex: Dashboard resumido visível sem scroll em mobile]
+- [Ex: Ações rápidas acessíveis com 1 toque]
+- [Ex: Notificações não intrusivas de tarefas vencidas]
+
+### Persona 2: [NOME]
+
+**Cenário principal:** [PREENCHER]
+
+**Necessidades de UI:**
+- [PREENCHER]
+- [PREENCHER]
+
+---
+
+## 3. Mapa de Jornada do Usuário
+
+<!-- Jornada do fluxo PRINCIPAL — da entrada ao objetivo concluído -->
+
+### Jornada: [NOME DO FLUXO PRINCIPAL]
+
+| Etapa | Ação do Usuário | Tela/Componente | Emoção | Oportunidade |
+|-------|-----------------|-----------------|--------|-------------|
+| 1. Entrada | [Ex: Acessa URL] | Landing/Login | [Ex: Curioso] | [Ex: Onboarding rápido] |
+| 2. Orientação | [Ex: Vê dashboard] | Dashboard | [Ex: Orientado] | [Ex: Tutorial contextual] |
+| 3. Ação principal | [Ex: Cria tarefa] | Formulário | [Ex: Produtivo] | [Ex: Templates prontos] |
+| 4. Feedback | [Ex: Vê confirmação] | Toast/Redirect | [Ex: Satisfeito] | [Ex: Sugestão de próximo passo] |
+| 5. Retorno | [Ex: Volta ao dashboard] | Dashboard atualizado | [Ex: Confiante] | [Ex: Progresso visual] |
+
+---
+
+## 4. Arquitetura de Informação
+
+### 4.1 Mapa de Navegação
+
+<!-- Hierarquia de telas e como o usuário navega entre elas -->
+
+```
+[App]
+├── / (Landing/Marketing)
+├── /login
+├── /register
+├── /app (Área autenticada)
+│   ├── /dashboard (Home)
+│   ├── /[recurso-principal]
+│   │   ├── /lista
+│   │   ├── /novo
+│   │   └── /[id] (detalhe)
+│   ├── /perfil
+│   └── /configuracoes
+└── /404
+```
+
+### 4.2 Padrão de Navegação
+
+| Dispositivo | Padrão | Componente |
+|-------------|--------|-----------|
+| **Desktop** | [Ex: Sidebar fixa + Header] | [Ex: Sidebar 240px + TopBar] |
+| **Mobile** | [Ex: Bottom tabs + Hamburger] | [Ex: BottomNav 5 itens] |
+| **Tablet** | [Ex: Sidebar colapsável] | [Ex: Sidebar mini 60px] |
+
+---
+
+## 5. Design System
+
+### 5.1 Cores
+
+| Token | Valor | Uso |
+|-------|-------|-----|
+| `--primary` | [Ex: #2563EB (blue-600)] | Ações principais, links |
+| `--primary-hover` | [Ex: #1D4ED8 (blue-700)] | Hover em botões primários |
+| `--secondary` | [Ex: #64748B (slate-500)] | Textos secundários |
+| `--background` | [Ex: #FFFFFF] | Fundo principal |
+| `--surface` | [Ex: #F8FAFC (slate-50)] | Cards, painéis |
+| `--error` | [Ex: #EF4444 (red-500)] | Erros, ações destrutivas |
+| `--success` | [Ex: #22C55E (green-500)] | Confirmações, status ok |
+| `--warning` | [Ex: #F59E0B (amber-500)] | Alertas, atenção |
+
+### 5.2 Tipografia
+
+| Elemento | Fonte | Tamanho | Peso |
+|----------|-------|---------|------|
+| **H1** | [Ex: Inter] | [Ex: 32px / 2rem] | [Ex: 700 Bold] |
+| **H2** | [Ex: Inter] | [Ex: 24px / 1.5rem] | [Ex: 600 Semi] |
+| **H3** | [Ex: Inter] | [Ex: 20px / 1.25rem] | [Ex: 600 Semi] |
+| **Body** | [Ex: Inter] | [Ex: 16px / 1rem] | [Ex: 400 Regular] |
+| **Small** | [Ex: Inter] | [Ex: 14px / 0.875rem] | [Ex: 400 Regular] |
+| **Code** | [Ex: JetBrains Mono] | [Ex: 14px] | [Ex: 400] |
+
+### 5.3 Componentes Base
+
+| Componente | Variantes | Tamanhos |
+|-----------|-----------|----------|
+| **Button** | Primary, Secondary, Ghost, Destructive | sm, md, lg |
+| **Input** | Text, Password, Search, Select | sm, md |
+| **Card** | Default, Elevated, Interactive | — |
+| **Badge** | Default, Success, Warning, Error | sm, md |
+| **Avatar** | Image, Initials, Icon | xs, sm, md, lg |
+| **Modal** | Default, Confirm, Form | sm, md, lg |
+| **Toast** | Success, Error, Warning, Info | — |
+| **Table** | Default, Striped, Sortable | — |
+
+---
+
+## 6. Wireframes
+
+<!-- Cada tela principal descrita em markdown estruturado. Foco em LAYOUT e CONTEÚDO, não pixels. -->
+
+### Tela 1: [NOME DA TELA]
+
+**URL:** [Ex: /app/dashboard]  
+**Persona:** [Ex: Maria — verificação rápida]  
+**Objetivo:** [Ex: Ver resumo de tarefas do dia em 10 segundos]
+
+**Layout:**
+```
+┌─────────────────────────────────────────────┐
+│ [Header: Logo | Search | Notifications | Avatar] │
+├──────────┬──────────────────────────────────┤
+│          │                                  │
+│ Sidebar  │  [Conteúdo principal]            │
+│          │                                  │
+│ - Item 1 │  [Card: Resumo do dia]           │
+│ - Item 2 │  [Card: Tarefas pendentes]       │
+│ - Item 3 │  [Card: Atividade recente]       │
+│          │                                  │
+└──────────┴──────────────────────────────────┘
+```
+
+**Componentes:**
+- [Ex: Header com SearchInput + NotificationBell + AvatarMenu]
+- [Ex: SummaryCard com contadores (pendentes, concluídas, atrasadas)]
+- [Ex: TaskList com filtro por status e ordenação por prioridade]
+
+**Interações:**
+- [Ex: Click em tarefa → abre detalhe em drawer lateral]
+- [Ex: Quick-add via input no topo da lista]
+
+### Tela 2: [NOME DA TELA]
+
+<!-- Repetir o mesmo formato para cada tela do MVP -->
+
+[PREENCHER]
+
+### Tela 3: [NOME DA TELA]
+
+[PREENCHER]
+
+---
+
+## 7. Estados de UI
+
+<!-- Para cada fluxo crítico, documentar os 4 estados obrigatórios -->
+
+### Fluxo: [NOME DO FLUXO PRINCIPAL]
+
+| Estado | Visual | Comportamento |
+|--------|--------|--------------|
+| **Loading** | [Ex: Skeleton placeholders nas cards] | [Ex: Shimmer animation, 3 skeletons] |
+| **Empty** | [Ex: Ilustração + "Nenhuma tarefa ainda" + CTA] | [Ex: Botão "Criar primeira tarefa"] |
+| **Error** | [Ex: Banner vermelho + "Erro ao carregar" + Retry] | [Ex: Botão "Tentar novamente" + fallback cache] |
+| **Success** | [Ex: Lista populada com dados reais] | [Ex: Infinite scroll ou paginação] |
+
+---
+
+## 8. Acessibilidade
+
+### 8.1 Checklist WCAG 2.1 AA
+
+- [ ] Contraste de cores ≥ 4.5:1 para texto normal, ≥ 3:1 para texto grande
+- [ ] Todos os inputs com label associado (não apenas placeholder)
+- [ ] Navegação completa via teclado (Tab, Enter, Escape)
+- [ ] Focus visible em todos os elementos interativos
+- [ ] Imagens com alt text descritivo
+- [ ] Hierarquia de headings correta (H1 → H2 → H3)
+- [ ] Aria-labels em botões com apenas ícone
+- [ ] Skip-to-content link no topo da página
+- [ ] Formulários com mensagens de erro associadas ao campo
+
+### 8.2 Responsividade
+
+| Breakpoint | Largura | Adaptação |
+|-----------|---------|-----------|
+| **Mobile** | < 640px | Stack vertical, bottom nav, cards fullwidth |
+| **Tablet** | 640-1024px | Sidebar colapsável, grid 2 colunas |
+| **Desktop** | > 1024px | Sidebar fixa, grid 3+ colunas |
+
+---
+
+## Checklist de Completude
+
+- [ ] Jornada do usuário principal mapeada completa
+- [ ] Wireframes cobrem TODAS as telas do MVP
+- [ ] Design system definido (cores, tipografia, componentes)
+- [ ] Navegação e mapa de telas claro
+- [ ] Estados de UI (loading, empty, error) documentados
+- [ ] Acessibilidade WCAG 2.1 AA considerada
+- [ ] Responsividade mobile-first planejada