@brunosps00/dev-workflow 0.1.2 → 0.2.0

package/README.md

@@ -110,7 +110,7 @@ Displays the complete guide of available commands, integration flows, and when t
 | Platform | Wrapper Location | Status |
 |----------|-----------------|--------|
 | Claude Code | `.claude/skills/` | Full support |
-| Codex CLI | `.codex/skills/` | Full support |
+| Codex CLI | `.agents/skills/` | Full support |
 | Copilot | `.agents/skills/` | Full support |
 | OpenCode | `.agents/skills/` | Full support |
 
@@ -128,8 +128,7 @@ your-project/
 ├── .claude/
 │   ├── skills/            # Claude Code wrappers
 │   └── settings.json      # MCP servers (Context7, Playwright)
-├── .codex/skills/         # Codex CLI wrappers
-└── .agents/skills/        # Copilot/OpenCode wrappers
+└── .agents/skills/        # Codex/Copilot/OpenCode wrappers
 ```
 
 ## Options

package/lib/constants.js

@@ -13,6 +13,7 @@ const COMMANDS = {
     { name: 'dw-functional-doc', description: 'Generate functional documentation dossier with screen mapping, E2E flows, and Playwright validation' },
     { name: 'dw-generate-pr', description: 'Generate a Pull Request with structured description' },
     { name: 'dw-help', description: 'Show complete guide of available commands and workflows' },
+    { name: 'dw-redesign-ui', description: 'Analyze, propose, and implement frontend page/component redesigns with design system integration' },
     { name: 'dw-refactoring-analysis', description: 'Audit codebase for code smells and refactoring opportunities with prioritized report' },
     { name: 'dw-review-implementation', description: 'Review if all PRD requirements were correctly implemented' },
     { name: 'dw-run-plan', description: 'Execute ALL tasks sequentially until the plan is complete' },
@@ -33,6 +34,7 @@ const COMMANDS = {
     { name: 'dw-functional-doc', description: 'Gerar dossie funcional com mapeamento de telas, fluxos E2E e validacao com Playwright' },
     { name: 'dw-generate-pr', description: 'Gerar um Pull Request com descricao estruturada' },
     { name: 'dw-help', description: 'Mostrar guia completo dos comandos e fluxos disponiveis' },
+    { name: 'dw-redesign-ui', description: 'Analisar, propor e implementar redesign de paginas/componentes frontend com integracao de design system' },
     { name: 'dw-refactoring-analysis', description: 'Auditar codebase para code smells e oportunidades de refatoracao com relatorio priorizado' },
     { name: 'dw-review-implementation', description: 'Revisar se todos os requisitos do PRD foram implementados corretamente' },
     { name: 'dw-run-plan', description: 'Executar TODAS as tasks sequencialmente ate completar o plano' },
@@ -50,23 +52,6 @@ description: ${description}
 ---
 
 Read and follow ALL instructions in \`.dw/commands/${name}.md\`.
-`,
-  },
-  codex: {
-    dir: '.codex/skills',
-    wrapperTemplate: (name, description) => `---
-name: ${name}
-description: Imported from ./.dw/commands/${name}.md
----
-<system_instructions>
-This skill redirects to the project's source command.
-
-Source of truth: \`.dw/commands/${name}.md\`
-
-1. Open and read \`.dw/commands/${name}.md\` before executing.
-2. Follow the source command entirely.
-3. If divergence exists, the command file prevails.
-</system_instructions>
 `,
   },
   agents: {

package/lib/install-deps.js

@@ -15,6 +15,11 @@ function run() {
       check: null,
       install: 'npx -y @upstash/context7-mcp --help',
     },
+    {
+      name: 'React Doctor',
+      check: null,
+      install: 'npx react-doctor@latest --help',
+    },
   ];
 
   let installed = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brunosps00/dev-workflow",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "AI-driven development workflow commands for any project. Scaffolds a complete PRD-to-PR pipeline with multi-platform AI assistant support.",
   "bin": {
     "dev-workflow": "./bin/dev-workflow.js"

package/scaffold/en/commands/dw-analyze-project.md

@@ -225,6 +225,11 @@ For each module/project detected, identify:
 | **Auth** | NextAuth, Passport, Keycloak, Auth0, etc. | Dependencies + auth-related files |
 | **API Style** | REST, GraphQL, tRPC, gRPC | Route definitions, schema files |
 
+#### Frontend Health Baseline
+
+When React is detected, run `npx react-doctor@latest --verbose` and include the health score in the generated rules as a baseline metric.
+For Angular projects, run `ng lint` and document any warnings as baseline.
+
 ### Step 4: Detect Code Patterns and Conventions
 
 Read **10-20 representative source files** per module to identify actual patterns in use. For large projects, increase coverage proportionally.

package/scaffold/en/commands/dw-brainstorm.md

@@ -29,6 +29,14 @@ digraph brainstorm_decision {
 }
 ```
 
+## Complementary Skills
+
+When available in the project under `./.agents/skills/`, use these skills to enrich ideation:
+
+- `ui-ux-pro-max`: use when brainstorming involves frontend, UI style direction, design system choices, or visual identity exploration
+- `vercel-react-best-practices`: use when brainstorming React/Next.js architecture or performance trade-offs
+- `security-review`: use when brainstorming touches auth, data handling, or security-sensitive features
+
 ## Template Reference
 
 - Brainstorm matrix template: `.dw/templates/brainstorm-matrix.md` (relative to workspace root)

package/scaffold/en/commands/dw-create-techspec.md

@@ -13,6 +13,14 @@
     ## Pipeline Position
     **Predecessor:** `/dw-create-prd` | **Successor:** `/dw-create-tasks`
 
+    ## Complementary Skills
+
+    When available in the project under `./.agents/skills/`, use these skills as support:
+
+    - `vercel-react-best-practices`: use when defining frontend architecture for React/Next.js projects
+    - `ui-ux-pro-max`: use when defining design system decisions, color palettes, typography, and UI style for the TechSpec
+    - `security-review`: use when the feature touches auth, authorization, or sensitive data handling
+
     ## Multi-Project Decision Flowchart
 
     ```dot

package/scaffold/en/commands/dw-functional-doc.md

@@ -58,6 +58,7 @@ When available in the project under `./.agents/skills/`, use these skills as ope
 - `webapp-testing`: support for structuring E2E flows, local retests, and evidence collection
 - `remotion-best-practices`: mandatory support when there is a final human video, captions, composition, transitions, FFmpeg, or Remotion
 - `humanizer`: mandatory support for reviewing and naturalizing all captions, `.srt` files, descriptive texts, and any human-facing writing before final delivery
+- `ui-ux-pro-max`: use when documenting visual patterns, design system choices, and UI style consistency across screens
 
 ## Mandatory Browser Tools
 

package/scaffold/en/commands/dw-help.md

@@ -101,6 +101,7 @@ This workspace uses an AI command system that automates the full development cyc
 | `/dw-run-plan` | Executes ALL tasks + final Level 2 review | PRD path | Code + commits + report |
 | `/dw-bugfix` | Analyzes and fixes bugs (bug vs feature triage) | Target + description | Fix + commit OR PRD (if feature) |
 | `/dw-fix-qa` | Fixes documented QA bugs and retests with evidence | PRD path | Code + `QA/bugs.md` + `QA/qa-report.md` updated |
+| `/dw-redesign-ui` | Audits, proposes, and implements visual redesign of pages/components | Target page/component | Redesign brief + code |
 
 ### Research
 
@@ -223,6 +224,16 @@ LEVEL 3 - Formal Code Review (/dw-code-review)
 /dw-fix-qa .dw/spec/prd-name                       # Fix + retest full cycle
 ```
 
+### Frontend Redesign
+```bash
+/dw-analyze-project                                # 0. Understand project patterns
+/dw-redesign-ui "target page or component"         # 1. Audit + propose + implement
+/dw-run-qa .dw/spec/prd-name                       # 2. Visual QA (optional)
+/dw-code-review .dw/spec/prd-name                  # 3. Code review
+/dw-commit                                         # 4. Commit
+/dw-generate-pr main                               # 5. PR
+```
+
 ### Deep Research
 ```bash
 /dw-deep-research "topic or question"              # Multi-source research with citations
@@ -247,6 +258,7 @@ your-project/
 │   │   ├── dw-review-implementation.md
 │   │   ├── dw-analyze-project.md
 │   │   ├── dw-deep-research.md
+│   │   ├── dw-redesign-ui.md
 │   │   ├── dw-bugfix.md
 │   │   ├── dw-commit.md
 │   │   ├── dw-functional-doc.md
@@ -270,8 +282,8 @@ your-project/
 │   │       ├── tasks.md
 │   │       └── *_task.md
 │   └── archived/prd/          # Completed PRDs
-├── .codex/skills/             # Codex skills
 ├── .claude/skills/            # Claude Code skills
+├── .agents/skills/            # Codex/Copilot skills
 ├── .opencode/commands/        # OpenCode commands
 └── .github/copilot-instructions.md  # Copilot instructions
 ```
@@ -282,8 +294,8 @@ Commands work across multiple AI tools, all pointing to the same source `.dw/com
 
 | Tool | Location | Format |
 |------|----------|--------|
-| **Codex CLI** | `.codex/skills/*/SKILL.md` | Skill referencing `.dw/commands/` |
 | **Claude Code** | `.claude/skills/*/SKILL.md` | Skill referencing `.dw/commands/` |
+| **Codex CLI** | `.agents/skills/*/SKILL.md` | Skill referencing `.dw/commands/` |
 | **OpenCode** | `.opencode/commands/*.md` | Command referencing `.dw/commands/` |
 | **GitHub Copilot** | `.github/copilot-instructions.md` | Instructions listing the commands |
 
@@ -306,4 +318,7 @@ Commands work across multiple AI tools, all pointing to the same source `.dw/com
 **Q: When should I use `/dw-deep-research`?**
 - For comprehensive multi-source analysis, technology comparisons, state-of-the-art reviews, or any topic requiring cited evidence. Not for simple lookups or debugging.
 
+**Q: Does `/dw-redesign-ui` work with Angular?**
+- Yes. The command is framework-agnostic. For React it uses react-doctor and `vercel-react-best-practices`; for Angular it uses `ng lint` and Angular DevTools. Visual design (`ui-ux-pro-max`) works with any framework.
+
 </system_instructions>

package/scaffold/en/commands/dw-redesign-ui.md

@@ -0,0 +1,117 @@
+<system_instructions>
+You are a frontend redesign specialist for the current workspace. This command exists to audit, propose, and implement visual redesigns of existing pages or components.
+
+<critical>Do NOT redesign without first auditing the current implementation. Always read the code and capture the visual state before proposing changes.</critical>
+<critical>ALWAYS propose design directions and wait for user approval before implementing any changes.</critical>
+<critical>Preserve existing functionality. Redesign is visual/UX, not behavioral. If the change alters behavior, redirect to `/dw-create-prd`.</critical>
+
+## When to Use
+- Use for rebuild/modernization of existing pages or components
+- Use for design refresh, design system migration, or style overhaul
+- Do NOT use for new features (use `/dw-create-prd`)
+- Do NOT use for bug fixes (use `/dw-bugfix`)
+- Do NOT use for open-ended idea exploration (use `/dw-brainstorm`)
+
+## Pipeline Position
+**Predecessor:** `/dw-brainstorm` (optional) | `/dw-analyze-project` (recommended)
+**Successor:** `/dw-run-qa` | `/dw-code-review`
+
+## Decision Flowchart
+
+```dot
+digraph redesign_decision {
+  rankdir=TB;
+  node [shape=diamond];
+  Q1 [label="Is the change\nvisual/UX only?"];
+  Q2 [label="Is there a specific\ntarget page or component?"];
+  node [shape=box];
+  REDESIGN [label="Use\n/dw-redesign-ui"];
+  PRD [label="Use\n/dw-create-prd"];
+  BRAINSTORM [label="Start with\n/dw-brainstorm"];
+  Q1 -> PRD [label="No (changes behavior)"];
+  Q1 -> Q2 [label="Yes"];
+  Q2 -> REDESIGN [label="Yes"];
+  Q2 -> BRAINSTORM [label="No / Vague"];
+}
+```
+
+## Complementary Skills
+
+When available in the project under `./.agents/skills/`, use these to guide the redesign:
+
+- `ui-ux-pro-max`: **REQUIRED** — use for all design decisions (color palette, typography, visual style, layout, WCAG accessibility)
+- `vercel-react-best-practices`: use when the project is React/Next.js for performance and implementation patterns
+- `webapp-testing`: use to capture before/after screenshots and visual validation with Playwright
+- `security-review`: use if the redesign touches authentication flows or sensitive forms
+
+## Analysis Tools
+
+Use diagnostic tools based on the project's framework:
+
+- **React**: run `npx react-doctor@latest --verbose` in the frontend directory before starting. Incorporate the health score and findings into the audit. Use `--diff` after implementing to compare
+- **Angular**: use `ng lint` and Angular DevTools for component profiling
+- **Generic**: use Lighthouse for Web Vitals metrics (LCP, CLS, FID) as baseline
+
+## Required Behavior
+
+1. Identify the target: page, component, or route to be redesigned.
+2. **AUDIT**: read the current implementation, identify the CSS stack (Tailwind, CSS Modules, styled-components, etc.), capture screenshot if `webapp-testing` is available, run react-doctor if React project.
+3. Ask 3 to 5 questions about redesign goals: style direction, brand constraints, inspirations, target audience, priority devices.
+4. **PROPOSE**: present 2 to 3 design directions using `ui-ux-pro-max` — each with color palette, typography pairing, layout style, and rationale.
+5. Wait for explicit user approval before implementing.
+6. **IMPLEMENT**: apply the chosen design respecting the existing stack. Use `vercel-react-best-practices` for React/Next.js. Maintain the project's CSS methodology.
+7. **VALIDATE**: capture after-state, compare before/after, verify accessibility (WCAG 2.2 via `ui-ux-pro-max`), run react-doctor `--diff` if React.
+
+## Preferred Response Format
+
+### 1. Current State Audit
+- Component map / files involved
+- CSS stack and current approach
+- react-doctor findings (if React) or Lighthouse metrics
+- Identified pain points
+
+### 2. Design Proposal
+- 2 to 3 directions with visual rationale
+- Color palette (via `ui-ux-pro-max`)
+- Typography pairing (via `ui-ux-pro-max`)
+- Layout pattern
+- Effort level per direction
+
+### 3. Implementation
+- File-by-file changes
+- Component-level approach
+- Inline accessibility checks
+
+### 4. Validation
+- Before/after comparison
+- Accessibility results
+- Health score before/after (react-doctor if React)
+- Next steps
+
+## Heuristics
+
+- Maintain the project's CSS methodology (don't switch from Tailwind to CSS-in-JS without reason)
+- Prefer incremental changes that can be reviewed visually
+- When in doubt about style direction, ask — don't assume
+- If the page has no tests, flag regression risk before changing
+- Mobile responsiveness is mandatory unless explicitly scoped out by the user
+- In Angular projects, respect Angular component patterns (style encapsulation, ViewEncapsulation)
+
+## Useful Outputs
+
+Depending on the request, this command may produce:
+- Redesign brief with design tokens
+- Before/after screenshots
+- Component-level change plan
+- Accessibility report
+- Design system alignment checklist
+- Health score comparison (react-doctor)
+
+## Closing
+
+At the end, always leave the user in one of these situations:
+- With a completed redesign + validation evidence
+- With a design proposal awaiting approval
+- With a next workspace command to follow (`/dw-run-qa`, `/dw-code-review`, `/dw-commit`)
+
+</system_instructions>

package/scaffold/en/commands/dw-refactoring-analysis.md

@@ -23,6 +23,11 @@ When available in the project under `./.agents/skills/`, use these skills as ana
 - `security-review`: defer security concerns to this skill — do not duplicate
 - `vercel-react-best-practices`: defer React/Next.js performance patterns to this skill
 
+## Analysis Tools
+
+When the project uses React, run `npx react-doctor@latest --verbose` in the frontend directory before starting the analysis. Incorporate the health score and findings into the report's metrics section.
+For Angular projects, use `ng lint` as an analytical complement.
+
 ## Input Variables
 
 | Variable | Description | Example |

package/scaffold/en/commands/dw-run-qa.md

@@ -22,6 +22,12 @@ When available in the project under `./.agents/skills/`, use these skills as ope
 
 - `webapp-testing`: support for structuring test flows, retests, screenshots, and logs when complementary to Playwright MCP
 - `vercel-react-best-practices`: use only if the frontend under test is React/Next.js and there is indication of regression related to rendering, fetching, hydration, or perceived performance
+- `ui-ux-pro-max`: use when validating design consistency, color palettes, typography, spacing, and visual hierarchy against industry standards
+
+## Analysis Tools
+
+- **React**: run `npx react-doctor@latest --diff` after tests to verify the health score has not regressed with the changes
+- **Angular**: run `ng lint` to validate Angular code conformance after changes
 
 ## Input Variables
 

package/scaffold/pt-br/commands/dw-analyze-project.md

@@ -213,6 +213,11 @@ Para cada projeto/módulo detectado, identificar:
 | **Containerização** | Dockerfile, docker-compose.yml |
 | **Monorepo tools** | Turborepo, Nx, Lerna, pnpm workspaces |
 
+#### Baseline de Saúde do Frontend
+
+Quando React for detectado, execute `npx react-doctor@latest --verbose` e inclua o health score nas rules geradas como métrica baseline.
+Para projetos Angular, execute `ng lint` e documente warnings como baseline.
+
 ### Passo 4: Ler Arquivos Fonte Representativos (Obrigatório)
 
 Ler **10-20 arquivos fonte** por módulo para identificar padrões. Para projetos grandes, aumentar cobertura proporcionalmente.

package/scaffold/pt-br/commands/dw-brainstorm.md

@@ -29,6 +29,14 @@ digraph brainstorm_decision {
 }
 ```
 
+## Skills Complementares
+
+Quando disponíveis no projeto em `./.agents/skills/`, use para enriquecer a ideação:
+
+- `ui-ux-pro-max`: use quando o brainstorm envolver frontend, direção de estilo UI, escolhas de design system ou exploração de identidade visual
+- `vercel-react-best-practices`: use quando explorar arquitetura React/Next.js ou trade-offs de performance
+- `security-review`: use quando o brainstorm tocar auth, manipulação de dados ou features sensíveis à segurança
+
 ## Referência do Template
 
 - Template da matriz de brainstorm: `.dw/templates/brainstorm-matrix.md` (relativo ao workspace root)

package/scaffold/pt-br/commands/dw-create-techspec.md

@@ -13,6 +13,14 @@
     ## Posição no Pipeline
     **Antecessor:** `/dw-create-prd` | **Sucessor:** `/dw-create-tasks`
 
+    ## Skills Complementares
+
+    Quando disponíveis no projeto em `./.agents/skills/`, use como apoio:
+
+    - `vercel-react-best-practices`: use quando definir arquitetura frontend para projetos React/Next.js
+    - `ui-ux-pro-max`: use quando definir decisões de design system, paletas de cores, tipografia e estilo UI no TechSpec
+    - `security-review`: use quando a feature tocar auth, autorização ou manipulação de dados sensíveis
+
     ## Fluxograma de Decisão Multi-Projeto
 
     ```dot

package/scaffold/pt-br/commands/dw-functional-doc.md

@@ -58,6 +58,7 @@ Quando disponíveis no projeto em `./.agents/skills/`, use estas skills como apo
 - `webapp-testing`: apoio para estruturar fluxos E2E, retestes locais e coleta de evidências
 - `remotion-best-practices`: apoio obrigatório quando houver vídeo humano final, legendas, composição, transições, FFmpeg ou Remotion
 - `humanizer`: apoio obrigatório para revisar e naturalizar todas as legendas, captions `.srt`, textos descritivos e qualquer redação voltada a leitura humana antes da entrega final
+- `ui-ux-pro-max`: use quando documentar padrões visuais, escolhas de design system e consistência de estilo UI entre telas
 
 ## Ferramentas obrigatórias para browser
 

package/scaffold/pt-br/commands/dw-help.md

@@ -88,6 +88,7 @@ Este workspace utiliza um sistema de comandos AI que automatiza o ciclo completo
 | `/dw-run-plan` | Executa TODAS tasks + revisão final Nível 2 | Path do PRD | Código + commits + relatório |
 | `/dw-bugfix` | Analisa e corrige bugs (triagem bug vs feature) | Target + descrição | Fix + commit OU PRD (se feature) |
 | `/dw-fix-qa` | Corrige bugs documentados no QA e retesta com evidências | Path do PRD | Código + `QA/bugs.md` + `QA/qa-report.md` atualizados |
+| `/dw-redesign-ui` | Audita, propõe e implementa redesign visual de páginas/componentes | Página/componente alvo | Brief de redesign + código |
 
 ### Análise e Pesquisa
 
@@ -175,6 +176,16 @@ Este workspace utiliza um sistema de comandos AI que automatiza o ciclo completo
 /dw-fix-qa .dw/spec/prd-nome               # Corrige + retesta ciclo completo
 ```
 
+### Redesign de Frontend
+```bash
+/dw-analyze-project                                # 0. Entender padrões do projeto
+/dw-redesign-ui "página ou componente alvo"        # 1. Auditar + propor + implementar
+/dw-run-qa .dw/spec/prd-nome                       # 2. QA visual (opcional)
+/dw-code-review .dw/spec/prd-nome                  # 3. Code review
+/dw-commit                                         # 4. Commit
+/dw-generate-pr main                               # 5. PR
+```
+
 ### Onboarding em Projeto Novo
 ```bash
 /dw-analyze-project                             # Escaneia e gera rules automaticamente
@@ -200,6 +211,7 @@ workspace/
 │   │   ├── dw-refactoring-analysis.md
 │   │   ├── dw-review-implementation.md
 │   │   ├── dw-deep-research.md
+│   │   ├── dw-redesign-ui.md
 │   │   ├── dw-bugfix.md
 │   │   ├── dw-fix-qa.md
 │   │   ├── dw-commit.md
@@ -245,4 +257,7 @@ workspace/
 **Q: Preciso rodar `/dw-analyze-project` antes de tudo?**
 - Sim, é recomendado para projetos novos. Ele gera as rules em `.dw/rules/` que todos os outros comandos utilizam.
 
+**Q: O `/dw-redesign-ui` funciona com Angular?**
+- Sim. O comando é framework-agnostic. Para React usa react-doctor e `vercel-react-best-practices`; para Angular usa `ng lint` e Angular DevTools. Design visual (`ui-ux-pro-max`) funciona com qualquer framework.
+
 </system_instructions>

package/scaffold/pt-br/commands/dw-redesign-ui.md

@@ -0,0 +1,117 @@
+<system_instructions>
+Você é um especialista em redesign de frontend para o workspace atual. Este comando existe para auditar, propor e implementar redesigns visuais de páginas ou componentes existentes.
+
+<critical>NÃO redesenhe sem antes auditar a implementação atual. Sempre leia o código e capture o estado visual antes de propor mudanças.</critical>
+<critical>SEMPRE proponha direções de design e espere aprovação do usuário antes de implementar qualquer mudança.</critical>
+<critical>Preserve a funcionalidade existente. Redesign é visual/UX, não comportamental. Se a mudança alterar comportamento, redirecione para `/dw-create-prd`.</critical>
+
+## Quando Usar
+- Use para rebuild/modernização visual de páginas ou componentes existentes
+- Use para refresh de design, migração de design system ou overhaul de estilo
+- NÃO use para features novas (use `/dw-create-prd`)
+- NÃO use para corrigir bugs (use `/dw-bugfix`)
+- NÃO use para explorar ideias sem alvo definido (use `/dw-brainstorm`)
+
+## Posição no Pipeline
+**Antecessor:** `/dw-brainstorm` (opcional) | `/dw-analyze-project` (recomendado)
+**Sucessor:** `/dw-run-qa` | `/dw-code-review`
+
+## Fluxograma de Decisão
+
+```dot
+digraph redesign_decision {
+  rankdir=TB;
+  node [shape=diamond];
+  Q1 [label="A mudança é\napenas visual/UX?"];
+  Q2 [label="Existe uma página ou\ncomponente alvo definido?"];
+  node [shape=box];
+  REDESIGN [label="Usar\n/dw-redesign-ui"];
+  PRD [label="Usar\n/dw-create-prd"];
+  BRAINSTORM [label="Começar com\n/dw-brainstorm"];
+  Q1 -> PRD [label="Não (muda comportamento)"];
+  Q1 -> Q2 [label="Sim"];
+  Q2 -> REDESIGN [label="Sim"];
+  Q2 -> BRAINSTORM [label="Não / Vago"];
+}
+```
+
+## Skills Complementares
+
+Quando disponíveis no projeto em `./.agents/skills/`, use para guiar o redesign:
+
+- `ui-ux-pro-max`: **OBRIGATÓRIO** — use para todas as decisões de design (paleta de cores, tipografia, estilo visual, layout, acessibilidade WCAG)
+- `vercel-react-best-practices`: use quando o projeto for React/Next.js para padrões de performance e implementação
+- `webapp-testing`: use para capturar screenshots antes/depois e validação visual com Playwright
+- `security-review`: use se o redesign tocar flows de autenticação ou formulários sensíveis
+
+## Ferramentas de Análise
+
+Utilize ferramentas de diagnóstico conforme o framework do projeto:
+
+- **React**: execute `npx react-doctor@latest --verbose` no diretório do frontend antes de iniciar. Incorpore o health score e findings na auditoria. Use `--diff` após implementar para comparar
+- **Angular**: use `ng lint` e Angular DevTools para profiling de componentes
+- **Genérico**: use Lighthouse para métricas Web Vitals (LCP, CLS, FID) como baseline
+
+## Comportamento Obrigatório
+
+1. Identifique o alvo: página, componente ou rota que será redesenhada.
+2. **AUDITAR**: leia a implementação atual, identifique stack CSS (Tailwind, CSS Modules, styled-components, etc.), capture screenshot se `webapp-testing` disponível, rode react-doctor se projeto React.
+3. Faça 3 a 5 perguntas sobre objetivos do redesign: direção de estilo, constraints de marca, inspirações, público-alvo, dispositivos prioritários.
+4. **PROPOR**: apresente 2 a 3 direções de design usando `ui-ux-pro-max` — cada uma com paleta de cores, par tipográfico, estilo de layout e racional.
+5. Espere aprovação explícita do usuário antes de implementar.
+6. **IMPLEMENTAR**: aplique o design escolhido respeitando a stack existente. Use `vercel-react-best-practices` para React/Next.js. Mantenha a metodologia CSS do projeto.
+7. **VALIDAR**: capture estado depois, compare antes/depois, verifique acessibilidade (WCAG 2.2 via `ui-ux-pro-max`), rode react-doctor `--diff` se React.
+
+## Formato de Resposta Preferido
+
+### 1. Auditoria do Estado Atual
+- Mapa de componentes / arquivos envolvidos
+- Stack CSS e abordagem atual
+- Findings do react-doctor (se React) ou Lighthouse
+- Pain points identificados
+
+### 2. Proposta de Design
+- 2 a 3 direções com racional visual
+- Paleta de cores (via `ui-ux-pro-max`)
+- Par tipográfico (via `ui-ux-pro-max`)
+- Padrão de layout
+- Nível de esforço por direção
+
+### 3. Implementação
+- Mudanças arquivo por arquivo
+- Abordagem por componente
+- Verificações de acessibilidade inline
+
+### 4. Validação
+- Comparação antes/depois
+- Resultados de acessibilidade
+- Health score antes/depois (react-doctor se React)
+- Próximos passos
+
+## Heurísticas
+
+- Mantenha a metodologia CSS do projeto (não troque Tailwind por CSS-in-JS sem motivo)
+- Prefira mudanças incrementais que possam ser revisadas visualmente
+- Quando em dúvida sobre direção de estilo, pergunte — não assuma
+- Se a página não tem testes, sinalize risco de regressão antes de alterar
+- Responsividade mobile é mandatória salvo escopo explícito do usuário
+- Em projetos Angular, respeite os padrões de componentes do Angular (encapsulação de estilos, ViewEncapsulation)
+
+## Saídas Úteis
+
+Dependendo do pedido, o comando pode produzir:
+- Brief de redesign com design tokens
+- Screenshots antes/depois
+- Plano de mudanças por componente
+- Relatório de acessibilidade
+- Checklist de alinhamento com design system
+- Comparativo de health score (react-doctor)
+
+## Encerramento
+
+Ao final, sempre deixe o usuário em uma destas situações:
+- Com um redesign completo + evidência de validação
+- Com uma proposta de design aguardando aprovação
+- Com um próximo comando do workspace para seguir (`/dw-run-qa`, `/dw-code-review`, `/dw-commit`)
+
+</system_instructions>

package/scaffold/pt-br/commands/dw-refactoring-analysis.md

@@ -23,6 +23,11 @@ Quando disponíveis no projeto em `./.agents/skills/`, use como suporte analíti
 - `security-review`: delegue preocupações de segurança para este skill — não duplique
 - `vercel-react-best-practices`: delegue padrões de performance React/Next.js para este skill
 
+## Ferramentas de Análise
+
+Quando o projeto usar React, execute `npx react-doctor@latest --verbose` no diretório do frontend antes de iniciar a análise. Incorpore o health score e findings do react-doctor na seção de métricas do relatório.
+Para projetos Angular, use `ng lint` como complemento analítico.
+
 ## Variáveis de Entrada
 
 | Variável | Descrição | Exemplo |

package/scaffold/pt-br/commands/dw-run-qa.md

@@ -22,6 +22,12 @@ Quando disponíveis no projeto em `./.agents/skills/`, use estas skills como apo
 
 - `webapp-testing`: apoio para estruturar fluxos de teste, retestes, screenshots e logs quando complementar ao Playwright MCP
 - `vercel-react-best-practices`: use apenas se o frontend sob teste for React/Next.js e houver indicação de regressão relacionada a renderização, fetching, hidratação ou performance percebida
+- `ui-ux-pro-max`: use quando validar consistência de design, paletas de cores, tipografia, espaçamento e hierarquia visual contra padrões da indústria
+
+## Ferramentas de Análise
+
+- **React**: execute `npx react-doctor@latest --diff` após os testes para verificar se o health score não regrediu com as mudanças
+- **Angular**: execute `ng lint` para validar conformidade do código Angular após as mudanças
 
 ## Variáveis de Entrada
 

package/scaffold/skills/ui-ux-pro-max/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Next Level Builder
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.