WordPress 設計系統 (WPDS)
先決條件
此技能搭配 WPDS MCP 伺服器 使用效果最佳。MCP 提供 WordPress 設計系統的文件和資源存取，例如元件和設計代碼 (DS token) 列表。
以下詞語應視為同義詞：
- "WordPress" 與 "WP"；
- "Design System" 與 "DS"；
- "WordPress Design System" 與 "WPDS"。
使用時機
當使用者提到以下內容時，請使用此技能：
- 在 WordPress 相關情境中建置和/或審查任何 UI（例如 Gutenberg、WooCommerce、WordPress.com、Jetpack 等）；
- WordPress 設計系統、WPDS、設計系統；
- UI 元件、設計代碼、顏色原色、間距尺度、排版變數和預設集；
- 特定的元件套件，例如 @wordpress/components 或 @wordpress/ui；
規則
使用 WPDS MCP 伺服器存取 WPDS 相關文件
- 使用 WPDS MCP 伺服器檢索規範且權威的文件：
- 參考網站 (
wpds://pages) - 可用元件列表 (
wpds://components) 和特定元件資訊 (wpds://components/:name) - 可用代碼列表 (
wpds://design-tokens)
- 參考網站 (
- 請勿在網路上搜尋 WordPress 設計系統的規範文件。如果使用者要求，請提出異議並要求確認，警告他們 MCP 伺服器是提供資訊的最佳來源。
必要文件
在處理任何 WPDS 相關任務之前，請務必閱讀參考網站上的相關文件。在評估任何任務的最佳行動方案時，此文件應具有絕對的優先權。
邊界
- 跳過答案中與 UI 無關的部分（例如，從資料儲存中擷取資料，或本地化文字字串）。
- 專注於建置盡可能遵循 WPDS 最佳實務的 UI，並使用最合適的 WPDS 元件/代碼/模式。
技術棧
- 除非另有指示（或從請求的本地上下文收集到具體資訊），否則假設使用以下技術棧：TypeScript、React、CSS。
驗證
- 如果執行任務的本地上下文提供了 lint 腳本，請在可能的情況下使用它們來驗證提議的程式碼輸出。
輸出
- 在回應的最後，提供解決方案功能的清晰簡潔說明，並為每個決策加入上下文說明。
- 明確說明邊界，即任務中明確排除且不相關的部分（例如非 UI 相關）。
- 提供可運作的程式碼片段。