siesa-ui-kit 1.0.4 → 1.0.5

package/README.md

@@ -1,115 +1,89 @@
-# 🎨 Siesa UI Kit
-
-Sistema de componentes de interfaz moderno con React, TypeScript y Tailwind CSS. Construido con un sistema de diseño completo que incluye dark mode, tokens consistentes y documentación interactiva.
-
-## 🚀 Inicio Rápido
-
-```bash
-# Instalar dependencias
-npm install
-
-# Iniciar Storybook (documentación interactiva)
-npm run storybook
-
-# Construir para producción
-npm run build
-
-# Construir Storybook para producción
-npm run build-storybook
-```
-
-## 🛠️ Tecnologías
-
-- **React 19** - Framework UI
-- **TypeScript 5** - Tipado estático
-- **Tailwind CSS 3.4** - Sistema de estilos
-- **Storybook 10** - Documentación de componentes
-- **Vite 7** - Build tool
-
-## 📖 Storybook
-
-Este proyecto utiliza **Storybook** como herramienta principal para:
-
-- 📦 Desarrollar componentes de forma aislada
-- 🎨 Visualizar todos los estados y variantes
-- 📝 Documentar props y ejemplos de uso
-- 🧪 Probar componentes interactivamente
-- 🌓 Verificar dark mode y accesibilidad
-
-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
-```
-
-## 📚 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
-- `typography.md` - Sistema tipográfico
-- `spacing.md` - Escala de espaciado
-- `shadows.md` - Elevaciones y sombras
-- `dark-mode-guide.md` - Implementación de dark mode
-- `icons.md` - Sistema de íconos
-- `filters.md` - Filtros y efectos
-- `border-radius.md` - Bordes redondeados
-
-## 🎨 Diseño
-
-- [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
+# 🎨 Siesa UI Kit
+
+Sistema de componentes de interfaz moderno con React, TypeScript y Tailwind CSS. Construido con un sistema de diseño completo que incluye dark mode, tokens consistentes y documentación interactiva.
+
+## 🚀 Inicio Rápido
+
+```bash
+# Instalar dependencias
+npm install
+
+# Iniciar Storybook (documentación interactiva)
+npm run storybook
+
+# Construir para producción
+npm run build
+
+# Construir Storybook para producción
+npm run build-storybook
+```
+
+## 🛠️ Tecnologías
+
+- **React 19** - Framework UI
+- **TypeScript 5** - Tipado estático
+- **Tailwind CSS 3.4** - Sistema de estilos
+- **Storybook 10** - Documentación de componentes
+- **Vite 7** - Build tool
+
+## 📖 Storybook
+
+Este proyecto utiliza **Storybook** como herramienta principal para:
+
+- 📦 Desarrollar componentes de forma aislada
+- 🎨 Visualizar todos los estados y variantes
+- 📝 Documentar props y ejemplos de uso
+- 🧪 Probar componentes interactivamente
+- 🌓 Verificar dark mode y accesibilidad
+
+Accede a Storybook ejecutando `npm run storybook` y abriendo http://localhost:6006
+
+## 🤖 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
+
+En la carpeta `docs/` encontrarás guías detalladas sobre:
+
+- `colors.md` - Paleta de colores y tokens
+- `typography.md` - Sistema tipográfico
+- `spacing.md` - Escala de espaciado
+- `shadows.md` - Elevaciones y sombras
+- `dark-mode-guide.md` - Implementación de dark mode
+- `icons.md` - Sistema de íconos
+- `filters.md` - Filtros y efectos
+- `border-radius.md` - Bordes redondeados
+
+## 🎨 Diseño
+
+- [Figma Design System](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit)
+
+---
+
+© 2025 Siesa