
vitepress-skilld
Use when writing, configuring, or debugging code that imports "vitepress", when running vitepress CLI commands, editing .vitepress/config or theme files, tuning markdown or default theme options, or migrating a VitePress site. Provides the vitepress@1.6.4 API surface, config reference, theme reference, CLI usage, and v1 migration notes.
- Installs
- 109
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/skilld-dev/vue-ecosystem-skills --skill vitepress-skilld- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads vitepress-skilld automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
vitepress@1.6.4
Vite & Vue powered static site generator (vuejs/vitepress). Source of truth in
this Skill is the prepared package source; line citations are relative to the
package root (for example dist/node/index.d.ts:2382).
Version facts
- Version 1.6.4, MIT (
package.json:3). - Bundles Vue
^3.5.13, Vite^5.4.14, shiki^2.1.0, minisearch^7(package.json:59-78). - Requires Node.js 18+ (https://vitepress.dev/guide/getting-started).
- VitePress v1 is not compatible with
rolldown-vite; the dev server prints an error and directs to VitePress v2 (dist/node/cli.js:438-444). - Optional peers:
markdown-it-mathjax3(formarkdown.math),postcss(package.json:155-166).
Entry points
Defined by the export map in package.json:18-37:
| Import | Types entry | Use for |
|---|---|---|
vitepress | types/index.d.ts | Node + client + shared API, config helpers |
vitepress/client | client.d.ts | Client composables (useData, useRouter, …) |
vitepress/theme | theme.d.ts | Default theme, useSidebar, useLocalNav |
vitepress/theme-without-fonts | theme-without-fonts.d.ts | Default theme without bundled font files |
CLI binary: vitepress → bin/vitepress.js.
Setup and commands
npm add -D vitepress
npx vitepress init
npx vitepress dev
npx vitepress build
npx vitepress preview
dev may be omitted when using the current directory (vitepress alone).
serve is an alias of preview. Full flags and dev shortcuts:
cli.md
Common tasks
Site config (.vitepress/config.ts)
import { defineConfig } from 'vitepress'
export default defineConfig({
title: 'My App',
description: 'A VitePress site',
themeConfig: {
nav: [{ text: 'Guide', link: '/guide/' }],
sidebar: [{ text: 'Guide', items: [{ text: 'Intro', link: '/guide/intro' }] }]
}
})
defineConfig is typed for the default theme; use
defineConfigWithTheme<CustomThemeConfig> for a custom theme
(dist/node/index.d.ts:2382-2386). Every option:
site-config.md
Client runtime API
<script setup>
import { useData, useRouter, withBase } from 'vitepress'
const { page, frontmatter, isDark, hash } = useData()
const router = useRouter()
</script>
Full export list and signatures: api.md
Build-time data loading
// posts.data.js
import { createContentLoader } from 'vitepress'
export default createContentLoader('posts/*.md', { excerpt: true })
Import as import { data } from './posts.data.js'. Runs in Node only; the
result ships as JSON in the client bundle.
Browser-only components
<script setup>
import { defineClientComponent } from 'vitepress'
const Chart = defineClientComponent(() => import('./Chart.vue'))
</script>
Prevents SSG build failures when a library touches window/document on
import (https://vitepress.dev/guide/ssr-compat).
Best practices
- Use
createContentLoaderfor archive and index pages instead of hand-rolled loaders; it caches by file mtime and keeps the client JSON small (dist/node/index.d.ts:2466-2473, https://vitepress.dev/guide/data-loading). - Wrap browser-only components with
defineClientComponent(https://vitepress.dev/guide/ssr-compat). - Keep image and asset URLs relative in Markdown so Vite hashes and inlines
them; use
withBase()for dynamic paths in theme components (https://vitepress.dev/guide/asset-handling). - Enable
cleanUrls: trueonly when the host can map/footo/foo.html(https://vitepress.dev/guide/routing#clean-urls). - With
rewrites, relative links must target the rewritten URL structure, not the source file structure (https://vitepress.dev/guide/routing#route-rewrites). - In dynamic route
paths.jsloaders, pass large payloads viacontent, notparams, to keep client JS small (https://vitepress.dev/guide/routing#dynamic-routes). - In MPA mode (
mpa: true), use<script client>for interactivity; plain<script setup>is server-side templating only (https://vitepress.dev/guide/mpa-mode). - Exclude pages from local search with the
_renderhook (types/default-theme.d.ts:451-455).
Deeper references
- api.md: every export from
vitepress,vitepress/client,vitepress/theme, data loader types, theme interface. - site-config.md:
UserConfigfields, build hooks,SiteConfig,mergeConfig. - default-theme.md:
DefaultTheme.Config, nav, sidebar, search (local and algolia), theme extension. - markdown.md:
markdownoptions, shiki setup, containers, math,createMarkdownRenderer. - cli.md: commands, flags, dev shortcuts, scaffolding.
- migration.md: v0 → v1 breaking changes and deprecations still visible in 1.6.4.
Version-specific changes
Prioritize these when touching old configs; details and citations in migration.md:
- BREAKING (v1.0.0-rc.9):
pathname://protocol removed; usetarget="_self"ortarget="_blank"(https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md). - BREAKING (v1.0.0): sidebar
childrenrenamed toitems; top-level items no longer acceptlink(https://vitepress.dev/guide/migration-from-vitepress-0). - BREAKING (v1.0.0-alpha.44):
collapsiblereplaced bycollapsed: boolean(CHANGELOG). - BREAKING (v1.0.0-alpha.57):
markdown.headersdisabled by default;PageData.headersis empty unless enabled (CHANGELOG). - When
markdown.headersis enabled, extraction levels default to[2, 3](dist/node/index.d.ts:1769-1786). - NEW (v1.1.0):
useData().hashreactive URL hash (dist/client/index.d.ts:79-83). - NEW (v1.4.0):
onAfterPageLoadrouter hook (dist/client/index.d.ts:36-38). - NEW (v1.3.0):
appearance: 'force-auto'(types/shared.d.ts:119-124). - Deprecated in 1.6.4:
Theme.setup,Theme.NotFound(dist/client/index.d.ts:96-103),outlineTitle,lastUpdatedText,algoliatheme options (types/default-theme.d.ts:36-77,139-141).
FAQ
What does the vitepress-skilld skill do?
Use when writing, configuring, or debugging code that imports "vitepress", when running vitepress CLI commands, editing .vitepress/config or theme files, tuning markdown or default theme options, or migrating a VitePress site. Provides the vitepress@1.6.4 API surface, config reference, theme reference, CLI usage, and v1 migration notes.
How do I install vitepress-skilld?
Run npx skills add https://github.com/skilld-dev/vue-ecosystem-skills --skill vitepress-skilld in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/vitepress-skilld/ (personal) or .claude/skills/vitepress-skilld/ (project).
Which AI agents can use vitepress-skilld?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is vitepress-skilld safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains vitepress-skilld?
It is published by skilld-dev in skilld-dev/vue-ecosystem-skills. It has 109 recorded installs.
More from skilld-dev/vue-ecosystem-skills
quasar-skilld
skilld-dev/vue-ecosystem-skills
Build, configure, and debug apps with the Quasar framework (quasar npm package, v2.33.1). Use when writing, reviewing, or debugging code that imports "quasar" or "quasar/wrappers", configuring Quasar with Vite, Vitest, Storybook, UMD, or Quasar CLI, styling with Quasar Sass variables, or upgrading between Quasar v2 releases.
vue-i18n-skilld
skilld-dev/vue-ecosystem-skills
Use when writing or debugging code that imports vue-i18n (Vue 3 internationalization). Covers createI18n, useI18n, message syntax, i18n-t/i18n-n/i18n-d components, pluralization, datetime and number formatting, TypeScript schemas, lazy loading, bundle optimization, and v10/v11/v12 migration.
vue-skilld
skilld-dev/vue-ecosystem-skills
Build, debug, and modernize UI with Vue 3.6. Use when editing .vue files, writing components or composables, or working with code that imports "vue". Covers script setup, reactivity, Vapor Mode, SSR, and version-specific API changes from 3.4 through 3.6.0-beta.17.
vuetify-skilld
skilld-dev/vue-ecosystem-skills
Vue Material Component Framework. Use when writing, debugging, or configuring code that imports vuetify v4.x. Covers createVuetify setup, components and labs, composables, theming, icons, dates and locale, styles and SASS variables, treeshaking, and v3 to v4 migration.
pinia-skilld
skilld-dev/vue-ecosystem-skills
Open the skill to read its SKILL.md instructions.
vue-router-skilld
skilld-dev/vue-ecosystem-skills
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.