@brunosps00/dev-workflow 0.1.3 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -110,7 +110,7 @@ Displays the complete guide of available commands, integration flows, and when t
110
110
  | Platform | Wrapper Location | Status |
111
111
  |----------|-----------------|--------|
112
112
  | Claude Code | `.claude/skills/` | Full support |
113
- | Codex CLI | `.codex/skills/` | Full support |
113
+ | Codex CLI | `.agents/skills/` | Full support |
114
114
  | Copilot | `.agents/skills/` | Full support |
115
115
  | OpenCode | `.agents/skills/` | Full support |
116
116
 
@@ -128,8 +128,7 @@ your-project/
128
128
  ├── .claude/
129
129
  │ ├── skills/ # Claude Code wrappers
130
130
  │ └── settings.json # MCP servers (Context7, Playwright)
131
- ├── .codex/skills/ # Codex CLI wrappers
132
- └── .agents/skills/ # Copilot/OpenCode wrappers
131
+ └── .agents/skills/ # Codex/Copilot/OpenCode wrappers
133
132
  ```
134
133
 
135
134
  ## Options
package/lib/constants.js CHANGED
@@ -13,6 +13,7 @@ const COMMANDS = {
13
13
  { name: 'dw-functional-doc', description: 'Generate functional documentation dossier with screen mapping, E2E flows, and Playwright validation' },
14
14
  { name: 'dw-generate-pr', description: 'Generate a Pull Request with structured description' },
15
15
  { name: 'dw-help', description: 'Show complete guide of available commands and workflows' },
16
+ { name: 'dw-redesign-ui', description: 'Analyze, propose, and implement frontend page/component redesigns with design system integration' },
16
17
  { name: 'dw-refactoring-analysis', description: 'Audit codebase for code smells and refactoring opportunities with prioritized report' },
17
18
  { name: 'dw-review-implementation', description: 'Review if all PRD requirements were correctly implemented' },
18
19
  { name: 'dw-run-plan', description: 'Execute ALL tasks sequentially until the plan is complete' },
@@ -33,6 +34,7 @@ const COMMANDS = {
33
34
  { name: 'dw-functional-doc', description: 'Gerar dossie funcional com mapeamento de telas, fluxos E2E e validacao com Playwright' },
34
35
  { name: 'dw-generate-pr', description: 'Gerar um Pull Request com descricao estruturada' },
35
36
  { name: 'dw-help', description: 'Mostrar guia completo dos comandos e fluxos disponiveis' },
37
+ { name: 'dw-redesign-ui', description: 'Analisar, propor e implementar redesign de paginas/componentes frontend com integracao de design system' },
36
38
  { name: 'dw-refactoring-analysis', description: 'Auditar codebase para code smells e oportunidades de refatoracao com relatorio priorizado' },
37
39
  { name: 'dw-review-implementation', description: 'Revisar se todos os requisitos do PRD foram implementados corretamente' },
38
40
  { name: 'dw-run-plan', description: 'Executar TODAS as tasks sequencialmente ate completar o plano' },
@@ -50,23 +52,6 @@ description: ${description}
50
52
  ---
51
53
 
52
54
  Read and follow ALL instructions in \`.dw/commands/${name}.md\`.
53
- `,
54
- },
55
- codex: {
56
- dir: '.codex/skills',
57
- wrapperTemplate: (name, description) => `---
58
- name: ${name}
59
- description: Imported from ./.dw/commands/${name}.md
60
- ---
61
- <system_instructions>
62
- This skill redirects to the project's source command.
63
-
64
- Source of truth: \`.dw/commands/${name}.md\`
65
-
66
- 1. Open and read \`.dw/commands/${name}.md\` before executing.
67
- 2. Follow the source command entirely.
68
- 3. If divergence exists, the command file prevails.
69
- </system_instructions>
70
55
  `,
71
56
  },
72
57
  agents: {
@@ -15,6 +15,11 @@ function run() {
15
15
  check: null,
16
16
  install: 'npx -y @upstash/context7-mcp --help',
17
17
  },
18
+ {
19
+ name: 'React Doctor',
20
+ check: null,
21
+ install: 'npx react-doctor@latest --help',
22
+ },
18
23
  ];
19
24
 
20
25
  let installed = 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brunosps00/dev-workflow",
3
- "version": "0.1.3",
3
+ "version": "0.2.0",
4
4
  "description": "AI-driven development workflow commands for any project. Scaffolds a complete PRD-to-PR pipeline with multi-platform AI assistant support.",
