vitepress

Name: vitepress
Author: liangmiqwq

github.com/liangmiqwqDevelopment139 installsUpdated 1d ago

About vitepress

A skill for building documentation sites, blogs, and marketing sites with VitePress, a Vite- and Vue 3-based static site generator. It covers configuration, content, theming, and deployment.

Key features

01Markdown-based file routing
02Vue components in Markdown
03Local or Algolia search
04Data loading and dynamic routes
05Theme customization and internationalization
06Build and deployment guidance

Use cases

01Creating a documentation site from Markdown
02Building a blog with Vue-enhanced content
03Configuring a multilingual VitePress site
04Preparing a site for deployment

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/liangmiqwq/skills --skill vitepress

After installing, type/vitepressin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

GENERATION.md

references/

advanced-i18n.md

advanced-ssr.md

core-cli.md

core-config.md

core-markdown.md

core-routing.md

features-code-blocks.md

features-data-loading.md

features-dynamic-routes.md

features-vue.md

recipes-deploy.md

theme-config.md

theme-custom.md

theme-customization.md

Details

From the project README

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 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

Comments

Markdown supported

Details

Author: liangmiqwq
Repository: liangmiqwq/skills
Category: Development
Installs: 39
GitHub stars: 1

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

848.6k

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.