# primevue

Sets up PrimeVue in Vue 3 and Vite projects. It guides theme presets like Aura and configures component auto-importing.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 527 installs
- Author: kindy
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/kindy/skills/tree/HEAD/primevue/SKILL.md
- Updated: 2026-02-01
- HTML: https://affpapa.org/en/nevibecode/skills/primevue

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add kindy/skills --skill primevue -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/primevue/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/primevue/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add kindy/skills --skill primevue -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/primevue/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add kindy/skills --skill primevue -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/primevue/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install kindy/skills primevue
```

2. **Manually: put the files in place**
- File: `.github/skills/primevue/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add kindy/skills --skill primevue -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/kindy/skills --path primevue
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/primevue/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add kindy/skills --skill primevue -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/kindy/skills/tree/HEAD/primevue/SKILL.md

## When to use it
- 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
- 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

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md