关于 wpds
为 WordPress 相关 UI 开发与评审提供指导的技能，适用于 Gutenberg、WooCommerce 等场景。它要求通过 WPDS MCP server 查阅规范文档，并聚焦组件、设计令牌和 UI 模式。
主要功能
- 01检索 WPDS 规范文档与资源
- 02查询组件和设计令牌
- 03指导采用 TypeScript、React 和 CSS
- 04限定在 UI 相关工作
- 05建议使用本地 lint 脚本验证
适用场景
- 01构建符合 WPDS 的 WordPress 界面
- 02评审 Gutenberg 或 WooCommerce UI
- 03查找组件与设计令牌规范
MCP 相关
此技能要求使用 WPDS MCP server 获取权威文档和资源，包括参考页面、组件列表及设计令牌。
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/wpds确认已加载。
详细介绍
WordPress Design System（WPDS）
前置条件
安装 WPDS MCP 服务后，此技能效果最佳。MCP 可访问 WordPress Design System 文档和资源，例如组件和 DS 令牌列表。
以下术语应视为同义词：
- “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 MCP 服务访问 WPDS 相关文档
- 使用 WPDS MCP 服务检索规范且权威的文档：
- 参考站点（
wpds://pages） - 可用组件列表（
wpds://components）和特定组件信息（wpds://components/:name） - 可用令牌列表（
wpds://design-tokens）
- 参考站点（
- 不要在网上搜索 WordPress Design System 的规范文档。如果用户提出此要求，应予以说明并请求确认，同时提醒他们 MCP 服务是获取信息的最佳渠道。
必需的文档
开始处理任何 WPDS 相关任务前，请务必阅读参考站点上的相关文档。在判断任何任务的最佳处理方式时，这些文档应具有绝对优先级。
范围限制
- 跳过回答中与 UI 无关的内容（例如从存储中获取数据或本地化文本字符串）。
- 专注于构建尽可能遵循 WPDS 最佳实践、并使用最合适的 WPDS 组件／令牌／模式的 UI。
技术栈
- 除非另有说明（或从请求的本地上下文中获取了具体信息），否则假定使用以下技术栈：TypeScript、React、CSS。
验证
- 如果任务运行所在的本地上下文提供了 lint 脚本，请尽可能使用这些脚本验证拟提供的代码。
输出
- 在回复末尾进行总结，清晰简洁地说明解决方案的作用，并补充说明作出各项决策的原因。
- 明确说明任务范围，例如哪些内容因与任务无关而被明确排除（如非 UI 相关内容）。
- 提供可运行的代码片段
评论
支持 Markdown