@the-bearded-bear/claude-craft 3.0.0

package/Dev/i18n/pt/React/commands/check-compliance.md

@@ -0,0 +1,79 @@
+---
+description: Verificacao de Conformidade de Padroes
+---
+
+# Verificacao de Conformidade de Padroes
+
+Verificar se o projeto React segue padroes de codigo e melhores praticas estabelecidas.
+
+## O Que Este Comando Faz
+
+1. **Verificacao de Padroes**
+   - Verificar convencoes de codigo
+   - Verificar convencoes de nomenclatura
+   - Validar organizacao de arquivos
+   - Verificar ordem de imports
+   - Verificar padroes de documentacao
+
+2. **Areas de Conformidade**
+   - Melhores praticas TypeScript
+   - Padroes React
+   - Convencoes CSS/Styling
+   - Padroes de testes
+   - Convencoes de commit Git
+
+3. **Relatorio Gerado**
+   - Arquivos nao-conformes
+   - Niveis de severidade
+   - Recomendacoes de remediacao
+   - Score de conformidade
+
+## Padroes de Codigo
+
+### 1. Convencoes de Nomenclatura
+
+```typescript
+// ✅ Componentes: PascalCase
+export const UserProfile: FC = () => {};
+
+// ✅ Funcoes/variaveis: camelCase
+const getUserData = () => {};
+const isAuthenticated = true;
+
+// ✅ Constantes: UPPER_SNAKE_CASE
+const API_BASE_URL = 'https://api.exemplo.com';
+const MAX_RETRY_ATTEMPTS = 3;
+
+// ✅ Tipos/Interfaces: PascalCase
+interface User {}
+type UserRole = 'admin' | 'user';
+```
+
+### 2. Organizacao de Arquivos
+
+```typescript
+// ✅ Bom - Organizacao adequada
+src/
+├── features/
+│   └── users/
+│       ├── components/
+│       ├── hooks/
+│       └── types/
+```
+
+## Checklist de Conformidade
+
+- [ ] Convencoes de nomenclatura seguidas
+- [ ] Arquivos organizados adequadamente
+- [ ] Imports ordenados corretamente
+- [ ] Modo strict do TypeScript habilitado
+- [ ] Sem tipos `any` usados
+- [ ] Todas as props tipadas adequadamente
+- [ ] Regras dos React Hooks seguidas
+- [ ] Testes seguem padrao AAA
+- [ ] Cobertura de testes > 80%
+- [ ] CSS organizado (modules/Tailwind)
+- [ ] Commits seguem convencoes
+- [ ] Componentes documentados
+- [ ] ESLint passa sem erros
+- [ ] Formatacao Prettier aplicada

package/Dev/i18n/pt/React/commands/check-security.md

@@ -0,0 +1,58 @@
+---
+description: Auditoria de Seguranca
+---
+
+# Auditoria de Seguranca
+
+Realizar uma auditoria completa de seguranca da aplicacao React.
+
+## O Que Este Comando Faz
+
+1. **Analise de Seguranca**
+   - Verificar vulnerabilidades XSS
+   - Verificar validacao de entrada
+   - Auditar dependencias
+   - Verificar implementacao de autenticacao
+   - Verificar gerenciamento de segredos
+   - Verificar headers CSP
+
+2. **Ferramentas Usadas**
+   - npm audit
+   - Snyk
+   - Plugins de seguranca ESLint
+   - OWASP ZAP (opcional)
+
+3. **Relatorio Gerado**
+   - Vulnerabilidades de seguranca
+   - Niveis de severidade (critico, alto, medio, baixo)
+   - Passos de remediacao
+   - Status de conformidade
+
+## Como Usar
+
+```bash
+# Executar auditoria de seguranca
+npm run security:check
+
+# Ou verificacoes individuais
+npm audit
+npm run lint:security
+```
+
+## Checklist de Seguranca
+
+- [ ] Protecao XSS implementada (DOMPurify para HTML)
+- [ ] Validacao de entrada em todos os formularios (Zod/Yup)
+- [ ] Autenticacao implementada corretamente
+- [ ] Rotas protegidas configuradas
+- [ ] Tokens CSRF usados
+- [ ] Segredos em variaveis de ambiente
+- [ ] Dependencias auditadas (npm audit/Snyk)
+- [ ] Headers de seguranca configurados
+- [ ] HTTPS forcado
+- [ ] Headers CSP definidos
+- [ ] Sem segredos hardcoded
+- [ ] Links externos usam `rel="noopener noreferrer"`
+- [ ] Uploads de arquivo validados
+- [ ] Rate limiting implementado
+- [ ] Logs nao expoem dados sensiveis

