siesa-ui-kit 1.0.0

package/claude/prompts/component-template.md

@@ -0,0 +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

package/claude/settings.local.json

@@ -0,0 +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"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}