@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.
Files changed (79) hide show
  1. package/Dev/i18n/de/Angular/commands/check-compliance.md +218 -168
  2. package/Dev/i18n/de/Common/agents/refactoring-specialist.md +146 -69
  3. package/Dev/i18n/de/Common/commands/add-technology.md +166 -68
  4. package/Dev/i18n/de/Common/commands/setup-ci.md +216 -33
  5. package/Dev/i18n/de/Laravel/commands/check-compliance.md +223 -115
  6. package/Dev/i18n/de/Python/checklists/new-feature.md +319 -44
  7. package/Dev/i18n/de/React/rules/02-architecture.md +483 -322
  8. package/Dev/i18n/de/React/rules/03-coding-standards.md +584 -368
  9. package/Dev/i18n/de/Symfony/commands/check-compliance.md +186 -114
  10. package/Dev/i18n/de/Symfony/rules/07-testing-symfony.md +679 -10
  11. package/Dev/i18n/de/UIUX/commands/a11y-component.md +284 -26
  12. package/Dev/i18n/de/UIUX/commands/design-tokens.md +199 -35
  13. package/Dev/i18n/de/UIUX/commands/user-flow.md +179 -16
  14. package/Dev/i18n/de/VueJS/commands/check-compliance.md +227 -102
  15. package/Dev/i18n/es/Angular/commands/check-compliance.md +217 -167
  16. package/Dev/i18n/es/Common/commands/add-technology.md +158 -60
  17. package/Dev/i18n/es/Laravel/commands/check-compliance.md +223 -115
  18. package/Dev/i18n/es/React/commands/check-testing.md +263 -169
  19. package/Dev/i18n/es/ReactNative/commands/check-testing.md +256 -198
  20. package/Dev/i18n/es/Symfony/commands/check-compliance.md +189 -117
  21. package/Dev/i18n/es/Symfony/commands/check-testing.md +301 -102
  22. package/Dev/i18n/es/Symfony/commands/migration-plan.md +267 -34
  23. package/Dev/i18n/es/UIUX/commands/a11y-component.md +274 -16
  24. package/Dev/i18n/es/UIUX/commands/design-tokens.md +186 -22
  25. package/Dev/i18n/es/UIUX/commands/user-flow.md +173 -10
  26. package/Dev/i18n/es/VueJS/commands/check-compliance.md +227 -102
  27. package/Dev/i18n/fr/Angular/commands/check-compliance.md +217 -167
  28. package/Dev/i18n/fr/Common/commands/ralph-run.md +138 -60
  29. package/Dev/i18n/fr/Laravel/commands/check-compliance.md +223 -115
  30. package/Dev/i18n/fr/React/commands/check-architecture.md +370 -53
  31. package/Dev/i18n/fr/React/commands/check-code-quality.md +454 -64
  32. package/Dev/i18n/fr/React/commands/check-testing.md +476 -102
  33. package/Dev/i18n/fr/Symfony/commands/check-compliance.md +188 -116
  34. package/Dev/i18n/fr/VueJS/commands/check-compliance.md +227 -102
  35. package/Dev/i18n/pt/Angular/commands/check-compliance.md +225 -175
  36. package/Dev/i18n/pt/Common/agents/ralph-conductor.md +211 -30
  37. package/Dev/i18n/pt/Common/commands/add-technology.md +149 -51
  38. package/Dev/i18n/pt/Common/commands/ralph-run.md +239 -35
  39. package/Dev/i18n/pt/Flutter/commands/analyze-performance.md +331 -46
  40. package/Dev/i18n/pt/Flutter/commands/check-compliance.md +234 -29
  41. package/Dev/i18n/pt/Flutter/commands/generate-feature.md +526 -51
  42. package/Dev/i18n/pt/Flutter/commands/generate-widget.md +515 -27
  43. package/Dev/i18n/pt/Flutter/commands/golden-update.md +322 -46
  44. package/Dev/i18n/pt/Flutter/commands/localization-check.md +278 -37
  45. package/Dev/i18n/pt/Laravel/commands/check-compliance.md +212 -104
  46. package/Dev/i18n/pt/React/commands/accessibility-check.md +151 -42
  47. package/Dev/i18n/pt/React/commands/bundle-analyze.md +300 -25
  48. package/Dev/i18n/pt/React/commands/check-architecture.md +369 -34
  49. package/Dev/i18n/pt/React/commands/check-code-quality.md +440 -34
  50. package/Dev/i18n/pt/React/commands/check-compliance.md +232 -62
  51. package/Dev/i18n/pt/React/commands/check-security.md +370 -31
  52. package/Dev/i18n/pt/React/commands/check-testing.md +473 -43
  53. package/Dev/i18n/pt/React/commands/generate-component.md +454 -19
  54. package/Dev/i18n/pt/React/commands/generate-hook.md +425 -24
  55. package/Dev/i18n/pt/React/commands/storybook-story.md +520 -35
  56. package/Dev/i18n/pt/ReactNative/commands/app-size.md +358 -387
  57. package/Dev/i18n/pt/ReactNative/commands/check-code-quality.md +246 -75
  58. package/Dev/i18n/pt/ReactNative/commands/check-compliance.md +191 -85
  59. package/Dev/i18n/pt/ReactNative/commands/check-security.md +363 -115
  60. package/Dev/i18n/pt/ReactNative/commands/check-testing.md +269 -79
  61. package/Dev/i18n/pt/ReactNative/commands/generate-screen.md +491 -324
  62. package/Dev/i18n/pt/ReactNative/commands/native-module.md +539 -82
  63. package/Dev/i18n/pt/ReactNative/commands/store-prepare.md +429 -185
  64. package/Dev/i18n/pt/ReactNative/rules/02-architecture.md +1084 -31
  65. package/Dev/i18n/pt/Symfony/commands/check-compliance.md +195 -123
  66. package/Dev/i18n/pt/UIUX/commands/a11y-audit.md +208 -24
  67. package/Dev/i18n/pt/UIUX/commands/a11y-component.md +281 -23
  68. package/Dev/i18n/pt/UIUX/commands/design-tokens.md +197 -33
  69. package/Dev/i18n/pt/UIUX/commands/user-flow.md +183 -20
  70. package/Dev/i18n/pt/VueJS/commands/check-compliance.md +228 -103
  71. package/Dev/i18n/pt/Workflow/commands/analyze.md +147 -146
  72. package/Dev/i18n/pt/Workflow/commands/design.md +205 -204
  73. package/Dev/i18n/pt/Workflow/commands/implement.md +184 -184
  74. package/Project/i18n/de/Sprint/commands/dev.md +339 -86
  75. package/Project/i18n/es/Sprint/commands/dev.md +342 -91
  76. package/Project/i18n/pt/Sprint/commands/dev.md +343 -92
  77. package/bundles/cursor/.cursorrules +1 -1
  78. package/bundles/windsurf/.windsurfrules +1 -1
  79. package/package.json +1 -1
