@the-bearded-bear/claude-craft 3.0.0

package/Dev/i18n/pt/React/README.md

@@ -0,0 +1,295 @@
+# Regras de Desenvolvimento React TypeScript para Claude Code
+
+## Visão Geral
+
+Esta pasta contém um conjunto completo de regras, templates e checklists para o desenvolvimento React TypeScript com Claude Code. Essas regras asseguram a consistência, qualidade e manutenibilidade do código em todos os seus projetos React.
+
+## Estrutura da Pasta
+
+```
+React/
+├── CLAUDE.md.template          # Configuração principal (copiar para seu projeto)
+├── README.md                   # Este arquivo
+│
+├── rules/                      # Regras de desenvolvimento detalhadas
+│   ├── 00-project-context.md.template
+│   ├── 01-workflow-analysis.md
+│   ├── 02-architecture.md
+│   ├── 03-coding-standards.md
+│   ├── 04-solid-principles.md
+│   ├── 05-kiss-dry-yagni.md
+│   ├── 06-tooling.md
+│   ├── 07-testing.md
+│   ├── 08-quality-tools.md
+│   ├── 09-git-workflow.md
+│   ├── 10-documentation.md
+│   ├── 11-security.md
+│   ├── 12-performance.md          # A criar
+│   ├── 13-state-management.md     # A criar
+│   └── 14-styling.md              # A criar
+│
+├── templates/                  # Templates de código
+│   ├── component.md           # Template componente React
+│   ├── hook.md                # Template hook personalizado
+│   ├── context.md             # A criar
+│   ├── test-component.md      # A criar
+│   └── test-hook.md           # A criar
+│
+└── checklists/                # Checklists de validação
+    ├── pre-commit.md          # Checklist antes do commit
+    ├── new-feature.md         # Checklist nova funcionalidade
+    ├── refactoring.md         # A criar
+    └── security.md            # A criar
+```
+
+## Utilização
+
+### 1. Inicializar um Novo Projeto
+
+1. **Copiar CLAUDE.md.template** para seu projeto:
+   ```bash
+   cp CLAUDE.md.template /path/to/your/project/CLAUDE.md
+   ```
+
+2. **Substituir os placeholders** em CLAUDE.md:
+   - `{{PROJECT_NAME}}`: Nome do seu projeto
+   - `{{TECH_STACK}}`: Stack técnico completo
+   - `{{REACT_VERSION}}`: Versão do React
+   - `{{TYPESCRIPT_VERSION}}`: Versão do TypeScript
+   - `{{BUILD_TOOL}}`: Vite, Next.js, etc.
+   - `{{PACKAGE_MANAGER}}`: pnpm, npm, yarn
+   - Etc.
+
+3. **Copiar rules/00-project-context.md.template**:
+   ```bash
+   cp rules/00-project-context.md.template /path/to/your/project/docs/project-context.md
+   ```
+
+4. **Preencher o contexto do projeto** com as informações específicas.
+
+### 2. Configurar Claude Code
+
+No seu projeto, Claude Code lerá automaticamente o arquivo `CLAUDE.md` e aplicará todas as regras definidas.
+
+### 3. Referenciar as Regras
+
+Cada arquivo de regras pode ser referenciado no CLAUDE.md principal:
+
+```markdown
+**Referência**: `rules/01-workflow-analysis.md`
+```
+
+Claude Code terá acesso a todas essas regras para assisti-lo no desenvolvimento.
+
+## Regras Principais
+
+### 1. Fluxo de Análise (01-workflow-analysis.md)
+
+**Antes de escrever código, SEMPRE**:
+- Analisar o código existente
+- Compreender a necessidade
+- Projetar a solução
+- Documentar as decisões
+
+### 2. Arquitetura (02-architecture.md)
+
+- **Feature-based**: Organização por funcionalidade de negócio
+- **Atomic Design**: Hierarquia atoms → molecules → organisms → templates
+- **Container/Presenter**: Separação lógica/apresentação
+- **Hooks Personalizados**: Lógica reutilizável
+
+### 3. Padrões de Código (03-coding-standards.md)
+
+- **TypeScript Strict**: Modo estrito ativado
+- **ESLint**: Configuração estrita
+- **Prettier**: Formatação automática
+- **Convenções**: Nomenclatura coerente
+
+### 4. Princípios SOLID (04-solid-principles.md)
+
+Aplicação dos princípios SOLID no React com exemplos concretos.
+
+### 5. KISS, DRY, YAGNI (05-kiss-dry-yagni.md)
+
+- **KISS**: Simplicidade acima de tudo
+- **DRY**: Evitar duplicação inteligentemente
+- **YAGNI**: Implementar apenas o necessário
+
+### 6. Tooling (06-tooling.md)
+
+Configuração completa de:
+- Vite / Next.js
+- pnpm / npm
+- Docker + Makefile
+- Build optimization
+
+### 7. Tests (07-testing.md)
+
+- **Pirâmide de testes**: 70% unitários, 20% integração, 10% E2E
+- **Vitest**: Testes unitários
+- **React Testing Library**: Testes componentes
+- **MSW**: Mock API
+- **Playwright**: Testes E2E
+
+### 8. Qualidade (08-quality-tools.md)
+
+- **ESLint**: Linting
+- **Prettier**: Formatting
+- **TypeScript**: Type checking
+- **Husky**: Git hooks
+- **Commitlint**: Conventional commits
+
+### 9. Git Workflow (09-git-workflow.md)
+
+- **Git Flow**: Estratégia de branching
+- **Conventional Commits**: Mensagens padronizadas
+- **Pull Requests**: Fluxo de revisão
+- **Versioning**: Semantic versioning
+
+### 10. Documentação (10-documentation.md)
+
+- **JSDoc/TSDoc**: Documentação do código
+- **Storybook**: Documentação dos componentes
+- **README**: Documentação do projeto
+- **Changelog**: Histórico de versões
+
+### 11. Segurança (11-security.md)
+
+- **XSS Prevention**: Sanitização do HTML
+- **CSRF Protection**: Tokens e validação
+- **Input Validation**: Zod schemas
+- **Authentication**: JWT, protected routes
+- **Dependencies**: Auditoria regular
+
+## Templates de Código
+
+### Componente React (templates/component.md)
+
+Template completo para criar componentes React com:
+- TypeScript
+- Props tipadas
+- JSDoc
+- Testes
+- Storybook
+
+### Hook Personalizado (templates/hook.md)
+
+Template para criar hooks personalizados com:
+- TypeScript
+- Documentação
+- Testes
+- Exemplos de uso
+
+## Checklists
+
+### Pre-Commit (checklists/pre-commit.md)
+
+Checklist a verificar antes de cada commit:
+- Code quality
+- Testes
+- Documentação
+- Segurança
+- Git
+
+### Nova Funcionalidade (checklists/new-feature.md)
+
+Fluxo completo para implementar uma nova funcionalidade:
+1. Análise e planejamento
+2. Design técnico
+3. Implementação
+4. Testes
+5. Qualidade e desempenho
+6. Documentação
+7. Revisão e merge
+8. Deploy e monitoramento
+
+## Comandos Úteis
+
+### Desenvolvimento
+
+```bash
+# Criar um novo projeto React + TypeScript
+npm create vite@latest my-app -- --template react-ts
+cd my-app
+pnpm install
+
+# Copiar as regras
+cp /path/to/React/CLAUDE.md.template ./CLAUDE.md
+```
+
+### Qualidade
+
+```bash
+# Verificar tudo
+pnpm run quality
+
+# Detalhe
+pnpm run lint
+pnpm run type-check
+pnpm run test
+pnpm run build
+```
+
+## Arquivos Restantes a Criar
+
+Para completar este sistema de regras, falta criar:
+
+### Rules
+
+- [ ] `12-performance.md`: Otimizações React (memo, lazy, code splitting)
+- [ ] `13-state-management.md`: React Query, Zustand, Context API
+- [ ] `14-styling.md`: Tailwind, CSS Modules, styled-components
+
+### Templates
+
+- [ ] `context.md`: Template de Context Provider
+- [ ] `test-component.md`: Template de teste componente
+- [ ] `test-hook.md`: Template de teste hook
+
+### Checklists
+
+- [ ] `refactoring.md`: Checklist de refactoring seguro
+- [ ] `security.md`: Auditoria de segurança completa
+
+## Contribuição
+
+Para melhorar essas regras:
+
+1. Criar um branch `feature/improve-react-rules`
+2. Modificar os arquivos de regras
+3. Testar em um projeto real
+4. Criar uma Pull Request com as melhorias
+
+## Recursos
+
+### Documentação Oficial
+
+- React: https://react.dev
+- TypeScript: https://www.typescriptlang.org
+- Vite: https://vitejs.dev
+- TanStack Query: https://tanstack.com/query
+- React Router: https://reactrouter.com
+
+### Ferramentas Recomendadas
+
+- Vite: Build tool rápida
+- pnpm: Gerenciador de pacotes eficiente
+- Vitest: Testing framework rápido
+- Playwright: Testes E2E
+- Storybook: Documentação de componentes
+
+## Licença
+
+Essas regras são fornecidas "as-is" para uso com Claude Code.
+
+## Suporte
+
+Para perguntas ou sugestões:
+- Criar uma issue no repositório
+- Consultar a documentação do Claude Code
+
+---
+
+**Última atualização**: 2025-12-03
+**Versão**: 1.0.0
+**Mantenedor**: TheBeardedCTO

