Primeros Pasos
Skill de IA
Instala la skill de Spartan Vue para que tu asistente de IA conozca los 68 componentes y te ayude a usarlos.
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:
npx skills add placetopay-org/spartan-vue --skill spartan-vue
¿Qué puede hacer el asistente con la skill?
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.
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.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.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,SButtonySCheckboxcon 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
SDTablecon la configuración de@tanstack/vue-tableySPaginator. - "Cómo personalizo el header del SCard?" — Explica el uso de
pt:titleypt:descriptioncon 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
@themelas 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 |
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.