Create fast documentation sites using VitePress with Markdown and Vue.
Install
mkdir -p .claude/skills/vitepress && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/4073" && unzip -o skill.zip -d .claude/skills/vitepress && rm skill.zipInstalls to .claude/skills/vitepress
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
VitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.Key capabilities
- →Generate static HTML from Markdown files
- →Integrate Vue components directly into Markdown
- →Configure site metadata and file-based routing
- →Implement custom themes using CSS variables and slots
- →Support internationalization and multi-language sites
How it works
VitePress processes Markdown files and Vue components to generate a static site that functions as a single-page application. It uses a configuration file to manage routing, theme settings, and site metadata.
Inputs & outputs
When to use vitepress
- →Create project documentation
- →Write tech blog posts
- →Setup documentation site themes
- →Add Vue components to markdown
About this skill
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
.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 1.x, generated at 2026-01-28.
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 |
When not to use it
- →When the site requires a dynamic backend or server-side database
- →When the project does not use Vue or Vite
Limitations
- →Requires Vite and Vue 3 ecosystem
- →Limited to static site generation
How it compares
It combines the simplicity of Markdown documentation with the component-based architecture of Vue 3 for faster navigation.
Compared to similar skills
vitepress side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| vitepress (this skill) | 5 | 6mo | No flags | Beginner |
| ui | 0 | 1mo | No flags | Intermediate |
| i18n-expert | 2 | 6mo | Review | Intermediate |
| create-adaptable-composable | 1 | 6mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by antfu
View all by antfu →You might also like
ui
pierreb-devkit
>
i18n-expert
daymade
This skill should be used when setting up, auditing, or enforcing internationalization/localization in UI codebases (React/TS, i18next or similar, JSON locales), including installing/configuring the i18n framework, replacing hard-coded strings, ensuring en-US/zh-CN coverage, mapping error codes to localized messages, and validating key parity, pluralization, and formatting.
create-adaptable-composable
vuejs-ai
Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with toValue()/toRef() inside reactive effects (watch/watchEffect) to keep behavior predictable and reactive. Use this skill when user asks for creating adaptable or reusable composables.
ai-model-web
TencentCloudBase
Use this skill when developing browser/Web applications (React/Vue/Angular, static websites, SPAs) that need AI capabilities. Features text generation (generateText) and streaming (streamText) via @cloudbase/js-sdk. Built-in models include Hunyuan (hunyuan-2.0-instruct-20251111 recommended) and DeepSeek (deepseek-v3.2 recommended). NOT for Node.js backend (use ai-model-nodejs), WeChat Mini Program (use ai-model-wechat), or image generation (Node SDK only).
moai-domain-frontend
modu-ai
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
vueuse-functions
antfu
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.