wpds

WPDS supports building and reviewing user interfaces that leverage the WordPress Design System, including its components, tokens, and patterns. It is aimed at WordPress-related contexts such as Gutenberg, WooCommerce, WordPress.com, and Jetpack, and it triggers when a user mentions the WordPress Design System, WPDS, design tokens, color primitives, spacing scales, typography variables, or specific component packages like @wordpress/components or @wordpress/ui. The skill treats terms like "WordPress" and "WP," "Design System" and "DS," and their combinations as synonyms.

The skill works best with the WPDS MCP server installed and running, which provides access to canonical, authoritative documentation and resources: a reference site (wpds://pages), a list of available components (wpds://components) and specific component details (wpds://components/:name), and a list of design tokens (wpds://design-tokens). A firm rule is to rely on the MCP server rather than searching the web for canonical documentation—if asked to search the web, the skill pushes back and warns that the MCP server is the best source. Relevant reference documentation should be read before starting any WPDS task and takes absolute precedence when deciding the best course of action.

Scope is deliberately bounded to UI concerns: non-UI aspects such as fetching data from stores or localizing strings are skipped, with focus placed on building UI that adheres to WPDS best practices and uses the most fitting components, tokens, and patterns. Unless the local context indicates otherwise, the assumed tech stack is TypeScript, React, and CSS. When lint scripts are available in the local context, they should be used to validate the proposed code. The skill also targets WordPress 6.9+ (PHP 7.2.24+). Output includes working code snippets plus a concise recap explaining what the solution does, why each decision was made, and what was explicitly left out as not relevant.