diff --git a/packages/design-squad/ANALYSIS.md b/packages/design-squad/ANALYSIS.md new file mode 100644 index 00000000..936ed6e0 --- /dev/null +++ b/packages/design-squad/ANALYSIS.md @@ -0,0 +1,58 @@ +# Squad Analysis: design-squad + +**Generated:** 2026-03-16T01:46:04.528Z + +## Overview + +| Property | Value | +|----------|-------| +| Name | design-squad | +| Version | 1.0.0 | +| Author | Claudiney Oliveira | +| License | MIT | +| AIOX Min Version | 2.1.0 | + +## Components + +### agents/ (2) +- ui-agent.md +- ux-agent.md + +### tasks/ (3) +- audit-interface.md +- design-components.md +- prototyping.md + +### workflows/ (0) +*Empty* + +### checklists/ (0) +*Empty* + +### templates/ (0) +*Empty* + +### tools/ (0) +*Empty* + +### scripts/ (0) +*Empty* + +### data/ (0) +*Empty* + +## Coverage + +| Category | Percentage | Details | +|----------|------------|---------| +| Agents | 0% | 0/2 with tasks | +| Tasks | 75% | 3 total | +| Directories | 25% | 2/8 populated | +| Config | 50% | - | + +## Suggestions + +1. **[HIGH]** Add tasks for 2 agent(s) without tasks +2. **[MEDIUM]** Create workflows to combine related tasks +3. **[MEDIUM]** Add validation checklists for quality assurance +4. **[LOW]** Add document templates for consistent output diff --git a/packages/design-squad/README.md b/packages/design-squad/README.md new file mode 100644 index 00000000..234280d0 --- /dev/null +++ b/packages/design-squad/README.md @@ -0,0 +1,8 @@ +# Design Squad + +Squad focado em design de produto, experiência do usuário (UX) e interface do usuário (UI), utilizando automação para acelerar auditorias e criação de componentes. + +## Estrutura +- **UX Agent**: Responsável pela extração de necessidades de usuários e auditorias (Extração). +- **UI Agent**: Responsável pela transformação de conceitos em componentes visuais e protótipos (Transformação/Carga). +- **Tasks**: Fluxo que vai desde a auditoria de interface até a entrega de protótipos navegáveis. diff --git a/packages/design-squad/agents/analytics-agent.md b/packages/design-squad/agents/analytics-agent.md new file mode 100644 index 00000000..f4deecf2 --- /dev/null +++ b/packages/design-squad/agents/analytics-agent.md @@ -0,0 +1,6 @@ +# analytics-agent + +Agente focado em análise de dados de uso, métricas de conversão e performance de interface. + +- Role: UX Data Analyst +- Persona: Precise, insight-driven, technical. diff --git a/packages/design-squad/agents/lead-agent.md b/packages/design-squad/agents/lead-agent.md new file mode 100644 index 00000000..1afa2588 --- /dev/null +++ b/packages/design-squad/agents/lead-agent.md @@ -0,0 +1,6 @@ +# lead-agent + +Agente responsável pela coordenação técnica, definição de padrões de design e liderança do squad. + +- Role: Design Lead & Coordinator +- Persona: Decisive, visionary, mentor. diff --git a/packages/design-squad/agents/ui-agent.md b/packages/design-squad/agents/ui-agent.md new file mode 100644 index 00000000..fee0e059 --- /dev/null +++ b/packages/design-squad/agents/ui-agent.md @@ -0,0 +1,6 @@ +# ui-agent + +Agente focado em design visual, criação de componentes de design system e refinamento estético. + +- Role: UI Designer & Visual Specialist +- Persona: Creative, precise, aesthetic-driven. diff --git a/packages/design-squad/agents/ux-agent.md b/packages/design-squad/agents/ux-agent.md new file mode 100644 index 00000000..d64a0adb --- /dev/null +++ b/packages/design-squad/agents/ux-agent.md @@ -0,0 +1,6 @@ +# ux-agent + +Agente focado em análise de experiência, mapeamento de fluxos e auditorias de usabilidade. + +- Role: UX Researcher & Architect +- Persona: Analytical, empathetic, user-centric. diff --git a/packages/design-squad/checklists/.gitkeep b/packages/design-squad/checklists/.gitkeep new file mode 100644 index 00000000..adfc1286 --- /dev/null +++ b/packages/design-squad/checklists/.gitkeep @@ -0,0 +1 @@ +# .gitkeep diff --git a/packages/design-squad/checklists/quality-checklist.md b/packages/design-squad/checklists/quality-checklist.md new file mode 100644 index 00000000..67f229a7 --- /dev/null +++ b/packages/design-squad/checklists/quality-checklist.md @@ -0,0 +1,23 @@ +# Design Quality Checklist + +## ♿ Accessibility (WCAG) +- [ ] Contrast ratio is at least 4.5:1 for normal text. +- [ ] Focus states are clearly visible for all interactive elements. +- [ ] Text can be resized up to 200% without loss of content. +- [ ] Interactive elements have a minimum target size of 44x44px. + +## 🎨 Visual Consistency +- [ ] Colors are within the approved Brand Palette. +- [ ] Typography follows the established hierarchy (H1, H2, Body, etc.). +- [ ] Spacing follows the defined grid or scale (e.g., 8pt grid). +- [ ] Icons use a consistent line weight and style. + +## 🛠️ Design System Alignment +- [ ] Components use existing atoms/molecules from the DS. +- [ ] Token names follow the naming convention (kebab-case). +- [ ] Reusable components are documented with their respective states. + +## 📱 Responsiveness +- [ ] Layout transitions smoothly between Mobile, Tablet, and Desktop. +- [ ] Navigation is functional across all screen sizes. +- [ ] Images and media scale correctly without distortion. diff --git a/packages/design-squad/config/coding-standards.md b/packages/design-squad/config/coding-standards.md new file mode 100644 index 00000000..e15959f2 --- /dev/null +++ b/packages/design-squad/config/coding-standards.md @@ -0,0 +1,3 @@ +# Design Coding Standards +- Acessibilidade WCAG. +- Design Atômico. diff --git a/packages/design-squad/config/source-tree.md b/packages/design-squad/config/source-tree.md new file mode 100644 index 00000000..c0d7aa15 --- /dev/null +++ b/packages/design-squad/config/source-tree.md @@ -0,0 +1,2 @@ +# Design Source Tree +- Root -> Design components and assets diff --git a/packages/design-squad/config/tech-stack.md b/packages/design-squad/config/tech-stack.md new file mode 100644 index 00000000..235a4b3b --- /dev/null +++ b/packages/design-squad/config/tech-stack.md @@ -0,0 +1,3 @@ +# Design Tech Stack +- Figma +- Sharp diff --git a/packages/design-squad/data/.gitkeep b/packages/design-squad/data/.gitkeep new file mode 100644 index 00000000..adfc1286 --- /dev/null +++ b/packages/design-squad/data/.gitkeep @@ -0,0 +1 @@ +# .gitkeep diff --git a/packages/design-squad/data/config-data.yaml b/packages/design-squad/data/config-data.yaml new file mode 100644 index 00000000..3d1d9797 --- /dev/null +++ b/packages/design-squad/data/config-data.yaml @@ -0,0 +1,11 @@ +settings: + brand: + name: Vibe Code + primary_color: "#6200EE" + secondary_color: "#03DAC6" + thresholds: + min_contrast_ratio: 4.5 + performance_budget_ms: 2000 + endpoints: + figma_api: "https://api.figma.com/v1" + analytics_dashboard: "https://analytics.vibecode.io" diff --git a/packages/design-squad/scripts/.gitkeep b/packages/design-squad/scripts/.gitkeep new file mode 100644 index 00000000..adfc1286 --- /dev/null +++ b/packages/design-squad/scripts/.gitkeep @@ -0,0 +1 @@ +# .gitkeep diff --git a/packages/design-squad/scripts/migration-helper.js b/packages/design-squad/scripts/migration-helper.js new file mode 100644 index 00000000..46bd9b5a --- /dev/null +++ b/packages/design-squad/scripts/migration-helper.js @@ -0,0 +1,20 @@ +/** + * Migration Helper Script + * + * assists in migrating design data between versions or squads. + */ + +const fs = require('fs'); +const path = require('path'); + +function migrate(source, target) { + console.log(`Starting migration from ${source} to ${target}...`); + // Logic for migrating files or transforming data + // This is a placeholder for actual migration logic + console.log('Migration completed successfully.'); +} + +// Example usage: +// migrate('./old-assets', './new-assets'); + +module.exports = { migrate }; diff --git a/packages/design-squad/squad.yaml b/packages/design-squad/squad.yaml new file mode 100644 index 00000000..e26d50f4 --- /dev/null +++ b/packages/design-squad/squad.yaml @@ -0,0 +1,52 @@ +name: design-squad +version: 1.0.0 +description: Squad focado em UX/UI, prototipagem, design system e experiência do usuário seguindo fluxo ETL. +author: Claudiney Oliveira +license: MIT +slashPrefix: design + +aiox: + minVersion: "2.1.0" + type: squad + +components: + tasks: + - audit-interface.md + - design-components.md + - prototyping.md + - lead-agent-process-data.md + - lead-agent-new-task.md + agents: + - ux-agent.md + - ui-agent.md + - analytics-agent.md + - lead-agent.md + workflows: + - daily-processing.yaml + checklists: + - quality-checklist.md + templates: + - report-template.md + tools: + - data-validator.js + scripts: + - migration-helper.js + data: + - config-data.yaml + +config: + extends: extend + coding-standards: config/coding-standards.md + tech-stack: config/tech-stack.md + source-tree: config/source-tree.md + +dependencies: + node: [] + python: [] + squads: [] + +tags: + - ux-ui + - product-design + - design-system + - automation diff --git a/packages/design-squad/tasks/audit-interface.md b/packages/design-squad/tasks/audit-interface.md new file mode 100644 index 00000000..ff27d490 --- /dev/null +++ b/packages/design-squad/tasks/audit-interface.md @@ -0,0 +1,17 @@ +--- +task: Audit Interface +responsavel: "@ux-agent" +responsavel_type: agent +atomic_layer: task +Entrada: | + - interface_url_or_docs: Link ou docs da UI atual +Saida: | + - audit_report: Lista de problemas de usabilidade +Checklist: + - "[ ] Verificar heurísticas de Nielsen" + - "[ ] Analisar fluxos críticos de usuário" + - "[ ] Documentar pontos de fricção" +--- +# audit-interface + +Extração e análise de interfaces existentes para identificação de melhorias de usabilidade. diff --git a/packages/design-squad/tasks/design-components.md b/packages/design-squad/tasks/design-components.md new file mode 100644 index 00000000..363f8a40 --- /dev/null +++ b/packages/design-squad/tasks/design-components.md @@ -0,0 +1,18 @@ +--- +task: Design Components +responsavel: "@ui-agent" +responsavel_type: agent +atomic_layer: task +Entrada: | + - audit_report: Dados da auditoria de UX + - design_system_specs: Especificações do DS +Saida: | + - UI_components: Componentes desenhados +Checklist: + - "[ ] Criar variantes de botões" + - "[ ] Definir estados de inputs" + - "[ ] Alinhar com o design system" +--- +# design-components + +Transformação de requisitos funcionais em componentes visuais reutilizáveis. diff --git a/packages/design-squad/tasks/lead-agent-new-task.md b/packages/design-squad/tasks/lead-agent-new-task.md new file mode 100644 index 00000000..78a16d2a --- /dev/null +++ b/packages/design-squad/tasks/lead-agent-new-task.md @@ -0,0 +1,17 @@ +--- +task: new-task +responsavel: "@lead-agent" +responsavel_type: agent +atomic_layer: task +Entrada: | + - placeholder_input: Descrição da entrada necessária +Saida: | + - placeholder_output: Descrição da saída esperada +Checklist: + - "[ ] Passo inicial da tarefa" + - "[ ] Revisão intermediária" + - "[ ] Finalização e entrega" +--- +# new-task + +Descrição detalhada da nova tarefa atribuída ao arquiteto líder. diff --git a/packages/design-squad/tasks/lead-agent-process-data.md b/packages/design-squad/tasks/lead-agent-process-data.md new file mode 100644 index 00000000..cf7e5357 --- /dev/null +++ b/packages/design-squad/tasks/lead-agent-process-data.md @@ -0,0 +1,17 @@ +--- +task: process-data +responsavel: "@lead-agent" +responsavel_type: agent +atomic_layer: task +Entrada: | + - raw_data: Dados brutos de design ou feedback +Saida: | + - processed_insights: Insights processados para o squad +Checklist: + - "[ ] Revisar dados de entrada" + - "[ ] Cruzar informações com requisitos" + - "[ ] Documentar decisões de design" +--- +# process-data + +Tarefa de processamento de informações estratégicas para o squad. diff --git a/packages/design-squad/tasks/prototyping.md b/packages/design-squad/tasks/prototyping.md new file mode 100644 index 00000000..aa27fd79 --- /dev/null +++ b/packages/design-squad/tasks/prototyping.md @@ -0,0 +1,17 @@ +--- +task: Prototyping +responsavel: "@ui-agent" +responsavel_type: agent +atomic_layer: task +Entrada: | + - UI_components: Componentes finalizados +Saida: | + - interactive_prototype: Link do protótipo navegável +Checklist: + - "[ ] Criar conexões entre telas" + - "[ ] Definir microinterações" + - "[ ] Validar fluxos de navegação" +--- +# prototyping + +Carga final de componentes em fluxos interativos e protótipos de alta fidelidade. diff --git a/packages/design-squad/templates/.gitkeep b/packages/design-squad/templates/.gitkeep new file mode 100644 index 00000000..adfc1286 --- /dev/null +++ b/packages/design-squad/templates/.gitkeep @@ -0,0 +1 @@ +# .gitkeep diff --git a/packages/design-squad/templates/report-template.md b/packages/design-squad/templates/report-template.md new file mode 100644 index 00000000..0b557864 --- /dev/null +++ b/packages/design-squad/templates/report-template.md @@ -0,0 +1,24 @@ +# Design Report Template + +## Executive Summary +{Provide a brief overview of the findings and decisions} + +## 🔍 Audit Findings +- **Heuristic 1:** {Description} +- **Heuristic 2:** {Description} +- **Usability Gaps:** {List critical points} + +## 🎨 Visual System Updates +- **Colors:** {New colors or modifications} +- **Typography:** {Changes in text styles} +- **Components:** {New components added} + +## 📈 Data Insights (from Analytics) +{Key metrics from analytics-agent} + +## ✅ Next Steps +1. {Next task 1} +2. {Next task 2} + +--- +*Generated by Design Squad* diff --git a/packages/design-squad/tools/.gitkeep b/packages/design-squad/tools/.gitkeep new file mode 100644 index 00000000..adfc1286 --- /dev/null +++ b/packages/design-squad/tools/.gitkeep @@ -0,0 +1 @@ +# .gitkeep diff --git a/packages/design-squad/tools/data-validator.js b/packages/design-squad/tools/data-validator.js new file mode 100644 index 00000000..a578bd1d --- /dev/null +++ b/packages/design-squad/tools/data-validator.js @@ -0,0 +1,44 @@ +/** + * Data Validator Tool for Design Squad + * + * Provides functions to validate design tokens, accessibility contrast, + * and data structures generated by agents. + */ + +const DataValidator = { + /** + * Validates if a color contrast ratio meets WCAG standards. + * @param {number} ratio - The contrast ratio. + * @param {string} level - 'AA' or 'AAA'. + * @returns {boolean} + */ + validateContrast: (ratio, level = 'AA') => { + const min = level === 'AAA' ? 7 : 4.5; + return ratio >= min; + }, + + /** + * Validates design token names follow kebab-case. + * @param {string} name - Token name. + * @returns {boolean} + */ + validateTokenName: (name) => { + return /^[a-z]+(-[a-z0-9]+)*$/.test(name); + }, + + /** + * Checks for essential fields in a design report. + * @param {Object} data - The report data. + * @returns {Object} { valid: boolean, missing: string[] } + */ + validateReportFields: (data) => { + const required = ['title', 'findings', 'recommendations']; + const missing = required.filter(field => !data[field]); + return { + valid: missing.length === 0, + missing + }; + } +}; + +module.exports = DataValidator; diff --git a/packages/design-squad/workflows/.gitkeep b/packages/design-squad/workflows/.gitkeep new file mode 100644 index 00000000..adfc1286 --- /dev/null +++ b/packages/design-squad/workflows/.gitkeep @@ -0,0 +1 @@ +# .gitkeep diff --git a/packages/design-squad/workflows/daily-processing.yaml b/packages/design-squad/workflows/daily-processing.yaml new file mode 100644 index 00000000..fe64104d --- /dev/null +++ b/packages/design-squad/workflows/daily-processing.yaml @@ -0,0 +1,31 @@ +workflow: + id: daily-processing + name: Daily Processing Workflow + description: Workflow diário para processamento de dados e auditoria de interface. + type: maintenance + story_id: SQS-11 + + sequence: + - step: 1 + task: audit-interface + agent: ux-agent + description: Realizar auditoria diária de interface. + validates: [ "ui-consistency", "usability-heuristics" ] + + - step: 2 + task: lead-agent-process-data + agent: lead-agent + description: Processar insights gerados pela auditoria. + updates: [ "squad-insights" ] + requires: [ 1 ] + + - step: 3 + task: design-components + agent: ui-agent + description: Atualizar componentes baseados nos insights. + creates: [ "updated-component-specs" ] + requires: [ 2 ] + + handoff_prompts: + ux-agent_to_lead-agent: "Aqui estão os pontos de fricção identificados na auditoria. Por favor, priorize as correções." + lead-agent_to_ui-agent: "Inicie o refinamento dos componentes conforme os insights processados. Foco em acessibilidade." diff --git a/registry.json b/registry.json new file mode 100644 index 00000000..e7a4ca59 --- /dev/null +++ b/registry.json @@ -0,0 +1,14 @@ +{ + "version": "1.0.0", + "squads": { + "official": [], + "community": [ + { + "name": "design-squad", + "version": "1.0.0", + "description": "Squad focado em UX/UI, prototipagem, design system e experiência do usuário seguindo fluxo ETL.", + "author": "Claudiney Oliveira" + } + ] + } +}