Add squad: design-squad

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

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.

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.

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.

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.

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.

packages/design-squad/checklists/.gitkeep

@@ -0,0 +1 @@
+# .gitkeep

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.

packages/design-squad/config/coding-standards.md

@@ -0,0 +1,3 @@
+# Design Coding Standards
+- Acessibilidade WCAG.
+- Design Atômico.

packages/design-squad/config/source-tree.md

@@ -0,0 +1,2 @@
+# Design Source Tree
+- Root -> Design components and assets

packages/design-squad/config/tech-stack.md

@@ -0,0 +1,3 @@
+# Design Tech Stack
+- Figma
+- Sharp

packages/design-squad/data/.gitkeep

@@ -0,0 +1 @@
+# .gitkeep

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"

packages/design-squad/scripts/.gitkeep

@@ -0,0 +1 @@
+# .gitkeep

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 };

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

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.

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.

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.

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.

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.

packages/design-squad/templates/.gitkeep

@@ -0,0 +1 @@
+# .gitkeep

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*

packages/design-squad/tools/.gitkeep

@@ -0,0 +1 @@
+# .gitkeep

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;

packages/design-squad/workflows/.gitkeep

@@ -0,0 +1 @@
+# .gitkeep