@polymorphism-tech/morph-spec 1.0.4 → 2.0.0

package/content/.claude/skills/specialists/ui-ux-designer.md

@@ -1,17 +1,443 @@
 # UI/UX Designer
 
-Especialista em design de interfaces, experiência do usuário e componentes Blazor avançados.
+Especialista em design de interfaces, experiência do usuário e componentes Blazor. Domina **Fluent UI Blazor** e **MudBlazor**.
+
+> **FASE 1.5: UI/UX DESIGN** - Obrigatória para features com front-end.
+> Gera wireframes, specs de componentes e fluxos ANTES do design técnico.
 
 ## Responsabilidades
 
-1. **Projetar interfaces** intuitivas e acessíveis
-2. **Criar componentes** Blazor reutilizáveis
-3. **Implementar dashboards** e visualizações
-4. **Garantir responsividade** e acessibilidade
+1. **Projetar interfaces** intuitivas e acessíveis (WCAG 2.1)
+2. **Gerar wireframes** e mockups (ASCII art + descrições)
+3. **Especificar componentes** Fluent UI ou MudBlazor
+4. **Desenhar fluxos** de usuário e navegação
+5. **Validar UX** para projetos AI-first
 
 ## Triggers
 
-Keywords: `wizard`, `dashboard`, `complex form`, `drag-drop`, `chart`, `ui`, `ux`, `design`, `layout`, `responsive`
+**Auto-ativação** em features com keywords:
+- `blazor`, `component`, `page`, `razor`, `ui`, `ux`, `design`, `layout`
+- `wizard`, `dashboard`, `form`, `chart`, `table`, `dialog`, `modal`
+
+## Deliverables da FASE 1.5
+
+| Arquivo | Conteúdo |
+|---------|----------|
+| `ui-design-system.md` | Design system: cores, tipografia, spacing, etc |
+| `ui-mockups.md` | Wireframes (ASCII art) + descrições de cada tela |
+| `ui-components.md` | Specs dos componentes Fluent UI/MudBlazor a usar |
+| `ui-flows.md` | Diagramas de fluxo do usuário e navegação |
+
+---
+
+## Workflow da FASE 1.5: UI/UX Design
+
+### Passo 1: Coletar Input do Usuário
+
+**SEMPRE pergunte ao usuário ANTES de gerar os deliverables:**
+
+1. **"Você tem alguma ideia de layout em mente?"**
+   - Se SIM: Peça que descreva ou mostre exemplo
+   - Se NÃO: Você propõe baseado em best practices
+
+2. **"Tem alguma referência visual que gostaria de seguir?"**
+   - Sites/apps similares
+   - Screenshots/mockups existentes
+   - Design system específico
+
+3. **"Como você imagina o fluxo do usuário?"**
+   - Passos principais que o usuário deve seguir
+   - Pontos de decisão importantes
+   - Onde pode haver confusão/dificuldade
+
+4. **"Tem imagens de exemplo ou screenshots?"**
+   - Se SIM: Use o Read tool para ler a imagem e baseie o design nela
+   - Analise a imagem e extraia padrões de layout, componentes, cores
+
+5. **"Este projeto tem um design system definido?"**
+   - Cores (primária, secundária, sucesso, erro, etc)?
+   - Tipografia (fontes, tamanhos)?
+   - Espaçamento (sistema de 4px, 8px?)?
+   - Se NÃO: Propor baseado em best practices
+
+6. **Design System - Cores:**
+   - Primária: (ex: #3b82f6 - Blue)
+   - Secundária: (ex: #6b7280 - Gray)
+   - Sucesso: (ex: #10b981 - Green)
+   - Erro: (ex: #ef4444 - Red)
+   - Warning: (ex: #f59e0b - Amber)
+   - Info: (ex: #06b6d4 - Cyan)
+   - Neutros: Escala de cinzas (50, 100, ..., 900)?
+
+7. **Design System - Tipografia:**
+   - Font family principal: (ex: Inter, Roboto, System)
+   - Font family secundária: (ex: monospace para código)
+   - Tamanhos: Usar escala padrão (xs, sm, base, lg, xl)?
+
+8. **Design System - Espaçamento:**
+   - Sistema base: 4px, 8px ou outro?
+   - Escala: Padrão Tailwind (0.25rem, 0.5rem, 1rem) ou custom?
+
+#### Exemplo de Interação
+
+```markdown
+⛔ **PAUSA OBRIGATÓRIA - FASE 1.5: UI/UX DESIGN**
+
+Detectei que esta feature envolve front-end. Antes de criar os wireframes e specs,
+gostaria de entender sua visão:
+
+**Perguntas:**
+
+1. **Layout**: Você tem alguma ideia de layout em mente? Algum site/app de referência?
+   - Exemplos: Dashboard estilo Vercel, Wizard estilo Stripe, Chat estilo ChatGPT
+
+2. **Referências visuais**: Tem screenshots ou mockups que gostaria que eu analisasse?
+   - Se sim, me passe o caminho do arquivo e usarei como base
+
+3. **Fluxo**: Como você imagina que o usuário navegará pela feature?
+   - Ex: "Usuário abre modal → preenche form → confirma → volta ao dashboard"
+
+4. **Preferências**:
+   - Design mais minimalista ou rico em informações?
+   - Mobile-first ou desktop-first?
+   - Preferência por Fluent UI ou MudBlazor?
+
+5. **Design System**:
+   - Projeto tem design system definido (cores, fonts, spacing)?
+   - Se não, quer que eu proponha um baseado em best practices?
+
+**Próximos passos sugeridos:**
+
+1. ✅ **Responder perguntas acima e eu gero wireframes + design system**
+2. 💡 **Pular perguntas e confiar em mim (uso best practices padrão)**
+3. 🖼️ **Compartilhar imagens de referência primeiro**
+```
+
+### Passo 2: Analisar Imagens (se fornecidas)
+
+Se o usuário fornecer screenshots/mockups:
+
+```markdown
+**Analisando imagem fornecida...**
+
+Identifiquei os seguintes padrões:
+
+**Layout:**
+- Grid de 3 colunas
+- Sidebar fixa à esquerda
+- Header com breadcrumbs
+
+**Componentes principais:**
+- 4 stat cards no topo
+- Data table com paginação
+- Gráfico de linha (vendas)
+
+**Cores:**
+- Primária: Azul (#3b82f6)
+- Fundo: Cinza claro (#f9fafb)
+
+Vou usar isso como base para os wireframes. Confirma?
+```
+
+### Passo 3: Gerar Deliverables
+
+Após coletar input, gerar:
+1. `ui-design-system.md` (cores, tipografia, spacing do projeto)
+2. `ui-mockups.md` (wireframes baseados no design system)
+3. `ui-components.md` (biblioteca escolhida justificada)
+4. `ui-flows.md` (fluxos validados com usuário)
+
+### Passo 4: Apresentar para Aprovação
+
+```markdown
+⛔ **PAUSA OBRIGATÓRIA**
+
+Gerei os seguintes deliverables de UI/UX:
+
+📄 **ui-design-system.md**:
+- Paleta de cores completa (primária, secundária, estados)
+- Tipografia (fonts, tamanhos, weights)
+- Espaçamento (escala de 4px)
+- Border radius, shadows, breakpoints
+
+📄 **ui-mockups.md**:
+- 3 telas mapeadas com wireframes ASCII
+- Estados (loading, error, empty) documentados
+- Responsividade especificada
+- Cores/fonts do design system aplicados
+
+📄 **ui-components.md**:
+- Biblioteca: Fluent UI Blazor (justificado)
+- 8 componentes mapeados
+- Props e eventos especificados
+- Temas/cores configurados
+
+📄 **ui-flows.md**:
+- Happy path + 3 edge cases
+- Diagramas de navegação
+
+**Próximos passos:**
+
+1. ✅ **Aprovar UI/UX e continuar para FASE 2: DESIGN TÉCNICO**
+2. 🎨 **Ajustar wireframes de telas específicas**
+3. 🔄 **Revisar biblioteca UI escolhida**
+4. 📋 **Adicionar mais fluxos/edge cases**
+```
+
+---
+
+## 🎨 Fluent UI Blazor vs MudBlazor
+
+### Matriz de Decisão
+
+| Critério | Fluent UI Blazor ⭐ | MudBlazor |
+|----------|---------------------|-----------|
+| **Projetos AI-first** | ✅ Ideal (componentes nativos) | ⚠️ Requer customização |
+| **Micro-SaaS** | ✅ Design Microsoft 365 | ✅ Design Material |
+| **Performance** | ✅ ~200KB | ⚠️ ~500KB |
+| **Microsoft Stack** | ✅ Integração perfeita | ✅ Funciona bem |
+| **Componentes Complexos** | ⚠️ Limitado (mais simples) | ✅ Muito completo |
+| **Comunidade** | ⚠️ Menor (mais novo) | ✅ Grande |
+| **Maturidade** | ⚠️ v4.0 (recente) | ✅ v6.x (estável) |
+
+### Quando Usar Cada Um
+
+**Use Fluent UI Blazor se:**
+- ✅ Projeto AI-first (chat, assistentes, streaming)
+- ✅ Stack Microsoft (Agent Framework, Aspire, Azure)
+- ✅ Design moderno Microsoft 365
+- ✅ Performance crítica
+- ✅ Integração com Aspire Dashboard
+
+**Use MudBlazor se:**
+- ✅ Dashboards complexos com muitos componentes
+- ✅ Preferência por Material Design
+- ✅ Precisa de componentes avançados (TreeView, DataGrid avançado)
+- ✅ Comunidade maior e mais exemplos
+- ✅ Projeto não-AI ou backend-heavy
+
+**Abordagem Híbrida:**
+Fluent UI (base) + MudBlazor (componentes específicos complexos)
+
+---
+
+## 🚀 Fluent UI Blazor - Componentes AI-First
+
+> **Recomendado para MORPH-SPEC** - Alinhado com .NET 10 + Agent Framework
+
+### Setup Rápido
+
+```csharp
+// Program.cs
+builder.Services.AddFluentUIComponents();
+```
+
+```razor
+// _Imports.razor
+@using Microsoft.FluentUI.AspNetCore.Components
+```
+
+### Componentes Principais
+
+#### 1. Chat / Conversação
+
+```razor
+<!-- Chat Container com streaming -->
+<FluentStack Orientation="Orientation.Vertical" Style="height: 100vh;">
+    <!-- Header -->
+    <FluentToolbar>
+        <FluentLabel Typo="Typography.H4">AI Assistant</FluentLabel>
+    </FluentToolbar>
+
+    <!-- Messages -->
+    <FluentStack Orientation="Orientation.Vertical"
+                 Style="flex: 1; overflow-y: auto; padding: 1rem;">
+        @foreach (var msg in _messages)
+        {
+            <FluentMessageBar Intent="@(msg.IsUser ? MessageIntent.Info : MessageIntent.Success)"
+                              Style="@(msg.IsUser ? "align-self: flex-end;" : "align-self: flex-start;")">
+                <FluentLabel Weight="FontWeight.Bold">@msg.Sender</FluentLabel>
+                <FluentLabel>@msg.Text</FluentLabel>
+            </FluentMessageBar>
+        }
+
+        @if (_isTyping)
+        {
+            <FluentProgress />
+        }
+    </FluentStack>
+
+    <!-- Input -->
+    <FluentStack Orientation="Orientation.Horizontal" Style="padding: 1rem;">
+        <FluentTextField @bind-Value="_input"
+                        Placeholder="Digite sua mensagem..."
+                        Style="flex: 1;" />
+        <FluentButton Appearance="Appearance.Accent"
+                     OnClick="SendMessage"
+                     Disabled="_isTyping">
+            Enviar
+        </FluentButton>
+    </FluentStack>
+</FluentStack>
+```
+
+#### 2. Dashboard com Cards
+
+```razor
+<FluentGrid Spacing="3">
+    <FluentGridItem xs="12" sm="6" md="3">
+        <FluentCard>
+            <FluentStack Orientation="Orientation.Vertical">
+                <FluentLabel Typo="Typography.Body">Vendas Hoje</FluentLabel>
+                <FluentLabel Typo="Typography.H3">R$ 12.450</FluentLabel>
+                <FluentBadge Appearance="Appearance.Success">+12%</FluentBadge>
+            </FluentStack>
+        </FluentCard>
+    </FluentGridItem>
+    <!-- More cards... -->
+</FluentGrid>
+```
+
+#### 3. Wizard / Multi-Step
+
+```razor
+<FluentWizard @bind-Value="_currentStep" DisplayStepNumber="true">
+    <Steps>
+        <FluentWizardStep Label="Informações Básicas" Icon="Info">
+            <FluentTextField @bind-Value="_model.Name" Label="Nome" Required />
+            <FluentTextField @bind-Value="_model.Email" Label="Email" Required />
+        </FluentWizardStep>
+
+        <FluentWizardStep Label="Preferências" Icon="Settings">
+            <FluentSwitch @bind-Value="_model.Newsletter" Label="Receber newsletter" />
+        </FluentWizardStep>
+
+        <FluentWizardStep Label="Confirmação" Icon="CheckMark">
+            <FluentLabel>Revise suas informações...</FluentLabel>
+        </FluentWizardStep>
+    </Steps>
+</FluentWizard>
+```
+
+#### 4. Data Table
+
+```razor
+<FluentDataGrid Items="@_orders" ResizableColumns="true">
+    <PropertyColumn Property="@(o => o.OrderNumber)" Title="Pedido" Sortable="true" />
+    <PropertyColumn Property="@(o => o.Customer)" Title="Cliente" Sortable="true" />
+    <PropertyColumn Property="@(o => o.Total)" Title="Total" Format="C" Sortable="true" />
+    <TemplateColumn Title="Status">
+        <FluentBadge Appearance="@GetStatusAppearance(context.Status)">
+            @context.Status
+        </FluentBadge>
+    </TemplateColumn>
+    <TemplateColumn Title="Ações">
+        <FluentButton Appearance="Appearance.Lightweight" OnClick="@(() => ViewOrder(context))">
+            Ver
+        </FluentButton>
+    </TemplateColumn>
+</FluentDataGrid>
+```
+
+### Fluent UI - Componentes Essenciais
+
+| Componente | Uso | AI-First? |
+|------------|-----|-----------|
+| `FluentMessageBar` | Chat, notificações | ✅ |
+| `FluentProgress` | Loading, streaming | ✅ |
+| `FluentCard` | Containers, dashboards | ✅ |
+| `FluentDataGrid` | Tabelas de dados | ⚠️ |
+| `FluentWizard` | Fluxos multi-etapa | ⚠️ |
+| `FluentDialog` | Modals, confirmações | ✅ |
+| `FluentToast` | Feedback do sistema | ✅ |
+| `FluentTextField` | Inputs de texto | ✅ |
+
+---
+
+## 🎯 MudBlazor - Componentes Complexos
+
+> **Usar quando** precisar de componentes avançados não disponíveis em Fluent UI
+
+### Setup Rápido
+
+```csharp
+// Program.cs
+builder.Services.AddMudServices();
+```
+
+```razor
+// _Imports.razor
+@using MudBlazor
+```
+
+### Componentes Diferenciados
+
+#### 1. TreeView Avançado
+
+```razor
+<MudTreeView T="FileNode" Items="@_fileTree" @bind-SelectedValue="_selectedFile">
+    <ItemTemplate Context="node">
+        <MudTreeViewItem @bind-Expanded="@node.IsExpanded"
+                         Items="@node.Children"
+                         Value="@node"
+                         Icon="@node.Icon"
+                         Text="@node.Name" />
+    </ItemTemplate>
+</MudTreeView>
+```
+
+#### 2. DataGrid Avançado
+
+```razor
+<MudDataGrid T="Order" Items="@_orders"
+             Filterable="true"
+             Groupable="true"
+             QuickFilter="@_quickFilter"
+             ColumnResizeMode="ResizeMode.Container">
+    <Columns>
+        <PropertyColumn Property="x => x.OrderNumber" Title="Pedido" />
+        <PropertyColumn Property="x => x.Total" Title="Total" CellStyle="text-align: right;" />
+        <TemplateColumn CellClass="d-flex justify-end">
+            <CellTemplate>
+                <MudStack Row>
+                    <MudButton Size="Size.Small" OnClick="@(() => Edit(context.Item))">
+                        Editar
+                    </MudButton>
+                </MudStack>
+            </CellTemplate>
+        </TemplateColumn>
+    </Columns>
+</MudDataGrid>
+```
+
+#### 3. Charts
+
+```razor
+<MudChart ChartType="ChartType.Line"
+          ChartSeries="@_series"
+          XAxisLabels="@_xLabels"
+          Width="100%"
+          Height="350px" />
+
+@code {
+    private List<ChartSeries> _series = new()
+    {
+        new ChartSeries { Name = "Vendas", Data = new double[] { 90, 79, 72, 69, 62, 58 } }
+    };
+}
+```
+
+### MudBlazor - Componentes Essenciais
+
+| Componente | Uso | Vantagem sobre Fluent |
+|------------|-----|----------------------|
+| `MudDataGrid` | Tabelas complexas | Grouping, filtering avançado |
+| `MudTreeView` | Hierarquias | Mais completo |
+| `MudChart` | Gráficos | Nativo (Fluent não tem) |
+| `MudFileUpload` | Upload de arquivos | Mais features |
+| `MudAutocomplete` | Autocomplete | Performance melhor |
+
+---
 
 ## Princípios de Design
 
@@ -301,12 +727,321 @@ Keywords: `wizard`, `dashboard`, `complex form`, `drag-drop`, `chart`, `ui`, `ux
 </p>
 ```
 
+---
+
+## 📐 Como Gerar os Deliverables (FASE 1.5)
+
+### 1. ui-mockups.md - Wireframes ASCII
+
+**Estrutura:**
+```markdown
+# UI Mockups - {Feature Name}
+
+## Tela 1: {Nome da Tela}
+
+### Wireframe
+[ASCII art wireframe aqui]
+
+### Descrição
+- **Propósito**: {O que o usuário faz nesta tela}
+- **Componentes**: {Lista de componentes principais}
+- **Interações**: {O que acontece ao clicar, hover, etc}
+- **Estados**: {Loading, erro, vazio, sucesso}
+
+### Responsividade
+- **Desktop**: {Layout desktop}
+- **Mobile**: {Adaptações mobile}
+```
+
+**Exemplo - Dashboard de Vendas:**
+
+```
+## Tela 1: Dashboard Principal
+
+### Wireframe
+
+┌─────────────────────────────────────────────────────────┐
+│  [≡] Dashboard de Vendas              [🔔] [👤] [⚙]   │
+├─────────────────────────────────────────────────────────┤
+│                                                          │
+│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐  │
+│  │ Vendas   │ │ Pedidos  │ │ Clientes │ │ Ticket   │  │
+│  │ R$ 45.2K │ │   342    │ │   128    │ │ R$ 132   │  │
+│  │ +12% ▲   │ │   +8% ▲  │ │  +15% ▲  │ │  -3% ▼   │  │
+│  └──────────┘ └──────────┘ └──────────┘ └──────────┘  │
+│                                                          │
+│  ┌─────────────────────────────────┐ ┌───────────────┐ │
+│  │ Vendas por Mês                  │ │ Top Produtos  │ │
+│  │                                  │ │               │ │
+│  │     ╭─╮                          │ │ 1. Produto A  │ │
+│  │  ╭──╯ ╰─╮     ╭──╮              │ │ 2. Produto B  │ │
+│  │ ─╯      ╰─────╯  ╰──            │ │ 3. Produto C  │ │
+│  │ JAN FEV MAR ABR MAI              │ │               │ │
+│  └─────────────────────────────────┘ └───────────────┘ │
+│                                                          │
+│  ┌─────────────────────────────────────────────────────┐│
+│  │ Últimos Pedidos                 [🔍 Buscar]  [➕]   ││
+│  ├──────────┬──────────┬──────────┬─────────────────────┤│
+│  │ #12345   │ João S.  │ R$ 250   │ [Ver] [Editar]      ││
+│  │ #12346   │ Maria O. │ R$ 180   │ [Ver] [Editar]      ││
+│  │ #12347   │ Pedro M. │ R$ 420   │ [Ver] [Editar]      ││
+│  └──────────┴──────────┴──────────┴─────────────────────┘│
+└─────────────────────────────────────────────────────────┘
+```
+
+### Descrição
+- **Propósito**: Visão geral das vendas e métricas do dia
+- **Componentes**: 4 stat cards, 1 chart (line), 1 lista (top 5), 1 data table
+- **Interações**:
+  - Stat cards: Hover mostra detalhes
+  - Chart: Tooltip nos pontos
+  - Tabela: Ordenar colunas, buscar, paginação
+- **Estados**:
+  - Loading: Skeleton dos cards
+  - Erro: Message bar no topo
+  - Vazio: "Nenhuma venda hoje" com CTA
+
+### Responsividade
+- **Desktop**: 4 colunas de stat cards, chart 66% + sidebar 33%
+- **Mobile**: Stack vertical, stat cards 100% width, chart 100%
+```
+
+### 2. ui-components.md - Specs de Componentes
+
+**Estrutura:**
+```markdown
+# UI Components - {Feature Name}
+
+## Biblioteca Escolhida: {Fluent UI | MudBlazor | Híbrida}
+
+### Justificativa
+{Por que escolheu esta biblioteca para esta feature}
+
+## Componentes Mapeados
+
+### {Nome do Componente}
+- **Biblioteca**: {Fluent UI | MudBlazor}
+- **Componente**: `{ComponentName}`
+- **Props Principais**:
+  - `prop1`: {descrição}
+  - `prop2`: {descrição}
+- **Eventos**:
+  - `OnClick`: {descrição}
+- **Estados**:
+  - Default: {descrição}
+  - Loading: {descrição}
+  - Error: {descrição}
+- **Acessibilidade**:
+  - ARIA: {roles/labels}
+  - Keyboard: {navegação}
+```
+
+**Exemplo:**
+
+```markdown
+## Biblioteca Escolhida: Fluent UI Blazor
+
+### Justificativa
+Dashboard AI-first com chat integrado. Fluent UI oferece componentes nativos
+de chat (FluentMessageBar, FluentProgress) e design Microsoft 365 consistente
+com o restante do sistema.
+
+## Componentes Mapeados
+
+### Stat Card (Métricas de Vendas)
+- **Biblioteca**: Fluent UI
+- **Componente**: `FluentCard` + `FluentStack` + `FluentBadge`
+- **Props Principais**:
+  - `Title`: "Vendas Hoje"
+  - `Value`: "R$ 45.200"
+  - `Change`: "+12%"
+  - `IsPositive`: true
+- **Eventos**:
+  - `OnClick`: Navega para detalhes da métrica
+- **Estados**:
+  - Default: Mostra valor + badge de mudança
+  - Loading: `FluentSkeleton` no lugar do valor
+  - Error: FluentMessageBar "Erro ao carregar"
+- **Acessibilidade**:
+  - ARIA: role="region" aria-label="Estatísticas de vendas"
+  - Keyboard: Focável com Tab, Enter para expandir
+
+### Data Table (Últimos Pedidos)
+- **Biblioteca**: Fluent UI
+- **Componente**: `FluentDataGrid<Order>`
+- **Props Principais**:
+  - `Items`: `@_orders` (List<Order>)
+  - `ResizableColumns`: true
+  - `Virtualize`: true (se > 100 itens)
+- **Colunas**:
+  1. PropertyColumn: OrderNumber (Sortable)
+  2. PropertyColumn: CustomerName (Sortable)
+  3. PropertyColumn: Total (Format="C", Sortable)
+  4. TemplateColumn: Ações (Ver, Editar)
+- **Eventos**:
+  - `OnRowClick`: Expande detalhes inline
+- **Estados**:
+  - Empty: "Nenhum pedido encontrado" com CTA "Criar pedido"
+  - Loading: FluentProgress acima da tabela
+  - Error: FluentMessageBar Intent="Error"
+- **Acessibilidade**:
+  - ARIA: role="grid", aria-sort nos headers
+  - Keyboard: Navegação com setas, Enter para ações
+```
+
+### 3. ui-flows.md - Fluxos de Usuário
+
+**Estrutura:**
+```markdown
+# UI Flows - {Feature Name}
+
+## Fluxo 1: {Nome do Fluxo}
+
+### Trigger
+{O que inicia este fluxo}
+
+### Passos
+1. **{Tela/Componente}**: {Ação do usuário}
+   - {Resultado da ação}
+   - {Navegação/transição}
+
+2. **{Tela/Componente}**: {Próxima ação}
+   ...
+
+### Happy Path
+{Caminho ideal sem erros}
+
+### Edge Cases
+- **{Caso}**: {Como o sistema lida}
+
+### Diagrama
+[Fluxograma ASCII]
+```
+
+**Exemplo:**
+
+```markdown
+## Fluxo 1: Criar Novo Pedido
+
+### Trigger
+Usuário clica no botão [+ Novo Pedido] no dashboard
+
+### Passos
+
+1. **Dashboard**: Clica [+ Novo Pedido]
+   - Modal/Wizard abre com Fluent UI Wizard
+   - 3 steps: Cliente, Produtos, Revisão
+
+2. **Step 1 - Sele ção de Cliente**:
+   - FluentAutocomplete para buscar cliente
+   - Ou [+ Novo Cliente] para criar inline
+   - [Próximo] habilitado apenas se cliente selecionado
+
+3. **Step 2 - Adicionar Produtos**:
+   - FluentDataGrid com produtos disponíveis
+   - Coluna com FluentNumberField para quantidade
+   - [Adicionar] adiciona à lista do pedido
+   - Lista de produtos adicionados (removível)
+   - Total calculado em tempo real
+
+4. **Step 3 - Revisão**:
+   - FluentCard resumo do pedido
+   - [Voltar] para editar
+   - [Confirmar] cria o pedido
+
+5. **Confirmação**:
+   - FluentToast "Pedido #12348 criado com sucesso!"
+   - Navega para detalhes do pedido OU volta ao dashboard
+
+### Happy Path
+Dashboard → Wizard (3 steps) → Confirmação → Dashboard
+
+### Edge Cases
+- **Cliente não encontrado**: Oferece [+ Novo Cliente] inline
+- **Produto sem estoque**: FluentMessageBar alerta, não permite adicionar
+- **Rede falha no confirmar**: FluentDialog "Erro ao salvar" + [Tentar novamente]
+- **Usuário fecha Wizard**: FluentDialog "Descartar pedido?" [Sim] [Não]
+
+### Diagrama
+
+```
+[Dashboard]
+     │
+     ├─[+ Novo Pedido]─┐
+     │                  │
+     ▼                  │
+[Wizard: Step 1]        │
+ (Cliente)              │
+     │                  │
+     ├─[Próximo]        │
+     │                  │
+     ▼                  │
+[Wizard: Step 2]        │
+ (Produtos)             │
+     │                  │
+     ├─[Próximo]        │
+     │                  │
+     ▼                  │
+[Wizard: Step 3]        │
+ (Revisão)              │
+     │                  │
+     ├─[Confirmar]      │
+     │                  │
+     ▼                  │
+[✅ Pedido Criado]     │
+     │                  │
+     └─────────────────┘
+         [Dashboard]
+```
+```
+
+### Checklist para FASE 1.5
+
+Ao gerar deliverables de UI/UX, validar:
+
+- [ ] **ui-mockups.md**:
+  - [ ] Wireframes ASCII de TODAS as telas
+  - [ ] Descrições detalhadas (propósito, componentes, interações, estados)
+  - [ ] Responsividade especificada (desktop + mobile)
+  - [ ] Empty states e error states documentados
+
+- [ ] **ui-components.md**:
+  - [ ] Biblioteca escolhida justificada (Fluent UI vs MudBlazor)
+  - [ ] Todos os componentes mapeados (nome + props + eventos)
+  - [ ] Estados documentados (default, loading, error, empty)
+  - [ ] Acessibilidade validada (ARIA, keyboard navigation)
+
+- [ ] **ui-flows.md**:
+  - [ ] Fluxos principais identificados (happy path)
+  - [ ] Edge cases documentados (erro, vazio, retry)
+  - [ ] Diagramas ASCII de cada fluxo
+  - [ ] Navegação entre telas clara
+
+- [ ] **decisions.md** (atualizar):
+  - [ ] ADR: Por que Fluent UI (ou MudBlazor)?
+  - [ ] ADR: Por que este layout específico?
+  - [ ] Trade-offs discutidos (performance vs features)
+
+---
+
 ## Documentação de Referência
 
-- [Tailwind CSS](https://tailwindcss.com/docs)
-- [Heroicons](https://heroicons.com/)
-- [Blazor Components](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/)
+### Fluent UI Blazor
+- [Fluent UI Blazor Docs](https://www.fluentui-blazor.net/)
+- [Fluent UI Blazor GitHub](https://github.com/microsoft/fluentui-blazor)
+- [Components Gallery](https://www.fluentui-blazor.net/Components)
+- **[Guia Completo: Fluent UI Setup](../../.morph/standards/fluent-ui-setup.md)**
+
+### MudBlazor
+- [MudBlazor Docs](https://mudblazor.com/)
+- [Components Gallery](https://mudblazor.com/components/list)
+- [GitHub](https://github.com/MudBlazor/MudBlazor)
+
+### Design & Acessibilidade
 - [WCAG Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
+- [Microsoft Fluent Design System](https://fluent2.microsoft.design/)
+- [Material Design](https://m3.material.io/)
+- [Blazor Components](https://learn.microsoft.com/aspnet/core/blazor/components/)
 
 ## Checklist de UI