primevue — Claude Code skill: what it does, how to install
Sets up PrimeVue in Vue 3 and Vite projects. It guides theme presets like Aura and configures component auto-importing.
npx skills add kindy/skills --skill primevue -a claude-codeWhat primevue does
This skill provides clear instructions for integrating PrimeVue into a Vue 3 and Vite workspace. It walks through registering the plugin inside main.ts, pulling preset styles from @primeuix/themes, and rendering elements like DataTable, Dialog, or Button.
To avoid manual import statements in every template, the workflow relies on unplugin-vue-components paired with @primevue/auto-import-resolver in vite.config.ts. That keeps component templates minimal. It supports pre-built themes like Aura, Lara, or Nora, alongside an unstyled setup for Tailwind.
Skipping the resolver step in Vite forces manual component registration in every single file. Following this guide ensures auto-resolution works out of the box.
What it helps with
- Install and wire up PrimeVue inside a Vue 3 Vite application
- Configure automated component imports in vite.config.ts
- Switch between Aura, Lara, and Nora theme presets
- Insert UI widgets like DataTable or Dialog without manual imports
Example prompts for the agent
- Configure PrimeVue with the Aura theme in this Vite project
- Set up auto-import resolver for PrimeVue components in vite.config.ts
- Show me how to render a DataTable and a Dialog using PrimeVue
How to install primevue
1Skills CLI (Vercel)
npx skills add kindy/skills --skill primevue -a claude-code2Manually: put the files in place
~/.claude/skills/primevue/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/primevue/
1Skills CLI (Vercel)
npx skills add kindy/skills --skill primevue -a codex2Manually: put the files in place
.agents/skills/primevue/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add kindy/skills --skill primevue -a cursor2Manually: put the files in place
.cursor/skills/primevue/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install kindy/skills primevue2Manually: put the files in place
.github/skills/primevue/SKILL.md1Skills CLI (Vercel)
npx skills add kindy/skills --skill primevue -a gemini-cli2Platform CLI
gemini skills install https://github.com/kindy/skills --path primevueManually: put the files in place
.devin/skills/primevue/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add kindy/skills --skill primevue -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about primevue
How do I install primevue in Claude Code?
Run npx skills add kindy/skills --skill primevue -a claude-code. The skill file will be stored at ~/.claude/skills/primevue/SKILL.md.
What does the primevue skill do?
It teaches coding assistants how to configure PrimeVue in Vue 3 and Vite setups. It covers main application bootstrapping, theme presets, and auto-import resolvers.
Which theme presets are available with this setup?
It includes presets such as Aura, Lara, and Nora via @primeuix/themes. It also provides guidance for unstyled modes paired with Tailwind or Bootstrap.