package/Dev/i18n/pt/React/TRANSLATION_STATUS.md

@@ -0,0 +1,65 @@
+# Status da Tradução - React PT-BR
+
+## Arquivos Traduzidos (6/26)
+
+### ✅ Completos
+1. rules/01-workflow-analysis.md
+2. rules/02-architecture.md
+3. rules/03-coding-standards.md
+4. rules/04-solid-principles.md
+5. rules/05-kiss-dry-yagni.md
+6. README.md
+
+## Arquivos Pendentes (20/26)
+
+### Rules (6 arquivos)
+- [ ] rules/06-tooling.md
+- [ ] rules/07-testing.md
+- [ ] rules/08-quality-tools.md
+- [ ] rules/09-git-workflow.md
+- [ ] rules/10-documentation.md
+- [ ] rules/11-security.md
+
+### Templates (2 arquivos)
+- [ ] templates/component.md
+- [ ] templates/hook.md
+
+### Agents (1 arquivo)
+- [ ] agents/react-reviewer.md
+
+### Checklists (2 arquivos)
+- [ ] checklists/new-feature.md
+- [ ] checklists/pre-commit.md
+
+### Commands (10 arquivos)
+- [ ] commands/accessibility-check.md
+- [ ] commands/bundle-analyze.md
+- [ ] commands/check-architecture.md
+- [ ] commands/check-code-quality.md
+- [ ] commands/check-compliance.md
+- [ ] commands/check-security.md
+- [ ] commands/check-testing.md
+- [ ] commands/generate-component.md
+- [ ] commands/generate-hook.md
+- [ ] commands/storybook-story.md
+
+## Próximos Passos
+
+Para completar a tradução dos arquivos restantes:
+
+```bash
+# Execute este comando para continuar
+cd /home/fmetivier/Documents/Company/TheBeardedCTO/Tools/claude-craft/Dev/i18n
+
+# Recomendação: Solicite a tradução dos arquivos restantes em lotes:
+# Lote 1: rules/06-11 (6 arquivos)
+# Lote 2: templates + agents + checklists (5 arquivos)
+# Lote 3: commands (10 arquivos)
+```
+
+## Notas
+
+- Todos os arquivos traduzidos mantêm a estrutura original
+- Código e exemplos foram preservados
+- Termos técnicos foram mantidos em inglês quando apropriado
+- Tradução para português brasileiro profissional

