🎨 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

# 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

🔌 Configuración MCP de Figma

Para extraer specs de Figma automáticamente, configura el MCP server:

1. Abre Figma Desktop
2. Ejecuta en terminal:

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