@@ -1,145 +1,253 @@
1
1
  ---
2
- description: Check Laravel project compliance with coding standards
2
+ description: Verificar Conformidade Completa do Laravel
3
+ argument-hint: [arguments]
3
4
  ---
4
5
 
5
- # Laravel Compliance Check
6
+ # Verificar Conformidade Completa do Laravel
6
7
 
7
- You are a Laravel expert auditor. Your mission is to verify that the project follows Laravel best practices and coding standards.
8
+ ## Argumentos
8
9
 
9
- ## Audit Process
10
+ $ARGUMENTS (opcional: caminho para o projeto a analisar)
10
11
 
11
- ### 1. Project Structure Analysis
12
+ ## Modo de Planejamento
12
13
 
13
- Check if the project follows the recommended architecture:
14
+ > O modo de planejamento é ativado automaticamente quando o escopo abrange múltiplos módulos ou requer investigação transversal.
14
15
 
15
- ```
16
- app/
17
- ├── Domain/ # Business logic (if using Clean Architecture)
18
- ├── Application/ # Use cases, Actions, DTOs
19
- ├── Infrastructure/ # External services, Repositories
20
- ├── Http/
21
- │ ├── Controllers/ # Thin controllers
22
- │ ├── Requests/ # Form Requests for validation
23
- │ ├── Resources/ # API Resources
24
- │ └── Middleware/
25
- ├── Models/ # Eloquent models
26
- ├── Services/ # Business services
27
- ├── Jobs/ # Queue jobs
28
- ├── Events/ # Domain events
29
- ├── Listeners/ # Event listeners
30
- ├── Policies/ # Authorization policies
31
- └── Providers/ # Service providers
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
- ### 2. Code Standards Verification
46
+ ### Etapa 3: Auditoria de Qualidade de Código (25 pontos)
35
47
 
36
- #### Naming Conventions
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
- #### Modern PHP Features (8.3+)
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
- #### Laravel Conventions
54
- - [ ] Form Requests for validation (not validation in controllers)
55
- - [ ] API Resources for response transformation
56
- - [ ] Policies for authorization
57
- - [ ] Eloquent casts for type conversion
58
- - [ ] Scopes for reusable queries
59
- - [ ] Events for cross-cutting concerns
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
- ### 3. Architecture Compliance
60
+ **Referência**: `check-code-quality.md`
62
61
 
63
- #### Layer Dependencies
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
- #### Repository Pattern (if applicable)
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
- ### 4. Configuration Check
66
+ **Comando**: Usar o slash command `/laravel:check-testing` ou seguir manualmente os passos em `check-testing.md`
75
67
 
76
- - [ ] No hardcoded values (use config files)
77
- - [ ] Environment variables via config(), not env()
78
- - [ ] Sensitive data in .env (not committed)
79
- - [ ] Config caching compatible
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
- ### 5. Generate Report
76
+ **Referência**: `check-testing.md`
82
77
 
83
- After analysis, provide:
78
+ ### Etapa 5: Auditoria de Segurança (25 pontos)
84
79
 
85
- 1. **Compliance Score**: X/100
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
- ## Modo Plano
82
+ **Comando**: Usar o slash command `/laravel:check-security` ou seguir manualmente os passos em `check-security.md`
92
83
 
93
- > O modo plano é ativado automaticamente quando o escopo abrange vários módulos ou requer investigação transversal.
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
- ## Commands to Run
93
+ **Referência**: `check-security.md`
96
94
 
97
- ```bash
98
- # Check code style
99
- ./vendor/bin/pint --test
95
+ ### Etapa 6: Consolidação e Pontuação Global
100
96
 
