@@ -9,20 +9,24 @@ Este directorio contiene 4 skills especializados que asisten en el desarrollo de
99## Skills Disponibles
1010
1111### 1. feature-planner 🎯
12+
1213** Propósito** : Crear planes de implementación comprensivos para nuevas features
1314
1415** Cuándo usarlo** :
16+
1517- Necesitas planificar una nueva feature desde cero
1618- Tienes documentación de requerimientos (PDF, MD, texto)
1719- Quieres un roadmap detallado fase por fase
1820
1921** Output** : ` feature-plan-[nombre].md ` (500-1,000 líneas)
22+
2023- 8 fases de implementación
2124- Ejemplos TypeScript/React completos
2225- Checklists de archivos a crear
2326- Estimaciones de tiempo por fase
2427
2528** Invocación** :
29+
2630```
2731"Create implementation plan for blog feature"
2832"Plan the testimonials section from these requirements"
@@ -31,20 +35,24 @@ Este directorio contiene 4 skills especializados que asisten en el desarrollo de
3135---
3236
3337### 2. code-reviewer 🔍
38+
3439** Propósito** : Validar implementaciones contra los estándares del proyecto
3540
3641** Cuándo usarlo** :
42+
3743- Completaste una feature y quieres validar calidad
3844- Necesitas review antes de merge
3945- Quieres identificar violaciones de arquitectura
4046
4147** Output** : ` validation-report-[branch]-[fecha].md ` (600-1,000 líneas)
48+
4249- Compliance score (X/100)
4350- Violaciones por capa (core, features, shared)
4451- File: line references con fixes
4552- Action items priorizados (Critical → Low)
4653
4754** Invocación** :
55+
4856```
4957"Review my implementation on feature/blog branch"
5058"Validate the contact feature code quality"
@@ -53,21 +61,25 @@ Este directorio contiene 4 skills especializados que asisten en el desarrollo de
5361---
5462
5563### 3. component-generator ⚛️
64+
5665** Propósito** : Generar componentes React con estructura completa
5766
5867** Cuándo usarlo** :
68+
5969- Necesitas crear un nuevo componente rápidamente
6070- Quieres scaffold completo (component + translations + tests)
6171- Generar componentes siguiendo patrones del proyecto
6272
6373** Output** : Archivos generados automáticamente
74+
6475- Component files (.tsx)
6576- TypeScript interfaces
6677- Translation updates (es.json, en.json)
6778- Test scaffolds (.test.tsx)
6879- Framer Motion animations incluidas
6980
7081** Invocación** :
82+
7183```
7284"Generate a Modal component with animations"
7385"Create BlogCard component for the blog feature"
@@ -76,21 +88,25 @@ Este directorio contiene 4 skills especializados que asisten en el desarrollo de
7688---
7789
7890### 4. test-writer 🧪
91+
7992** Propósito** : Generar test suites comprehensivos (80%+ coverage)
8093
8194** Cuándo usarlo** :
95+
8296- Necesitas tests para un feature/component nuevo
8397- Coverage está bajo el 80%
8498- Quieres template de tests siguiendo best practices
8599
86100** Output** : Test files (.test.ts, .test.tsx)
101+
87102- Entity tests (core layer)
88103- Component tests (React Testing Library)
89104- Accessibility tests
90105- i18n rendering tests
91106- Coverage estimate
92107
93108** Invocación** :
109+
94110```
95111"Write tests for the Skills component with 80%+ coverage"
96112"Generate comprehensive tests for BlogPost entity"
@@ -198,6 +214,7 @@ Este portfolio sigue **Clean Architecture** con 3 capas:
198214```
199215
200216** Dependency Rule** (CRÍTICA):
217+
201218- ` features ` → puede importar de ` core ` y ` shared `
202219- ` shared ` → puede importar de ` core `
203220- ` core ` → NO puede importar de NADA (pure TypeScript)
@@ -207,25 +224,29 @@ Este portfolio sigue **Clean Architecture** con 3 capas:
207224## Estándares del Proyecto
208225
209226### 1. Testing (ESTRICTO)
227+
210228- ** 80%+ coverage requerido** (lines, functions, branches, statements)
211229- Vitest + React Testing Library
212230- Tests deben seguir AAA pattern
213231- Archivos: ` tests/ ` mirror de ` src/ `
214232
215233### 2. i18n (OBLIGATORIO)
234+
216235- ** TODO texto visible debe usar traducciones**
217236- Soportar ES (default) y EN
218237- Client components: ` useTranslations() `
219238- Server components: ` getTranslations() `
220239- Archivos: ` messages/es.json ` , ` messages/en.json `
221240
222241### 3. TypeScript (ESTRICTO)
242+
223243- Strict mode enabled
224244- Interfaces para todas las props
225245- No ` any ` types
226246- Path aliases: ` @/core ` , ` @/features ` , ` @/shared `
227247
228248### 4. Styling
249+
229250- Tailwind CSS utility classes
230251- Responsive design (mobile-first)
231252- Dark mode support
@@ -238,9 +259,11 @@ Este portfolio sigue **Clean Architecture** con 3 capas:
238259### Desarrollo de Nueva Feature
239260
2402611 . ** Plan** → Usa ` feature-planner `
262+
241263 ```
242264 "Create implementation plan for [feature]"
243265 ```
266+
244267 Output: Plan detallado de 8 fases
245268
2462692 . ** Implement** → Sigue el plan generado
@@ -250,19 +273,23 @@ Este portfolio sigue **Clean Architecture** con 3 capas:
250273 - Escribir tests
251274
2522753 . ** Generate** → Usa ` component-generator ` para componentes específicos
276+
253277 ```
254278 "Generate [ComponentName] component"
255279 ```
256280
2572814 . ** Test** → Usa ` test-writer ` para completar coverage
282+
258283 ```
259284 "Write tests for [feature] with 80%+ coverage"
260285 ```
261286
2622875 . ** Review** → Usa ` code-reviewer ` antes de merge
288+
263289 ```
264290 "Review my implementation on feature/[name]"
265291 ```
292+
266293 Output: Validation report con violations
267294
2682956 . ** Fix** → Corregir violations críticas
@@ -276,31 +303,36 @@ Este portfolio sigue **Clean Architecture** con 3 capas:
276303Los skills validan automáticamente:
277304
278305### Core Layer ✅
306+
279307- ❌ NO framework imports (React, Next.js)
280308- ✅ SOLO pure TypeScript
281309- ✅ Entity validation en constructors
282310- ✅ Use-cases como pure functions
283311
284312### Features Layer ✅
313+
285314- ✅ Imports permitidos de ` core/ ` y ` shared/ `
286315- ✅ Uso correcto de ` useTranslations() `
287316- ✅ Framer Motion animations
288317- ✅ Props TypeScript interfaces
289318- ❌ NO business logic extensa en components
290319
291320### Shared Layer ✅
321+
292322- ✅ Componentes reutilizables
293323- ✅ Custom hooks siguiendo rules of hooks
294324- ✅ Utilities sin side effects
295325- ✅ Constants exportadas correctamente
296326
297327### Translation ✅
328+
298329- ❌ NO hardcoded strings (ES/EN)
299330- ✅ TODO texto usa ` t() ` function
300331- ✅ Ambos idiomas soportados
301332- ✅ Keys consistentes entre locales
302333
303334### Testing ✅
335+
304336- ✅ 80%+ coverage MÍNIMO
305337- ✅ Tests para entities (core)
306338- ✅ Tests para components (features)
@@ -313,24 +345,28 @@ Los skills validan automáticamente:
313345## Tips para Mejores Resultados
314346
315347### Con feature-planner:
348+
3163491 . Provee contexto claro de la feature
3173502 . Menciona requirements específicos
3183513 . Indica complejidad esperada
3193524 . Especifica si hay constraints técnicas
320353
321354### Con code-reviewer:
355+
3223561 . Asegúrate de estar en feature branch (no main/master)
3233572 . Haz commit de cambios antes de review
3243583 . Provee documentación de requirements si existe
3253594 . Ejecuta después de completar la feature
326360
327361### Con component-generator:
362+
3283631 . Describe el propósito del componente
3293642 . Menciona props esperadas
3303653 . Indica si es feature o UI component
3313664 . Especifica animations si las necesitas
332367
333368### Con test-writer:
369+
3343701 . Provee el archivo/feature a testear
3353712 . Menciona coverage target (80%+ default)
3363723 . Indica casos edge específicos si existen
@@ -341,21 +377,25 @@ Los skills validan automáticamente:
341377## Troubleshooting
342378
343379### "Skill no se invoca automáticamente"
380+
344381- Usa keywords claras: "plan", "review", "generate", "write tests"
345382- Menciona el nombre del skill explícitamente
346383- Proporciona contexto suficiente
347384
348385### "Output incompleto"
386+
349387- Los skills generan 500-2,000 líneas
350388- Dale tiempo para completar
351389- Pide continuación si se corta
352390
353391### "Violations no son claras"
392+
354393- Los reports incluyen file: line references
355394- Busca secciones "❌ WRONG → ✅ CORRECT"
356395- Revisa "Time to Fix" estimates
357396
358397### "Tests no pasan después de generar"
398+
359399- Verifica imports de traducciones
360400- Asegura mocks están configurados
361401- Revisa setup.ts configuration
@@ -365,14 +405,17 @@ Los skills validan automáticamente:
365405## Archivos de Referencia
366406
367407### Architecture Guides
408+
368409- ` .claude/architecture/clean-architecture.md ` - Detalles de Clean Architecture
369410- ` .claude/architecture/testing-strategy.md ` - Estrategia de testing 80%+
370411- ` .claude/architecture/i18n-patterns.md ` - Patrones de next-intl
371412
372413### Examples
414+
373415- ` .claude/EXAMPLES.md ` - Ejemplos completos de uso real
374416
375417### Skills
418+
376419- ` .claude/skills/feature-planner/SKILL.md ` - Implementation planning
377420- ` .claude/skills/code-reviewer/SKILL.md ` - Code validation
378421- ` .claude/skills/component-generator/SKILL.md ` - Component generation
0 commit comments