MCPInstall

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
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads vitepress-skilld automatically when relevant.

  3. 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 (for markdown.math), postcss (package.json:155-166).

Entry points

Defined by the export map in package.json:18-37:

ImportTypes entryUse for
vitepresstypes/index.d.tsNode + client + shared API, config helpers
vitepress/clientclient.d.tsClient composables (useData, useRouter, …)
vitepress/themetheme.d.tsDefault theme, useSidebar, useLocalNav
vitepress/theme-without-fontstheme-without-fonts.d.tsDefault 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

Deeper references

  • api.md: every export from vitepress, vitepress/client, vitepress/theme, data loader types, theme interface.
  • site-config.md: UserConfig fields, build hooks, SiteConfig, mergeConfig.
  • default-theme.md: DefaultTheme.Config, nav, sidebar, search (local and algolia), theme extension.
  • markdown.md: markdown options, 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; use target="_self" or target="_blank" (https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md).
  • BREAKING (v1.0.0): sidebar children renamed to items; top-level items no longer accept link (https://vitepress.dev/guide/migration-from-vitepress-0).
  • BREAKING (v1.0.0-alpha.44): collapsible replaced by collapsed: boolean (CHANGELOG).
  • BREAKING (v1.0.0-alpha.57): markdown.headers disabled by default; PageData.headers is empty unless enabled (CHANGELOG).
  • When markdown.headers is enabled, extraction levels default to [2, 3] (dist/node/index.d.ts:1769-1786).
  • NEW (v1.1.0): useData().hash reactive URL hash (dist/client/index.d.ts:79-83).
  • NEW (v1.4.0): onAfterPageLoad router 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, algolia theme 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

View all →

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.

Frontend & Design661 installs

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.

Frontend & Design403 installs

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.

Frontend & Design399 installs

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.

Frontend & Design380 installs

pinia-skilld

skilld-dev/vue-ecosystem-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design313 installs

vue-router-skilld

skilld-dev/vue-ecosystem-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design285 installs

Popular frontend & design skills

View category →

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 & Design1.1M installs

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.

OfficialFrontend & Design1M installs

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.

Frontend & Design999.2K installs

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.

Frontend & Design930.5K installs

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.

OfficialFrontend & Design843.1K installs