siesa-ui-kit 1.0.0 → 1.0.2

package/claude/prompts/component-template.md

@@ -1,121 +0,0 @@
-# 🎯 Prompt Template: Crear/Corregir Componentes
-
-## ✅ Crear Componente Nuevo
-
-```
-Usando el agente @.claude\agents\siesa-ui-kit-specialist.md CREA el componente [NOMBRE_COMPONENTE]
-
-**Figma:** [LINK_FIGMA o "No disponible"]
-
-**Proceso completo:**
-1. Si hay Figma: extrae specs (colores, tamaños, espaciados, estados)
-2. Revisa docs necesarias (colors.md, typography.md, spacing.md, shadows.md)
-3. Usa Button como referencia de implementación
-4. Genera estructura completa en src/components/[NOMBRE_COMPONENTE]/
-5. Implementa usando tokens del sistema
-6. Asegura dark mode completo en TODOS los elementos
-7. Valida con npm run build
-8. Crea stories con todos los estados y ejemplos
-9. Genera README del componente
-
-**Checklist obligatorio:**
-- [ ] Todos los archivos necesarios (.tsx, .types.ts, .stories.tsx, index.ts, README.md)
-- [ ] JSDoc completo con Usando el agente @see references
-- [ ] Dark mode en todos los estados (hover, focus, active, disabled)
-- [ ] Focus rings adaptativos
-- [ ] Props con defaults y tipos estrictos
-- [ ] Tokens del sistema (NO colores hardcodeados)
-- [ ] Build sin errores
-- [ ] Stories con ejemplos completos
-- [ ] Pixel-perfect vs Figma (si aplica)
-
-Reporta detalladamente todos los cambios realizados.
-```
-
----
-
-## 🔧 Corregir Componente Existente
-
-```
-Usando el agente @.claude\agents\siesa-ui-kit-specialist.md CORRIGE el componente [NOMBRE_COMPONENTE]
-
-**Figma:** [LINK_FIGMA o "No disponible"]
-
-**Proceso completo:**
-1. Si hay Figma: extrae specs (colores, tamaños, espaciados, estados)
-2. Revisa docs necesarias (colors.md, typography.md, spacing.md, shadows.md)
-3. Usa Button como referencia de implementación
-4. Compara con implementación actual en src/components/[NOMBRE_COMPONENTE]/
-5. Corrige usando tokens del sistema
-6. Asegura dark mode completo en TODOS los elementos
-7. Valida con npm run build
-8. Actualiza stories con todos los estados y ejemplos
-9. Actualiza README del componente si es necesario
-
-**Checklist obligatorio:**
-- [ ] Todos los archivos actualizados (.tsx, .types.ts, .stories.tsx)
-- [ ] JSDoc completo con Usando el agente @see references
-- [ ] Dark mode en todos los estados (hover, focus, active, disabled)
-- [ ] Focus rings adaptativos
-- [ ] Props con defaults y tipos estrictos
-- [ ] Tokens del sistema (NO colores hardcodeados)
-- [ ] Build sin errores
-- [ ] Stories con ejemplos completos
-- [ ] Pixel-perfect vs Figma (si aplica)
-
-Reporta detalladamente todos los cambios realizados.
-```
-
----
-
-## 🖼️ Crear/Corregir Vista (Página Completa)
-
-```
-Usando el agente @.claude\agents\siesa-ui-kit-specialist.md CREA la vista [NOMBRE_VISTA]
-
-**Figma:** [LINK_FIGMA]
-
-**Descripción:** [Breve descripción de la vista/página]
-
-**Proceso completo:**
-1. Analiza el diseño de Figma en detalle (layout, composición, espaciado)
-2. Identifica componentes existentes en src/components/ que se pueden reutilizar
-3. Si faltan componentes, créalos primero siguiendo el template de componentes
-4. Revisa docs de layout patterns (si existen) o usa principios de spacing.md
-5. Crea estructura en src/views/[NOMBRE_VISTA]/ con:
-   - [NombreVista].tsx (componente principal)
-   - [NombreVista].stories.tsx (Storybook)
-   - index.ts (exports)
-   - README.md (documentación)
-6. Compone la vista usando componentes del Storybook
-7. Aplica responsive design (mobile-first)
-8. Asegura dark mode completo
-9. Valida con npm run build y npm run storybook
-10. Documenta uso y props en README
-
-**Checklist obligatorio:**
-- [ ] Análisis completo de Figma (secciones, componentes, layout)
-- [ ] Todos los componentes necesarios existen o fueron creados
-- [ ] Composición correcta con componentes del sistema
-- [ ] Responsive design (breakpoints: sm, md, lg, xl)
-- [ ] Dark mode en toda la vista
-- [ ] Tokens del sistema para espaciado y colores
-- [ ] Stories con diferentes estados (empty, loading, error, success)
-- [ ] README con capturas y ejemplos de uso
-- [ ] Build sin errores
-- [ ] Pixel-perfect vs Figma
-
-**Estructura esperada:**
-src/views/[NombreVista]/
-├── [NombreVista].tsx
-├── [NombreVista].stories.tsx
-├── index.ts
-└── README.md
-
-Reporta detalladamente la composición y componentes utilizados.
-```
-
----
-
-**Versión**: 1.1.0
-**Última actualización**: 2025-11-12