mcpField
S
shadcn-sveltekit-design

shadcn-sveltekit-design

github.com/michael-obeleデザイン・UI58178 回インストール4 週間前に更新
リポジトリ

shadcn-sveltekit-design について

MCPツールで確認した shadcn-svelte コンポーネントを使い、SvelteKitのUIを構築するためのデザインスキルです。文書化されたプリミティブを先に調べ、未確認のAPIを前提とせずにSvelte 5のコードを作成する手順を示します。

主な機能

  1. 01MCPによるコンポーネントと文書の検索
  2. 02要件の確認とビジュアル方針の決定
  3. 03確認済みプリミティブのレイアウトへの適用
  4. 04SvelteKitとSvelte 5のコード指針
  5. 05公式コンポーネントのCLI導入手順
  6. 06アクセシビリティとレスポンシブ設計の指針

活用シーン

  1. 01機能要件に基づくSvelteKitページの設計
  2. 02実装前のコンポーネントAPI確認
  3. 03公式 shadcn-svelte コンポーネントの導入
  4. 04既存デザインシステムを保ったUIの刷新

MCP 対応

設定済みの shadcn-svelte MCPツールで、コンポーネント、文書、アイコン、インストールコマンドを検索・一覧・取得します。MCPが利用できない場合のホスト型およびローカルの設定方法も記載しています。

インストール

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

$npx skills add https://github.com/michael-obele/shadcn-svelte-mcp --skill shadcn-sveltekit-design

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

evals/
evals.json
references/
mcp-workflow.md
ui-rules.md

詳細

Shadcn SvelteKit デザイン

設定済みの shadcn-svelte MCP に基づいてコンポーネントを選定し、記憶に頼らず洗練された SvelteKit UI を作成するには、このスキルを使用してください。

前提条件

  • 次の MCP ツールが利用可能であることを前提とします：shadcn-svelte-search、shadcn-svelte-get、shadcn-svelte-list、shadcn-svelte-icons、bits-ui-get。
  • MCP がない場合は、そのことを明確に伝え、続行する前にセットアップを案内してください。ホスト型は https://shadcn.svelte-apps.me/mcp、ローカル stdio は npx -y shadcn-svelte-mcp（Bun の場合は bunx）です。コンポーネントや API が存在すると決めつけてはいけません。MCP なしで作業せざるを得ない場合は、公式 shadcn-svelte ドキュメントのみで確認してください。
  • 使用する予定のコンポーネント、ブロック、チャート、またはドキュメントページについては、shadcn-svelte-get を信頼できる情報源として扱ってください。
  • 上流に存在するライブラリコンポーネントについては、公式 shadcn-svelte CLI によるインストールを標準の方法として扱ってください。

ワークフロー

  1. デザインの前に、目的を把握します。 画面の種類、対象ユーザー、コンテンツの密度、ブランドの方向性、既存のビジュアル言語を維持するのか、新しいものを取り入れるのかを確認してください。

  2. 組み立てる前に、情報を探します。 ユーザーが機能を曖昧に説明した場合は、まず references/mcp-workflow.md を確認し、UI コードを書く前に探索ツールを使用してください。

  3. 明確なビジュアルの方向性を定めます。 汎用的な SaaS UI に流されず、明確なデザインの主題を選んでください。タイポグラフィ、色の使い方、余白、階層、モーションをあらかじめ定義します。

  4. デザインを検証済みのプリミティブに対応づけます。 MCP が実在を確認したコンポーネント、ブロック、チャート、ドキュメント、アイコンを使ってレイアウトを構築してください。希望するコンポーネントが利用できない場合は、その旨を伝え、検証済みの最も近い代替案を提案します。

  5. Svelte を優先してコードを書きます。 有効な SvelteKit および Svelte 5 のコードを出力してください。React の props、JSX のパターン、shadcn/ui の React 向けガイダンスは使用しないでください。

  6. 選択した構成要素について説明します。 特に実装方法やインストールコマンドを求められた場合は、どのコンポーネントやドキュメントを検証したかを伝えてください。

  7. ベンダーコンポーネントを再実装せずにインストールします。 検証済みの shadcn-svelte コンポーネントが存在する場合は、可能であれば MCP から公式 CLI コマンドを取得し、プロジェクトの編集が必要なタスクでは自分で実行してください。MCP が利用できない場合に限り、公式 shadcn-svelte ドキュメントを代替として使用します。上流のコンポーネントソースを一から手書きしてはいけません。ラッパー、組み合わせ、ページコード、プロジェクト固有のバリアントを、インストール済みコンポーネントの周りに記述することは問題ありません。

出力形式

ページ単位の作業では、次のように回答を構成してください。

  1. 簡潔なデザインコンセプトの説明。
  2. 使用する、検証済みの shadcn-svelte 構成要素。
  3. SvelteKit のファイル構成案。
  4. 実装。

再利用可能なコンポーネントでは、次のように回答を構成してください。

  1. コンポーネントの目的と状態。
  2. 依存する、検証済みのプリミティブまたはアイコン。
  3. 公開 API またはバリアント。
  4. 実装。

ガードレール

  • コンポーネント名、CLI コマンド、props を捏造しないでください。
  • CLI からインストールできるコンポーネントについて、公式の shadcn-svelte コンポーネントのソースを手作業で再作成しないでください。
  • Web で調査する前に、MCP から CLI コマンドを取得してください。
  • CLI を Web で調査する必要がある場合は、shadcn/ui やその他の類似名のライブラリではなく、公式の shadcn-svelte ドキュメントに記載されたコマンドのみを信頼してください。
  • shadcn-svelte-icons は Lucide アイコンにのみ使用してください。
  • shadcn-svelte-get に tooling.bitsUi.exactName または docs.bitsuiName が表示される場合に限り、低レベルのプリミティブの詳細を確認する目的でのみ bits-ui-get を使用してください。
  • shadcn-svelte-get と bits-ui-get の情報が重複する場合、標準的なコンポーネントの使用方法には shadcn-svelte-get を優先し、内部の仕組みを確認する必要がある場合にのみ、正確なプリミティブ名を bits-ui-get に渡してください。
  • 検証されていないものを幅広く寄せ集めるより、検証済みのコンポーネントを少数選び、適切に組み合わせてください。
  • ユーザーが既存のデザインシステムを使用している場合は、それを維持してください。
  • デスクトップとモバイルのレイアウトは意図的に設計してください。モバイルを後回しにしないでください。
  • アイコンのみのボタンには aria-label を設定し、フォーカス状態を視認できるようにして、ダイアログやメニューのキーボード操作を維持してください。
  • ユーザーがモーションライブラリを指定しておらず、プロジェクトでも使用していない場合は、Svelte 組み込みの transition:、in:、out:、animate: 機能を優先してください。

デザイン基準

ページデザイン、ビジュアルの刷新、テーマ設定、再利用可能な UI に関するタスクでは、references/ui-rules.md を読んでください。

MCP に基づく作業

正確なツールの順序、インストールコマンドのルール、ハルシネーションを防ぐワークフローが必要な場合は、references/mcp-workflow.md を読んでください。

エディターエージェントとの連携

同じ MCP に基づくワークフローが、リポジトリのルートにある agents/ 内のインストール可能なエディターエージェントとして提供されています。VS Code、Claude Code、Cursor、Windsurf/Devin、OpenCode 形式に加え、Zed、Codex、Gemini CLI 用の AGENTS.md スニペットもあります。オンデマンドのスキルではなく、選択可能なエージェントや常時適用されるルールとしてワークフローを使いたい場合は、ユーザーにこちらを案内してください（agents/README.md を参照）。

コメント

Markdown 対応