package/Dev/i18n/pt/React/commands/check-testing.md

@@ -0,0 +1,58 @@
+---
+description: Verificacao de Estrategia de Testes
+---
+
+# Verificacao de Estrategia de Testes
+
+Verificar se a aplicacao React tem cobertura de testes abrangente e segue melhores praticas de teste.
+
+## O Que Este Comando Faz
+
+1. **Analise de Testes**
+   - Verificar cobertura de testes
+   - Verificar qualidade dos testes
+   - Validar padroes de teste
+   - Verificar organizacao dos testes
+   - Analisar performance dos testes
+
+2. **Metricas Medidas**
+   - Cobertura de codigo (linhas, funcoes, branches)
+   - Contagem de testes por tipo (unit, integracao, e2e)
+   - Tempo de execucao dos testes
+   - Deteccao de testes instáveis
+   - Caminhos criticos nao testados
+
+3. **Relatorio Gerado**
+   - Relatorio de cobertura
+   - Testes faltantes
+   - Score de qualidade dos testes
+   - Recomendacoes
+
+## Metas de Cobertura
+
+```json
+{
+  "coverage": {
+    "lines": 80,
+    "functions": 80,
+    "branches": 75,
+    "statements": 80
+  }
+}
+```
+
+## Checklist de Testes
+
+- [ ] Testes unitarios para todos os componentes
+- [ ] Testes unitarios para todos os hooks
+- [ ] Testes unitarios para todos os utilitarios
+- [ ] Testes de integracao para funcionalidades
+- [ ] Testes E2E para fluxos criticos
+- [ ] Cobertura > 80%
+- [ ] Sem testes instaveis
+- [ ] Testes sao rapidos (< 1s cada)
+- [ ] MSW para mock de API
+- [ ] Utilitarios de teste extraidos
+- [ ] Testes seguem padrao AAA
+- [ ] Testes tem nomes descritivos
+- [ ] Testes usam queries acessiveis

package/Dev/i18n/pt/React/commands/generate-component.md

@@ -0,0 +1,81 @@
+---
+description: Gerar Componente React
+---
+
+# Gerar Componente React
+
+Gerar um novo componente React com TypeScript, testes e boilerplate de estilo.
+
+## O Que Este Comando Faz
+
+1. **Geracao de Componente**
+   - Criar arquivo de componente
+   - Gerar interfaces TypeScript
+   - Criar arquivo de teste
+   - Criar arquivo de estilo (CSS Module ou styled-components)
+   - Criar story Storybook (opcional)
+   - Criar barrel export index.ts
+
+2. **Templates Usados**
+   - Componente funcional com TypeScript
+   - Interface de props
+   - Estrutura basica de testes
+   - Boilerplate de estilo
+
+3. **Arquivos Gerados**
+   ```
+   src/components/ComponentName/
+   ├── ComponentName.tsx
+   ├── ComponentName.test.tsx
+   ├── ComponentName.module.css
+   ├── ComponentName.stories.tsx (opcional)
+   └── index.ts
+   ```
+
+## Como Usar
+
+```bash
+# Gerar componente
+npm run generate:component ComponentName
+
+# Com caminho personalizado
+npm run generate:component features/users/components/UserCard
+
+# Com opcoes
+npm run generate:component ComponentName --story --styled
+```
+
+## Template de Componente Basico
+
+```typescript
+// ComponentName.tsx
+import { FC } from 'react';
+import styles from './ComponentName.module.css';
+
+export interface ComponentNameProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export const ComponentName: FC<ComponentNameProps> = ({
+  children,
+  className
+}) => {
+  return (
+    <div className={`${styles.container} ${className || ''}`}>
+      {children}
+    </div>
+  );
+};
+```
+
+## Melhores Praticas
+
+1. **PascalCase** para nomes de componentes
+2. **Colocalizacao** de arquivos relacionados
+3. **Interfaces TypeScript** para props
+4. **Comentarios JSDoc** para documentacao
+5. **Evitar exports default** (usar exports nomeados)
+6. **Interface de props** exportada separadamente
+7. **Arquivo de teste** junto com componente
+8. **Barrel exports** para imports limpos

