agent-ctx 1.0.0

package/src/templates/es/skills/skill-react.md

@@ -0,0 +1,94 @@
+---
+name: react-patterns
+description: Patrones de componentes React, hooks y mejores prácticas con TypeScript. Usar cuando se crean componentes, custom hooks u optimización de renderizado.
+---
+
+# React Patterns
+
+Patrones y mejores prácticas para desarrollo React.
+
+## Cuándo usar
+
+- Crear componentes reutilizables
+- Manejar estado complejo
+- Optimizar rendimiento de renderizado
+- Construir custom hooks
+
+## Patrones de Componentes
+
+### Componente Funcional con Props Tipadas
+
+```tsx
+interface ButtonProps {
+  variant: 'primary' | 'secondary';
+  children: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+}
+
+export function Button({ variant, children, onClick, disabled }: ButtonProps) {
+  return (
+    <button
+      className={`btn btn-${variant}`}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+}
+```
+
+### Custom Hook
+
+```tsx
+function useToggle(initialValue = false) {
+  const [value, setValue] = useState(initialValue);
+  
+  const toggle = useCallback(() => setValue(v => !v), []);
+  const setTrue = useCallback(() => setValue(true), []);
+  const setFalse = useCallback(() => setValue(false), []);
+  
+  return { value, toggle, setTrue, setFalse };
+}
+```
+
+### Compound Components
+
+```tsx
+const Card = ({ children }) => <div className="card">{children}</div>;
+Card.Header = ({ children }) => <div className="card-header">{children}</div>;
+Card.Body = ({ children }) => <div className="card-body">{children}</div>;
+
+// Uso:
+<Card>
+  <Card.Header>Título</Card.Header>
+  <Card.Body>Contenido</Card.Body>
+</Card>
+```
+
+## Estructura de Directorios
+
+```
+components/
+├── ui/           # Componentes base (Button, Input, Modal)
+├── features/     # Componentes específicos de features
+├── layouts/      # Layouts y wrappers
+└── hooks/        # Custom hooks reutilizables
+```
+
+## Mejores prácticas
+
+### ✅ Hacer
+
+- Usar `useMemo` y `useCallback` para optimización
+- Tipar todas las props con TypeScript
+- Extraer lógica a custom hooks
+- Composición sobre herencia
+
+### ❌ Evitar
+
+- Props drilling excesivo (usar Context)
+- useEffect sin dependencias correctas
+- Estado en el componente incorrecto
+- Listas sin `key`

package/src/templates/es/skills/skill-rules.md

@@ -0,0 +1,100 @@
+---
+name: creating-rules
+description: Definir documentación de reglas y estándares de código. Usar cuando se establecen o actualizan convenciones de código, reglas de linter o estándares de equipo.
+---
+
+# Creando Reglas de Código
+
+Definir y documentar estándares de código que agentes AI y desarrolladores deben seguir.
+
+## Cuándo usar
+
+- Establecer nuevas convenciones de código
+- Documentar estándares de equipo existentes
+- Añadir reglas de linter o formatter
+- Clarificar patrones de código ambiguos
+
+## Estructura del Documento de Regla
+
+```markdown
+# Regla: [Nombre de la Regla]
+
+> Descripción breve de la regla
+
+## Por qué existe esta regla
+
+[Explica el problema que previene o beneficio que proporciona]
+
+## Requisitos
+
+- Requisito 1
+- Requisito 2
+
+## ✅ Ejemplos Correctos
+
+[Código mostrando uso correcto]
+
+## ❌ Ejemplos Incorrectos
+
+[Código mostrando qué evitar]
+
+## Excepciones
+
+[Excepciones válidas o "Sin excepciones"]
+
+## Enforcement
+
+- [ ] Regla de linter: [nombre de regla]
+- [ ] Checklist de code review
+- [ ] Test automatizado
+```
+
+## Categorías Comunes de Reglas
+
+### Estilo de Código
+
+- Convenciones de nombres (camelCase, PascalCase)
+- Organización de archivos
+- Orden de imports
+- Estándares de comentarios
+
+### Arquitectura
+
+- Estructura de componentes
+- Patrones de gestión de estado
+- Patrones de diseño de API
+- Manejo de errores
+
+### Calidad
+
+- Requisitos de cobertura de tests
+- Umbrales de rendimiento
+- Prácticas de seguridad
+- Estándares de accesibilidad
+
+## Escribiendo Reglas Efectivas
+
+### ✅ Hacer
+
+- Proporcionar ejemplos concretos
+- Explicar el "por qué" no solo el "qué"
+- Incluir ejemplos correctos e incorrectos
+- Hacer reglas aplicables (linter, tests)
+
+### ❌ Evitar
+
+- Requisitos vagos
+- Reglas sin ejemplos
+- Reglas conflictivas
+- Excepciones demasiado estrictas
+
+## Organización de Archivos
+
+```
+.context/
+└── rules/
+    ├── coding-standards.md    # Estándares principales
+    ├── naming-conventions.md  # Reglas de nombres
+    ├── testing-rules.md       # Requisitos de tests
+    └── security-rules.md      # Prácticas de seguridad
+```

