Local Skill
A built-in skill file that OpenCode / Claude Code auto-discover in any workspace that uses Volt UI components.
What it is
The skill lives at .agents/skills/volt-ui/SKILL.md in the Volt UI repository. Any AI agent that supports OpenCode-style skills will load it automatically and use the conventions, selectors, and component catalog when writing code for your project.
Install the skill
The fastest way to install the skill in a consumer project is to copy it into the standard local-skills location:
mkdir -p .agents/skills/volt-ui && curl -fsSL https://volt-ui.pages.dev/.agents/skills/volt-ui/SKILL.md -o .agents/skills/volt-ui/SKILL.mdWhat the skill covers
- •Stack context — Angular 21, zoneless signals, OnPush, standalone, Tailwind v4, ng-primitives, CVA
- •Naming conventions —
ui-*vsvolt-*, element vs attribute selectors - •Component catalog — stable and beta components with selectors and key inputs
- •Overlay rules — attribute-directive triggers +
<ng-template>for dialog, drawer, popover, tooltip, dropdown-menu - •Reactive Forms — which components are CVA and how to wire
FormControl - •Theme system —
provideVoltTheme, colors, styles, and dark mode
Example rule from the skill
// Overlays are template-based
<button [uiDialog]="dialogTpl">Open</button>
<ng-template #dialogTpl let-close="close">
<div uiDialogOverlay></div>
<div uiDialogContent>...</div>
</ng-template>
The skill explicitly tells the agent never to write <ui-dialog> , <ui-tooltip> , or other invalid element selectors.