@the-bearded-bear/claude-craft 8.8.1 → 8.8.2
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/Dev/i18n/de/Angular/commands/check-compliance.md +218 -168
- package/Dev/i18n/de/Common/agents/refactoring-specialist.md +146 -69
- package/Dev/i18n/de/Common/commands/add-technology.md +166 -68
- package/Dev/i18n/de/Common/commands/setup-ci.md +216 -33
- package/Dev/i18n/de/Laravel/commands/check-compliance.md +223 -115
- package/Dev/i18n/de/Python/checklists/new-feature.md +319 -44
- package/Dev/i18n/de/React/rules/02-architecture.md +483 -322
- package/Dev/i18n/de/React/rules/03-coding-standards.md +584 -368
- package/Dev/i18n/de/Symfony/commands/check-compliance.md +186 -114
- package/Dev/i18n/de/Symfony/rules/07-testing-symfony.md +679 -10
- package/Dev/i18n/de/UIUX/commands/a11y-component.md +284 -26
- package/Dev/i18n/de/UIUX/commands/design-tokens.md +199 -35
- package/Dev/i18n/de/UIUX/commands/user-flow.md +179 -16
- package/Dev/i18n/de/VueJS/commands/check-compliance.md +227 -102
- package/Dev/i18n/es/Angular/commands/check-compliance.md +217 -167
- package/Dev/i18n/es/Common/commands/add-technology.md +158 -60
- package/Dev/i18n/es/Laravel/commands/check-compliance.md +223 -115
- package/Dev/i18n/es/React/commands/check-testing.md +263 -169
- package/Dev/i18n/es/ReactNative/commands/check-testing.md +256 -198
- package/Dev/i18n/es/Symfony/commands/check-compliance.md +189 -117
- package/Dev/i18n/es/Symfony/commands/check-testing.md +301 -102
- package/Dev/i18n/es/Symfony/commands/migration-plan.md +267 -34
- package/Dev/i18n/es/UIUX/commands/a11y-component.md +274 -16
- package/Dev/i18n/es/UIUX/commands/design-tokens.md +186 -22
- package/Dev/i18n/es/UIUX/commands/user-flow.md +173 -10
- package/Dev/i18n/es/VueJS/commands/check-compliance.md +227 -102
- package/Dev/i18n/fr/Angular/commands/check-compliance.md +217 -167
- package/Dev/i18n/fr/Common/commands/ralph-run.md +138 -60
- package/Dev/i18n/fr/Laravel/commands/check-compliance.md +223 -115
- package/Dev/i18n/fr/React/commands/check-architecture.md +370 -53
- package/Dev/i18n/fr/React/commands/check-code-quality.md +454 -64
- package/Dev/i18n/fr/React/commands/check-testing.md +476 -102
- package/Dev/i18n/fr/Symfony/commands/check-compliance.md +188 -116
- package/Dev/i18n/fr/VueJS/commands/check-compliance.md +227 -102
- package/Dev/i18n/pt/Angular/commands/check-compliance.md +225 -175
- package/Dev/i18n/pt/Common/agents/ralph-conductor.md +211 -30
- package/Dev/i18n/pt/Common/commands/add-technology.md +149 -51
- package/Dev/i18n/pt/Common/commands/ralph-run.md +239 -35
- package/Dev/i18n/pt/Flutter/commands/analyze-performance.md +331 -46
- package/Dev/i18n/pt/Flutter/commands/check-compliance.md +234 -29
- package/Dev/i18n/pt/Flutter/commands/generate-feature.md +526 -51
- package/Dev/i18n/pt/Flutter/commands/generate-widget.md +515 -27
- package/Dev/i18n/pt/Flutter/commands/golden-update.md +322 -46
- package/Dev/i18n/pt/Flutter/commands/localization-check.md +278 -37
- package/Dev/i18n/pt/Laravel/commands/check-compliance.md +212 -104
- package/Dev/i18n/pt/React/commands/accessibility-check.md +151 -42
- package/Dev/i18n/pt/React/commands/bundle-analyze.md +300 -25
- package/Dev/i18n/pt/React/commands/check-architecture.md +369 -34
- package/Dev/i18n/pt/React/commands/check-code-quality.md +440 -34
- package/Dev/i18n/pt/React/commands/check-compliance.md +232 -62
- package/Dev/i18n/pt/React/commands/check-security.md +370 -31
- package/Dev/i18n/pt/React/commands/check-testing.md +473 -43
- package/Dev/i18n/pt/React/commands/generate-component.md +454 -19
- package/Dev/i18n/pt/React/commands/generate-hook.md +425 -24
- package/Dev/i18n/pt/React/commands/storybook-story.md +520 -35
- package/Dev/i18n/pt/ReactNative/commands/app-size.md +358 -387
- package/Dev/i18n/pt/ReactNative/commands/check-code-quality.md +246 -75
- package/Dev/i18n/pt/ReactNative/commands/check-compliance.md +191 -85
- package/Dev/i18n/pt/ReactNative/commands/check-security.md +363 -115
- package/Dev/i18n/pt/ReactNative/commands/check-testing.md +269 -79
- package/Dev/i18n/pt/ReactNative/commands/generate-screen.md +491 -324
- package/Dev/i18n/pt/ReactNative/commands/native-module.md +539 -82
- package/Dev/i18n/pt/ReactNative/commands/store-prepare.md +429 -185
- package/Dev/i18n/pt/ReactNative/rules/02-architecture.md +1084 -31
- package/Dev/i18n/pt/Symfony/commands/check-compliance.md +195 -123
- package/Dev/i18n/pt/UIUX/commands/a11y-audit.md +208 -24
- package/Dev/i18n/pt/UIUX/commands/a11y-component.md +281 -23
- package/Dev/i18n/pt/UIUX/commands/design-tokens.md +197 -33
- package/Dev/i18n/pt/UIUX/commands/user-flow.md +183 -20
- package/Dev/i18n/pt/VueJS/commands/check-compliance.md +228 -103
- package/Dev/i18n/pt/Workflow/commands/analyze.md +147 -146
- package/Dev/i18n/pt/Workflow/commands/design.md +205 -204
- package/Dev/i18n/pt/Workflow/commands/implement.md +184 -184
- package/Project/i18n/de/Sprint/commands/dev.md +339 -86
- package/Project/i18n/es/Sprint/commands/dev.md +342 -91
- package/Project/i18n/pt/Sprint/commands/dev.md +343 -92
- package/bundles/cursor/.cursorrules +1 -1
- package/bundles/windsurf/.windsurfrules +1 -1
- package/package.json +1 -1
|
@@ -1,145 +1,253 @@
|
|
|
1
1
|
---
|
|
2
|
-
description:
|
|
2
|
+
description: Verificar Conformidade Completa do Laravel
|
|
3
|
+
argument-hint: [arguments]
|
|
3
4
|
---
|
|
4
5
|
|
|
5
|
-
#
|
|
6
|
+
# Verificar Conformidade Completa do Laravel
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
## Argumentos
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
$ARGUMENTS (opcional: caminho para o projeto a analisar)
|
|
10
11
|
|
|
11
|
-
|
|
12
|
+
## Modo de Planejamento
|
|
12
13
|
|
|
13
|
-
|
|
14
|
+
> O modo de planejamento é ativado automaticamente quando o escopo abrange múltiplos módulos ou requer investigação transversal.
|
|
14
15
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
16
|
+
## MISSÃO
|
|
17
|
+
|
|
18
|
+
Realizar uma auditoria de conformidade completa do projeto Laravel orquestrando as 4 verificações principais: Arquitetura, Qualidade de Código, Testes e Segurança. Produzir um relatório consolidado com uma pontuação geral de 100 pontos.
|
|
19
|
+
|
|
20
|
+
### Etapa 1: Preparação da Auditoria
|
|
21
|
+
|
|
22
|
+
Preparar o ambiente de auditoria:
|
|
23
|
+
- [ ] Identificar o caminho do projeto a auditar
|
|
24
|
+
- [ ] Verificar a presença de arquivos de configuração (composer.json com laravel/*, .env.example)
|
|
25
|
+
- [ ] Listar os diretórios principais (app/, tests/, config/, routes/, etc.)
|
|
26
|
+
- [ ] Identificar a estrutura do projeto e a versão do Laravel
|
|
27
|
+
|
|
28
|
+
**Nota**: Se $ARGUMENTS for fornecido, utilizá-lo como caminho do projeto; caso contrário, usar o diretório atual.
|
|
29
|
+
|
|
30
|
+
### Etapa 2: Auditoria de Arquitetura (25 pontos)
|
|
31
|
+
|
|
32
|
+
Executar a verificação completa de arquitetura:
|
|
33
|
+
|
|
34
|
+
**Comando**: Usar o slash command `/laravel:check-architecture` ou seguir manualmente os passos em `check-architecture.md`
|
|
35
|
+
|
|
36
|
+
**Critérios Avaliados**:
|
|
37
|
+
- Separação de camadas em Clean Architecture (6 pts)
|
|
38
|
+
- Estrutura Domain/Application/Infrastructure (6 pts)
|
|
39
|
+
- Padrão de Actions e controllers enxutos (4 pts)
|
|
40
|
+
- Bindings de Service Providers (4 pts)
|
|
41
|
+
- Padrão Repository e interfaces (3 pts)
|
|
42
|
+
- Regras de dependência (2 pts)
|
|
43
|
+
|
|
44
|
+
**Referência**: `check-architecture.md`
|
|
33
45
|
|
|
34
|
-
###
|
|
46
|
+
### Etapa 3: Auditoria de Qualidade de Código (25 pontos)
|
|
35
47
|
|
|
36
|
-
|
|
37
|
-
- [ ] Controllers: Singular, PascalCase (`OrderController`)
|
|
38
|
-
- [ ] Models: Singular, PascalCase (`Order`, `OrderItem`)
|
|
39
|
-
- [ ] Tables: Plural, snake_case (`orders`, `order_items`)
|
|
40
|
-
- [ ] Columns: snake_case (`created_at`, `customer_id`)
|
|
41
|
-
- [ ] Methods: camelCase (`getUserOrders()`)
|
|
42
|
-
- [ ] Variables: camelCase (`$orderTotal`)
|
|
48
|
+
Executar a verificação de qualidade de código:
|
|
43
49
|
|
|
44
|
-
|
|
45
|
-
- [ ] Constructor property promotion used
|
|
46
|
-
- [ ] Readonly properties/classes where appropriate
|
|
47
|
-
- [ ] Enums for status/type fields
|
|
48
|
-
- [ ] Match expressions instead of switch
|
|
49
|
-
- [ ] Named arguments for clarity
|
|
50
|
-
- [ ] Type declarations on all methods
|
|
51
|
-
- [ ] Return types specified
|
|
50
|
+
**Comando**: Usar o slash command `/laravel:check-code-quality` ou seguir manualmente os passos em `check-code-quality.md`
|
|
52
51
|
|
|
53
|
-
|
|
54
|
-
-
|
|
55
|
-
-
|
|
56
|
-
-
|
|
57
|
-
-
|
|
58
|
-
-
|
|
59
|
-
-
|
|
52
|
+
**Critérios Avaliados**:
|
|
53
|
+
- Conformidade com PSR-12 e Laravel Pint (5 pts)
|
|
54
|
+
- Análise estática com PHPStan (5 pts)
|
|
55
|
+
- Funcionalidades modernas do PHP (enums, readonly, typed properties) (4 pts)
|
|
56
|
+
- Princípios KISS/DRY/YAGNI (4 pts)
|
|
57
|
+
- Convenções de nomenclatura (padrões Laravel) (4 pts)
|
|
58
|
+
- Tratamento de erros e logging (3 pts)
|
|
60
59
|
|
|
61
|
-
|
|
60
|
+
**Referência**: `check-code-quality.md`
|
|
62
61
|
|
|
63
|
-
|
|
64
|
-
- Domain layer has NO external dependencies
|
|
65
|
-
- Application layer only depends on Domain
|
|
66
|
-
- Infrastructure implements Domain interfaces
|
|
67
|
-
- Controllers are thin (delegate to Actions/Services)
|
|
62
|
+
### Etapa 4: Auditoria de Testes (25 pontos)
|
|
68
63
|
|
|
69
|
-
|
|
70
|
-
- [ ] Interfaces defined in Domain/Contracts
|
|
71
|
-
- [ ] Implementations in Infrastructure
|
|
72
|
-
- [ ] Bindings in Service Providers
|
|
64
|
+
Executar a verificação de testes:
|
|
73
65
|
|
|
74
|
-
|
|
66
|
+
**Comando**: Usar o slash command `/laravel:check-testing` ou seguir manualmente os passos em `check-testing.md`
|
|
75
67
|
|
|
76
|
-
|
|
77
|
-
-
|
|
78
|
-
-
|
|
79
|
-
-
|
|
68
|
+
**Critérios Avaliados**:
|
|
69
|
+
- Cobertura de código (7 pts)
|
|
70
|
+
- Testes unitários para lógica de Domínio (6 pts)
|
|
71
|
+
- Testes de funcionalidade para endpoints HTTP (4 pts)
|
|
72
|
+
- Uso do Pest PHP e qualidade dos testes (3 pts)
|
|
73
|
+
- Factories e seeders de banco de dados (3 pts)
|
|
74
|
+
- Isolamento de testes e mocking (2 pts)
|
|
80
75
|
|
|
81
|
-
|
|
76
|
+
**Referência**: `check-testing.md`
|
|
82
77
|
|
|
83
|
-
|
|
78
|
+
### Etapa 5: Auditoria de Segurança (25 pontos)
|
|
84
79
|
|
|
85
|
-
|
|
86
|
-
2. **Critical Issues**: Must-fix problems
|
|
87
|
-
3. **Warnings**: Recommended improvements
|
|
88
|
-
4. **Good Practices**: What's done well
|
|
89
|
-
5. **Action Items**: Prioritized list of fixes
|
|
80
|
+
Executar a verificação de segurança:
|
|
90
81
|
|
|
91
|
-
|
|
82
|
+
**Comando**: Usar o slash command `/laravel:check-security` ou seguir manualmente os passos em `check-security.md`
|
|
92
83
|
|
|
93
|
-
|
|
84
|
+
**Critérios Avaliados**:
|
|
85
|
+
- Proteções OWASP Top 10 (6 pts)
|
|
86
|
+
- Gestão de segredos e credenciais (5 pts)
|
|
87
|
+
- Validação com Form Request (4 pts)
|
|
88
|
+
- Vulnerabilidades de dependências (composer audit) (4 pts)
|
|
89
|
+
- Autenticação e Autorização (Policies) (3 pts)
|
|
90
|
+
- CSRF e configuração de middlewares (2 pts)
|
|
91
|
+
- Prevenção de injeção SQL (1 pt)
|
|
94
92
|
|
|
95
|
-
|
|
93
|
+
**Referência**: `check-security.md`
|
|
96
94
|
|
|
97
|
-
|
|
98
|
-
# Check code style
|
|
99
|
-
./vendor/bin/pint --test
|
|
95
|
+
### Etapa 6: Consolidação e Pontuação Global
|
|
100
96
|
|
|
101
|
-
|
|
102
|
-
|
|
97
|
+
Calcular a pontuação geral e produzir o relatório consolidado:
|
|
98
|
+
- [ ] Somar as 4 pontuações (máximo de 100 pontos)
|
|
99
|
+
- [ ] Identificar categorias críticas (<50%)
|
|
100
|
+
- [ ] Listar todos os problemas transversais críticos
|
|
101
|
+
- [ ] Priorizar ações por impacto/esforço
|
|
102
|
+
- [ ] Produzir o relatório consolidado final
|
|
103
103
|
|
|
104
|
-
|
|
105
|
-
|
|
104
|
+
**Escala de Avaliação**:
|
|
105
|
+
- 90-100: Excelente — Projeto de referência
|
|
106
|
+
- 75-89: Muito Bom — Algumas melhorias menores
|
|
107
|
+
- 60-74: Aceitável — Requer melhorias
|
|
108
|
+
- 40-59: Insuficiente — Refatoração significativa necessária
|
|
109
|
+
- 0-39: Crítico — Revisão completa necessária
|
|
110
|
+
|
|
111
|
+
### Etapa 7: Recomendações e Plano de Ação
|
|
112
|
+
|
|
113
|
+
Produzir as recomendações finais:
|
|
114
|
+
- [ ] Identificar as 3 ações prioritárias em todas as categorias
|
|
115
|
+
- [ ] Estimar o esforço (Baixo/Médio/Alto) para cada ação
|
|
116
|
+
- [ ] Estimar o impacto (Baixo/Médio/Alto) para cada ação
|
|
117
|
+
- [ ] Propor a ordem de implementação
|
|
118
|
+
- [ ] Sugerir ganhos rápidos (alta relação impacto/esforço)
|
|
119
|
+
|
|
120
|
+
## FORMATO DE SAÍDA
|
|
106
121
|
|
|
107
|
-
# Check for security vulnerabilities
|
|
108
|
-
composer audit
|
|
109
122
|
```
|
|
123
|
+
AUDITORIA DE CONFORMIDADE LARAVEL - RELATÓRIO COMPLETO
|
|
124
|
+
=======================================================
|
|
125
|
+
|
|
126
|
+
PONTUAÇÃO GERAL: XX/100
|
|
127
|
+
|
|
128
|
+
NÍVEL DE CONFORMIDADE: [Excelente/Muito Bom/Aceitável/Insuficiente/Crítico]
|
|
129
|
+
|
|
130
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
131
|
+
|
|
132
|
+
PONTUAÇÕES POR CATEGORIA:
|
|
133
|
+
|
|
134
|
+
ARQUITETURA : XX/25 [██████████░░░░░░░░░░] XX%
|
|
135
|
+
QUALIDADE DE CÓDIGO: XX/25 [██████████░░░░░░░░░░] XX%
|
|
136
|
+
TESTES : XX/25 [██████████░░░░░░░░░░] XX%
|
|
137
|
+
SEGURANÇA : XX/25 [██████████░░░░░░░░░░] XX%
|
|
138
|
+
|
|
139
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
140
|
+
|
|
141
|
+
PONTOS FORTES GERAIS:
|
|
142
|
+
1. [Ponto forte identificado em múltiplas categorias]
|
|
143
|
+
2. [Outro ponto forte principal]
|
|
144
|
+
3. [Terceiro ponto forte]
|
|
110
145
|
|
|
111
|
-
|
|
146
|
+
MELHORIAS GERAIS:
|
|
147
|
+
1. [Melhoria transversal menor]
|
|
148
|
+
2. [Outra melhoria recomendada]
|
|
149
|
+
3. [Terceira melhoria]
|
|
112
150
|
|
|
113
|
-
|
|
114
|
-
|
|
151
|
+
PROBLEMAS CRÍTICOS:
|
|
152
|
+
1. [Problema crítico nº 1 - categoria afetada]
|
|
153
|
+
2. [Problema crítico nº 2 - categoria afetada]
|
|
154
|
+
3. [Problema crítico nº 3 - categoria afetada]
|
|
115
155
|
|
|
116
|
-
|
|
117
|
-
- **Score**: 85/100
|
|
118
|
-
- **Critical Issues**: 2
|
|
119
|
-
- **Warnings**: 5
|
|
120
|
-
- **Files Analyzed**: 150
|
|
156
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
121
157
|
|
|
122
|
-
|
|
158
|
+
DETALHES POR CATEGORIA:
|
|
123
159
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
**Fix**: Create `StoreOrderRequest` and move validation rules
|
|
160
|
+
┌─────────────────────────────────────────────┐
|
|
161
|
+
│ ARQUITETURA (XX/25) │
|
|
162
|
+
└─────────────────────────────────────────────┘
|
|
128
163
|
|
|
129
|
-
|
|
164
|
+
Sub-pontuações:
|
|
165
|
+
• Camadas de Clean Architecture : XX/6
|
|
166
|
+
• Estrutura Domain/App/Infra : XX/6
|
|
167
|
+
• Actions e controllers enxutos : XX/4
|
|
168
|
+
• Bindings de Service Provider : XX/4
|
|
169
|
+
• Padrão Repository : XX/3
|
|
170
|
+
• Regras de dependência : XX/2
|
|
130
171
|
|
|
131
|
-
|
|
172
|
+
Pontos Fortes:
|
|
173
|
+
- [Pontos fortes de arquitetura]
|
|
132
174
|
|
|
133
|
-
|
|
175
|
+
Problemas:
|
|
176
|
+
- [Problemas de arquitetura]
|
|
134
177
|
|
|
135
|
-
|
|
178
|
+
[Seções semelhantes para Qualidade de Código, Testes e Segurança...]
|
|
136
179
|
|
|
137
|
-
|
|
138
|
-
2. [Recommendation 2]
|
|
180
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
139
181
|
|
|
140
|
-
|
|
182
|
+
TOP 3 AÇÕES PRIORITÁRIAS (TODAS AS CATEGORIAS):
|
|
141
183
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
184
|
+
1. CRÍTICO - [Ação nº 1]
|
|
185
|
+
Categoria : [Arquitetura/Qualidade/Testes/Segurança]
|
|
186
|
+
Impacto : [Alto/Médio/Baixo]
|
|
187
|
+
Esforço : [Alto/Médio/Baixo]
|
|
188
|
+
Prioridade: IMEDIATA
|
|
189
|
+
|
|
190
|
+
Descrição detalhada:
|
|
191
|
+
[Explicação do problema e solução proposta]
|
|
192
|
+
|
|
193
|
+
Arquivos afetados:
|
|
194
|
+
- [arquivo:linha]
|
|
195
|
+
|
|
196
|
+
Exemplo de correção:
|
|
197
|
+
[Código ou comando de correção]
|
|
198
|
+
|
|
199
|
+
2. IMPORTANTE - [Ação nº 2]
|
|
200
|
+
[Mesmo formato...]
|
|
201
|
+
|
|
202
|
+
3. RECOMENDADO - [Ação nº 3]
|
|
203
|
+
[Mesmo formato...]
|
|
204
|
+
|
|
205
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
206
|
+
|
|
207
|
+
GANHOS RÁPIDOS (Alto Impacto / Baixo Esforço):
|
|
208
|
+
|
|
209
|
+
- [Ganho rápido nº 1] - Categoria: [X] - Impacto: [X] - Esforço: [X]
|
|
210
|
+
- [Ganho rápido nº 2] - Categoria: [X] - Impacto: [X] - Esforço: [X]
|
|
211
|
+
- [Ganho rápido nº 3] - Categoria: [X] - Impacto: [X] - Esforço: [X]
|
|
212
|
+
|
|
213
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
214
|
+
|
|
215
|
+
PLANO DE AÇÃO RECOMENDADO:
|
|
216
|
+
|
|
217
|
+
SEMANA 1 (Imediato):
|
|
218
|
+
- [ ] [Ação crítica nº 1]
|
|
219
|
+
- [ ] [Ganho rápido prioritário]
|
|
220
|
+
|
|
221
|
+
SEMANAS 2-4 (Curto prazo):
|
|
222
|
+
- [ ] [Ação importante nº 2]
|
|
223
|
+
- [ ] [Outros ganhos rápidos]
|
|
224
|
+
|
|
225
|
+
MESES 2-3 (Médio prazo):
|
|
226
|
+
- [ ] [Ação recomendada nº 3]
|
|
227
|
+
- [ ] [Melhorias progressivas]
|
|
228
|
+
|
|
229
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
230
|
+
|
|
231
|
+
RESUMO EXECUTIVO:
|
|
232
|
+
|
|
233
|
+
[Parágrafo de síntese sobre o estado geral do projeto, principais pontos
|
|
234
|
+
fortes, principais pontos fracos e a trajetória recomendada para melhorar
|
|
235
|
+
a conformidade. Indicar se o projeto está pronto para produção,
|
|
236
|
+
requer correções ou necessita de refatoração.]
|
|
237
|
+
|
|
238
|
+
Recomendação Geral: [Pronto para produção / Correções menores /
|
|
239
|
+
Refatoração significativa / Revisão completa necessária]
|
|
240
|
+
|
|
241
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
145
242
|
```
|
|
243
|
+
|
|
244
|
+
## NOTAS IMPORTANTES
|
|
245
|
+
|
|
246
|
+
- Este comando orquestra as 4 auditorias especializadas
|
|
247
|
+
- Usar Docker para todas as ferramentas de análise
|
|
248
|
+
- Fornecer exemplos concretos com arquivo:linha para cada problema
|
|
249
|
+
- Priorizar ações com base na matriz Impacto/Esforço
|
|
250
|
+
- Problemas de segurança são SEMPRE a prioridade máxima
|
|
251
|
+
- Propor correções automatizáveis (scripts, hooks de pré-commit)
|
|
252
|
+
- O relatório deve ser acionável, não apenas descritivo
|
|
253
|
+
- Adaptar as recomendações ao contexto de negócio do projeto
|
|
@@ -4,28 +4,28 @@ description: Auditoria de Acessibilidade
|
|
|
4
4
|
|
|
5
5
|
# Auditoria de Acessibilidade
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Realize uma auditoria completa de acessibilidade (a11y) da aplicação React.
|
|
8
8
|
|
|
9
9
|
## O Que Este Comando Faz
|
|
10
10
|
|
|
11
|
-
1. **
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
- Verificar HTML
|
|
15
|
-
- Testar
|
|
11
|
+
1. **Análise de Acessibilidade**
|
|
12
|
+
- Verificar componentes em busca de problemas de a11y
|
|
13
|
+
- Checar rótulos ARIA
|
|
14
|
+
- Verificar HTML semântico
|
|
15
|
+
- Testar navegação por teclado
|
|
16
16
|
- Verificar contrastes de cores
|
|
17
17
|
|
|
18
|
-
2. **Ferramentas
|
|
18
|
+
2. **Ferramentas Utilizadas**
|
|
19
19
|
- eslint-plugin-jsx-a11y
|
|
20
20
|
- axe-core
|
|
21
21
|
- Lighthouse
|
|
22
22
|
- React DevTools
|
|
23
23
|
|
|
24
|
-
3. **
|
|
25
|
-
- Lista de
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
- Exemplos de
|
|
24
|
+
3. **Relatório Gerado**
|
|
25
|
+
- Lista de violações de a11y
|
|
26
|
+
- Nível de severidade (crítico, sério, moderado, menor)
|
|
27
|
+
- Recomendações acionáveis
|
|
28
|
+
- Exemplos de código para correções
|
|
29
29
|
|
|
30
30
|
## Como Usar
|
|
31
31
|
|
|
@@ -37,29 +37,29 @@ npm run a11y:check
|
|
|
37
37
|
pnpm a11y:check
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
-
## Modo
|
|
40
|
+
## Modo de Planejamento
|
|
41
41
|
|
|
42
|
-
> O modo
|
|
42
|
+
> O modo de planejamento é ativado automaticamente quando o escopo abrange múltiplos módulos ou requer investigação transversal.
|
|
43
43
|
|
|
44
44
|
## O Que Verificar
|
|
45
45
|
|
|
46
|
-
### 1. HTML
|
|
46
|
+
### 1. HTML Semântico
|
|
47
47
|
|
|
48
48
|
```typescript
|
|
49
|
-
// ❌ Ruim -
|
|
50
|
-
<div onClick={handleClick}>Clique
|
|
49
|
+
// ❌ Ruim - Não semântico
|
|
50
|
+
<div onClick={handleClick}>Clique aqui</div>
|
|
51
51
|
|
|
52
|
-
// ✅ Bom -
|
|
53
|
-
<button onClick={handleClick}>Clique
|
|
52
|
+
// ✅ Bom - Semântico
|
|
53
|
+
<button onClick={handleClick}>Clique aqui</button>
|
|
54
54
|
```
|
|
55
55
|
|
|
56
|
-
### 2.
|
|
56
|
+
### 2. Rótulos ARIA
|
|
57
57
|
|
|
58
58
|
```typescript
|
|
59
|
-
// ❌ Ruim -
|
|
59
|
+
// ❌ Ruim - Sem rótulo
|
|
60
60
|
<input type="text" />
|
|
61
61
|
|
|
62
|
-
// ✅ Bom - Com
|
|
62
|
+
// ✅ Bom - Com label
|
|
63
63
|
<label htmlFor="name">Nome</label>
|
|
64
64
|
<input id="name" type="text" />
|
|
65
65
|
|
|
@@ -69,13 +69,13 @@ pnpm a11y:check
|
|
|
69
69
|
</button>
|
|
70
70
|
```
|
|
71
71
|
|
|
72
|
-
### 3.
|
|
72
|
+
### 3. Navegação por Teclado
|
|
73
73
|
|
|
74
74
|
```typescript
|
|
75
|
-
// ✅ Bom -
|
|
76
|
-
<button onClick={handleClick}>
|
|
75
|
+
// ✅ Bom - Navegação por Tab funciona
|
|
76
|
+
<button onClick={handleClick}>Ação</button>
|
|
77
77
|
|
|
78
|
-
// ✅ Bom -
|
|
78
|
+
// ✅ Bom - Tratamento de teclado personalizado
|
|
79
79
|
<div
|
|
80
80
|
role="button"
|
|
81
81
|
tabIndex={0}
|
|
@@ -86,38 +86,147 @@ pnpm a11y:check
|
|
|
86
86
|
}
|
|
87
87
|
}}
|
|
88
88
|
>
|
|
89
|
-
|
|
89
|
+
Botão Personalizado
|
|
90
90
|
</div>
|
|
91
91
|
```
|
|
92
92
|
|
|
93
93
|
### 4. Contraste de Cores
|
|
94
94
|
|
|
95
|
-
-
|
|
96
|
-
- WCAG AA: 4
|
|
95
|
+
- O texto deve ter uma taxa de contraste suficiente
|
|
96
|
+
- WCAG AA: 4,5:1 para texto normal
|
|
97
97
|
- WCAG AAA: 7:1 para texto normal
|
|
98
|
-
-
|
|
98
|
+
- Use ferramentas para verificar os contrastes
|
|
99
99
|
|
|
100
100
|
### 5. Texto Alternativo para Imagens
|
|
101
101
|
|
|
102
102
|
```typescript
|
|
103
|
-
// ❌ Ruim -
|
|
104
|
-
<img src="
|
|
103
|
+
// ❌ Ruim - Alt ausente
|
|
104
|
+
<img src="photo.jpg" />
|
|
105
105
|
|
|
106
106
|
// ✅ Bom - Alt descritivo
|
|
107
|
-
<img src="
|
|
107
|
+
<img src="photo.jpg" alt="Equipe da empresa na conferência anual" />
|
|
108
108
|
|
|
109
109
|
// ✅ Bom - Imagem decorativa
|
|
110
|
-
<img src="
|
|
110
|
+
<img src="decoration.jpg" alt="" role="presentation" />
|
|
111
111
|
```
|
|
112
112
|
|
|
113
|
-
##
|
|
113
|
+
## Configuração
|
|
114
|
+
|
|
115
|
+
### ESLint (eslint-plugin-jsx-a11y)
|
|
116
|
+
|
|
117
|
+
```json
|
|
118
|
+
// .eslintrc.json
|
|
119
|
+
{
|
|
120
|
+
"extends": [
|
|
121
|
+
"plugin:jsx-a11y/recommended"
|
|
122
|
+
],
|
|
123
|
+
"rules": {
|
|
124
|
+
"jsx-a11y/alt-text": "error",
|
|
125
|
+
"jsx-a11y/anchor-is-valid": "error",
|
|
126
|
+
"jsx-a11y/aria-props": "error",
|
|
127
|
+
"jsx-a11y/aria-role": "error",
|
|
128
|
+
"jsx-a11y/click-events-have-key-events": "error",
|
|
129
|
+
"jsx-a11y/label-has-associated-control": "error",
|
|
130
|
+
"jsx-a11y/no-noninteractive-element-interactions": "error"
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### Testes Automatizados com axe-core
|
|
136
|
+
|
|
137
|
+
```typescript
|
|
138
|
+
// test/a11y.test.tsx
|
|
139
|
+
import { render } from '@testing-library/react';
|
|
140
|
+
import { axe, toHaveNoViolations } from 'jest-axe';
|
|
141
|
+
import { MyComponent } from './MyComponent';
|
|
142
|
+
|
|
143
|
+
expect.extend(toHaveNoViolations);
|
|
144
|
+
|
|
145
|
+
describe('Acessibilidade', () => {
|
|
146
|
+
it('não deve ter violações de a11y', async () => {
|
|
147
|
+
const { container } = render(<MyComponent />);
|
|
148
|
+
const results = await axe(container);
|
|
149
|
+
expect(results).toHaveNoViolations();
|
|
150
|
+
});
|
|
151
|
+
});
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
## Problemas Comuns e Correções
|
|
155
|
+
|
|
156
|
+
### Problema 1: Rótulos de Formulário Ausentes
|
|
157
|
+
|
|
158
|
+
```typescript
|
|
159
|
+
// ❌ Problema
|
|
160
|
+
<input type="email" placeholder="Email" />
|
|
161
|
+
|
|
162
|
+
// ✅ Solução
|
|
163
|
+
<label htmlFor="email">Email</label>
|
|
164
|
+
<input id="email" type="email" placeholder="seu@email.com" />
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
### Problema 2: Elementos Não Interativos com Manipuladores de Clique
|
|
168
|
+
|
|
169
|
+
```typescript
|
|
170
|
+
// ❌ Problema
|
|
171
|
+
<div onClick={handleClick}>Clique aqui</div>
|
|
172
|
+
|
|
173
|
+
// ✅ Solução 1: Usar button
|
|
174
|
+
<button onClick={handleClick}>Clique aqui</button>
|
|
175
|
+
|
|
176
|
+
// ✅ Solução 2: Adicionar role adequado e suporte a teclado
|
|
177
|
+
<div
|
|
178
|
+
role="button"
|
|
179
|
+
tabIndex={0}
|
|
180
|
+
onClick={handleClick}
|
|
181
|
+
onKeyDown={(e) => e.key === 'Enter' && handleClick()}
|
|
182
|
+
>
|
|
183
|
+
Clique aqui
|
|
184
|
+
</div>
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
### Problema 3: Texto Alternativo Ausente
|
|
188
|
+
|
|
189
|
+
```typescript
|
|
190
|
+
// ❌ Problema
|
|
191
|
+
<img src="logo.png" />
|
|
192
|
+
|
|
193
|
+
// ✅ Solução
|
|
194
|
+
<img src="logo.png" alt="Logo da Empresa" />
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
### Problema 4: Informação Transmitida Apenas por Cor
|
|
198
|
+
|
|
199
|
+
```typescript
|
|
200
|
+
// ❌ Problema
|
|
201
|
+
<span style={{ color: 'red' }}>Erro</span>
|
|
202
|
+
|
|
203
|
+
// ✅ Solução
|
|
204
|
+
<span style={{ color: 'red' }} aria-label="Erro">
|
|
205
|
+
<ErrorIcon aria-hidden="true" /> Erro
|
|
206
|
+
</span>
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
## Testes com Lighthouse
|
|
210
|
+
|
|
211
|
+
```bash
|
|
212
|
+
# Instalar Lighthouse
|
|
213
|
+
npm install -g lighthouse
|
|
214
|
+
|
|
215
|
+
# Executar auditoria
|
|
216
|
+
lighthouse http://localhost:3000 --view
|
|
217
|
+
|
|
218
|
+
# Salvar relatório
|
|
219
|
+
lighthouse http://localhost:3000 --output html --output-path ./report.html
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
## Boas Práticas
|
|
114
223
|
|
|
115
|
-
1. **
|
|
116
|
-
2. **
|
|
117
|
-
3. **
|
|
118
|
-
4. **
|
|
119
|
-
5. **
|
|
120
|
-
6. **
|
|
224
|
+
1. **Use HTML semântico** (button, nav, main, header, footer)
|
|
225
|
+
2. **Adicione rótulos ARIA** onde necessário
|
|
226
|
+
3. **Teste a navegação por teclado** (Tab, Enter, Escape)
|
|
227
|
+
4. **Verifique contrastes de cores** (mínimo WCAG AA)
|
|
228
|
+
5. **Forneça texto alternativo** para imagens
|
|
229
|
+
6. **Suporte a leitores de tela**
|
|
121
230
|
7. **Testes automatizados** com axe-core
|
|
122
231
|
8. **Testes manuais** com leitores de tela (NVDA, JAWS, VoiceOver)
|
|
123
232
|
|
|
@@ -125,5 +234,5 @@ pnpm a11y:check
|
|
|
125
234
|
|
|
126
235
|
- [Diretrizes WCAG](https://www.w3.org/WAI/WCAG21/quickref/)
|
|
127
236
|
- [MDN Acessibilidade](https://developer.mozilla.org/pt-BR/docs/Web/Accessibility)
|
|
128
|
-
- [React Acessibilidade](https://
|
|
237
|
+
- [React Acessibilidade](https://react.dev/learn/accessibility)
|
|
129
238
|
- [axe DevTools](https://www.deque.com/axe/devtools/)
|