---
title: Skill de IA
description: Instala la skill de Spartan Vue para que tu asistente de IA conozca los 68 componentes y te ayude a usarlos.
navigation:
  icon: i-lucide-bot
seo:
  title: Skill de IA para Spartan Vue
  description: Instala la skill de Spartan Vue para que tu asistente de IA conozca todos los componentes, sus props, variantes, slots y patrones de uso.
---

La **skill de Spartan Vue** le da a tu asistente de IA un conocimiento completo de los 68 componentes de la librería: qué hace cada uno, qué props acepta, qué variantes tiene, cómo personalizarlo y cómo combinarlos para construir interfaces completas.

## Instalación

Ejecuta el siguiente comando desde la raíz de tu proyecto:

```bash
npx skills add placetopay-org/spartan-vue --skill spartan-vue
```

## ¿Qué puede hacer el asistente con la skill?

::card-group
  :::card
  ---
  icon: i-lucide-layout-grid
  title: Conoce los 68 componentes
  ---
  Catálogo completo con las props, slots, eventos y variantes de cada componente. Puede sugerirte el componente correcto para tu caso de uso.
  :::

  :::card
  ---
  icon: i-lucide-paintbrush
  title: Personalización con Passthrough
  ---
  Sabe qué keys de `usePassthrough()` acepta cada componente y cómo usarlos para personalizar elementos internos con las 3 formas de sintaxis.
  :::

  :::card
  ---
  icon: i-lucide-palette
  title: Temas y colores
  ---
  Conoce las variables CSS del tema (`--color-spartan-primary-*`), cómo overridear la paleta con `@theme`, las utilities de focus ring y la exclusión de la fuente Inter.
  :::

  :::card
  ---
  icon: i-lucide-globe
  title: Internacionalización
  ---
  Guía completa de configuración de `vue-i18n`, helpers de mezcla de traducciones, los 5 idiomas soportados y qué componentes usan textos internos.
  :::
::

## Ejemplos de tareas

Con la skill instalada, puedes pedirle al asistente cosas como:

- **"Necesito un formulario de login"** — Combina `SInput`, `SInputPassword`, `SButton` y `SCheckbox` con las props correctas.
- **"Muéstrame todas las variantes de SAlert"** — Genera código con las 7 paletas de color y 4 estilos (solid, outline, soft, subtle).
- **"Quiero una tabla de datos con paginación"** — Usa `SDTable` con la configuración de `@tanstack/vue-table` y `SPaginator`.
- **"Cómo personalizo el header del SCard?"** — Explica el uso de `pt:title` y `pt:description` con la sintaxis de passthrough.
- **"Configura vue-i18n para que los componentes se muestren en español"** — Setup completo con locales y helpers.
- **"Cambia el color primario de toda la librería a azul"** — Overridea con `@theme` las 10 variables de `--color-spartan-primary-*`.

## ¿Qué conoce la skill?

| Área | Detalle |
|------|---------|
| **API de componentes** | Props, emits, slots y sub-componentes de los 68 componentes |
| **Categorías** | Data input, selectors, display, modals, structure, utilities, typography |
| **Block variants** | Wrappers como `SInputBlock`, `SSelectBlock` que agregan label, ayuda y error |
| **Passthrough** | Keys de `usePassthrough()` por componente (16 componentes soportados) |
| **Temas** | Variables CSS `--color-spartan-primary-*`, utilities de outline/ring, exclusión de Inter |
| **i18n** | Setup de `vue-i18n`, helpers de mezcla, 5 idiomas, keys `$spartan.*` por componente |
| **Instalación** | Setup completo: npm install, TailwindCSS v4, imports, troubleshooting |
| **Patrones** | v-model, prop `as` polimórfico, estados de formulario, dark mode, iconos |

::prose-tip
La skill funciona mejor dentro de proyectos que usan `@placetopay/spartan-vue`. Proporciona contexto automáticamente para que el asistente genere código que sigue las convenciones de la librería.
::