101
- # Static analysis
102
- ./vendor/bin/phpstan analyse
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
- # Run tests
105
- php artisan test
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
- ## Output Format
146
+ MELHORIAS GERAIS:
147
+ 1. [Melhoria transversal menor]
148
+ 2. [Outra melhoria recomendada]
149
+ 3. [Terceira melhoria]
112
150
 
113
- ```markdown
114
- # Laravel Compliance Report
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
- ## Summary
117
- - **Score**: 85/100
118
- - **Critical Issues**: 2
119
- - **Warnings**: 5
120
- - **Files Analyzed**: 150
156
+ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
121
157
 
122
- ## Critical Issues
158
+ DETALHES POR CATEGORIA:
123
159
 
124
- ### 1. Missing Form Request Validation
125
- **File**: `app/Http/Controllers/OrderController.php:45`
126
- **Issue**: Validation done in controller instead of Form Request
127
- **Fix**: Create `StoreOrderRequest` and move validation rules
160
+ ┌─────────────────────────────────────────────┐
161
+ ARQUITETURA (XX/25) │
162
+ └─────────────────────────────────────────────┘
128
163
 
129
- ### 2. [Issue description]
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
- ## Warnings
172
+ Pontos Fortes:
173
+ - [Pontos fortes de arquitetura]
132
174
 
133
- ### 1. [Warning description]
175
+ Problemas:
176
+ - [Problemas de arquitetura]
134
177
 
135
- ## Recommendations
178
+ [Seções semelhantes para Qualidade de Código, Testes e Segurança...]
136
179
 
137
- 1. [Recommendation 1]
138
- 2. [Recommendation 2]
180
+ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
139
181
 
140
- ## Good Practices Observed
182
+ TOP 3 AÇÕES PRIORITÁRIAS (TODAS AS CATEGORIAS):
141
183
 
142
- - Using Eloquent casts for type conversion
143
- - Proper use of API Resources
144
- - Events for decoupling
184
+ 1. CRÍTICO - [Ação 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
- Realizar uma auditoria completa de acessibilidade (a11y) da aplicacao React.
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. **Analise de Acessibilidade**
12
- - Escanear componentes em busca de problemas de a11y
13
- - Verificar rotulos ARIA
14
- - Verificar HTML semantico
15
- - Testar navegacao por teclado
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 Usadas**
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. **Relatorio Gerado**
25
- - Lista de violacoes de a11y
26
- - Nivel de severidade (critico, serio, moderado, menor)
27
- - Recomendacoes acionaveis
28
- - Exemplos de codigo para correcoes
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 Plano
40
+ ## Modo de Planejamento
41
41
 
42
- > O modo plano é ativado automaticamente quando o escopo abrange vários módulos ou requer investigação transversal.
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 Semantico
46
+ ### 1. HTML Semântico
47
47
 
48
48
  ```typescript
