mcpField
V
vitepress

vitepress

github.com/antfu開発6.0k11.9k 回インストール5 日前に更新
リポジトリ

vitepress について

VitePress プロジェクト向けのスキルです。Vite と Vue 3 を使い、Markdown から静的サイトを構築する方法を案内します。ドキュメント、ブログ、マーケティングサイト向けに、ルーティングやテーマ、検索、デプロイを扱います。

主な機能

  1. 01Markdown ベースのファイルルーティング
  2. 02Markdown 内での Vue コンポーネント利用
  3. 03コードハイライトとコンテンツ読み込み
  4. 04テーマ設定とカスタマイズ
  5. 05多言語サイト対応
  6. 06静的サイトのデプロイガイド

活用シーン

  1. 01製品ドキュメントサイトの構築
  2. 02Markdown ブログの作成
  3. 03サイトのナビゲーション、サイドバー、テーマのカスタマイズ
  4. 04多言語サイトとデプロイの設定

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/vitepressを入力して読み込まれたか確認します。

同梱ファイル

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

詳細

VitePress は、Vite と Vue 3 を基盤とする静的サイトジェネレーター（SSG）です。Markdown コンテンツにテーマを適用し、静的 HTML を生成して、高速なナビゲーションが可能な SPA にします。ドキュメント、ブログ、マーケティングサイトに最適です。

主な特徴：

  • .md ファイルによるファイルベースのルーティング
  • Vue コンポーネントを Markdown 内で直接使用可能
  • 高速な HMR による即時更新（100ms 未満）
  • ドキュメント向けに最適化されたデフォルトテーマ
  • 組み込み検索（ローカルまたは Algolia）

VitePress プロジェクトで作業する前に：

  • サイト設定については .vitepress/config.ts を確認してください
  • カスタムテーマ拡張については .vitepress/theme/ を確認してください
  • public/ ディレクトリには、そのまま配信される静的アセットが含まれています

このスキルは VitePress 2.0.0-alpha.20 に基づいており、2026-09-25 に生成されました。

VitePress 2 に関する注意点（v1 → v2）： 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 に名称変更されました。

コア

トピック説明リファレンス
設定設定ファイルのセットアップ、defineConfig、サイトのメタデータcore-config
CLIコマンドラインインターフェース：dev、build、preview、initcore-cli
ルーティングファイルベースのルーティング、ソースディレクトリ、リライトcore-routing
MarkdownFrontmatter、コンテナー、テーブル、アンカー、インクルードcore-markdown

機能

コードとコンテンツ
トピック説明リファレンス
コードブロックシンタックスハイライト、行のハイライト、差分、フォーカスfeatures-code-blocks
Markdown 内の Vueコンポーネント、script setup、ディレクティブ、テンプレートfeatures-vue
データ読み込みビルド時のデータローダー、createContentLoaderfeatures-data-loading
動的ルートデータからページを生成、パスローダーファイルfeatures-dynamic-routes

テーマ

トピック説明リファレンス
テーマ設定ナビゲーション、サイドバー、検索、ソーシャルリンク、フッターtheme-config
カスタマイズCSS 変数、スロット、フォント、グローバルコンポーネントtheme-customization
カスタムテーマテーマを一から構築、テーマインターフェースtheme-custom

高度な機能

トピック説明リファレンス
国際化多言語サイト、ロケール設定advanced-i18n
SSR 互換性サーバーサイドレンダリング、ClientOnly、動的インポートadvanced-ssr

レシピ

トピック説明リファレンス
デプロイGitHub Pages、Netlify、Vercel、Cloudflare、Nginxrecipes-deploy

コメント

Markdown 対応