package/Dev/i18n/pt/React/commands/generate-hook.md

@@ -0,0 +1,139 @@
+---
+description: Gerar Hook Personalizado
+---
+
+# Gerar Hook Personalizado
+
+Gerar um novo hook React personalizado com TypeScript e testes.
+
+## O Que Este Comando Faz
+
+1. **Geracao de Hook**
+   - Criar arquivo de hook
+   - Gerar tipos TypeScript
+   - Criar arquivo de teste
+   - Adicionar exemplos de uso em comentarios
+
+2. **Templates Usados**
+   - Funcao de hook personalizado
+   - Definicoes de tipos
+   - Estrutura de teste com renderHook
+   - Documentacao JSDoc
+
+3. **Arquivos Gerados**
+   ```
+   src/hooks/
+   ├── useHookName.ts
+   └── useHookName.test.ts
+   ```
+
+## Como Usar
+
+```bash
+# Gerar hook
+npm run generate:hook useHookName
+
+# Com caminho personalizado
+npm run generate:hook features/users/hooks/useUserData
+
+# Hook especifico de funcionalidade
+npm run generate:hook features/auth/hooks/useLogin
+```
+
+## Template de Hook Simples
+
+```typescript
+// useCounter.ts
+import { useState, useCallback } from 'react';
+
+export interface UseCounterOptions {
+  initialValue?: number;
+  min?: number;
+  max?: number;
+}
+
+export interface UseCounterReturn {
+  count: number;
+  increment: () => void;
+  decrement: () => void;
+  reset: () => void;
+  setCount: (value: number) => void;
+}
+
+/**
+ * Hook para gerenciar estado de contador
+ *
+ * @param options - Opcoes de configuracao
+ * @returns Estado e metodos do contador
+ *
+ * @example
+ * const { count, increment, decrement } = useCounter({ initialValue: 0 });
+ */
+export const useCounter = (
+  options: UseCounterOptions = {}
+): UseCounterReturn => {
+  const { initialValue = 0, min, max } = options;
+  const [count, setCount] = useState(initialValue);
+
+  const increment = useCallback(() => {
+    setCount((prev) => {
+      const next = prev + 1;
+      return max !== undefined ? Math.min(next, max) : next;
+    });
+  }, [max]);
+
+  const decrement = useCallback(() => {
+    setCount((prev) => {
+      const next = prev - 1;
+      return min !== undefined ? Math.max(next, min) : next;
+    });
+  }, [min]);
+
+  const reset = useCallback(() => {
+    setCount(initialValue);
+  }, [initialValue]);
+
+  return {
+    count,
+    increment,
+    decrement,
+    reset,
+    setCount
+  };
+};
+```
+
+## Template de Teste
+
+```typescript
+// useCounter.test.ts
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { useCounter } from './useCounter';
+
+describe('useCounter', () => {
+  it('deve inicializar com valor padrao', () => {
+    const { result } = renderHook(() => useCounter());
+    expect(result.current.count).toBe(0);
+  });
+
+  it('deve incrementar contador', () => {
+    const { result } = renderHook(() => useCounter());
+    act(() => {
+      result.current.increment();
+    });
+    expect(result.current.count).toBe(1);
+  });
+});
+```
+
+## Melhores Praticas
+
+1. **Nomenclatura**: Sempre comecar com prefixo `use`
+2. **Responsabilidade Unica**: Um hook, um proposito
+3. **Dependencias**: Listar todas as dependencias em useEffect/useCallback
+4. **TypeScript**: Tipar fortemente valores de retorno e parametros
+5. **Documentacao**: Comentarios JSDoc com exemplos
+6. **Testes**: Testar todos os casos de uso e casos extremos
+7. **Memoizacao**: Usar useMemo/useCallback apropriadamente
+8. **Tratamento de Erros**: Tratar erros graciosamente

