siesa-ui-kit 1.0.2 → 1.0.4

package/README.md

@@ -1,115 +1,115 @@
-# 🎨 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
+
+## 📁 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