К основному содержанию
скилл CX Codex

vitepress — скилл для Claude Code и других ИИ-агентов

Скилл по VitePress: помогает агенту настраивать конфиг, тему и Markdown с Vue-компонентами при сборке сайта документации.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add antfu/skills --skill vitepress -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/vitepress/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/vitepress/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора11

Весь набор →
vue Скилл подсказывает агенту, как писать Vue 3-компоненты через Composition API и script setup. Нужен при работе с Vue SFC и реактивностью. CX Codex +1 35 800установок nuxt Скилл добавляет поддержку Nuxt 5 — полнофункционального Vue-фреймворка с серверным рендерингом, файловой маршрутизацией и автоимпортами. Помогает агенту писать серверные маршруты, работать с useFetch, middleware и гибридным рендерингом. CX Codex +1 24 100установок pnpm Скилл для работы с pnpm, менеджером пакетов Node.js со строгим разрешением зависимостей. Нужен, если в проекте используются рабочие пространства, каталоги версий, патчи или переопределения зависимостей. CX Codex +1 22 400установок pinia Скилл Pinia добавляет в Claude Code справку по официальной библиотеке управления состоянием Vue. Помогает при создании хранилищ, работе с состоянием, геттерами и действиями в Vue-приложениях. CX Codex +1 19 700установок antfu Задаёт агенту правила Anthony Fu для JavaScript и TypeScript: структура файлов, ESLint, Knip, публикация пакетов. Пригодится при старте проекта и настройке монорепозитория. CX Codex +1 16 900установок unocss Скилл даёт агенту справочник по UnoCSS: конфиг, правила, шорткаты, пресеты и трансформеры. Пригодится при настройке проекта на UnoCSS или при переносе знаний Tailwind на него. CX Codex +1 16 100установок nitro Скилл подтягивает знания о Nitro v3: файловые маршруты, route rules, кэш, хранилище и пресеты деплоя. Пригодится, когда агент правит nitro.config или пишет обработчики H3. CX Codex +1 2 600установок antfu-create-pr Собирает из текущей ветки аккуратный GitHub pull request: заголовок по Conventional Commits, тело с доказательствами и скриншоты до/после для UI. CX Codex +1 485установок

Похожие

rspress-best-practices rstackjs Скилл задаёт агенту правила для сайтов на Rspress v2: конфигурация, навигация, MDX, ассеты, поиск и деплой. Пригодится, когда документация уже есть, а агент пишет по ней код. CX Codex +1 538установок deep-wiki thegovind Генерирует вики по репозиторию: страницы с диаграммами Mermaid, ссылками на исходники и сайт на VitePress. ★ 3 148звёзд репо markdown-to-html официальный github Скилл объясняет агенту, как Markdown превращается в HTML: заголовки, таблицы, блоки кода, формулы. Пригодится, когда сайт или документация собираются из md-файлов. 9 899установок vuejs-typescript-best-practices Mindrally Задаёт агенту свод правил по Vue.js и TypeScript: Composition API, Pinia, VueUse, Tailwind и оптимизация сборки Vite. Пригодится, когда проект на Vue растёт и хочется единый стиль кода. CX Codex +1 1 000установок uni-helper FlippeDround Скилл-справочник по экосистеме uni-helper: Vite-плагины, библиотеки и утилиты для разработки на uni-app. Пригодится, когда агент пишет код для uni-app. CX Codex +1 794установок quasar-skilld skilld-dev Скилл для работы с Quasar 2.33.1: помогает писать, настраивать и отлаживать код на Vue 3, опираясь на документацию, которая лежит внутри пакета. CX Codex +1 649установок

Рядом в теме «Тексты и документация»

Всё по теме «Тексты и документация» →

Вопросы о 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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой