vitepress — скилл для Claude Code и других ИИ-агентов
Скилл по VitePress: помогает агенту настраивать конфиг, тему и Markdown с Vue-компонентами при сборке сайта документации.
npx skills add antfu/skills --skill vitepress -a claude-codeЧто делает vitepress
VitePress — генератор статических сайтов на Vite и Vue 3. Он берёт Markdown, применяет тему и собирает статический HTML, который дальше работает как SPA с быстрой навигацией. Скилл даёт агенту справочники по конфигурации, CLI, файловой маршрутизации, Markdown, блокам кода, Vue-компонентам в разметке, загрузке данных, динамическим маршрутам, теме, интернационализации, SSR и деплою на GitHub Pages, Netlify, Vercel, Cloudflare и Nginx.
Скилл собран по VitePress 2.0.0-alpha.20. В версии 2 установка идёт через vitepress@next, нужен Node.js 22 и выше. defineConfigWithTheme объявлен устаревшим — вместо него defineConfig<ThemeConfig>. Нативная поддержка RTL через опцию dir и CSS-логические свойства заменяет прежний подход с PostCSS-плагином. Появились встроенный конвейер iconify (конфиг icons, useIcon/VPIcon, иконки соцсетей вида collection:name), опции сборки assetsBase для CDN и assetsShards, а metaChunk убран. В Markdown image.lazyLoading переименован в image.lazyLoad.
Перед работой агент смотрит .vitepress/config.ts с настройками сайта и .vitepress/theme/ с расширениями темы, а public/ считает статикой, которая отдаётся как есть. Если проект ещё на VitePress 1, часть примеров из справочников не соберётся: синтаксис конфига и имена опций в версии 2 другие.
Какие задачи решает
- настроить
.vitepress/config.tsдля нового сайта документации - добавить навигацию, сайдбар и поиск в тему по умолчанию
- вставить Vue-компонент прямо в Markdown-страницу
- сгенерировать страницы из данных через динамические маршруты
- собрать многоязычный сайт с локалями
Примеры запросов агенту
- Настрой конфиг VitePress в
.vitepress/config.tsдля сайта документации - Добавь в тему навигацию, сайдбар и локальный поиск
- Сделай страницы документации из данных через динамические маршруты
Как установить vitepress
1Через Skills CLI (Vercel)
npx skills add antfu/skills --skill vitepress -a claude-code2Вручную: положить файлы
~/.claude/skills/vitepress/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/vitepress/
1Через Skills CLI (Vercel)
npx skills add antfu/skills --skill vitepress -a codex2Вручную: положить файлы
.agents/skills/vitepress/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add antfu/skills --skill vitepress -a cursor2Вручную: положить файлы
.cursor/skills/vitepress/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install antfu/skills vitepress2Вручную: положить файлы
.github/skills/vitepress/SKILL.md1Через Skills CLI (Vercel)
npx skills add antfu/skills --skill vitepress -a gemini-cli2Командой платформы
gemini skills install https://github.com/antfu/skills --path skills/vitepressВручную: положить файлы
.devin/skills/vitepress/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add antfu/skills --skill vitepress -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора11
Весь набор →Похожие
Рядом в теме «Тексты и документация»
Всё по теме «Тексты и документация» →Вопросы о vitepress
Как установить vitepress в Claude Code?
Выполните npx skills add antfu/skills --skill vitepress -a claude-code. Скилл окажется в ~/.claude/skills/vitepress/SKILL.md.
Что делает скилл vitepress?
Даёт агенту справочники по VitePress: конфигурация, CLI, маршрутизация, Markdown, блоки кода, Vue в Markdown, загрузка данных, тема, i18n, SSR и деплой. Агент опирается на них, когда правит сайт на VitePress.
Какая версия VitePress нужна для этого скилла?
Скилл собран по VitePress 2.0.0-alpha.20. Для версии 2 установка идёт через vitepress@next и требуется Node.js 22 и выше.
Исходный текст
SKILL.md · MIT
--- 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. metadata: author: Anthony Fu version: "2026.9.25" source: Generated from https://github.com/vuejs/vitepress, scripts located at https://github.com/antfu/skills --- 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](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) |
© Anthony Fu · MIT · antfu/skills