mcpField
V
vitepress

vitepress

github.com/liangmiqwq開発139 回インストール1 日前に更新
リポジトリ

vitepress について

VitePress を使ってドキュメントサイト、ブログ、マーケティングサイトを作るためのスキルです。Vite と Vue 3 ベースの静的サイトジェネレーターについて、設定、コンテンツ、テーマ、デプロイを扱います。

主な機能

  1. 01Markdown ファイルベースのルーティング
  2. 02Markdown 内での Vue コンポーネント利用
  3. 03ローカルまたは Algolia 検索
  4. 04データ読み込みと動的ルート
  5. 05テーマのカスタマイズと国際化
  6. 06ビルドとデプロイの手引き

活用シーン

  1. 01Markdown からドキュメントサイトを作成
  2. 02Vue で拡張したコンテンツのブログ構築
  3. 03多言語 VitePress サイトの設定
  4. 04サイトのデプロイ準備

インストール

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

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