About vitepress
A skill for VitePress projects, covering how to build static sites from Markdown with Vite and Vue 3. It guides routing, themes, search, and deployment for documentation, blogs, and marketing sites.
Key features
- 01Markdown-based file routing
- 02Vue components in Markdown
- 03Code highlighting and content loading
- 04Theme configuration and customization
- 05Multilingual site support
- 06Static site deployment guidance
Use cases
- 01Build a product documentation site
- 02Create a Markdown-based blog
- 03Customize site navigation, sidebar, and theme
- 04Configure a multilingual site and deployment
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/vitepressin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
GENERATION.mdreferences/advanced-i18n.mdadvanced-ssr.mdcore-cli.mdcore-config.mdcore-markdown.mdcore-routing.mdfeatures-code-blocks.mdfeatures-data-loading.mdfeatures-dynamic-routes.mdfeatures-vue.mdrecipes-deploy.mdtheme-config.mdtheme-custom.mdtheme-customization.mdDetails
From the project READMEVitePress 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
.mdfiles - 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.tsfor 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 |
| CLI | Command-line interface: dev, build, preview, init | core-cli |
| Routing | File-based routing, source directory, rewrites | core-routing |
| Markdown | Frontmatter, containers, tables, anchors, includes | core-markdown |
Features
Code & Content
| Topic | Description | Reference |
|---|---|---|
| Code Blocks | Syntax highlighting, line highlighting, diffs, focus | features-code-blocks |
| Vue in Markdown | Components, script setup, directives, templating | features-vue |
| Data Loading | Build-time data loaders, createContentLoader | features-data-loading |
| Dynamic Routes | Generate pages from data, paths loader files | features-dynamic-routes |
Theme
| Topic | Description | Reference |
|---|---|---|
| Theme Config | Nav, sidebar, search, social links, footer | theme-config |
| Customization | CSS variables, slots, fonts, global components | theme-customization |
| Custom Theme | Building themes from scratch, theme interface | theme-custom |
Advanced
| Topic | Description | Reference |
|---|---|---|
| Internationalization | Multi-language sites, locale configuration | advanced-i18n |
| SSR Compatibility | Server-side rendering, ClientOnly, dynamic imports | advanced-ssr |
Recipes
| Topic | Description | Reference |
|---|---|---|
| Deployment | GitHub Pages, Netlify, Vercel, Cloudflare, Nginx | recipes-deploy |