vue-ui
Skill28 starsChanged 31 days agoMITView on GitHub
Build Vue interfaces with component libraries. Reka UI headless primitives (dialog, select, combobox, menu, tabs, popover, the asChild pattern, controlled and uncontrolled state) and Nuxt UI 4 styled components, theming, forms, overlays, data tables and app layouts. Use when choosing or using a Vue component library, building accessible primitives, or working in a project with reka-ui, @nuxt/ui or shadcn-vue.
In this repository16 other files it gives its agents.
- antfuSkill
- build-toolingSkill
- designSkill
- find-skillsSkill
- nuxtSkill
- vitepressSkill
- vue-a11ySkill
- vue-ciSkill
- vue-clean-componentsSkill
- vue-dataSkill
- vue-debugSkill
- vue-formsSkill
- vue-performanceSkill
- vue-reviewSkill
- vueSkill
- vue-upgradeSkill
The file
We split this skill into the rules it gives an agent
5 rules. About 0 are common, 2 are distinctive, and 3 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈2
Distinctive · estimate
This author's own choices. Worth a look.
3
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 19
Do not hand-build dialogs, menus, comboboxes, tooltips or date pickers when the project has a primitive library.
- Very specific: line 24
Use v-model for controlled state and default* props for uncontrolled state.
- Very specific: line 25
Use asChild (Reka) to render your own element or router link without an extra wrapper.
- Distinctive: line 26
Keep overlays in a portal, and give every dialog a title (visually hidden if needed).
- Very specific: line 28
Check keyboard behavior after styling: Tab order, Escape, arrow keys, and focus return on close.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Vue UI Libraries
Versions checked on 2026-10-15: reka-ui 2.11, @nuxt/ui 4.11.
Choose the layer
| Situation | Use |
| The project already has a component library | Keep it. Read its docs and its generated theme before writing custom components. |
| Custom design system, full control over markup and styles | Reka UI primitives, styled with your own CSS or utility classes. reka-ui-guide |
| Copy-in components you own and edit (shadcn style) | shadcn-vue, which is built on Reka UI. The Reka references apply to its internals. |
| Nuxt or Vite app that wants ready-made styled components, theming and layouts | Nuxt UI 4 (Reka UI + Tailwind CSS + Tailwind Variants; works outside Nuxt too). nuxt-ui-guide |
Do not hand-build dialogs, menus, comboboxes, tooltips or date pickers when the project has a primitive library. Focus trapping, dismissal, typeahead and ARIA wiring are where hand-built widgets fail.
Rules for any library
- Compose the library's parts (
Root,Trigger,Portal,Content) instead of wrapping one opaque component with a pile of props. - Use
v-modelfor controlled state anddefault*props for uncontrolled state. Do not mix them on one component. - Use
asChild(Reka) to render your own element or router link without an extra wrapper. - Keep overlays in a portal, and give every dialog a title (visually hidden if needed).
- Style through the library's theming layer or semantic tokens, not raw palette classes.
- Check keyboard behavior after styling: Tab order, Escape, arrow keys, and focus return on close. The
vue-a11yskill has the patterns.
References
| Library | Guide | Details |
| Reka UI | reka-ui-guide | components index, one file per component in reka-ui/components/ |
| Nuxt UI 4 | nuxt-ui-guide | nuxt-ui/: component selection, design system, forms, layouts (dashboard, docs, chat, editor, landing), recipes (auth, data tables, navigation, overlays) |
For live API details, Nuxt UI publishes an MCP server (see its guide). Styling with UnoCSS and design direction live in the design skill.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.