wpds

WordPress Design System (WPDS)

前提条件

このスキルは、WPDS MCP サーバーがインストールされている場合に最も効果を発揮します。MCP を通じて、コンポーネントや DS トークンの一覧など、WordPress Design System のドキュメントやリソースにアクセスできます。

以下の用語は同義語として扱います。

• 「WordPress」と「WP」；
• 「Design System」と「DS」；
• 「WordPress Design System」と「WPDS」。

使用する場面

ユーザーが次の内容に言及した場合に、このスキルを使用します。

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

ルール

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

• WPDS MCP サーバーを使用して、正式かつ信頼できるドキュメントを取得します。
  • リファレンスサイト（wpds://pages）
  • 利用可能なコンポーネントの一覧（wpds://components）と、各コンポーネントの情報（wpds://components/:name）
  • 利用可能なトークンの一覧（wpds://design-tokens）
• WordPress Design System の正式なドキュメントをウェブ検索してはいけません。ユーザーから依頼された場合は、WPDS MCP サーバーが情報提供に最適な場所であることを説明し、確認を求めてください。

必須ドキュメント

WPDS 関連のタスクに取り組む前に、リファレンスサイトで関連ドキュメントを必ず読んでください。タスクに対する最適な方針を判断する際は、このドキュメントを最優先してください。

範囲

• 回答のうち、UI に関係しない側面（ストアからのデータ取得やテキスト文字列のローカライズなど）は省きます。
• WPDS のベストプラクティスにできる限り準拠し、最適な WPDS コンポーネント、トークン、パターンを使用した UI の構築に集中します。

技術スタック

• 別途指定がない場合（または依頼のローカルコンテキストから具体的な情報が得られない場合）は、以下の技術スタックを前提とします：TypeScript、React、CSS。

検証

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

出力

• 回答の最後にまとめとして、ソリューションの内容を明確かつ簡潔に説明し、それぞれの判断を行った理由も補足します。
• 範囲を明示します。つまり、UI に関係しないなどの理由で、タスクから明確に除外した内容を説明します。
• 動作するコードスニペットを提示します。