Local Skill
A built-in skill file that OpenCode / Claude Code auto-discover in any workspace that uses Volt UI components.
What it is
.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>
<ui-dialog> , <ui-tooltip> , or other invalid element selectors.