Skip to main content
affpapa.org
RU EN
skill CX Codex

vitepress — skill for Claude Code and other AI agents

A VitePress skill that helps an agent configure the site, extend the theme and write Markdown with Vue components.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add antfu/skills --skill vitepress -a claude-code
Open on GitHub

What vitepress does

VitePress is a static site generator built on Vite and Vue 3. It takes Markdown, applies a theme and produces static HTML that then runs as an SPA for fast navigation. The skill hands the agent references for configuration, CLI, file-based routing, Markdown, code blocks, Vue inside Markdown, data loading, dynamic routes, theme config and customization, i18n, SSR compatibility and deployment to GitHub Pages, Netlify, Vercel, Cloudflare or Nginx.

It is generated from VitePress 2.0.0-alpha.20. On version 2 you install with vitepress@next, and Node.js 22+ is required. defineConfigWithTheme is deprecated in favour of defineConfig<ThemeConfig>. Native RTL support through the dir option and CSS logical properties replaces the old PostCSS-plugin route. There is a built-in iconify pipeline (icons config, useIcon/VPIcon, social icons as collection:name), plus the assetsBase CDN option and assetsShards build option; metaChunk is gone. In Markdown, image.lazyLoading was renamed to image.lazyLoad.

Before touching a project the agent reads .vitepress/config.ts for site settings and .vitepress/theme/ for custom theme extensions, and treats public/ as static assets served as-is. A project still on VitePress 1 will not match some of the reference examples, because config syntax and option names changed in version 2.

What it helps with

  • set up .vitepress/config.ts for a new docs site
  • add nav, sidebar and search to the default theme
  • drop a Vue component into a Markdown page
  • generate pages from data with dynamic routes
  • build a multi-language site with locales

Example prompts for the agent

  • Set up the VitePress config in .vitepress/config.ts for a docs site
  • Add nav, sidebar and local search to the theme
  • Generate documentation pages from data with dynamic routes

How to install vitepress

1Skills CLI (Vercel)

npx skills add antfu/skills --skill vitepress -a claude-code

2Manually: put the files in place

~/.claude/skills/vitepress/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/vitepress/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about vitepress

How do I install the vitepress skill in Claude Code?

Run npx skills add antfu/skills --skill vitepress -a claude-code. The skill lands in ~/.claude/skills/vitepress/SKILL.md.

What does the vitepress skill do?

It gives the agent references on VitePress: configuration, CLI, routing, Markdown, code blocks, Vue in Markdown, data loading, theme, i18n, SSR and deployment. The agent uses them while editing a VitePress site.

Which VitePress version does this skill cover?

It is generated from VitePress 2.0.0-alpha.20. On version 2 you install with vitepress@next, and Node.js 22+ is required.

Source text

SKILL.md · MIT 
---
name: vitepress
description: VitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.
metadata:
  author: Anthony Fu
  version: "2026.9.25"
  source: Generated from https://github.com/vuejs/vitepress, scripts located at https://github.com/antfu/skills
---

VitePress is a Static Site Generator (SSG) built on Vite and Vue 3. It takes Markdown content, applies a theme, and generates static HTML that becomes an SPA for fast navigation. Perfect for documentation, blogs, and marketing sites.

**Key Characteristics:**
- File-based routing with `.md` files
- Vue components work directly in Markdown
- Fast HMR with instant updates (<100ms)
- Default theme optimized for documentation
- Built-in search (local or Algolia)

**Before working with VitePress projects:**
- Check `.vitepress/config.ts` for site configuration
- Look at `.vitepress/theme/` for custom theme extensions
- The `public/` directory contains static assets served as-is

> The skill is based on VitePress 2.0.0-alpha.20, generated at 2026-09-25.

**VitePress 2 notes (v1 → v2):** install with `vitepress@next`; requires Node.js 22+. `defineConfigWithTheme` is deprecated — use `defineConfig<ThemeConfig>`. Native RTL support (`dir` option, CSS logical properties) replaces the old PostCSS-plugin approach. Built-in iconify pipeline (`icons` config, `useIcon`/`VPIcon`, `collection:name` social icons). New `assetsBase` (CDN) and `assetsShards` build options; `metaChunk` removed. Markdown `image.lazyLoading` renamed to `image.lazyLoad`.

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Configuration | Config file setup, defineConfig, site metadata | [core-config](references/core-config.md) |
| CLI | Command-line interface: dev, build, preview, init | [core-cli](references/core-cli.md) |
| Routing | File-based routing, source directory, rewrites | [core-routing](references/core-routing.md) |
| Markdown | Frontmatter, containers, tables, anchors, includes | [core-markdown](references/core-markdown.md) |

