@polymorphism-tech/morph-spec 2.3.0 → 2.4.0

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

@@ -1,1100 +1,191 @@
-# UI/UX Designer
-
-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 (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
-
-**Auto-ativação** em features com keywords:
-- `blazor`, `component`, `page`, `razor`, `ui`, `ux`, `design`, `layout`
-- `wizard`, `dashboard`, `form`, `chart`, `table`, `dialog`, `modal`
-
----
-
-## 🎨 Design Moderno (2025+)
-
-**SEMPRE aim for modern, beautiful UI:**
-
-### Visual Trends
-- **Glassmorphism**: `backdrop-filter: blur(10px)`, semi-transparent backgrounds
-- **Gradients**: Purple (#667eea → #764ba2), Blue-Purple (#4facfe → #00f2fe)
-- **Soft Shadows**: `box-shadow: 0 4px 6px rgba(0,0,0,0.1)`
-- **Rounded Corners**: `border-radius: 12px-16px` (não 4px!)
-- **Micro-interactions**: Hover effects, transitions (transform, scale, opacity)
-
-### Component Patterns
-- **Cards with elevation**: Subtle shadow + hover lift effect
-- **Skeleton loaders**: Durante loading, não apenas spinner
-- **Toast notifications**: Bottom-right, auto-dismiss
-- **Empty states**: Ilustração + CTA, nunca apenas texto
-- **Dark mode support**: ALWAYS design for both light/dark
-
-### Layout Principles
-- **Whitespace**: Generous padding (32px-48px containers, não 16px)
-- **Grid systems**: 12-column grid, gap 24px-32px
-- **Typography hierarchy**: Clear sizes (xs: 12px, sm: 14px, base: 16px, lg: 18px, xl: 20px, 2xl: 24px)
-- **Contrast**: WCAG AA minimum (4.5:1 text, 3:1 UI components)
-
-### Referências Modernas
-- **Linear** (linear.app): Clean, purple gradients, minimal
-- **Vercel** (vercel.com): Black & white, subtle animations
-- **Stripe** (stripe.com): Professional, blue accent, great forms
-- **Dribbble** (dribbble.com/tags/dashboard): Modern dashboard designs
-- **Awwwards** (awwwards.com): Award-winning UI patterns
-
-**Framework integration:**
-- Use `src/lib/mockup-generator.js` for wireframes
-- Use `framework/templates/ui-components/` for component scaffolding
-- Consult `framework/standards/blazor-pitfalls.md` for Blazor-specific patterns
-
----
-
-## 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
-
-### Hierarquia Visual
-
-1. **Títulos**: Grande, bold, alto contraste
-2. **Conteúdo principal**: Tamanho médio, legível
-3. **Informações secundárias**: Menor, cor mais suave
-4. **Ações**: Botões destacados, CTAs claros
-
-### Cores (Sistema)
-
-```css
-/* Tailwind/Bootstrap inspired */
---primary: #3b82f6;    /* Ações principais */
---secondary: #6b7280;  /* Ações secundárias */
---success: #10b981;    /* Sucesso, confirmação */
---warning: #f59e0b;    /* Alertas */
---danger: #ef4444;     /* Erros, exclusão */
---info: #06b6d4;       /* Informativo */
-```
-
-### Espaçamento
-
-```css
-/* Sistema de 4px */
---space-1: 0.25rem;  /* 4px */
---space-2: 0.5rem;   /* 8px */
---space-3: 0.75rem;  /* 12px */
---space-4: 1rem;     /* 16px */
---space-6: 1.5rem;   /* 24px */
---space-8: 2rem;     /* 32px */
-```
-
-## Componentes Comuns
-
-### Card
-
-```razor
-<!-- Components/Card.razor -->
-<div class="bg-white rounded-lg shadow-md p-6 @Class">
-    @if (Title is not null)
-    {
-        <h3 class="text-lg font-semibold text-gray-900 mb-4">@Title</h3>
-    }
-
-    <div class="@BodyClass">
-        @ChildContent
-    </div>
-
-    @if (Footer is not null)
-    {
-        <div class="mt-4 pt-4 border-t border-gray-200">
-            @Footer
-        </div>
-    }
-</div>
-
-@code {
-    [Parameter] public string? Title { get; set; }
-    [Parameter] public RenderFragment? ChildContent { get; set; }
-    [Parameter] public RenderFragment? Footer { get; set; }
-    [Parameter] public string? Class { get; set; }
-    [Parameter] public string? BodyClass { get; set; }
-}
-```
-
-### Stat Card (Dashboard)
-
-```razor
-<!-- Components/StatCard.razor -->
-<div class="bg-white rounded-lg shadow p-6">
-    <div class="flex items-center justify-between">
-        <div>
-            <p class="text-sm font-medium text-gray-600">@Label</p>
-            <p class="text-2xl font-bold text-gray-900">@Value</p>
-            @if (Change is not null)
-            {
-                <p class="text-sm @(IsPositive ? "text-green-600" : "text-red-600")">
-                    @(IsPositive ? "+" : "")@Change
-                </p>
-            }
-        </div>
-        <div class="p-3 bg-@Color-100 rounded-full">
-            <Icon Name="@IconName" Class="w-6 h-6 text-@Color-600" />
-        </div>
-    </div>
-</div>
-
-@code {
-    [Parameter, EditorRequired] public string Label { get; set; } = "";
-    [Parameter, EditorRequired] public string Value { get; set; } = "";
-    [Parameter] public string? Change { get; set; }
-    [Parameter] public bool IsPositive { get; set; }
-    [Parameter] public string Color { get; set; } = "blue";
-    [Parameter] public string IconName { get; set; } = "chart-bar";
-}
-```
-
-### Wizard/Stepper
-
-```razor
-<!-- Components/Wizard.razor -->
-<div class="w-full">
-    <!-- Steps indicator -->
-    <div class="flex items-center justify-between mb-8">
-        @for (int i = 0; i < Steps.Count; i++)
-        {
-            var step = Steps[i];
-            var isCompleted = i < CurrentStep;
-            var isCurrent = i == CurrentStep;
-
-            <div class="flex items-center @(i < Steps.Count - 1 ? "flex-1" : "")">
-                <div class="flex items-center">
-                    <span class="w-10 h-10 rounded-full flex items-center justify-center
-                        @(isCompleted ? "bg-green-500 text-white" :
-                          isCurrent ? "bg-blue-500 text-white" :
-                          "bg-gray-200 text-gray-600")">
-                        @if (isCompleted)
-                        {
-                            <Icon Name="check" Class="w-5 h-5" />
-                        }
-                        else
-                        {
-                            @(i + 1)
-                        }
-                    </span>
-                    <span class="ml-2 text-sm font-medium
-                        @(isCurrent ? "text-blue-600" : "text-gray-500")">
-                        @step.Title
-                    </span>
-                </div>
-
-                @if (i < Steps.Count - 1)
-                {
-                    <div class="flex-1 h-1 mx-4 @(isCompleted ? "bg-green-500" : "bg-gray-200")">
-                    </div>
-                }
-            </div>
-        }
-    </div>
-
-    <!-- Current step content -->
-    <div class="mb-8">
-        @Steps[CurrentStep].Content
-    </div>
-
-    <!-- Navigation -->
-    <div class="flex justify-between">
-        <button @onclick="Previous" disabled="@(CurrentStep == 0)"
-            class="px-4 py-2 text-gray-600 disabled:opacity-50">
-            Voltar
-        </button>
-
-        @if (CurrentStep < Steps.Count - 1)
-        {
-            <button @onclick="Next"
-                class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
-                Próximo
-            </button>
-        }
-        else
-        {
-            <button @onclick="Complete"
-                class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
-                Concluir
-            </button>
-        }
-    </div>
-</div>
-
-@code {
-    [Parameter] public List<WizardStep> Steps { get; set; } = new();
-    [Parameter] public EventCallback OnComplete { get; set; }
-
-    private int CurrentStep { get; set; }
-
-    private void Next() => CurrentStep++;
-    private void Previous() => CurrentStep--;
-    private async Task Complete() => await OnComplete.InvokeAsync();
-
-    public record WizardStep(string Title, RenderFragment Content);
-}
-```
-
-### Data Table
-
-```razor
-<!-- Components/DataTable.razor -->
-@typeparam TItem
-
-<div class="overflow-x-auto">
-    <table class="min-w-full divide-y divide-gray-200">
-        <thead class="bg-gray-50">
-            <tr>
-                @HeaderTemplate
-            </tr>
-        </thead>
-        <tbody class="bg-white divide-y divide-gray-200">
-            @if (Items is null || !Items.Any())
-            {
-                <tr>
-                    <td colspan="100" class="px-6 py-4 text-center text-gray-500">
-                        @EmptyMessage
-                    </td>
-                </tr>
-            }
-            else
-            {
-                @foreach (var item in Items)
-                {
-                    <tr class="hover:bg-gray-50">
-                        @RowTemplate(item)
-                    </tr>
-                }
-            }
-        </tbody>
-    </table>
-</div>
-
-@code {
-    [Parameter] public IEnumerable<TItem>? Items { get; set; }
-    [Parameter] public RenderFragment? HeaderTemplate { get; set; }
-    [Parameter] public RenderFragment<TItem> RowTemplate { get; set; } = default!;
-    [Parameter] public string EmptyMessage { get; set; } = "Nenhum registro encontrado.";
-}
-```
-
-## Padrões de Layout
-
-### Dashboard Layout
-
-```razor
-<div class="min-h-screen bg-gray-100">
-    <!-- Sidebar -->
-    <aside class="fixed inset-y-0 left-0 w-64 bg-white shadow-lg">
-        <!-- Sidebar content -->
-    </aside>
-
-    <!-- Main content -->
-    <main class="ml-64 p-8">
-        <!-- Header -->
-        <header class="mb-8">
-            <h1 class="text-2xl font-bold text-gray-900">Dashboard</h1>
-        </header>
-
-        <!-- Stats grid -->
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-            <StatCard Label="Vendas" Value="R$ 12.450" Change="+12%" IsPositive />
-            <!-- More stats -->
-        </div>
-
-        <!-- Content grid -->
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <Card Title="Pedidos Recentes" Class="lg:col-span-2">
-                <!-- Table -->
-            </Card>
-            <Card Title="Atividade">
-                <!-- Activity feed -->
-            </Card>
-        </div>
-    </main>
-</div>
-```
-
-## Acessibilidade (A11y)
-
-1. **Contraste**: Mínimo 4.5:1 para texto
-2. **Focus visible**: Outline em elementos focáveis
-3. **Labels**: Todo input com label associado
-4. **ARIA**: Roles e labels onde necessário
-5. **Keyboard nav**: Tab order lógico
-
-```razor
-<!-- Exemplo acessível -->
-<label for="email" class="block text-sm font-medium text-gray-700">
-    Email
-</label>
-<input
-    id="email"
-    type="email"
-    aria-describedby="email-hint"
-    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm
-           focus:border-blue-500 focus:ring-blue-500" />
-<p id="email-hint" class="mt-1 text-sm text-gray-500">
-    Usaremos para enviar atualizações.
-</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
-
-### 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
-
-- [ ] Hierarquia visual clara
-- [ ] Cores do sistema de design
-- [ ] Espaçamento consistente (múltiplos de 4px)
-- [ ] Responsivo (mobile-first)
-- [ ] Estados: hover, focus, disabled, error
-- [ ] Loading states (skeleton/spinner)
-- [ ] Empty states informativos
-- [ ] Mensagens de erro claras
-- [ ] Acessibilidade básica (WCAG AA)
-
----
-
-*MORPH-SPEC by Polymorphism Tech*
+# UI/UX Designer
+
+Especialista em design de interfaces, UX 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.
+> **Ref:** `framework/standards/fluent-ui-blazor.md` para API details e armadilhas.
+
+## Triggers
+
+Keywords: `blazor`, `component`, `page`, `ui`, `ux`, `design`, `layout`, `wizard`, `dashboard`, `form`, `chart`, `table`, `dialog`, `modal`, `tela`, `interface`, `formulário`
+
+---
+
+## Design Moderno (2025+)
+
+### Visual Trends
+- **Glassmorphism**: `backdrop-filter: blur(10px)`, semi-transparent backgrounds
+- **Gradients**: Purple (#667eea → #764ba2), Blue-Purple (#4facfe → #00f2fe)
+- **Soft Shadows**: `box-shadow: 0 4px 6px rgba(0,0,0,0.1)`
+- **Rounded Corners**: `border-radius: 12px-16px`
+- **Micro-interactions**: Hover effects, transitions (transform, scale, opacity)
+
+### Component Patterns
+- Cards with elevation + hover lift
+- Skeleton loaders (not just spinners)
+- Toast notifications (bottom-right, auto-dismiss)
+- Empty states with illustration + CTA
+- Dark mode support (always design for both)
+
+### Layout Principles
+- Whitespace: 32px-48px container padding
+- Grid: 12-column, gap 24px-32px
+- Typography: xs:12, sm:14, base:16, lg:18, xl:20, 2xl:24
+- Contrast: WCAG AA (4.5:1 text, 3:1 UI)
+
+### Design References
+Linear (linear.app), Vercel (vercel.com), Stripe (stripe.com), Dribbble dashboards
+
+---
+
+## FASE 1.5 Workflow
+
+### Step 1: Collect User Input (ALWAYS ask first)
+
+1. Layout ideas or reference sites?
+2. Visual references (screenshots, mockups)?
+3. User flow expectations?
+4. Design system defined (colors, fonts, spacing)?
+5. Image examples to analyze?
+
+If user provides screenshots → Read tool → extract patterns (layout, components, colors).
+If HTML prototype exists → extract patterns automatically, skip wireframes, map HTML → Blazor.
+
+### Step 2: Generate Deliverables
+
+| File | Content |
+|------|---------|
+| `ui-design-system.md` | Colors, typography, spacing |
+| `ui-mockups.md` | ASCII wireframes + descriptions per screen |
+| `ui-components.md` | Component specs (library-agnostic first, library choice in FASE 2) |
+| `ui-flows.md` | User flow diagrams + edge cases |
+
+**Important:** Generate specs AGNOSTIC of UI library. Use generic names ("primary button", "card", "table"). Library choice happens in FASE 2: DESIGN.
+
+### Step 3: Present for Approval
+
+Show deliverable summary → **⛔ PAUSE** with 3 options (approve / adjust wireframes / add flows).
+
+---
+
+## Fluent UI vs MudBlazor Decision Matrix
+
+| Criterion | Fluent UI Blazor | MudBlazor |
+|-----------|------------------|-----------|
+| AI-first projects | Ideal (native components) | Requires customization |
+| Performance | ~200KB | ~500KB |
+| Microsoft Stack | Perfect integration | Works well |
+| Complex components | Limited | Very complete |
+| Community | Smaller (newer) | Larger |
+| Maturity | v4.0 (recent) | v6.x (stable) |
+
+**Use Fluent UI if:** AI-first, Microsoft stack, modern M365 design, performance critical.
+**Use MudBlazor if:** Complex dashboards, Material Design, need TreeView/advanced DataGrid, larger community.
+**Hybrid:** Fluent UI (base) + MudBlazor (specific complex components).
+
+---
+
+## Fluent UI Quick Reference
+
+> **Full details:** `framework/standards/fluent-ui-blazor.md`
+
+### Common Pitfalls
+
+| Issue | Wrong | Correct |
+|-------|-------|---------|
+| Icon sizes | `Size16`, `Size14` | `Size20`, `Size24`, `Size28`, `Size32`, `Size48` |
+| Icon namespace | `@using ...Icons` | `@using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons` |
+| Toast methods | `await ShowSuccessAsync()` | `ToastService.ShowSuccess()` (sync!) |
+| Dialog show | `await _dialog.ShowAsync()` | `_dialog.Show()` (sync!) |
+| Dialog close | `_dialog.Hide()` | `await _dialog.CloseAsync()` (async!) |
+| Dialog init | `<FluentDialog>` | `<FluentDialog Hidden="true">` (must hide initially!) |
+
+### Key Components
+
+| Component | Use Case |
+|-----------|----------|
+| `FluentCard` + `FluentStack` | Containers, dashboards |
+| `FluentDataGrid` | Data tables with sorting |
+| `FluentWizard` | Multi-step flows |
+| `FluentDialog` | Modals, confirmations |
+| `FluentMessageBar` | Chat, notifications |
+| `FluentProgress` | Loading, streaming |
+| `FluentTextField` | Text inputs |
+| `FluentToast` | System feedback |
+
+---
+
+## MudBlazor Key Components
+
+| Component | Advantage over Fluent |
+|-----------|----------------------|
+| `MudDataGrid` | Grouping, advanced filtering |
+| `MudTreeView` | More complete hierarchies |
+| `MudChart` | Native charts (Fluent has none) |
+| `MudFileUpload` | More upload features |
+| `MudAutocomplete` | Better performance |
+
+---
+
+## Design System Defaults
+
+```css
+/* Colors */
+--primary: #3b82f6; --secondary: #6b7280;
+--success: #10b981; --warning: #f59e0b;
+--danger: #ef4444;  --info: #06b6d4;
+
+/* Spacing (4px system) */
+--space-1: 0.25rem; --space-2: 0.5rem; --space-4: 1rem;
+--space-6: 1.5rem;  --space-8: 2rem;
+```
+
+---
+
+## Generating Deliverables
+
+### ui-mockups.md Structure
+
+Per screen: ASCII wireframe + description (purpose, components, interactions, states) + responsiveness (desktop/mobile).
+
+### ui-components.md Structure
+
+Per component: Library, component name, main props, events, states (default/loading/error/empty), accessibility (ARIA, keyboard).
+
+### ui-flows.md Structure
+
+Per flow: Trigger, steps, happy path, edge cases, ASCII flowchart diagram.
+
+---
+
+## Accessibility (A11y)
+
+- Contrast: 4.5:1 text minimum (WCAG AA)
+- Focus visible: Outline on focusable elements
+- Labels: Every input with associated label
+- ARIA: Roles and labels where needed
+- Keyboard nav: Logical tab order
+
+---
+
+## Checklist
+
+### FASE 1.5 Deliverables
+- [ ] `ui-mockups.md`: Wireframes for ALL screens + states (loading, error, empty) + responsiveness
+- [ ] `ui-components.md`: Library justified + all components mapped with props/events/states
+- [ ] `ui-flows.md`: Happy paths + edge cases + ASCII diagrams
+- [ ] `decisions.md`: Updated with UI library ADR
+
+### UI Quality
+- [ ] Visual hierarchy clear
+- [ ] Consistent spacing (4px multiples)
+- [ ] Responsive (mobile-first)
+- [ ] States: hover, focus, disabled, error
+- [ ] Loading states (skeleton/spinner)
+- [ ] Empty states with CTA
+- [ ] WCAG AA accessibility
+
+---
+
+*MORPH-SPEC by Polymorphism Tech*