Build and review WordPress UIs with the WordPress Design System - components, design tokens, color primitives, spacing/typography scales, and @wordpress/components, sourced from the canonical WPDS MCP server.
---
name: wpds
description: Use when building or reviewing any UI in a WordPress context (Gutenberg, WooCommerce, WordPress.com, Jetpack) with the WordPress Design System (WPDS) - components, design tokens, color primitives, spacing/typography scales, and packages like @wordpress/components. Works best with the WPDS MCP server configured.
---
Build WordPress UI that adheres to the WordPress Design System, treating its MCP server as the source of truth.
## How to use
1. Use the WPDS MCP server for canonical docs - `wpds://pages` (reference site), `wpds://components` and `wpds://components/:name`, and `wpds://design-tokens`. Do not web-search for WPDS docs.
2. Read the relevant reference-site docs before starting; they take precedence over assumptions.
3. Build UI from the most fitting WPDS components, tokens, and patterns; assume a TypeScript/React/CSS stack unless told otherwise.
4. Stay within UI scope - skip data fetching and string localization, and call out what you left out and why.
5. Validate with the project's lint scripts when available, and recap each design decision with its rationale.
Full skill & source: https://github.com/WordPress/agent-skills/tree/aa735ea7111c7924ee988306bcef70439e17dec9/skills/wpdsIn any Claude conversation, say:
Install the WordPress Design System skill
It activates automatically in your next session.
Not connected yet? Connect your AI first →
MCP endpoint
https://skillme.dev/api/mcp