Skills
How ViraUI skills work as agent playbooks, when each loads, and prompts to steer them.
ViraUI skills are short playbooks your coding agent loads while it works in your React app. Each one steers the agent toward real ViraUI patterns: triggers, constraints, and what to change in your tree. For prop and pattern detail, the playbooks point at live agent specs in @viraui/react.
Installation
Follow Setup to install the skills pack, reload the editor so the playbooks register, then paste the bootstrap prompt. Without that reload, the session often cannot see viraui-setup yet.
After the pack is loaded, the agent usually picks the matching skill from the task you describe. Name one in the prompt when you want a specific path.
How skills route
When you paste a prompt or describe a task, the agent reads the matching playbook and follows that contract while editing. You steer by naming the skill or by describing work that clearly maps to one. Setup already routes bootstrap through viraui-setup.
viraui-setup
Jump to setup playbook
viraui-design
Jump to design playbook
viraui-a11y
Jump to a11y playbook
viraui-motion
Jump to motion playbook
✦ viraui-setup
The agent loads this playbook on first bootstrap, when you still need to choose a brand or theme look, or when global styles look broken (missing theme or preflight imports, wrong CSS order, or another reset fighting Vira). The contract walks import order, root overlay providers, and that brand/theme choice until tokens and preflight resolve.
Once wiring is healthy, routine UI work routes to viraui-design.
Set up ViraUI in this project so the app looks themed and overlays work. Use viraui-setup if needed.✦ viraui-design
This is the default route for compose and styling work after bootstrap looks healthy. The playbook keeps component choice, compound parts, layout, and public styling on documented @viraui/react patterns.
Dedicated accessibility audits route to viraui-a11y. If global styles are missing, fix bootstrap with viraui-setup first.
Build a settings form with labeled fields (text input, toggle), sensible spacing, and Save/Cancel actions at the bottom. Use viraui-design.✦ viraui-a11y
Load this playbook when you want a structured audit rather than compose-as-you-go. The agent inspects focus order, labels, keyboard traps, and dialog behavior against documented widget patterns, then reports gaps.
Screen-reader or keyboard debug and WCAG-oriented widget checks belong here. Ordinary compose and light a11y questions while you build stay with viraui-design.
Audit this screen for accessibility: focus order, labels, keyboard use, and dialog behavior. Report issues and fixes. Use viraui-a11y.✦ viraui-motion
Reach for this when viraui-design is already composing a screen and you need motion that respects reduced-motion preferences. The playbook covers transitions, hover and press feedback, overlay enter and exit, and timing on Vira parts or your own CSS.
It is not for component choice, bootstrap, or accessibility audits.
Animate these list items so they fade in from below one after another — subtle timing, and no motion when the user prefers reduced motion. Use viraui-motion.Last updated on