@the-bearded-bear/claude-craft 3.0.0

package/Dev/i18n/es/React/checklists/new-feature.md

@@ -0,0 +1,296 @@
+# Checklist: Nueva Característica React
+
+## Antes de Comenzar
+
+### Planificación
+- [ ] Ticket o historia de usuario creada y revisada
+- [ ] Requisitos claramente definidos
+- [ ] Mockups o wireframes disponibles (si aplica)
+- [ ] Casos de uso identificados
+- [ ] Criterios de aceptación definidos
+- [ ] Dependencias identificadas
+- [ ] Estimación de tiempo realizada
+
+### Análisis Técnico
+- [ ] Arquitectura de la característica planificada
+- [ ] Componentes a crear identificados
+- [ ] Hooks personalizados necesarios listados
+- [ ] Servicios API definidos
+- [ ] Modelos de datos diseñados
+- [ ] Flujos de estado mapeados
+- [ ] Consideraciones de rendimiento evaluadas
+- [ ] Impactos de seguridad analizados
+
+## Durante el Desarrollo
+
+### Arquitectura
+- [ ] Carpeta de característica creada en `/features`
+- [ ] Estructura siguiendo Diseño Atómico
+- [ ] Componentes organizados (atoms, molecules, organisms)
+- [ ] Separación UI/lógica respetada
+- [ ] Rutas configuradas
+- [ ] Lazy loading implementado (si es necesario)
+
+### TypeScript
+- [ ] Tipos e interfaces definidos en `types.ts`
+- [ ] Props de componentes tipadas
+- [ ] Funciones con firmas de tipos completas
+- [ ] Respuestas API tipadas
+- [ ] Eventos tipados
+- [ ] Sin `any` injustificado
+- [ ] Tipos exportados para reutilización
+
+### Componentes
+- [ ] Componentes funcionales con TypeScript
+- [ ] Props documentadas con JSDoc
+- [ ] Valores por defecto definidos
+- [ ] Gestión de estado apropiada (useState, zustand, etc.)
+- [ ] Hooks personalizados extraídos si es necesario
+- [ ] Componentes optimizados (memo, useMemo, useCallback)
+- [ ] Componentes responsivos
+- [ ] Tema soportado (dark/light)
+
+### Hooks Personalizados
+- [ ] Hooks extraídos de componentes
+- [ ] Nombres claros (use + PascalCase)
+- [ ] Hooks documentados
+- [ ] Lógica reutilizable
+- [ ] Manejo de errores
+- [ ] Indicadores de carga
+- [ ] Limpieza en unmount
+
+### Servicios API
+- [ ] Servicio creado en `/services`
+- [ ] Cliente HTTP configurado (axios/fetch)
+- [ ] Funciones CRUD implementadas
+- [ ] Manejo de errores centralizado
+- [ ] Tipos de respuesta definidos
+- [ ] Interceptores configurados (si es necesario)
+- [ ] Timeout configurado
+- [ ] Reintentos implementados (si es necesario)
+
+### Gestión de Estado
+- [ ] Estado local usado apropiadamente (useState)
+- [ ] Estado global definido (Context/Zustand si es necesario)
+- [ ] React Query configurado para cache de servidor
+- [ ] Mutaciones optimistas implementadas (si aplica)
+- [ ] Estado persistido si es necesario (localStorage)
+- [ ] Estado no duplicado
+- [ ] Estado normalizado para datos complejos
+
+### Formularios
+- [ ] Validación con Zod o Yup
+- [ ] React Hook Form integrado
+- [ ] Mensajes de error mostrados
+- [ ] Validación en tiempo real
+- [ ] Indicadores de carga en submit
+- [ ] Manejo de errores de submit
+- [ ] Formularios accesibles (labels, aria)
+- [ ] Sanitización de entrada
+
+### Estilos
+- [ ] Tailwind CSS usado para estilos
+- [ ] Clases utilitarias favorecidas sobre CSS personalizado
+- [ ] Variantes definidas con CVA (si es necesario)
+- [ ] Responsividad implementada (mobile-first)
+- [ ] Dark mode soportado
+- [ ] Animaciones/transiciones añadidas (si aplica)
+- [ ] Sin estilos inline (usar classes)
+
+### Tests
+
+#### Tests Unitarios (Vitest)
+- [ ] Tests para cada componente
+- [ ] Tests para hooks personalizados
+- [ ] Tests para funciones utilitarias
+- [ ] Tests para servicios
+- [ ] Casos de éxito cubiertos
+- [ ] Casos de error cubiertos
+- [ ] Casos límite cubiertos
+- [ ] Cobertura >80% para código crítico
+
+#### Tests de Integración
+- [ ] Tests para flujos de usuarios
+- [ ] Tests con React Testing Library
+- [ ] Interacciones de usuario simuladas
+- [ ] Llamadas API mockeadas (MSW)
+- [ ] Navegación probada
+- [ ] Gestión de estado probada
+
+#### Tests E2E (Playwright)
+- [ ] Escenarios críticos de usuario identificados
+- [ ] Tests E2E escritos con Playwright
+- [ ] Happy path probado
+- [ ] Flujos de error probados
+- [ ] Tests ejecutándose en CI/CD
+
+### Accesibilidad
+- [ ] Roles ARIA apropiados
+- [ ] Labels para elementos de formulario
+- [ ] Alt text para imágenes
+- [ ] Navegación por teclado funcional
+- [ ] Focus visible
+- [ ] Contraste de colores suficiente
+- [ ] Textos para lectores de pantalla
+- [ ] Validado con herramientas (axe, Lighthouse)
+
+### Rendimiento
+- [ ] Componentes pesados memorizados (React.memo)
+- [ ] Cálculos costosos cacheados (useMemo)
+- [ ] Callbacks memorizados (useCallback)
+- [ ] Code splitting implementado
+- [ ] Lazy loading de imágenes
+- [ ] Listas virtualizadas (si >100 items)
+- [ ] Bundle analizado (bundle-analyzer)
+- [ ] Lighthouse score >90
+
+### Seguridad
+- [ ] Entrada de usuario validada y sanitizada
+- [ ] Uso de `dangerouslySetInnerHTML` evitado o sanitizado
+- [ ] Tokens almacenados de forma segura
+- [ ] Llamadas API autenticadas
+- [ ] CSRF protegido
+- [ ] XSS prevenido
+- [ ] Dependencias auditadas (`npm audit`)
+- [ ] Secretos no expuestos (env variables)
+
+### Documentación
+- [ ] README actualizado (si aplica)
+- [ ] Componentes documentados con JSDoc
+- [ ] Hooks documentados
+- [ ] Tipos complejos documentados
+- [ ] Ejemplos de uso provistos
+- [ ] Storybook stories creadas
+- [ ] CHANGELOG actualizado
+
+### Git y Versionado
+- [ ] Branch creada desde `develop`
+- [ ] Commits atómicos y claros
+- [ ] Commits siguiendo Conventional Commits
+- [ ] No hay código comentado/muerto
+- [ ] No hay console.log olvidados
+- [ ] No hay TODOs sin ticket asociado
+- [ ] No hay archivos de test/debug committeados
+
+## Antes de Crear PR
+
+### Code Review Personal
+- [ ] Código auto-revisado
+- [ ] Refactorización aplicada
+- [ ] Código duplicado eliminado
+- [ ] Complejidad reducida
+- [ ] Nombres claros y descriptivos
+- [ ] Comentarios añadidos donde sea necesario
+- [ ] Formateo con Prettier aplicado
+- [ ] Linting sin errores/warnings
+
+### Tests y Calidad
+- [ ] Todos los tests pasando
+- [ ] Coverage suficiente (>80% para crítico)
+- [ ] No hay regresiones
+- [ ] Funcionalidad probada manualmente
+- [ ] Probado en diferentes navegadores
+- [ ] Probado en diferentes tamaños de pantalla
+- [ ] Modo oscuro probado
+- [ ] Tests E2E pasando
+
+### Build y CI/CD
+- [ ] Build sin errores
+- [ ] Build de producción exitoso
+- [ ] No warnings de TypeScript
+- [ ] No errores de linting
+- [ ] Pipeline CI pasando
+- [ ] Tamaño de bundle verificado
+
+### Performance
+- [ ] Sin re-renders innecesarios
+- [ ] Sin memory leaks
+- [ ] Carga rápida (<3s)
+- [ ] Interacciones fluidas (60fps)
+- [ ] Lighthouse audit pasado
+
+### Seguridad
+- [ ] Análisis de seguridad realizado
+- [ ] Vulnerabilidades resueltas
+- [ ] Datos sensibles protegidos
+- [ ] Permisos verificados
+- [ ] Validación server-side confirmada
+
+## Pull Request
+
+### Preparación de PR
+- [ ] Branch actualizada con `develop`
+- [ ] Conflictos resueltos
+- [ ] Commits squasheados (si necesario)
+- [ ] Título de PR descriptivo
+- [ ] Descripción completa
+- [ ] Screenshots/videos adjuntos (UI)
+- [ ] Issue linkado
+- [ ] Reviewers asignados
+- [ ] Labels apropiadas añadidas
+
+### Descripción de PR
+- [ ] Resumen de cambios
+- [ ] Motivación explicada
+- [ ] Decisiones técnicas justificadas
+- [ ] Breaking changes identificados
+- [ ] Migration guide (si aplica)
+- [ ] Instrucciones de prueba
+- [ ] Checklist de review incluida
+
+### Review Process
+- [ ] Review recibido
+- [ ] Comentarios abordados
+- [ ] Cambios solicitados realizados
+- [ ] Aprobación recibida
+- [ ] CI pasando
+- [ ] Sin conflictos
+
+## Post-Merge
+
+### Deployment
+- [ ] Merged a `develop`
+- [ ] Deploy a staging exitoso
+- [ ] Pruebas en staging
+- [ ] Deploy a producción (cuando corresponda)
+- [ ] Pruebas de humo en producción
+
+### Monitoreo
+- [ ] Monitoreo de errores (Sentry, etc.)
+- [ ] Logs verificados
+- [ ] Métricas de rendimiento monitoreadas
+- [ ] Feedback de usuarios recolectado
+
+### Documentación
+- [ ] Documentación de usuario actualizada
+- [ ] Documentación técnica actualizada
+- [ ] API docs actualizadas (si aplica)
+- [ ] Equipo notificado de cambios
+
+### Cleanup
+- [ ] Branch de feature eliminada
+- [ ] Feature flags removidos (si aplica)
+- [ ] Código deprecated eliminado
+- [ ] TODOs convertidos en tickets
+
+## Notas
+
+### Severidades de Violación
+- 🔴 **Bloqueante**: Debe corregirse antes de merge
+- 🟠 **Mayor**: Debe corregirse pronto
+- 🟡 **Menor**: Puede abordarse más tarde
+- 🔵 **Sugerencia**: Mejora opcional
+
+### Excepciones
+Algunas verificaciones pueden no aplicar dependiendo de:
+- Tipo de proyecto (MVP, prototipo, producción)
+- Tamaño del proyecto (startup, enterprise)
+- Fase del proyecto (inicial, madura)
+- Recursos disponibles (tiempo, equipo)
+
+**Regla de oro**: Adaptar las prácticas al contexto, pero siempre favorecer calidad y seguridad.
+
+---
+
+**Versión**: 1.0
+**Última actualización**: 2025-12-03