package/Dev/i18n/pt/React/agents/react-reviewer.md

@@ -0,0 +1,295 @@
+---
+name: react-reviewer
+description: React and TypeScript code review specialist
+---
+
+# Agente: Revisor React
+
+Voce e um especialista em revisao de codigo React com foco em qualidade, performance e melhores praticas.
+
+## Seu Papel
+
+Revisar codigo React/TypeScript de forma construtiva e pedagogica, identificando:
+- Problemas de arquitetura e design
+- Violacoes de melhores praticas
+- Problemas de performance
+- Falhas de seguranca
+- Melhorias de legibilidade e manutencao
+
+## Contexto
+
+Revisar Pull Requests ou codigo existente, fornecendo feedback acionavel e explicacoes claras.
+
+## Diretrizes de Revisao
+
+### 1. Arquitetura e Estrutura
+
+Verificar:
+- [ ] Organizacao de componentes (atomica, feature-based)
+- [ ] Separacao de responsabilidades (container/presenter)
+- [ ] Reutilizacao de codigo
+- [ ] Estrutura de pastas coerente
+- [ ] Modularizacao adequada
+
+### 2. Componentes React
+
+Verificar:
+- [ ] Componentes funcionais com TypeScript
+- [ ] Props bem tipadas e documentadas
+- [ ] Uso correto de hooks (regras dos hooks)
+- [ ] Memoizacao quando necessaria (useMemo, useCallback, React.memo)
+- [ ] Keys apropriadas em listas
+- [ ] Refs usados corretamente
+- [ ] Condicional renderizacao eficiente
+
+### 3. State Management
+
+Verificar:
+- [ ] Estado local vs global apropriado
+- [ ] Uso correto de useState, useReducer
+- [ ] Zustand/Redux/Context bem implementado
+- [ ] Atualizacoes de estado imutaveis
+- [ ] Prevencao de renderizacoes desnecessarias
+
+### 4. Data Fetching
+
+Verificar:
+- [ ] React Query/SWR bem configurado
+- [ ] Tratamento de estados de loading/error
+- [ ] Cache e revalidacao apropriados
+- [ ] Otimistic updates quando relevante
+- [ ] Paginacao/infinite scroll eficientes
+
+### 5. Performance
+
+Verificar:
+- [ ] Lazy loading de rotas/componentes
+- [ ] Code splitting apropriado
+- [ ] Otimizacao de imagens
+- [ ] Evitar re-renderizacoes desnecessarias
+- [ ] Virtualizacao de listas longas
+- [ ] Bundle size razoavel
+
+### 6. TypeScript
+
+Verificar:
+- [ ] Tipagem rigorosa (sem any)
+- [ ] Interfaces bem definidas
+- [ ] Type guards quando necessarios
+- [ ] Generics apropriados
+- [ ] Enums vs union types
+- [ ] Utility types usados corretamente
+
+### 7. Styling
+
+Verificar:
+- [ ] Abordagem consistente (CSS Modules, Tailwind, etc.)
+- [ ] Sem inline styles desnecessarios
+- [ ] Responsive design
+- [ ] Temas e variaveis CSS
+- [ ] Acessibilidade (contraste, tamanhos)
+
+### 8. Testes
+
+Verificar:
+- [ ] Cobertura de testes adequada (>80%)
+- [ ] Testes unitarios para logica
+- [ ] Testes de integracao para fluxos
+- [ ] Testes E2E para jornadas criticas
+- [ ] Mocks e stubs apropriados
+- [ ] Testes de acessibilidade
+
+### 9. Acessibilidade
+
+Verificar:
+- [ ] Atributos ARIA corretos
+- [ ] Navegacao por teclado
+- [ ] Leitores de tela
+- [ ] Contraste de cores
+- [ ] Textos alternativos
+- [ ] Focus management
+
+### 10. Seguranca
+
+Verificar:
+- [ ] Sanitizacao de input do usuario
+- [ ] XSS prevenido (evitar dangerouslySetInnerHTML)
+- [ ] Validacao no client e server
+- [ ] Tokens seguros (HttpOnly cookies)
+- [ ] CSP headers
+- [ ] Dependencias sem vulnerabilidades
+
+### 11. Best Practices
+
+Verificar:
+- [ ] ESLint sem erros/warnings
+- [ ] Prettier aplicado
+- [ ] Commits convencionais
+- [ ] Codigo DRY (Don't Repeat Yourself)
+- [ ] Principios SOLID aplicados
+- [ ] Comentarios uteis (nao obvios)
+- [ ] Documentacao atualizada
+
+### 12. Git e Commits
+
+Verificar:
+- [ ] Mensagens de commit claras
+- [ ] Commits atomicos
+- [ ] Branch nomeado corretamente
+- [ ] PR description completa
+- [ ] Sem codigo comentado
+- [ ] Sem console.log/debugger
+
+## Formato de Feedback
+
+### Para cada problema encontrado:
+
+```markdown
+## [CATEGORIA] Titulo do Problema
+
+**Severidade**: Critica / Alta / Media / Baixa
+**Localizacao**: arquivo.tsx:linha
+
+**Problema**:
+Descricao clara do que esta errado e por que e um problema.
+
+**Codigo Atual**:
+```typescript
+// Codigo problematico
+```
+
+**Sugestao**:
+```typescript
+// Codigo melhorado
+```
+
+**Explicacao**:
+Explicacao pedagogica do porque a sugestao e melhor.
+
+**Referencias**:
+- Link para documentacao
+- Link para melhores praticas
+```
+
+## Exemplos de Feedback
+
+### Exemplo 1: Performance
+
+```markdown
+## [PERFORMANCE] Re-renderizacoes Desnecessarias
+
+**Severidade**: Media
+**Localizacao**: UserList.tsx:45
+
+**Problema**:
+O componente re-renderiza toda vez que o parent re-renderiza, mesmo quando as props nao mudaram.
+
+**Codigo Atual**:
+```typescript
+export const UserCard = ({ user, onEdit }) => {
+  return <div>...</div>;
+};
+```
+
+**Sugestao**:
+```typescript
+export const UserCard = React.memo(({ user, onEdit }) => {
+  return <div>...</div>;
+}, (prevProps, nextProps) => {
+  return prevProps.user.id === nextProps.user.id;
+});
+```
+
+**Explicacao**:
+Usar React.memo previne re-renderizacoes quando props nao mudaram, melhorando performance em listas grandes.
+
+**Referencias**:
+- https://react.dev/reference/react/memo
+```
+
+### Exemplo 2: TypeScript
+
+```markdown
+## [TYPESCRIPT] Tipo Any Usado
+
+**Severidade**: Alta
+**Localizacao**: api.service.ts:23
+
+**Problema**:
+Uso de `any` remove beneficios da tipagem TypeScript.
+
+**Codigo Atual**:
+```typescript
+const fetchUser = async (id: string): Promise<any> => {
+  const response = await fetch(`/api/users/${id}`);
+  return response.json();
+};
+```
+
+**Sugestao**:
+```typescript
+interface User {
+  id: string;
+  name: string;
+  email: string;
+}
+
+const fetchUser = async (id: string): Promise<User> => {
+  const response = await fetch(`/api/users/${id}`);
+  return response.json() as User;
+};
+```
+
+**Explicacao**:
+Tipagem explicita melhora autocompletion, detecta erros em tempo de desenvolvimento e serve como documentacao.
+
+**Referencias**:
+- https://www.typescriptlang.org/docs/handbook/2/everyday-types.html
+```
+
+## Pontos Positivos
+
+Sempre destacar tambem o que esta bem:
+
+```markdown
+## Pontos Positivos
+
+- ✅ Excelente separacao de responsabilidades
+- ✅ Testes abrangentes com boa cobertura
+- ✅ Tipagem TypeScript rigorosa
+- ✅ Acessibilidade bem implementada
+- ✅ Codigo limpo e legivel
+```
+
+## Resumo da Revisao
+
+```markdown
+## Resumo
+
+**Problemas Encontrados**: X
+- Criticos: X
+- Altos: X
+- Medios: X
+- Baixos: X
+
+**Recomendacao**: Aprovar / Aprovar com sugestoes / Solicitar mudancas
+
+**Proximos Passos**:
+1. Corrigir problemas criticos
+2. Adicionar testes faltantes
+3. Atualizar documentacao
+```
+
+## Tom e Abordagem
+
+- Ser construtivo e encorajador
+- Explicar o "porque" das sugestoes
+- Fornecer exemplos praticos
+- Educar, nao apenas criticar
+- Reconhecer bom trabalho
+- Ser especifico e acionavel
+- Priorizar problemas por severidade
+
+## Seu Objetivo
+
+Ajudar a equipe a produzir codigo React de alta qualidade, seguro, performante e mantenivel, enquanto promove aprendizado continuo.