---
name: react-patterns
description: Patrones de React que debo seguir en este proyecto
---
 
# React Patterns
 
## Componentes
 
- Usa functional components, nunca class components
- Extrae logica compleja a custom hooks
- Mantene componentes bajo 150 lineas
 
## Estado
 
- Usa useState para estado local simple
- Usa useReducer para estado complejo
- Usa context solo para datos que realmente son globales
 
## Styling
 
- Usa Tailwind CSS
- Evita CSS inline excepto para valores dinamicos
- Sigue el patron de clase condicional con cn()
 
## Ejemplos
 
### Componente Simple
```tsx
export function UserCard({ user }: { user: User }) {
  return (
    <div className="p-4 border rounded">
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  )
}

function useUser(id: string) {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)
 
  useEffect(() => {
    fetchUser(id).then(setUser).finally(() => setLoading(false))
  }, [id])
 
  return { user, loading }
}

---
name: code-style
description: Estilo de codigo y convenciones del proyecto
---
 
# Code Style
 
## TypeScript
- Usa tipos explicitos, no `any`
- Prefiere interfaces sobre types para objetos
- Exporta tipos junto con sus funciones
 
## Naming
- Componentes: PascalCase
- Funciones: camelCase
- Constantes: UPPER_SNAKE_CASE
- Archivos de componentes: PascalCase.tsx
- Archivos de utils: camelCase.ts
 
## Imports
- Absolutas primero, relativas despues
- Ordenar alfabeticamente dentro de cada grupo
- Una linea vacia entre grupos
 
## Comentarios
- Solo cuando el codigo no es auto-explicativo
- JSDoc para funciones publicas
- TODO: solo si hay un plan para resolverlo

---
name: testing-strategy
description: Estrategia de testing para este proyecto
---
 
# Testing Strategy
 
## Unit Tests
- Testea logica de negocio, no implementacion
- Un archivo de test por modulo
- Nombre: `[module].test.ts`
 
## Integration Tests
- Testea flujos completos
- Usa mocks solo para servicios externos
- Setup/teardown de base de datos
 
## E2E Tests
- Solo para user flows criticos
- Corre en CI antes de merge
- Usa Playwright
 
## Coverage
- Minimo 80% en codigo nuevo
- No testear: types, constants, config

---
name: api-patterns
description: Patrones para crear APIs REST
---
 
# API Patterns
 
## Response Format
```json
{
  "data": {},
  "meta": {},
  "error": null
}

---
description: Patrones de React con hooks, styled-components y TypeScript para componentes de UI
---

---
name: security-standards
description: Estandares de seguridad que aplican a todo el codigo
---
 
# Security Standards
 
## Secrets
- NUNCA hardcodear secrets en codigo
- Usar variables de entorno para API keys
- Usar .env.example con placeholders
 
## Input Validation
- Validar TODO input del usuario con Zod/Yup
- Sanitizar antes de guardar en DB
- Escapar antes de mostrar en HTML
 
## Authentication
- Usar bcrypt para passwords (min cost 12)
- JWT tokens con expiracion corta (1h access, 7d refresh)
- Rate limiting en endpoints de auth
 
## Lo Que NO Hacer
- NO usar eval() o Function()
- NO concatenar SQL (usar parametros)
- NO confiar en headers del cliente
- NO logear datos sensibles (passwords, tokens, PII)

## Checklist de Auditoria de Skills
 
- [ ] Fecha de ultima actualizacion < 6 meses
- [ ] No hay contradicciones entre skills
- [ ] Ejemplos siguen funcionando
- [ ] Nuevos patterns estan documentados
- [ ] Skills deprecadas fueron removidas

---
name: react-patterns
description: Patterns de React (overrides org-standards para este proyecto)
---
 
# React Patterns
 
## Nota: Excepciones a Org Standards
 
Este proyecto usa styled-components en lugar de Tailwind
porque es un proyecto legacy. Ver decision ADR-023.
 
[...]