5
5
  "bin": {
6
6
  "dev-workflow": "./bin/dev-workflow.js"
@@ -225,6 +225,11 @@ For each module/project detected, identify:
225
225
  | **Auth** | NextAuth, Passport, Keycloak, Auth0, etc. | Dependencies + auth-related files |
226
226
  | **API Style** | REST, GraphQL, tRPC, gRPC | Route definitions, schema files |
227
227
 
228
+ #### Frontend Health Baseline
229
+
230
+ When React is detected, run `npx react-doctor@latest --verbose` and include the health score in the generated rules as a baseline metric.
231
+ For Angular projects, run `ng lint` and document any warnings as baseline.
232
+
228
233
  ### Step 4: Detect Code Patterns and Conventions
229
234
 
230
235
  Read **10-20 representative source files** per module to identify actual patterns in use. For large projects, increase coverage proportionally.
@@ -101,6 +101,7 @@ This workspace uses an AI command system that automates the full development cyc
101
101
  | `/dw-run-plan` | Executes ALL tasks + final Level 2 review | PRD path | Code + commits + report |
102
102
  | `/dw-bugfix` | Analyzes and fixes bugs (bug vs feature triage) | Target + description | Fix + commit OR PRD (if feature) |
103
103
  | `/dw-fix-qa` | Fixes documented QA bugs and retests with evidence | PRD path | Code + `QA/bugs.md` + `QA/qa-report.md` updated |
104
+ | `/dw-redesign-ui` | Audits, proposes, and implements visual redesign of pages/components | Target page/component | Redesign brief + code |
104
105
 
105
106
  ### Research
106
107
 
@@ -223,6 +224,16 @@ LEVEL 3 - Formal Code Review (/dw-code-review)
223
224
  /dw-fix-qa .dw/spec/prd-name # Fix + retest full cycle
224
225
  ```
225
226
 
227
+ ### Frontend Redesign
228
+ ```bash
229
+ /dw-analyze-project # 0. Understand project patterns
230
+ /dw-redesign-ui "target page or component" # 1. Audit + propose + implement
231
+ /dw-run-qa .dw/spec/prd-name # 2. Visual QA (optional)
232
+ /dw-code-review .dw/spec/prd-name # 3. Code review
233
+ /dw-commit # 4. Commit
234
+ /dw-generate-pr main # 5. PR
235
+ ```
236
+
226
237
  ### Deep Research
227
238
  ```bash
228
239
  /dw-deep-research "topic or question" # Multi-source research with citations
@@ -247,6 +258,7 @@ your-project/
247
258
  │ │ ├── dw-review-implementation.md
248
259
  │ │ ├── dw-analyze-project.md
249
260
  │ │ ├── dw-deep-research.md
261
+ │ │ ├── dw-redesign-ui.md
250
262
  │ │ ├── dw-bugfix.md
251
263
  │ │ ├── dw-commit.md
252
264
  │ │ ├── dw-functional-doc.md
@@ -270,8 +282,8 @@ your-project/
270
282
  │ │ ├── tasks.md
271
283
  │ │ └── *_task.md
272
284
  │ └── archived/prd/ # Completed PRDs
273
- ├── .codex/skills/ # Codex skills
274
285
  ├── .claude/skills/ # Claude Code skills
286
+ ├── .agents/skills/ # Codex/Copilot skills
275
287
  ├── .opencode/commands/ # OpenCode commands
276
288
  └── .github/copilot-instructions.md # Copilot instructions
277
289
  ```
@@ -282,8 +294,8 @@ Commands work across multiple AI tools, all pointing to the same source `.dw/com
282
294
 
283
295
  | Tool | Location | Format |
284
296
  |------|----------|--------|
285
- | **Codex CLI** | `.codex/skills/*/SKILL.md` | Skill referencing `.dw/commands/` |
286
297
  | **Claude Code** | `.claude/skills/*/SKILL.md` | Skill referencing `.dw/commands/` |
298
+ | **Codex CLI** | `.agents/skills/*/SKILL.md` | Skill referencing `.dw/commands/` |
287
299
  | **OpenCode** | `.opencode/commands/*.md` | Command referencing `.dw/commands/` |
288
300
  | **GitHub Copilot** | `.github/copilot-instructions.md` | Instructions listing the commands |
289
301
 
@@ -306,4 +318,7 @@ Commands work across multiple AI tools, all pointing to the same source `.dw/com
306
318
  **Q: When should I use `/dw-deep-research`?**
307
319
  - For comprehensive multi-source analysis, technology comparisons, state-of-the-art reviews, or any topic requiring cited evidence. Not for simple lookups or debugging.
308
320
 
321
+ **Q: Does `/dw-redesign-ui` work with Angular?**
322
+ - 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.
323
+
309
324
  </system_instructions>
@@ -0,0 +1,117 @@
1
+ <system_instructions>
2
+ 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.
3
+
4
+ <critical>Do NOT redesign without first auditing the current implementation. Always read the code and capture the visual state before proposing changes.</critical>
5
+ <critical>ALWAYS propose design directions and wait for user approval before implementing any changes.</critical>
6
+ <critical>Preserve existing functionality. Redesign is visual/UX, not behavioral. If the change alters behavior, redirect to `/dw-create-prd`.</critical>
7
+
8
+ ## When to Use
9
+ - Use for rebuild/modernization of existing pages or components
10
+ - Use for design refresh, design system migration, or style overhaul
11
+ - Do NOT use for new features (use `/dw-create-prd`)
12
+ - Do NOT use for bug fixes (use `/dw-bugfix`)
13
+ - Do NOT use for open-ended idea exploration (use `/dw-brainstorm`)
14
+
15
+ ## Pipeline Position
16
+ **Predecessor:** `/dw-brainstorm` (optional) | `/dw-analyze-project` (recommended)
17
+ **Successor:** `/dw-run-qa` | `/dw-code-review`
18
+
19
+ ## Decision Flowchart
20
+
21
+ ```dot
22
+ digraph redesign_decision {
23
+ rankdir=TB;
24
+ node [shape=diamond];
25
+ Q1 [label="Is the change\nvisual/UX only?"];
26
+ Q2 [label="Is there a specific\ntarget page or component?"];
27
+ node [shape=box];
28
+ REDESIGN [label="Use\n/dw-redesign-ui"];
29
+ PRD [label="Use\n/dw-create-prd"];
30
+ BRAINSTORM [label="Start with\n/dw-brainstorm"];
31
+ Q1 -> PRD [label="No (changes behavior)"];
32
+ Q1 -> Q2 [label="Yes"];
33
+ Q2 -> REDESIGN [label="Yes"];
34
+ Q2 -> BRAINSTORM [label="No / Vague"];
35
+ }
36
+ ```
37
+
38
+ ## Complementary Skills
39
+
40
+ When available in the project under `./.agents/skills/`, use these to guide the redesign:
41
+
42
+ - `ui-ux-pro-max`: **REQUIRED** — use for all design decisions (color palette, typography, visual style, layout, WCAG accessibility)
43
+ - `vercel-react-best-practices`: use when the project is React/Next.js for performance and implementation patterns
44
+ - `webapp-testing`: use to capture before/after screenshots and visual validation with Playwright
45
+ - `security-review`: use if the redesign touches authentication flows or sensitive forms
46
+
47
+ ## Analysis Tools
48
+
49
+ Use diagnostic tools based on the project's framework:
50
+
51
+ - **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
52
+ - **Angular**: use `ng lint` and Angular DevTools for component profiling
53
+ - **Generic**: use Lighthouse for Web Vitals metrics (LCP, CLS, FID) as baseline
54
+
55
+ ## Required Behavior
56
+
57
+ 1. Identify the target: page, component, or route to be redesigned.
58
+ 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.
59
+ 3. Ask 3 to 5 questions about redesign goals: style direction, brand constraints, inspirations, target audience, priority devices.
60
+ 4. **PROPOSE**: present 2 to 3 design directions using `ui-ux-pro-max` — each with color palette, typography pairing, layout style, and rationale.
61
+ 5. Wait for explicit user approval before implementing.
62
+ 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.
63
+ 7. **VALIDATE**: capture after-state, compare before/after, verify accessibility (WCAG 2.2 via `ui-ux-pro-max`), run react-doctor `--diff` if React.
64
+
65
+ ## Preferred Response Format
66
+
67
+ ### 1. Current State Audit
68
+ - Component map / files involved
69
+ - CSS stack and current approach
70
+ - react-doctor findings (if React) or Lighthouse metrics
71
+ - Identified pain points
72
+
73
+ ### 2. Design Proposal
74
+ - 2 to 3 directions with visual rationale
75
+ - Color palette (via `ui-ux-pro-max`)
76
+ - Typography pairing (via `ui-ux-pro-max`)
77
+ - Layout pattern
78
+ - Effort level per direction
79
+
80
+ ### 3. Implementation
81
+ - File-by-file changes
82
+ - Component-level approach
83
+ - Inline accessibility checks
84
+
85
+ ### 4. Validation
86
+ - Before/after comparison
87
+ - Accessibility results
88
+ - Health score before/after (react-doctor if React)
89
+ - Next steps
90
+
91
+ ## Heuristics
92
+
93
+ - Maintain the project's CSS methodology (don't switch from Tailwind to CSS-in-JS without reason)
94
+ - Prefer incremental changes that can be reviewed visually
95
+ - When in doubt about style direction, ask — don't assume
96
+ - If the page has no tests, flag regression risk before changing
97
+ - Mobile responsiveness is mandatory unless explicitly scoped out by the user
98
+ - In Angular projects, respect Angular component patterns (style encapsulation, ViewEncapsulation)
99
+
100
+ ## Useful Outputs
101
+
102
+ Depending on the request, this command may produce:
103
+ - Redesign brief with design tokens
104
+ - Before/after screenshots
105
+ - Component-level change plan
106
+ - Accessibility report
107
+ - Design system alignment checklist
108
+ - Health score comparison (react-doctor)
109
+
110
+ ## Closing
111
+
112
+ At the end, always leave the user in one of these situations:
113
+ - With a completed redesign + validation evidence
114
+ - With a design proposal awaiting approval
115
+ - With a next workspace command to follow (`/dw-run-qa`, `/dw-code-review`, `/dw-commit`)
116
+
117
+ </system_instructions>
@@ -23,6 +23,11 @@ When available in the project under `./.agents/skills/`, use these skills as ana
23
23
  - `security-review`: defer security concerns to this skill — do not duplicate
24
24
  - `vercel-react-best-practices`: defer React/Next.js performance patterns to this skill
25
25
 
26
+ ## Analysis Tools
27
+
28
+ 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.
29
+ For Angular projects, use `ng lint` as an analytical complement.
30
+
26
31
  ## Input Variables
27
32
 
28
33
  | Variable | Description | Example |
@@ -24,6 +24,11 @@ When available in the project under `./.agents/skills/`, use these skills as ope
24
24
  - `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
25
25
  - `ui-ux-pro-max`: use when validating design consistency, color palettes, typography, spacing, and visual hierarchy against industry standards
26
26
 
27
+ ## Analysis Tools
28
+
29
+ - **React**: run `npx react-doctor@latest --diff` after tests to verify the health score has not regressed with the changes
30
+ - **Angular**: run `ng lint` to validate Angular code conformance after changes
31
+
27
32
  ## Input Variables
28
33
 
29
34
  | Variable | Description | Example |
@@ -213,6 +213,11 @@ Para cada projeto/módulo detectado, identificar:
213
213
  | **Containerização** | Dockerfile, docker-compose.yml |
214
214
  | **Monorepo tools** | Turborepo, Nx, Lerna, pnpm workspaces |
215
215
 
216
+ #### Baseline de Saúde do Frontend
217
+
218
+ Quando React for detectado, execute `npx react-doctor@latest --verbose` e inclua o health score nas rules geradas como métrica baseline.
219
+ Para projetos Angular, execute `ng lint` e documente warnings como baseline.
220
+
216
221
  ### Passo 4: Ler Arquivos Fonte Representativos (Obrigatório)
217
222
 
218
223
  Ler **10-20 arquivos fonte** por módulo para identificar padrões. Para projetos grandes, aumentar cobertura proporcionalmente.
@@ -88,6 +88,7 @@ Este workspace utiliza um sistema de comandos AI que automatiza o ciclo completo
88
88
  | `/dw-run-plan` | Executa TODAS tasks + revisão final Nível 2 | Path do PRD | Código + commits + relatório |
89
89
  | `/dw-bugfix` | Analisa e corrige bugs (triagem bug vs feature) | Target + descrição | Fix + commit OU PRD (se feature) |
90
90
  | `/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 |
91
+ | `/dw-redesign-ui` | Audita, propõe e implementa redesign visual de páginas/componentes | Página/componente alvo | Brief de redesign + código |
91
92
 
92
93
  ### Análise e Pesquisa
93
94
 
@@ -175,6 +176,16 @@ Este workspace utiliza um sistema de comandos AI que automatiza o ciclo completo
175
176
  /dw-fix-qa .dw/spec/prd-nome # Corrige + retesta ciclo completo
176
177
  ```
177
178
 
179
+ ### Redesign de Frontend
180
+ ```bash
181
+ /dw-analyze-project # 0. Entender padrões do projeto
182
+ /dw-redesign-ui "página ou componente alvo" # 1. Auditar + propor + implementar
183
+ /dw-run-qa .dw/spec/prd-nome # 2. QA visual (opcional)
184
+ /dw-code-review .dw/spec/prd-nome # 3. Code review
185
+ /dw-commit # 4. Commit
186
+ /dw-generate-pr main # 5. PR
187
+ ```
188
+
178
189
  ### Onboarding em Projeto Novo
179
190
  ```bash
180
191
  /dw-analyze-project # Escaneia e gera rules automaticamente
@@ -200,6 +211,7 @@ workspace/
200
211
  │ │ ├── dw-refactoring-analysis.md
201
212
  │ │ ├── dw-review-implementation.md
202
213
  │ │ ├── dw-deep-research.md
214
+ │ │ ├── dw-redesign-ui.md
203
215
  │ │ ├── dw-bugfix.md
204
216
  │ │ ├── dw-fix-qa.md
205
217
  │ │ ├── dw-commit.md
@@ -245,4 +257,7 @@ workspace/
245
257
  **Q: Preciso rodar `/dw-analyze-project` antes de tudo?**
246
258
  - Sim, é recomendado para projetos novos. Ele gera as rules em `.dw/rules/` que todos os outros comandos utilizam.
247
259
 
260
+ **Q: O `/dw-redesign-ui` funciona com Angular?**
261
+ - 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.
262
+
248
263
  </system_instructions>
@@ -0,0 +1,117 @@
1
+ <system_instructions>
2
+ 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.
3
+
4
+ <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>
5
+ <critical>SEMPRE proponha direções de design e espere aprovação do usuário antes de implementar qualquer mudança.</critical>
6
+ <critical>Preserve a funcionalidade existente. Redesign é visual/UX, não comportamental. Se a mudança alterar comportamento, redirecione para `/dw-create-prd`.</critical>
7
+
8
+ ## Quando Usar
9
+ - Use para rebuild/modernização visual de páginas ou componentes existentes
10
+ - Use para refresh de design, migração de design system ou overhaul de estilo
11
+ - NÃO use para features novas (use `/dw-create-prd`)
12
+ - NÃO use para corrigir bugs (use `/dw-bugfix`)
13
+ - NÃO use para explorar ideias sem alvo definido (use `/dw-brainstorm`)
14
+
15
+ ## Posição no Pipeline
16
+ **Antecessor:** `/dw-brainstorm` (opcional) | `/dw-analyze-project` (recomendado)
17
+ **Sucessor:** `/dw-run-qa` | `/dw-code-review`
18
+
19
+ ## Fluxograma de Decisão
20
+
21
+ ```dot
22
+ digraph redesign_decision {
23
+ rankdir=TB;
24
+ node [shape=diamond];
25
+ Q1 [label="A mudança é\napenas visual/UX?"];
26
+ Q2 [label="Existe uma página ou\ncomponente alvo definido?"];
27
+ node [shape=box];
28
+ REDESIGN [label="Usar\n/dw-redesign-ui"];
29
+ PRD [label="Usar\n/dw-create-prd"];
30
+ BRAINSTORM [label="Começar com\n/dw-brainstorm"];
31
+ Q1 -> PRD [label="Não (muda comportamento)"];
32
+ Q1 -> Q2 [label="Sim"];
33
+ Q2 -> REDESIGN [label="Sim"];
34
+ Q2 -> BRAINSTORM [label="Não / Vago"];
35
+ }
36
+ ```
37
+
38
+ ## Skills Complementares
39
+
40
+ Quando disponíveis no projeto em `./.agents/skills/`, use para guiar o redesign:
41
+
42
+ - `ui-ux-pro-max`: **OBRIGATÓRIO** — use para todas as decisões de design (paleta de cores, tipografia, estilo visual, layout, acessibilidade WCAG)
43
+ - `vercel-react-best-practices`: use quando o projeto for React/Next.js para padrões de performance e implementação
44
+ - `webapp-testing`: use para capturar screenshots antes/depois e validação visual com Playwright
45
+ - `security-review`: use se o redesign tocar flows de autenticação ou formulários sensíveis
46
+
47
+ ## Ferramentas de Análise
48
+
49
+ Utilize ferramentas de diagnóstico conforme o framework do projeto:
50
+
51
+ - **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
52
+ - **Angular**: use `ng lint` e Angular DevTools para profiling de componentes
53
+ - **Genérico**: use Lighthouse para métricas Web Vitals (LCP, CLS, FID) como baseline
54
+
55
+ ## Comportamento Obrigatório
56
+
57
+ 1. Identifique o alvo: página, componente ou rota que será redesenhada.
58
+ 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.
59
+ 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.
60
+ 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.
61
+ 5. Espere aprovação explícita do usuário antes de implementar.
62
+ 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.
63
+ 7. **VALIDAR**: capture estado depois, compare antes/depois, verifique acessibilidade (WCAG 2.2 via `ui-ux-pro-max`), rode react-doctor `--diff` se React.
64
+
65
+ ## Formato de Resposta Preferido
66
+
67
+ ### 1. Auditoria do Estado Atual
68
+ - Mapa de componentes / arquivos envolvidos
69
+ - Stack CSS e abordagem atual
70
+ - Findings do react-doctor (se React) ou Lighthouse
71
+ - Pain points identificados
72
+
73
+ ### 2. Proposta de Design
74
+ - 2 a 3 direções com racional visual
75
+ - Paleta de cores (via `ui-ux-pro-max`)
76
+ - Par tipográfico (via `ui-ux-pro-max`)
77
+ - Padrão de layout
78
+ - Nível de esforço por direção
79
+
80
+ ### 3. Implementação
81
+ - Mudanças arquivo por arquivo
82
+ - Abordagem por componente
83
+ - Verificações de acessibilidade inline
84
+
85
+ ### 4. Validação
86
+ - Comparação antes/depois
87
+ - Resultados de acessibilidade
88
+ - Health score antes/depois (react-doctor se React)
89
+ - Próximos passos
90
+
91
+ ## Heurísticas
92
+
93
+ - Mantenha a metodologia CSS do projeto (não troque Tailwind por CSS-in-JS sem motivo)
94
+ - Prefira mudanças incrementais que possam ser revisadas visualmente
95
+ - Quando em dúvida sobre direção de estilo, pergunte — não assuma
96
+ - Se a página não tem testes, sinalize risco de regressão antes de alterar
97
+ - Responsividade mobile é mandatória salvo escopo explícito do usuário
98
+ - Em projetos Angular, respeite os padrões de componentes do Angular (encapsulação de estilos, ViewEncapsulation)
99
+
100
+ ## Saídas Úteis
101
+
102
+ Dependendo do pedido, o comando pode produzir:
103
+ - Brief de redesign com design tokens
104
+ - Screenshots antes/depois
105
+ - Plano de mudanças por componente
106
+ - Relatório de acessibilidade
107
+ - Checklist de alinhamento com design system
108
+ - Comparativo de health score (react-doctor)
109
+
110
+ ## Encerramento
111
+
112
+ Ao final, sempre deixe o usuário em uma destas situações:
113
+ - Com um redesign completo + evidência de validação
114
+ - Com uma proposta de design aguardando aprovação
115
+ - Com um próximo comando do workspace para seguir (`/dw-run-qa`, `/dw-code-review`, `/dw-commit`)
116
+
117
+ </system_instructions>
@@ -23,6 +23,11 @@ Quando disponíveis no projeto em `./.agents/skills/`, use como suporte analíti
23
23
  - `security-review`: delegue preocupações de segurança para este skill — não duplique
24
24
  - `vercel-react-best-practices`: delegue padrões de performance React/Next.js para este skill
25
25
 
26
+ ## Ferramentas de Análise
27
+
28
+ 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.
29
+ Para projetos Angular, use `ng lint` como complemento analítico.
30
+
26
31
  ## Variáveis de Entrada
27
32
 
28
33
  | Variável | Descrição | Exemplo |
@@ -24,6 +24,11 @@ Quando disponíveis no projeto em `./.agents/skills/`, use estas skills como apo
24
24
  - `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
25
25
  - `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
26
26
 
27
+ ## Ferramentas de Análise
28
+
29
+ - **React**: execute `npx react-doctor@latest --diff` após os testes para verificar se o health score não regrediu com as mudanças
30
+ - **Angular**: execute `ng lint` para validar conformidade do código Angular após as mudanças
31
+
27
32
  ## Variáveis de Entrada
28
33
 
29
34
  | Variável | Descrição | Exemplo |
@@ -3,7 +3,7 @@
3
3
  "displayName": "Codex",
4
4
  "installType": "full",
5
5
  "folderStructure": {
6
- "root": ".codex",
6
+ "root": ".agents",
7
7
  "skillPath": "skills/ui-ux-pro-max",
8
8
  "filename": "SKILL.md"
9
9
  },