vue-nuxt-best-practices

内容来源：README.md（说明文档） · 原始地址 · 查看安装指南

原始内容

# Vue & Nuxt Skills for Claude Code

A collection of AI agent skills focused on Vue.js and Nuxt best practices. Built for developers who want Claude Code (or similar AI coding assistants) to help with reactivity patterns, component performance, data fetching, SSR/SSG, and full-stack Vue/Nuxt development.

Built by [Vinayak Kulkarni](https://vinayakkulkarni.dev).

**Contributions welcome!** Found a way to improve a skill or have a new one to add? [Open a PR](#contributing).

## What are Skills?

Skills are markdown files that give AI agents specialized knowledge and workflows for specific tasks. When you add these to your project, Claude Code can recognize when you're working on a Vue/Nuxt task and apply the right frameworks and best practices.

## Available Skills

| Skill                                                                      | Description                                                                                                                 | Triggers                                                                                                                               |
| -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| [vue-best-practices](https://github.com/vinayakkulkarni/vue-nuxt-best-practices/tree/HEAD/skills/vue-best-practices/)                           | Vue.js reactivity, components, computed, watchers, Composition API                                                          | "Vue," "ref," "reactive," "computed," "v-if," "v-for"                                                                                  |
| [nuxt-best-practices](https://github.com/vinayakkulkarni/vue-nuxt-best-practices/tree/HEAD/skills/nuxt-best-practices/)                         | Nuxt data fetching, SSR, server routes, auto-imports, state                                                                 | "Nuxt," "useFetch," "useAsyncData," "SSR," "useState"                                                                                  |
| [nuxt-seo-best-practices](https://github.com/vinayakkulkarni/vue-nuxt-best-practices/tree/HEAD/skills/nuxt-seo-best-practices/)                 | Nuxt SEO optimization for Cloudflare — OG images, meta tags, JSON-LD, Nitro config                                          | "SEO," "OG image," "Open Graph," "meta tags," "JSON-LD," "Cloudflare Workers"                                                          |
| [nuxt-geo-best-practices](https://github.com/vinayakkulkarni/vue-nuxt-best-practices/tree/HEAD/skills/nuxt-geo-best-practices/)                 | Nuxt Generative Engine Optimization (GEO) — get cited by ChatGPT, Perplexity, Claude, AI Overviews                          | "GEO," "AEO," "AI search," "llms.txt," "GPTBot," "ChatGPT citations," "Perplexity," "AI Overviews," "generative engines"               |
| [nuxt-agent-ready-best-practices](https://github.com/vinayakkulkarni/vue-nuxt-best-practices/tree/HEAD/skills/nuxt-agent-ready-best-practices/) | Nuxt agent-readiness — make your site operable by autonomous agents (MCP, WebMCP, API/skill discovery, agent auth, DNS-AID) | "agent-ready," "isitagentready," "MCP," "WebMCP," "agent skills," "API catalog," "well-known discovery," "DNS-AID," "agentic commerce" |

## Installation

### Option 1: CLI Install (Recommended)

Use [skills](https://github.com/vercel-labs/skills) to install skills directly:

```bash
# Install all skills
npx skills add vinayakkulkarni/vue-nuxt-best-practices

# Install specific skills
npx skills add vinayakkulkarni/vue-nuxt-best-practices --skill vue-best-practices

# List available skills
npx skills add vinayakkulkarni/vue-nuxt-best-practices --list
```

This automatically installs to your `.claude/skills/` directory.

### Option 2: Clone and Copy

Clone the entire repo and copy the skills folder:

```bash
git clone https://github.com/vinayakkulkarni/vue-nuxt-best-practices.git
cp -r vue-nuxt-best-practices/skills/* .claude/skills/
```

### Option 3: Git Submodule

Add as a submodule for easy updates:

```bash
git submodule add https://github.com/vinayakkulkarni/vue-nuxt-best-practices.git .claude/vue-nuxt-best-practices
```

Then reference skills from `.claude/vue-nuxt-best-practices/skills/`.

### Option 4: Fork and Customize

1. Fork this repository
2. Customize skills for your specific needs
3. Clone your fork into your projects

## Usage

Once installed, just ask Claude Code to help with Vue/Nuxt tasks:

```
"Help me optimize this Vue component for performance"
-> Uses vue-best-practices skill

"Set up data fetching with useFetch in Nuxt"
-> Uses nuxt-best-practices skill

"What's the correct way to use computed properties?"
-> Uses vue-best-practices skill

"Create an SSR-safe server route with validation"
-> Uses nuxt-best-practices skill
```

You can also invoke skills directly:

```
/vue-best-practices
/nuxt-best-practices
/nuxt-seo-best-practices
/nuxt-geo-best-practices
/nuxt-agent-ready-best-practices
```

## Skill Categories

### Vue Best Practices

| Category                 | Impact      | Topics                                             |
| ------------------------ | ----------- | -------------------------------------------------- |
| Reactivity Fundamentals  | CRITICAL    | ref vs reactive, destructuring, toRefs, shallowRef |
| Component Performance    | CRITICAL    | v-once, v-memo, async components, KeepAlive        |
| Computed & Watchers      | HIGH        | caching, dependencies, deep watchers               |
| Template Optimization    | MEDIUM-HIGH | v-show vs v-if, keys, v-if with v-for              |
| Composition API Patterns | MEDIUM      | single responsibility, return refs                 |

### Nuxt Best Practices

| Category                    | Impact      | Topics                                                      |
| --------------------------- | ----------- | ----------------------------------------------------------- |
| Data Fetching               | CRITICAL    | useFetch, unique keys, transform, `enabled` option (4.5)    |
| Auto-Imports & Organization | CRITICAL    | barrel exports, component naming, type locations            |
| Server & API Routes         | HIGH        | validated input (Zod), route meta, runtime config           |
| Rendering Modes             | HIGH        | ClientOnly, route rules, SSR streaming (4.5)                |
| State Management            | MEDIUM-HIGH | useState for SSR-safe state                                 |
| Pages, Layouts & Navigation | MEDIUM      | useLayout, named views, NuxtLink custom-slot prefetch (4.5) |
| Type Safety                 | MEDIUM      | no any, strict emits, import paths                          |

### Nuxt SEO Best Practices

| Category                  | Impact   | Topics                                             |
| ------------------------- | -------- | -------------------------------------------------- |
| OG Image Generation       | CRITICAL | @cf-wasm/og, Satori plain JS objects, no React     |
| Page SEO & Meta           | HIGH     | usePageSeo composable, Open Graph, Twitter Cards   |
| Structured Data           | MEDIUM   | JSON-LD, WebApplication schema, Rich Results       |
| Cloudflare & Nitro Config | HIGH     | compatibilityDate, nodeCompat, SSR externals, WASM |

### Nuxt GEO Best Practices

Get cited by ChatGPT, Perplexity, Claude, Google AI Overviews & AI Mode, Gemini. Built on the GEO arxiv paper (Aggarwal et al., KDD 2024) and 2,500+ tracked AI prompts from the Semrush AI Visibility Index.

| Category               | Impact   | Topics                                                                                             |
| ---------------------- | -------- | -------------------------------------------------------------------------------------------------- |
| Content Extractability | CRITICAL | Statistics, citations, quotations (+40% lift), self-contained chunks, no keyword stuffing          |
| AI Crawler & Discovery | CRITICAL | llms.txt, robots.txt for GPTBot/ClaudeBot/PerplexityBot/Google-Extended, SSR for crawlers, sitemap |
| Entity Clarity         | HIGH     | Organization/Person/FAQPage/HowTo JSON-LD, sameAs cross-references, E-E-A-T                        |
| Page-Level GEO         | HIGH     | usePageGeo composable, dateModified freshness signals                                              |

### Nuxt Agent-Ready Best Practices

Make your site operable by autonomous AI agents (not just cited by them) — measured by the [isitagentready.com](https://isitagentready.com) scanner. A different axis from GEO: GEO is about being _cited_, agent-readiness is about being _operated_. Shared primitives (robots.txt, llms.txt, sitemap) come from the GEO skill; this adds the agent-operation layer. Two load-bearing traps captured: the honesty rule (never publish discovery for services that don't exist) and the Nitro/Workers `event.$fetch` self-loopback bug.

| Category        | Impact | Topics                                                                          |
| --------------- | ------ | ------------------------------------------------------------------------------- |
| Discoverability | HIGH   | RFC 8288 Link headers, RFC 9727 API catalog, agent-skills index (sha256 digest) |
| Content         | HIGH   | Markdown content negotiation (Accept: text/markdown), in-process event.$fetch   |
| MCP & Tools     | MEDIUM | WebMCP (navigator.modelContext), MCP Server Card (honesty-gated)                |
| Agent Auth      | LOW    | OAuth/OIDC discovery, oauth-protected-resource, auth.md (honesty-gated)         |
| DNS             | MEDIUM | DNS-AID records + DNSSEC requirement                                            |

## Contributing

Found a way to improve a skill? Have a new skill to suggest? PRs and issues welcome!

**Ideas for contributions:**

- Improve existing skill instructions or frameworks
- Add new best practices or patterns
- Fix typos or clarify confusing sections
- Suggest new skills (open an issue first to discuss)
- Add examples or case studies

**How to contribute:**

1. Fork the repo
2. Edit the skill file(s)
3. Submit a PR with a clear description of what you improved

### Skill File Structure

Each skill is a directory containing a `SKILL.md` file:

```
skills/
  skill-name/
    SKILL.md
```

The `SKILL.md` file follows this format:

```markdown
---
name: skill-name
description: One-line description for skill selection with trigger words
---

# Skill Name

[Full instructions for the AI agent]
```

## Related Projects

- [coreyhaines31/marketingskills](https://github.com/coreyhaines31/marketingskills) - Marketing skills for Claude Code
- [vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills) - React best practices

## License

MIT - Use these however you want.

Vue & Nuxt Skills for Claude Code

A collection of AI agent skills focused on Vue.js and Nuxt best practices. Built for developers who want Claude Code (or similar AI coding assistants) to help with reactivity patterns, component performance, data fetching, SSR/SSG, and full-stack Vue/Nuxt development.

Built by Vinayak Kulkarni.

Contributions welcome! Found a way to improve a skill or have a new one to add? Open a PR.

What are Skills?

Skills are markdown files that give AI agents specialized knowledge and workflows for specific tasks. When you add these to your project, Claude Code can recognize when you're working on a Vue/Nuxt task and apply the right frameworks and best practices.

Available Skills

Skill	Description	Triggers
vue-best-practices	Vue.js reactivity, components, computed, watchers, Composition API	"Vue," "ref," "reactive," "computed," "v-if," "v-for"
nuxt-best-practices	Nuxt data fetching, SSR, server routes, auto-imports, state	"Nuxt," "useFetch," "useAsyncData," "SSR," "useState"
nuxt-seo-best-practices	Nuxt SEO optimization for Cloudflare — OG images, meta tags, JSON-LD, Nitro config	"SEO," "OG image," "Open Graph," "meta tags," "JSON-LD," "Cloudflare Workers"
nuxt-geo-best-practices	Nuxt Generative Engine Optimization (GEO) — get cited by ChatGPT, Perplexity, Claude, AI Overviews	"GEO," "AEO," "AI search," "llms.txt," "GPTBot," "ChatGPT citations," "Perplexity," "AI Overviews," "generative engines"
nuxt-agent-ready-best-practices	Nuxt agent-readiness — make your site operable by autonomous agents (MCP, WebMCP, API/skill discovery, agent auth, DNS-AID)	"agent-ready," "isitagentready," "MCP," "WebMCP," "agent skills," "API catalog," "well-known discovery," "DNS-AID," "agentic commerce"

Installation

Option 1: CLI Install (Recommended)

Use skills to install skills directly:

# Install all skills
npx skills add vinayakkulkarni/vue-nuxt-best-practices

# Install specific skills
npx skills add vinayakkulkarni/vue-nuxt-best-practices --skill vue-best-practices

# List available skills
npx skills add vinayakkulkarni/vue-nuxt-best-practices --list

This automatically installs to your .claude/skills/ directory.

Option 2: Clone and Copy

Clone the entire repo and copy the skills folder:

git clone https://github.com/vinayakkulkarni/vue-nuxt-best-practices.git
cp -r vue-nuxt-best-practices/skills/* .claude/skills/

Option 3: Git Submodule

Add as a submodule for easy updates:

git submodule add https://github.com/vinayakkulkarni/vue-nuxt-best-practices.git .claude/vue-nuxt-best-practices

Then reference skills from .claude/vue-nuxt-best-practices/skills/.

Option 4: Fork and Customize

Fork this repository
Customize skills for your specific needs
Clone your fork into your projects

Usage

Once installed, just ask Claude Code to help with Vue/Nuxt tasks:

"Help me optimize this Vue component for performance"
-> Uses vue-best-practices skill

"Set up data fetching with useFetch in Nuxt"
-> Uses nuxt-best-practices skill

"What's the correct way to use computed properties?"
-> Uses vue-best-practices skill

"Create an SSR-safe server route with validation"
-> Uses nuxt-best-practices skill

You can also invoke skills directly:

/vue-best-practices
/nuxt-best-practices
/nuxt-seo-best-practices
/nuxt-geo-best-practices
/nuxt-agent-ready-best-practices

Skill Categories

Vue Best Practices

Category	Impact	Topics
Reactivity Fundamentals	CRITICAL	ref vs reactive, destructuring, toRefs, shallowRef
Component Performance	CRITICAL	v-once, v-memo, async components, KeepAlive
Computed & Watchers	HIGH	caching, dependencies, deep watchers
Template Optimization	MEDIUM-HIGH	v-show vs v-if, keys, v-if with v-for
Composition API Patterns	MEDIUM	single responsibility, return refs

Nuxt Best Practices

Category	Impact	Topics
Data Fetching	CRITICAL	useFetch, unique keys, transform, `enabled` option (4.5)
Auto-Imports & Organization	CRITICAL	barrel exports, component naming, type locations
Server & API Routes	HIGH	validated input (Zod), route meta, runtime config
Rendering Modes	HIGH	ClientOnly, route rules, SSR streaming (4.5)
State Management	MEDIUM-HIGH	useState for SSR-safe state
Pages, Layouts & Navigation	MEDIUM	useLayout, named views, NuxtLink custom-slot prefetch (4.5)
Type Safety	MEDIUM	no any, strict emits, import paths

Nuxt SEO Best Practices

Category	Impact	Topics
OG Image Generation	CRITICAL	@cf-wasm/og, Satori plain JS objects, no React
Page SEO & Meta	HIGH	usePageSeo composable, Open Graph, Twitter Cards
Structured Data	MEDIUM	JSON-LD, WebApplication schema, Rich Results
Cloudflare & Nitro Config	HIGH	compatibilityDate, nodeCompat, SSR externals, WASM

Nuxt GEO Best Practices

Get cited by ChatGPT, Perplexity, Claude, Google AI Overviews & AI Mode, Gemini. Built on the GEO arxiv paper (Aggarwal et al., KDD 2024) and 2,500+ tracked AI prompts from the Semrush AI Visibility Index.

Category	Impact	Topics
Content Extractability	CRITICAL	Statistics, citations, quotations (+40% lift), self-contained chunks, no keyword stuffing
AI Crawler & Discovery	CRITICAL	llms.txt, robots.txt for GPTBot/ClaudeBot/PerplexityBot/Google-Extended, SSR for crawlers, sitemap
Entity Clarity	HIGH	Organization/Person/FAQPage/HowTo JSON-LD, sameAs cross-references, E-E-A-T
Page-Level GEO	HIGH	usePageGeo composable, dateModified freshness signals

Nuxt Agent-Ready Best Practices

Make your site operable by autonomous AI agents (not just cited by them) — measured by the isitagentready.com scanner. A different axis from GEO: GEO is about being cited, agent-readiness is about being operated. Shared primitives (robots.txt, llms.txt, sitemap) come from the GEO skill; this adds the agent-operation layer. Two load-bearing traps captured: the honesty rule (never publish discovery for services that don't exist) and the Nitro/Workers event.$fetch self-loopback bug.

Category	Impact	Topics
Discoverability	HIGH	RFC 8288 Link headers, RFC 9727 API catalog, agent-skills index (sha256 digest)
Content	HIGH	Markdown content negotiation (Accept: text/markdown), in-process event.$fetch
MCP & Tools	MEDIUM	WebMCP (navigator.modelContext), MCP Server Card (honesty-gated)
Agent Auth	LOW	OAuth/OIDC discovery, oauth-protected-resource, auth.md (honesty-gated)
DNS	MEDIUM	DNS-AID records + DNSSEC requirement

Contributing

Found a way to improve a skill? Have a new skill to suggest? PRs and issues welcome!

Ideas for contributions:

Improve existing skill instructions or frameworks
Add new best practices or patterns
Fix typos or clarify confusing sections
Suggest new skills (open an issue first to discuss)
Add examples or case studies

How to contribute:

Fork the repo
Edit the skill file(s)
Submit a PR with a clear description of what you improved

Skill File Structure

Each skill is a directory containing a SKILL.md file:

skills/
  skill-name/
    SKILL.md

The SKILL.md file follows this format:

---
name: skill-name
description: One-line description for skill selection with trigger words
---

# Skill Name

[Full instructions for the AI agent]

Related Projects

coreyhaines31/marketingskills - Marketing skills for Claude Code
vercel-labs/agent-skills - React best practices

License

MIT - Use these however you want.