package/Dev/i18n/es/React/checklists/pre-commit.md

@@ -0,0 +1,250 @@
+# Checklist: Pre-Commit React
+
+## Verificaciones Automáticas (Husky + Lint-Staged)
+
+### Formateo
+- [ ] Prettier ejecutado en archivos staged
+- [ ] Sin problemas de formateo
+- [ ] Configuración de Prettier respetada (.prettierrc)
+
+### Linting
+- [ ] ESLint ejecutado sin errores
+- [ ] Sin warnings críticos
+- [ ] Reglas de ESLint respetadas
+- [ ] Plugins React/TypeScript activos
+
+### TypeScript
+- [ ] Type-checking pasado (`tsc --noEmit`)
+- [ ] Sin errores de TypeScript
+- [ ] Sin uso de `any` injustificado
+- [ ] Importaciones de tipos correctas
+
+### Tests
+- [ ] Tests afectados ejecutados
+- [ ] Todos los tests pasando
+- [ ] Sin tests saltados sin razón
+- [ ] Cobertura mantenida o mejorada
+
+## Verificaciones Manuales
+
+### Código Limpio
+- [ ] Sin `console.log()` olvidados
+- [ ] Sin `debugger` statements
+- [ ] Sin código comentado
+- [ ] Sin código muerto/no usado
+- [ ] Sin TODOs sin ticket asociado
+- [ ] Sin FIXME sin explicación
+
+### Imports y Dependencias
+- [ ] Imports ordenados correctamente
+- [ ] Sin imports no utilizados
+- [ ] Path aliases usados (@/...)
+- [ ] Sin dependencias circulares
+- [ ] Imports agrupados por tipo
+
+### Componentes React
+- [ ] Nombres de componentes en PascalCase
+- [ ] Props tipadas correctamente
+- [ ] Default props definidos
+- [ ] PropTypes removidos (usar TypeScript)
+- [ ] Componentes funcionales (no clases)
+- [ ] Hooks siguiendo reglas de React
+
+### Estado y Efectos
+- [ ] `useState` usado apropiadamente
+- [ ] `useEffect` con dependencias correctas
+- [ ] Limpieza en `useEffect` (si necesario)
+- [ ] `useMemo` para cálculos costosos
+- [ ] `useCallback` para funciones pasadas como props
+- [ ] Sin state duplicado
+
+### Performance
+- [ ] `React.memo` usado para componentes pesados
+- [ ] Keys únicas en listas
+- [ ] Sin inline functions en render (si afecta performance)
+- [ ] Sin inline objects/arrays en props
+- [ ] Lazy loading implementado donde aplica
+
+### Accesibilidad
+- [ ] Elementos interactivos accesibles por teclado
+- [ ] Alt text en imágenes
+- [ ] Labels para inputs
+- [ ] Roles ARIA apropiados
+- [ ] Contraste de colores adecuado
+
+### Seguridad
+- [ ] Entrada de usuario validada
+- [ ] Sin uso de `dangerouslySetInnerHTML` sin sanitizar
+- [ ] Sin secretos hardcodeados
+- [ ] Tokens no expuestos
+- [ ] Variables de entorno usadas apropiadamente
+
+### Tests
+- [ ] Nuevas funcionalidades tienen tests
+- [ ] Tests actualizados para cambios
+- [ ] Tests con nombres descriptivos
+- [ ] Mocking apropiado
+- [ ] Sin aserciones comentadas
+
+### Git
+- [ ] Mensaje de commit claro y descriptivo
+- [ ] Conventional Commits respetado
+- [ ] Un propósito por commit
+- [ ] Sin archivos sensibles (.env, credentials)
+- [ ] .gitignore actualizado si necesario
+- [ ] Sin archivos grandes/binarios innecesarios
+
+### Documentación
+- [ ] JSDoc actualizado para funciones públicas
+- [ ] README actualizado si necesario
+- [ ] CHANGELOG actualizado (si aplica)
+- [ ] Comentarios añadidos para código complejo
+- [ ] APIs documentadas
+
+## Comandos Pre-Commit
+
+```bash
+# Formateo automático
+npm run format
+
+# Linting con auto-fix
+npm run lint:fix
+
+# Type checking
+npm run type-check
+
+# Tests unitarios
+npm run test
+
+# Verificación completa
+npm run quality
+```
+
+## Git Commit Message Format
+
+```
+<type>(<scope>): <subject>
+
+<body>
+
+<footer>
+```
+
+### Types
+- **feat**: Nueva funcionalidad
+- **fix**: Corrección de bug
+- **docs**: Documentación
+- **style**: Formateo, punto y coma faltantes, etc.
+- **refactor**: Refactorización de código
+- **perf**: Mejora de rendimiento
+- **test**: Añadir tests
+- **build**: Cambios en el sistema de build
+- **ci**: Cambios en CI/CD
+- **chore**: Otros cambios (dependencias, etc.)
+
+### Ejemplos
+```bash
+# Bueno ✅
+feat(auth): add OAuth2 authentication flow
+fix(validation): resolve email validation regex issue
+docs(readme): update installation instructions
+
+# Malo ❌
+Added stuff
+Fixed bug
+Update
+```
+
+## Errores Comunes a Evitar
+
+### TypeScript
+- ❌ Uso de `any` sin justificación
+- ❌ `@ts-ignore` sin comentario explicativo
+- ❌ Type assertions con `as` innecesarios
+- ❌ Optional chaining `?.` en lugar de verificación apropiada
+- ❌ Non-null assertions `!` innecesarios
+
+### React
+- ❌ `useEffect` sin array de dependencias
+- ❌ Mutación directa de estado
+- ❌ Keys con índices en listas dinámicas
+- ❌ Componentes definidos dentro de otros componentes
+- ❌ Props drilling excesivo
+
+### Imports
+- ❌ Imports relativos largos (`../../../components`)
+- ❌ Imports con extensión (`.tsx`, `.ts`)
+- ❌ Imports desordenados
+- ❌ Imports default y named mezclados incorrectamente
+
+### Performance
+- ❌ Re-renders innecesarios
+- ❌ Objetos/arrays creados en cada render
+- ❌ Funciones inline en props sin memoization
+- ❌ Listas largas sin virtualización
+
+### Seguridad
+- ❌ Tokens en código fuente
+- ❌ Variables de entorno committeadas
+- ❌ Validación solo client-side
+- ❌ `dangerouslySetInnerHTML` con datos de usuario
+
+## Configuración de Husky
+
+### Instalar Husky
+```bash
+npm install -D husky lint-staged
+npx husky install
+npm pkg set scripts.prepare="husky install"
+```
+
+### .husky/pre-commit
+```bash
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged
+```
+
+### .lintstagedrc.cjs
+```javascript
+module.exports = {
+  '*.{ts,tsx}': [
+    'eslint --fix',
+    'prettier --write',
+    () => 'tsc --noEmit'
+  ],
+  '*.{json,css,md}': ['prettier --write'],
+  '*.{test,spec}.{ts,tsx}': ['vitest run --related']
+};
+```
+
+## Checklist de Urgencia (1 minuto)
+
+Para commits rápidos, verificar como mínimo:
+
+1. ✅ Sin errores de TypeScript
+2. ✅ Sin errores de ESLint
+3. ✅ Sin `console.log` olvidados
+4. ✅ Tests pasando
+5. ✅ Build exitoso
+6. ✅ Mensaje de commit claro
+
+## Bypass Pre-Commit (Usar con Precaución)
+
+```bash
+# Saltar hooks (solo en casos excepcionales)
+git commit --no-verify -m "mensaje"
+
+# ⚠️ ADVERTENCIA: Usar solo para:
+# - Commits de emergencia en producción
+# - WIP commits en branch personal
+# - Revert de commits problemáticos
+```
+
+---
+
+**Regla de oro**: Si el pre-commit falla, ¡hay una razón! Corrige antes de committear.
+
+**Versión**: 1.0
+**Última actualización**: 2025-12-03