siesa-ui-kit 1.0.3 → 1.0.5

package/README.md

@@ -38,34 +38,37 @@ Este proyecto utiliza **Storybook** como herramienta principal para:
 
 Accede a Storybook ejecutando `npm run storybook` y abriendo http://localhost:6006
 
-## 📁 Estructura de Carpetas
-
-```
-SiesaUIKit/
-├── src/
-│   ├── components/      # Componentes reutilizables
-│   └── views/           # Vistas/páginas completas
-├── docs/                # Documentación del sistema
-├── .claude/
-│   ├── agents/          # Agentes especializados
-│   └── prompts/         # Templates de prompts
-├── .storybook/          # Configuración de Storybook
-└── tailwind.config.js   # Tokens del sistema (colores, sombras, etc.)
-```
-
-Cada componente sigue esta estructura:
-```
-Button/
-├── Button.tsx           # Implementación
-├── Button.types.ts      # Tipos TypeScript
-├── Button.stories.tsx   # Stories de Storybook
-└── index.ts             # Exports
-```
+## 🤖 Desarrollo con IA
+
+Este proyecto fue construido utilizando **Claude (Sonnet 4.5)** con un agente especializado:
+
+### Agente Especializado
+- **Ubicación**: `.claude/agents/siesa-ui-kit-specialist.md`
+- **Propósito**: Crear y mantener componentes siguiendo el sistema de diseño
+- **Características**:
+  - Extrae specs de Figma automáticamente
+  - Aplica tokens del sistema consistentemente
+  - Garantiza dark mode completo
+  - Genera documentación y Storybook stories
+
+### Prompts Templates
+Ubicados en `.claude/prompts/component-template.md`:
+
+1. **Crear Componente Nuevo** - Genera componente completo desde cero
+2. **Corregir Componente Existente** - Actualiza componentes con mejoras
+3. **Crear Vista Completa** - Compone páginas usando componentes del sistema
+
+Cada template incluye un checklist obligatorio que garantiza:
+- ✅ Todos los archivos necesarios (.tsx, .types.ts, .stories.tsx, README.md)
+- ✅ JSDoc completo con referencias
+- ✅ Dark mode en todos los estados
+- ✅ Focus rings adaptativos
+- ✅ Tokens del sistema (sin colores hardcodeados)
+- ✅ Build sin errores
+- ✅ Stories con ejemplos completos
 
 ## 📚 Documentación del Sistema
 
-**Tokens** son valores de diseño predefinidos (colores, sombras, tipografía) que garantizan consistencia. En lugar de `bg-blue-500`, usas `bg-primary-custom-600`. Si el diseño cambia, solo modificas `tailwind.config.js`.
-
 En la carpeta `docs/` encontrarás guías detalladas sobre:
 
 - `colors.md` - Paleta de colores y tokens
@@ -81,35 +84,6 @@ En la carpeta `docs/` encontrarás guías detalladas sobre:
 
 - [Figma Design System](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit)
 
-## 🔌 Configuración MCP de Figma
-
-Para extraer specs de Figma automáticamente, configura el MCP server:
-
-1. Abre Figma Desktop
-2. Ejecuta en terminal:
-```bash
-claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
-```
-
-**Herramientas disponibles:**
-- `get_design_context` - Extrae código React + Tailwind de un nodo
-- `get_screenshot` - Captura screenshot de un nodo
-- `get_metadata` - Obtiene estructura XML de un frame
-- `get_variable_defs` - Obtiene variables de diseño
-
-**Uso:** Pasa el `node-id` de la URL de Figma (ej: `4001-17242`)
-
-## 🤖 Prompts Templates
-
-Ubicados en `.claude/prompts/siesa-ui-kit.md`:
-
-| Prompt | Uso |
-|--------|-----|
-| `CREA el componente [NOMBRE]` | Genera componente completo |
-| `CREA la vista [NOMBRE]` | Genera vista/página completa |
-
-El agente `@siesa-ui-kit-specialist` contiene toda la documentación técnica (tokens, dark mode, checklists).
-
 ---
 
 © 2025 Siesa