---
name: "prog-expert-scadcn"
description: "Use when you need to implement shadcn-vue (shadcn-nuxt) in Nuxt 3/4 — component registry via components.json, Tailwind CSS v4 with @tailwindcss/vite, class-variance-authority, tailwind-merge, and auto-imported shadcn components."
metadata:
  stage: "alpha"
  source: "MIGRATED"
  requires:
    - "impl-experts-js-contract"
---

# Prog Expert shadcn-vue

## Goal
Expert-level implementation of shadcn-vue in Nuxt projects. Covers the `shadcn-nuxt` module, `components.json` registry configuration, Tailwind CSS v4 integration via `@tailwindcss/vite`, variant composition with `class-variance-authority`, utility merging with `tailwind-merge` + `clsx`, and auto-imported shadcn component patterns.

## Core Workflow (Progressive Disclosure)
1. **Context Analysis**: Analyze `components.json`, `nuxt.config.ts`, `tailwind.config.js`, and existing shadcn component usage.
2. **Knowledge Retrieval**:
    - Fetch latest library versions using `scripts/track_versions.py`.
    - Check `recipes/` for recurring patterns and implementation guides.
    - If needed, research new patterns via `scripts/research_knowledge.py`.
3. **Implementation**: Execute core logic. Leverage `atomic-examples/` and `recipes/` for guidance.
4. **Learning**:
    - Extract patterns from successful implementations via `scripts/learn_from_success.py`.
    - Create or refine coding recipes in `recipes/` using `scripts/manage_recipes.py`.

## Instructions
- ALWAYS use pnpm as the package manager for this ecosystem.
- Before starting any task, search the `recipes/` directory for relevant implementation patterns.
- If a task involves a recurring pattern not yet in `recipes/`, create a new recipe after successful implementation.
- Proactively update your knowledge if library versions are outdated or new patterns are discovered.
- Scope: shadcn-vue and Tailwind CSS integration only. For Nuxt core concerns use `prog-expert-nuxt`. For VueUse composables use `prog-expert-vueuse`.

## Key Technologies
- `shadcn-nuxt`, `shadcn-vue`
- `tailwindcss` v4, `@tailwindcss/vite`
- `class-variance-authority` (CVA), `tailwind-merge`, `clsx`
- `@iconify-json/lucide`
- `@vueuse/core`, `pinia`

## Self-Learning & Research
- Gathers knowledge using web research and the `use-context7-api` skill.
- Learn from successful implementations, other codebases, and documentation.
- Keep track of the latest library versions.
- Refine recipes to be more granular based on implementation experience.

## Auto-Improvement
- Every time this skill is used, analyze the usage chat to find out if further improvement of the skill is advised.
- Ask the user if those changes should be made.
- If approved, store the improvement ideas in the `resources/improvement_ideas.md` file.

## References
- [Patterns](references/patterns.md) — Reusable code patterns and best practices.
- [Versions](references/versions.json) — Tracked library versions.
- [Recipes](recipes/README.md) — Coding recipes for recurring tasks.

## Example Code
When learning or implementing, use these code examples. ALWAYS load them via `view_file` to maintain Progressive Disclosure:

- **Atomic Examples** (Small code chunks from docs):
  - *(Add examples here)*: `view_file(<absolute_path>/atomic-examples/...)`
- **Recipes** (Larger patterns like form composition, CVA variants, theming):
  - *(Add recipes here)*: `view_file(<absolute_path>/recipes/...)`
- **Reference Implementations** (Complex pseudo-code from existing real-world codebases):
  - *(Add references here)*: `view_file(<absolute_path>/reference-implementations/...)`

## Constraints
* Do not perform unauthorized or destructive actions.
* Do not overwrite existing files without explicit user confirmation.

## Script Integration
- **Research**: `uv run scripts/research_knowledge.py "<query>"`
- **Version Tracking**: `uv run scripts/track_versions.py`
- **Recipe Management**: `uv run scripts/manage_recipes.py <action> [args]`
- **Example Management**: `uv run scripts/manage_examples.py <action> [args]`
- **Pattern Learning**: `uv run scripts/learn_from_success.py <path/to/file>`