Skill local

Un archivo de skill integrado que OpenCode y Claude Code descubren solos en cualquier espacio de trabajo que use componentes de Volt UI.

Qué es

npx @voltui/agent instala la skill en la carpeta que escanea tu agente: .claude/skills/volt-ui/ para Claude Code, .agents/skills/volt-ui/ para Codex y OpenCode. El agente la carga automáticamente y usa las convenciones, los selectores y el catálogo de componentes al escribir código para tu proyecto. El origen es .agents/skills/volt-ui/SKILL.md en el repositorio de Volt UI.

Instalar la skill

La forma más rápida de instalar la skill en un proyecto es el instalador de agentes de Volt UI, que además conecta el servidor MCP. Ejecútalo desde el directorio de tu proyecto:

npx @voltui/agent claude

Qué cubre la skill

  • •Contexto del stack — Angular 21, signals sin zonas, OnPush, standalone, Tailwind v4, ng-primitives, CVA
  • •Convenciones de nombres — ui-* frente a volt-* , selectores de elemento frente a selectores de atributo
  • •Catálogo de componentes — componentes estables y beta con sus selectores y entradas principales
  • •Reglas de superposición — disparadores como directiva de atributo + <ng-template> para dialog, drawer, popover, tooltip y dropdown-menu
  • •Reactive Forms — qué componentes son CVA y cómo conectar FormControl
  • •Sistema de temas — provideVoltTheme , colores, estilos y modo oscuro

Ejemplo de regla de la skill

// Overlays are template-based
<button [uiDialog]="dialogTpl">Open</button>
<ng-template #dialogTpl let-close="close">
  <div uiDialogOverlay></div>
  <div uiDialogContent>...</div>
</ng-template>

La skill le dice explícitamente al agente que nunca escriba <ui-dialog> , <ui-tooltip> ni otros selectores de elemento inválidos.