vitepress

Name: vitepress
Author: hairyf

github.com/hairyfDevelopment26104 installsUpdated 4w ago

About vitepress

VitePress is a skill for building and maintaining documentation, blogs, and marketing sites with VitePress 1.x. It organizes guidance on configuration, Markdown, routing, themes, and deployment.

Key features

01Configuration and CLI guidance
02File-based routing and Markdown
03Vue components in Markdown
04Theme customization and search
05Internationalization and deployment

Use cases

01Creating a VitePress documentation site
02Adding custom themes and Vue content
03Configuring multilingual sites
04Preparing static site deployment

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/hairyf/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 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

Comments

Markdown supported

Details

Author: hairyf
Repository: hairyf/skills
Category: Development
Installs: 104
GitHub stars: 26

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

design-mobile-apps

github.com/designed-by-ai

1.3M

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

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.

vercel-react-best-practices

github.com/vercel-labs

881.3k

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.