package/src/templates/es/skills/skill-testing.md

@@ -0,0 +1,139 @@
+---
+name: testing-practices
+description: Estrategias de testing, patrones y mejores prácticas con Jest/Vitest. Usar cuando se escriben unit tests, integration tests o mocking de dependencias.
+---
+
+# Testing Practices
+
+Estrategias y patrones para testing efectivo.
+
+## Cuándo usar
+
+- Escribir unit tests
+- Crear integration tests
+- Mockear dependencias
+- Testear componentes React
+
+## Pirámide de Testing
+
+```
+        /\
+       /  \     E2E Tests (Playwright, Cypress)
+      /----\    
+     /      \   Integration Tests
+    /--------\  
+   /          \ Unit Tests
+  /____________\
+```
+
+## Unit Tests (Vitest)
+
+### Test Básico
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { sum } from './sum';
+
+describe('sum', () => {
+  it('debería sumar dos números positivos', () => {
+    expect(sum(1, 2)).toBe(3);
+  });
+  
+  it('debería manejar números negativos', () => {
+    expect(sum(-1, 1)).toBe(0);
+  });
+});
+```
+
+### Test con Setup/Teardown
+
+```typescript
+describe('UserService', () => {
+  let service: UserService;
+  
+  beforeEach(() => {
+    service = new UserService();
+  });
+  
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+  
+  it('debería crear un usuario', async () => {
+    const user = await service.create({ name: 'Test' });
+    expect(user.id).toBeDefined();
+  });
+});
+```
+
+## Mocking
+
+```typescript
+// Mock de módulo
+vi.mock('./database', () => ({
+  query: vi.fn().mockResolvedValue([{ id: 1, name: 'Test' }])
+}));
+
+// Mock de función
+const mockFetch = vi.fn().mockResolvedValue({
+  json: () => Promise.resolve({ data: 'test' })
+});
+
+// Spy
+const spy = vi.spyOn(console, 'log');
+myFunction();
+expect(spy).toHaveBeenCalledWith('mensaje esperado');
+```
+
+## React Testing Library
+
+```typescript
+import { render, screen, fireEvent } from '@testing-library/react';
+
+test('debería mostrar e interactuar con botón', async () => {
+  const handleClick = vi.fn();
+  render(<Button onClick={handleClick}>Click me</Button>);
+  
+  const button = screen.getByRole('button', { name: /click me/i });
+  expect(button).toBeInTheDocument();
+  
+  await fireEvent.click(button);
+  expect(handleClick).toHaveBeenCalledTimes(1);
+});
+```
+
+## Estructura de Tests
+
+```
+__tests__/
+├── unit/
+│   ├── services/
+│   └── utils/
+├── integration/
+│   └── api/
+└── e2e/
+    └── flows/
+```
+
+## Mejores prácticas
+
+### ✅ Hacer
+
+- Una aserción por test (cuando sea posible)
+- Nombres descriptivos: `debería_X_cuando_Y`
+- Arrange-Act-Assert (AAA)
+- Tests independientes
+
+### ❌ Evitar
+
+- Tests que dependen del orden
+- Lógica en tests
+- Tests flaky (intermitentes)
+- Mockear todo indiscriminadamente
+
+## Cobertura Recomendada
+
+- Statements: 80%
+- Branches: 75%
+- Functions: 80%
+- Lines: 80%