nuxt-dev-skills

Reusable Claude Code skills for Nuxt / Vue development.

Install once, use across all your projects — coding conventions, architecture, bug fixing, and anti-patterns as structured AI skills.

中文文档

Install

# Install to current project (.claude/skills/)
npx nuxt-dev-skills add JieHaoCai/nuxt-dev-skills

# Install globally (~/.claude/skills/)
npx nuxt-dev-skills add JieHaoCai/nuxt-dev-skills -g

# Install specific skills only
npx nuxt-dev-skills add JieHaoCai/nuxt-dev-skills --only=bug-fix,bug-hunt

# Overwrite existing files
npx nuxt-dev-skills add JieHaoCai/nuxt-dev-skills --force

# List available skills in a repo
npx nuxt-dev-skills list JieHaoCai/nuxt-dev-skills

# Specify a branch
npx nuxt-dev-skills add JieHaoCai/nuxt-dev-skills --branch=dev

Install from any GitHub repo

The CLI can install skills from any GitHub repository that has a skills/ directory:

npx nuxt-dev-skills add other-user/their-skill-repo

Where are skills installed?

| Flag | Location | Scope | |------|----------|-------| | (default) | .claude/skills/ | Current project only | | --global / -g | ~/.claude/skills/ | All projects |

Skills

| Skill | File | Description | |-------|------|-------------| | Code Conventions | code-conventions.md | Import order, CSS variables, BEM naming, component patterns, constants | | Architecture | architecture.md | Directory structure, layer separation, state management, type system | | Bug Hunt | bug-hunt.md | Systematic investigation — reproduce, trace data flow, identify root cause | | Bug Fix | bug-fix.md | Minimal safe fixing — smallest change, verify, regression test | | Feature Dev Flow | feature-dev-flow.md | End-to-end development — requirements → types → API → components → page | | Anti-patterns | anti-patterns.md | Comprehensive "never do this" reference, organized by severity (P0/P1/P2) | | UI from Screenshot | ui-from-screenshot.md | Analyze screenshot, ask clarifying questions, confirm scope before coding |

How It Works

Each skill is a Markdown file with frontmatter that Claude Code reads as context:

---
description: When this skill should be activated
---

## When to Apply
## Core Principles
## Anti-patterns (NEVER do these)
## Checklist

When you ask Claude Code to fix a bug, build a feature, or review code, the relevant skill provides structured guidance — including what NOT to do.

Skill Structure

Every skill follows a consistent format:

• When to Apply — Trigger conditions
• Core Principles — 3-5 key rules with examples
• Anti-patterns — Things that must never be done (the most effective part)
• Procedure / Steps — How to execute
• Checklist — Verification before done

Create Your Own Skill Repo

Any GitHub repository with a skills/ directory containing .md files can be used as a skill source:

your-skill-repo/
├── skills/
│   ├── your-skill-a.md
│   └── your-skill-b.md
└── README.md

Each .md file should have frontmatter with a description field for the list command to display.

Customization

After installation, edit the .md files directly to match your team's conventions. The skills are yours — adapt them to your stack and preferences.

Tech Stack

These skills are designed for but not limited to:

• Nuxt 3 + Vue 3 + TypeScript
• Pinia (state management)
• Tailwind CSS / SCSS + BEM
• Biome (linting)
• shadcn-vue (UI components)

The architecture and bug-fixing principles apply to any frontend project.

License

MIT