vitepress
VitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.
Works with
--- 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. license: MIT --- 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 1.x, generated at 2026-01-28. ## 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) |
More Frontend Frameworks 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.
design-taste-frontend
leonxlnx/taste-skill
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

