# 🎨 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
- `i18n-masterdocument-deuda.md` - i18n de MasterDocument: qué falta y quién lo tiene

## 🎨 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