antfu/skills: Anthony Fu's Curated Skill Library, Generated Where Possible

Most skill collections are hand-curated. The interesting move in antfu/skills is splitting the collection by provenance: two opinionated hand-written skills, eight generated from official documentation (so they stay in sync with upstream), and eight vendored from external repositories — 18 skills in total, each with a clear source-of-truth story.

Why This Skill Matters

The collection targets the web tooling ecosystem, with strong coverage of Vite, Nuxt, Vue, and Pinia. Eight of the skills (vue, nuxt, pinia, vite, vitepress, vitest, unocss, pnpm) are generated from official documentation, which the repo frames as a proof of concept for keeping skills current. Eight (slidev, tsdown, turborepo, vueuse-functions, vue-best-practices, vue-router-best-practices, vue-testing-best-practices, web-design-guidelines) are vendored and synced via git submodules — each carries its original license.

The two hand-written skills, antfu and antfu-design, are opinionated: they encode Anthony Fu's preferences and design conventions, not generic best practice. Useful if you share his taste; skip if you do not.

The README is candid about maturity: the author has not fully tested how the skills perform in practice, and notes false negatives where agents do not pull a skill in when you would expect. Treat the repo as a strong reference library with caveats rather than a turnkey solution.

Installation

The README gives one canonical install and a global variant:

# Install all skills into the current project
pnpx skills add antfu/skills --skill='*'

# Or globally for all your projects
pnpx skills add antfu/skills --skill='*' -g

Skills live as plain markdown files, which the README notes is the Agent Skills open standard. Vendored skills can be re-synced with pnpm start sync after upstream updates.

Real Workflow: Add the Vite and Nuxt Skills to a New Project

You are starting a new Nuxt project and want Claude Code to answer Nuxt-specific questions correctly without you re-stating the framework version, routing model, and module conventions every session.

Step 1. From your project root, install the relevant subset:

pnpx skills add antfu/skills --skill='nuxt,vite,vitest,pnpm'

The skill names are comma-separated; only those four are pulled in. The rest of the collection stays out of your context.

Step 2. Reference the skills in your project's AGENTS.md so they always apply. The README recommends pinning the skills your project actually uses:

# AGENTS.md (excerpt)
- Always consult: nuxt, vite, vitest, pnpm

Step 3. Ask Claude Code a Nuxt-specific question without re-stating the framework:

What is the right way to add server middleware in this project?

Expected output: a Nuxt-aware answer that uses current defineEventHandler and middleware conventions, rather than a generic "you can call app.use()" reply. The skill carries the framework-specific knowledge.

Step 4. After a Nuxt upstream release, re-sync if you depend on a generated skill:

pnpm start sync

This refreshes the generated skills from their documentation source.

Real Workflow: Cherry-Pick Opinionated Skills for a Personal Setup

You are not in a Vite/Nuxt project, but you like Anthony Fu's design conventions and want antfu-design to inform your CSS decisions.

Step 1. Install only that one skill:

pnpx skills add antfu/skills --skill='antfu-design'

Step 2. Trigger it on a styling task:

Style this button with our design system.

The skill contributes spacing scale, type ramp, and colour-system preferences rather than ad-hoc opinions. Use it for non-framework work where consistency matters more than framework-correctness.

Step 3. Combine with the web-design-guidelines vendored skill if you want a broader web baseline on top:

pnpx skills add antfu/skills --skill='antfu-design,web-design-guidelines'

Step 4. Periodically re-sync the vendored skill — it is pulled from an external repo, so updates there will not reach you automatically until you run pnpm start sync.

• Treat the generated skills as your fastest-moving layer: re-sync them after upstream framework releases.
• Skip the hand-written antfu and antfu-design if the opinions do not match your taste; they are strong statements, not defaults.
• The README flags false negatives: agents may not auto-load one when you expect. If a skill should apply, mention it by name in your prompt or in AGENTS.md.
• Vendored skills retain their original licenses — check the LICENSE of each before commercial use, especially turborepo.
• The repo is a proof of concept; do not lean on the README's claims of "fully tested" performance. Treat it as a strong reference library.

When Not to Use This

If your stack is not in the Vite/Nuxt/Vue orbit, most of this collection is irrelevant — you would be pulling in skills you never trigger. The vendored and web-design-guidelines skill are general, but the eight generated skills are ecosystem-specific. For a stack outside that scope, install only the names you will actually use.

See the leaderboard for more skill bundles.