49
- // ❌ Ruim - Nao-semantico
50
- <div onClick={handleClick}>Clique em mim</div>
49
+ // ❌ Ruim - Não semântico
50
+ <div onClick={handleClick}>Clique aqui</div>
51
51
 
52
- // ✅ Bom - Semantico
53
- <button onClick={handleClick}>Clique em mim</button>
52
+ // ✅ Bom - Semântico
53
+ <button onClick={handleClick}>Clique aqui</button>
54
54
  ```
55
55
 
56
- ### 2. Rotulos ARIA
56
+ ### 2. Rótulos ARIA
57
57
 
58
58
  ```typescript
59
- // ❌ Ruim - Faltando rotulo
59
+ // ❌ Ruim - Sem rótulo
60
60
  <input type="text" />
61
61
 
62
- // ✅ Bom - Com rotulo
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. Navegacao por Teclado
72
+ ### 3. Navegação por Teclado
73
73
 
74
74
  ```typescript
75
- // ✅ Bom - Navegacao por Tab funciona
76
- <button onClick={handleClick}>Acao</button>
75
+ // ✅ Bom - Navegação por Tab funciona
76
+ <button onClick={handleClick}>Ação</button>
77
77
 
78
- // ✅ Bom - Manipulacao de teclado personalizada
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
- Botao Personalizado
89
+ Botão Personalizado
90
90
  </div>
91
91
  ```
92
92
 
93
93
  ### 4. Contraste de Cores
94
94
 
95
- - Texto deve ter razao de contraste suficiente
96
- - WCAG AA: 4.5:1 para texto normal
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
- - Usar ferramentas para verificar contrastes
98
+ - Use ferramentas para verificar os contrastes
99
99
 
100
100
  ### 5. Texto Alternativo para Imagens
101
101
 
102
102
  ```typescript
103
- // ❌ Ruim - Faltando alt
104
- <img src="foto.jpg" />
103
+ // ❌ Ruim - Alt ausente
104
+ <img src="photo.jpg" />
105
105
 
106
106
  // ✅ Bom - Alt descritivo
107
- <img src="foto.jpg" alt="Equipe da empresa na conferencia anual" />
107
+ <img src="photo.jpg" alt="Equipe da empresa na conferência anual" />
108
108
 
109
109
  // ✅ Bom - Imagem decorativa
110
- <img src="decoracao.jpg" alt="" role="presentation" />
110
+ <img src="decoration.jpg" alt="" role="presentation" />
111
111
  ```
112
112
 
113
- ## Melhores Praticas
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. **Usar HTML semantico** (button, nav, main, header, footer)
116
- 2. **Adicionar rotulos ARIA** quando necessario
117
- 3. **Testar navegacao por teclado** (Tab, Enter, Escape)
118
- 4. **Verificar contrastes de cores** (minimo WCAG AA)
119
- 5. **Fornecer texto alternativo** para imagens
120
- 6. **Suportar leitores de tela**
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://pt-br.react.dev/learn/accessibility)
237
+ - [React Acessibilidade](https://react.dev/learn/accessibility)
129
238
  - [axe DevTools](https://www.deque.com/axe/devtools/)