## Features

### Code & Content

| Topic | Description | Reference |
|-------|-------------|-----------|
| Code Blocks | Syntax highlighting, line highlighting, diffs, focus | [features-code-blocks](references/features-code-blocks.md) |
| Vue in Markdown | Components, script setup, directives, templating | [features-vue](references/features-vue.md) |
| Data Loading | Build-time data loaders, createContentLoader | [features-data-loading](references/features-data-loading.md) |
| Dynamic Routes | Generate pages from data, paths loader files | [features-dynamic-routes](references/features-dynamic-routes.md) |

## Theme

| Topic | Description | Reference |
|-------|-------------|-----------|
| Theme Config | Nav, sidebar, search, social links, footer | [theme-config](references/theme-config.md) |
| Customization | CSS variables, slots, fonts, global components | [theme-customization](references/theme-customization.md) |
| Custom Theme | Building themes from scratch, theme interface | [theme-custom](references/theme-custom.md) |

## Advanced

| Topic | Description | Reference |
|-------|-------------|-----------|
| Internationalization | Multi-language sites, locale configuration | [advanced-i18n](references/advanced-i18n.md) |
| SSR Compatibility | Server-side rendering, ClientOnly, dynamic imports | [advanced-ssr](references/advanced-ssr.md) |

## Recipes

| Topic | Description | Reference |
|-------|-------------|-----------|
| Deployment | GitHub Pages, Netlify, Vercel, Cloudflare, Nginx | [recipes-deploy](references/recipes-deploy.md) |

© Anthony Fu · MIT · antfu/skills

Similar skills

Everything for Writing and docs →
rspress-best-practices rstackjs A skill that gives the agent rules for Rspress v2 sites: config, navigation, MDX, assets, search and deployment. Useful once the docs exist and the agent edits them. CX Codex +1 538installs deep-wiki thegovind Turns a code repository into a wiki with Mermaid diagrams, source citations and a VitePress site. ★ 3,148repo stars markdown-to-html official github Tells the agent how Markdown maps to HTML: tables, fenced code with language classes, collapsible sections, MathML math. Useful when a site or docs set is built from md files. 9,899installs vuejs-typescript-best-practices Mindrally Hands your agent a rulebook for Vue.js and TypeScript: Composition API, Pinia, VueUse, Tailwind, plus Vite build tuning. Useful once a Vue codebase outgrows one person's style. CX Codex +1 1,000installs uni-helper FlippeDround A skill reference for the uni-helper ecosystem: Vite plugins, libraries and utilities for uni-app. Useful when your agent writes uni-app code. CX Codex +1 794installs quasar-skilld skilld-dev A skill for building and debugging Quasar 2.33.1 apps: it reads the docs shipped inside the installed package instead of guessing at the API. CX Codex +1 649installs

From the same set11

The whole set →
vue This skill guides agents through Vue 3 Composition API, script setup, and reactivity. Use it when writing Vue SFCs or built-in component flows. CX Codex +1 35,800installs nuxt This skill equips your AI agent with Nuxt 5 knowledge: server-side rendering, file-based routing, auto-imports, and Nitro v3 deployment. Use it when building Nuxt apps, server routes, useFetch calls, middleware, or hybrid rendering. CX Codex +1 24,100installs pnpm Skill for working with pnpm, a Node.js package manager with strict dependency resolution. Use it when your project relies on workspaces, version catalogs, patches, or dependency overrides. CX Codex +1 22,400installs pinia Pinia skill adds reference documentation to Claude Code for the official Vue state management library. Use it when defining stores, managing state, getters, and actions in Vue apps. CX Codex +1 19,700installs antfu Hands your agent Anthony Fu's rules for JavaScript and TypeScript work: file layout, ESLint, Knip, package publishing. Useful when starting a project or wiring a monorepo. CX Codex +1 16,900installs unocss A skill that gives the agent reference material on UnoCSS configuration, rules, shortcuts and presets. Useful when setting up UnoCSS or reusing Tailwind knowledge in it. CX Codex +1 16,100installs nitro A skill with Nitro v3 references: file-based routing, route rules, caching, storage and deployment presets. Use it when the agent edits nitro.config or writes H3 handlers. CX Codex +1 2,600installs antfu-create-pr Turns the current branch into a reviewable GitHub pull request: Conventional Commits title, evidence-based body, before/after screenshots for UI changes. CX Codex +1 485installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor