Skill

Official

Review

Audit score 70

wpds

wordpress/agent-skills

Build WordPress UIs with the WordPress Design System (WPDS) components, tokens, and patterns.

What is wpds?

Use this skill when building user interfaces for WordPress-related projects (Gutenberg, WooCommerce, WordPress.com, Jetpack, etc.) that leverage the WordPress Design System. It provides access to WPDS components, design tokens, and best practices through the WPDS MCP server.

Access canonical WPDS documentation, component libraries, and design tokens via the WPDS MCP server
Build React/TypeScript UIs using WPDS components (@wordpress/components, @wordpress/ui)
Apply design tokens, color primitives, spacing scales, and typography variables consistently
Review and validate UI implementations against WPDS best practices
Generate working code snippets for WPDS-based components

How to install wpds

npx skills add https://github.com/wordpress/agent-skills --skill wpds

Prerequisites

WPDS MCP server installed and running
WordPress 7.0+ (PHP 7.4.0+)
TypeScript and React knowledge (default tech stack)

Claude Code

Cursor

Windsurf

Cline

How to use wpds

1.Install the WPDS MCP server and ensure it is running
2.Query the WPDS MCP server for relevant documentation (wpds://pages, wpds://components, wpds://design-tokens)
3.Review the canonical WPDS documentation before starting UI work
4.Build React components using WPDS components and design tokens
5.Apply WPDS best practices and patterns to your implementation
6.Run lint scripts if available in your local context to validate output

Use cases

Good for

Building custom Gutenberg blocks with WPDS-compliant UI components
Creating WooCommerce admin interfaces using WordPress design patterns
Developing WordPress.com or Jetpack plugin UIs with consistent design tokens
Implementing color, spacing, and typography systems in WordPress projects
Reviewing existing WordPress UI code for design system compliance

Who it's for

WordPress plugin developers
Gutenberg block developers
WooCommerce developers
WordPress theme developers
UI engineers working on WordPress-related projects

wpds FAQ

What is the WPDS MCP server and why is it required?

The WPDS MCP server provides access to canonical WordPress Design System documentation, component lists, and design tokens. It is the authoritative source for WPDS information and should be used instead of web searches.

What tech stack should I assume for WPDS projects?

Unless otherwise specified, assume TypeScript, React, and CSS. Adjust based on specific project context if needed.

Should I handle data fetching and string localization with this skill?

No. This skill focuses on UI building. Skip non-UI aspects like data fetching from stores or text localization; those are outside the scope.

How do I validate my WPDS implementation?

Review the relevant WPDS reference documentation first, then use any available lint scripts in your local project context to validate the proposed code output.

Can I search the web for WPDS documentation?

No. Always use the WPDS MCP server as the canonical source. If a user asks, push back and confirm they want to use the MCP server instead.

Full instructions (SKILL.md)

Source of truth, from wordpress/agent-skills.

name: wpds description: "Use when building UIs leveraging the WordPress Design System (WPDS) and its components, tokens, patterns, etc." compatibility: "Requires WPDS MCP server configured and running. Targets WordPress 7.0+ (PHP 7.4.0+)."

WordPress Design System (WPDS)

Prerequisites

This skill works best with the WPDS MCP server installed. The MCP provides access to WordPress Design System documentation and resources, such as components and DS token lists.

The following terms should be treated as synonyms:

"WordPress" and "WP";
"Design System" and "DS";
"WordPress Design System" and "WPDS".

When to use

Use this skill when the user mentions:

building and/or reviewing any UI in a WordPress-related context (for example, Gutenberg, WooCommerce, WordPress.com, Jetpack, etc etc);
WordPress Design System, WPDS, Design System;
UI components, Design tokens, color primitives, spacing scales, typography variables and presets;
Specific component packages such as @wordpress/components or @wordpress/ui;

Rules

Use the WPDS MCP server to access WPDS-related documentation

Use the WPDS MCP server to retrieve the canonical, authoritative documentation:
- reference site (wpds://pages)
- list of available components (wpds://components) and specific component information (wpds://components/:name)
- list of available tokens (wpds://design-tokens)
DO NOT search the web for canonical documentation about the WordPress Design System. If asked by the user, push back and ask for confirmation, warning them that the MCP server is the best place to provide information

Required documentation

Before working on any WPDS-related tasks, make sure you read relevant documentation on the reference site. This documentation should take the absolute precedence when evaluating the best course of action for any given tasks.

Boundaries

Skip non-UI related aspects of an answer (for example, fetching data from stores, or localizing strings of text).
Focus on building UI that adheres as much as possible to the WPDS best practices, uses the most fitting WPDS components/tokens/patterns.

Tech stack

Unless you are told otherwise (or gathered specific information from the local context of the request), assume the following tech stack: TypeScript, React, CSS.

Validation

If the local context in which a task is running provide lint scripts, use them to validate the proposed code output when possible.

Output

As a recap at the end of your response, provide a clear and concise explanation of what the solution does, and add context to why each decision was made.
Be explicit about the boundaries, ie. what was explicitly left out of the task because not relevant (eg non-ui related).
Provide working code snippets