kylebrodeur/wordpress-agent-kit

WordPressデザインシステム（WPDS）

前提条件

このスキルは、WPDS MCPサーバーがインストールされている環境で最も効果的に機能します。MCPは、コンポーネントやDSトークンリストなど、WordPressデザインシステムのドキュメントやリソースへのアクセスを提供します。

以下の用語は同義語として扱ってください：

• 「WordPress」と「WP」
• 「デザインシステム」と「DS」
• 「WordPressデザインシステム」と「WPDS」

使用するタイミング

ユーザーが以下の内容に言及した場合にこのスキルを使用します：

• WordPress関連のコンテキスト（例：Gutenberg、WooCommerce、WordPress.com、Jetpackなど）におけるUIの構築および/またはレビュー
• WordPressデザインシステム、WPDS、デザインシステム
• UIコンポーネント、デザイントークン、カラープリミティブ、スペーシングスケール、タイポグラフィ変数とプリセット
• @wordpress/components や @wordpress/ui などの特定のコンポーネントパッケージ

ルール

WPDS MCPサーバーを使用してWPDS関連のドキュメントにアクセスする

• WPDS MCPサーバーを使用して、正規の信頼できるドキュメントを取得します：
  • リファレンスサイト（wpds://pages）
  • 利用可能なコンポーネントのリスト（wpds://components）および特定のコンポーネント情報（wpds://components/:name）
  • 利用可能なトークンのリスト（wpds://design-tokens）
• WordPressデザインシステムに関する正規のドキュメントについて、Webを検索してはいけません。ユーザーから要求された場合は、拒否して確認を求め、MCPサーバーが情報提供に最適な場所であることを警告します。

必須ドキュメント

WPDS関連のタスクに取り組む前に、リファレンスサイトで関連ドキュメントを必ずお読みください。このドキュメントは、任意のタスクに対する最善の行動方針を評価する際に、絶対的な優先順位を持つものとします。

境界

• 回答のUIに関連しない側面（例：ストアからのデータ取得、テキスト文字列のローカライズ）はスキップします。
• WPDSのベストプラクティスに可能な限り準拠し、最も適切なWPDSコンポーネント/トークン/パターンを使用するUIの構築に焦点を当てます。

技術スタック

• 特に指示がない限り（またはリクエストのローカルコンテキストから特定の情報を収集した場合を除き）、以下の技術スタックを想定します：TypeScript、React、CSS。

検証

• タスクが実行されているローカルコンテキストにリントスクリプトが提供されている場合は、可能な限りそれらを使用して提案されたコード出力を検証します。

出力

• 回答の最後に要約として、ソリューションが何を行うかについて明確かつ簡潔な説明を提供し、各決定が行われた理由のコンテキストを追加します。
• 境界について明示的に述べます。つまり、関連性がないためタスクから明示的に除外されたもの（例：UI非関連）について説明します。
• 動作するコードスニペットを提供します。