package/Dev/i18n/pt/React/commands/storybook-story.md

@@ -0,0 +1,133 @@
+---
+description: Gerar Story Storybook
+---
+
+# Gerar Story Storybook
+
+Gerar uma story Storybook para um componente React existente.
+
+## O Que Este Comando Faz
+
+1. **Geracao de Story**
+   - Criar arquivo de story para componente
+   - Gerar todas as variantes do componente
+   - Adicionar controles interativos (args)
+   - Configurar parametros da story
+   - Adicionar documentacao
+
+2. **Templates Usados**
+   - Formato CSF 3.0 (Component Story Format)
+   - Tipos TypeScript
+   - Args e argTypes
+   - Variantes de story
+
+3. **Arquivo Gerado**
+   ```
+   src/components/ComponentName/
+   └── ComponentName.stories.tsx
+   ```
+
+## Como Usar
+
+```bash
+# Gerar story para componente existente
+npm run generate:story ComponentName
+
+# Com caminho personalizado
+npm run generate:story features/users/components/UserCard
+```
+
+## Template de Story Basica
+
+```typescript
+// Button.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'danger'],
+      description: 'Estilo da variante do botao',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Tamanho do botao',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Desabilitar o botao',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// Story padrao
+export const Default: Story = {
+  args: {
+    children: 'Botao',
+    variant: 'primary',
+    size: 'md',
+  },
+};
+
+// Todas as variantes
+export const Primary: Story = {
+  args: {
+    children: 'Botao Primario',
+    variant: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: 'Botao Secundario',
+    variant: 'secondary',
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    children: 'Botao de Perigo',
+    variant: 'danger',
+  },
+};
+
+// Variantes de estado
+export const Disabled: Story = {
+  args: {
+    children: 'Botao Desabilitado',
+    disabled: true,
+  },
+};
+```
+
+## Melhores Praticas
+
+1. **Nomenclatura de Story**: Usar nomes descritivos (Default, Primary, WithError)
+2. **Args**: Fornecer padroes sensiveis
+3. **ArgTypes**: Documentar todas as props
+4. **Actions**: Usar para manipuladores de eventos
+5. **Decorators**: Adicionar contexto quando necessario
+6. **MSW**: Mockar chamadas de API
+7. **Acessibilidade**: Testar com addon a11y
+8. **Documentacao**: Adicionar MDX para componentes complexos
+9. **Variantes**: Cobrir todos os estados visuais
+10. **Casos Extremos**: Incluir estados de erro, carregamento, vazio
+
+## Recursos
+
+- [Documentacao Storybook](https://storybook.js.org/docs/react/get-started/introduction)
+- [CSF 3.0](https://storybook.js.org/docs/react/api/csf)
+- [Testes de Interacao](https://storybook.js.org/docs/react/writing-tests/interaction-testing)
+- [Addon MSW](https://storybook.js.org/addons/msw-storybook-addon)