siesa-ui-kit 1.0.4 → 1.0.5

package/claude/prompts/component-template.md

@@ -1,121 +1,121 @@
-# 🎯 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
+# 🎯 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

package/claude/settings.local.json

@@ -1,72 +1,61 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(claude mcp add:*)",
-      "Bash(where:*)",
-      "Bash(set CLAUDE_CODE_GIT_BASH_PATH=C:UsersssanchezeAppDataLocalProgramsGitusrbinbash.exe)",
-      "Bash(setx CLAUDE_CODE_GIT_BASH_PATH \"C:\\Users\\ssancheze\\AppData\\Local\\Programs\\Git\\usr\\bin\\bash.exe\")",
-      "Bash($env:CLAUDE_CODE_GIT_BASH_PATH=\"C:\\Users\\ssancheze\\AppData\\Local\\Programs\\Git\\usr\\bin\\bash.exe\")",
-      "Bash(export CLAUDE_CODE_GIT_BASH_PATH=\"C:\\Users\\ssancheze\\AppData\\Local\\Programs\\Git\\usr\\bin\\bash.exe\")",
-      "Bash(claude mcp list:*)",
-      "Bash(claude mcp)",
-      "Bash(nul)",
-      "WebSearch",
-      "Bash(cmd /c npx -y figma-developer-mcp --help)",
-      "Bash(npx -y figma-developer-mcp:*)",
-      "Bash(claude mcp get:*)",
-      "Bash(npm install:*)",
-      "Bash(npx tailwindcss init:*)",
-      "Bash(npm run storybook:*)",
-      "Bash(taskkill:*)",
-      "Bash(npx kill-port:*)",
-      "Bash(cmd /c claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp)",
-      "Bash(dir \"C:\\Users\\ssancheze\\AppData\\Local\\Programs\\Git\")",
-      "Bash(dir /B:*)",
-      "WebFetch(domain:www.figma.com)",
-      "mcp__figma-desktop__get_design_context",
-      "mcp__figma-desktop__get_variable_defs",
-      "mcp__figma-desktop__get_screenshot",
-      "Bash(npm run build:*)",
-      "Bash(timeout 10 npm run dev:*)",
-      "Bash(npm run dev:*)",
-      "mcp__figma-desktop__get_metadata",
-      "Bash(netstat:*)",
-      "Bash(findstr:*)",
-      "WebFetch(domain:storybook.js.org)",
-      "Bash(if not exist docs mkdir docs)",
-      "Bash(npm uninstall:*)",
-      "Bash(move postcss.config.js postcss.config.cjs)",
-      "Bash(del .storybookpreview.ts)",
-      "Bash(python update_stories.py:*)",
-      "Bash(del update_stories.py)",
-      "Bash(timeout /t 15 /nobreak:*)",
-      "Bash(dir:*)",
-      "Bash(git mv:*)",
-      "mcp__figma__get_metadata",
-      "mcp__figma__get_design_context",
-      "mcp__figma__get_screenshot",
-      "Bash(if not exist \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\components\\Navbar\" mkdir \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\components\\Navbar\")",
-      "Bash(timeout:*)",
-      "Bash(ping:*)",
-      "Bash(if not exist \"public\" mkdir \"public\")",
-      "Bash(if not exist \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\components\\NavigationRail\" mkdir \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\components\\NavigationRail\")",
-      "Bash(mkdir:*)",
-      "Bash(find:*)",
-      "Bash(curl:*)",
-      "mcp__figma__get_variable_defs",
-      "Bash(move:*)",
-      "Bash(cmd /c move:*)",
-      "Bash(cmd /c:*)",
-      "Bash(cat:*)",
-      "Bash(git config:*)",
-      "Bash(cmdkey /list:*)",
-      "Bash(git credential:*)",
-      "Bash(git credential-manager:*)",
-      "Bash(printf:*)",
-      "Bash(if not exist \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\views\\ListView\" mkdir \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\views\\ListView\")",
-      "Bash(npm run build:lib:*)"
-    ],
-    "deny": [],
-    "ask": []
-  }
-}
+{
+  "permissions": {
+    "allow": [
+      "Bash(claude mcp add:*)",
+      "Bash(where:*)",
+      "Bash(set CLAUDE_CODE_GIT_BASH_PATH=C:UsersssanchezeAppDataLocalProgramsGitusrbinbash.exe)",
+      "Bash(setx CLAUDE_CODE_GIT_BASH_PATH \"C:\\Users\\ssancheze\\AppData\\Local\\Programs\\Git\\usr\\bin\\bash.exe\")",
+      "Bash($env:CLAUDE_CODE_GIT_BASH_PATH=\"C:\\Users\\ssancheze\\AppData\\Local\\Programs\\Git\\usr\\bin\\bash.exe\")",
+      "Bash(export CLAUDE_CODE_GIT_BASH_PATH=\"C:\\Users\\ssancheze\\AppData\\Local\\Programs\\Git\\usr\\bin\\bash.exe\")",
+      "Bash(claude mcp list:*)",
+      "Bash(claude mcp)",
+      "Bash(nul)",
+      "WebSearch",
+      "Bash(cmd /c npx -y figma-developer-mcp --help)",
+      "Bash(npx -y figma-developer-mcp:*)",
+      "Bash(claude mcp get:*)",
+      "Bash(npm install:*)",
+      "Bash(npx tailwindcss init:*)",
+      "Bash(npm run storybook:*)",
+      "Bash(taskkill:*)",
+      "Bash(npx kill-port:*)",
+      "Bash(cmd /c claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp)",
+      "Bash(dir \"C:\\Users\\ssancheze\\AppData\\Local\\Programs\\Git\")",
+      "Bash(dir /B:*)",
+      "WebFetch(domain:www.figma.com)",
+      "mcp__figma-desktop__get_design_context",
+      "mcp__figma-desktop__get_variable_defs",
+      "mcp__figma-desktop__get_screenshot",
+      "Bash(npm run build:*)",
+      "Bash(timeout 10 npm run dev:*)",
+      "Bash(npm run dev:*)",
+      "mcp__figma-desktop__get_metadata",
+      "Bash(netstat:*)",
+      "Bash(findstr:*)",
+      "WebFetch(domain:storybook.js.org)",
+      "Bash(if not exist docs mkdir docs)",
+      "Bash(npm uninstall:*)",
+      "Bash(move postcss.config.js postcss.config.cjs)",
+      "Bash(del .storybookpreview.ts)",
+      "Bash(python update_stories.py:*)",
+      "Bash(del update_stories.py)",
+      "Bash(timeout /t 15 /nobreak:*)",
+      "Bash(dir:*)",
+      "Bash(git mv:*)",
+      "mcp__figma__get_metadata",
+      "mcp__figma__get_design_context",
+      "mcp__figma__get_screenshot",
+      "Bash(if not exist \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\components\\Navbar\" mkdir \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\components\\Navbar\")",
+      "Bash(timeout:*)",
+      "Bash(ping:*)",
+      "Bash(if not exist \"public\" mkdir \"public\")",
+      "Bash(if not exist \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\components\\NavigationRail\" mkdir \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\components\\NavigationRail\")",
+      "Bash(mkdir:*)",
+      "Bash(find:*)",
+      "Bash(curl:*)",
+      "mcp__figma__get_variable_defs"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}