Wpds

If you're building WordPress admin interfaces, Gutenberg blocks, or anything touching WooCommerce or Jetpack, this skill keeps you aligned with the WordPress Design System without constant documentation hunting. It leans heavily on the WPDS MCP server for canonical component specs, design tokens, and spacing scales, which means you're not getting stale web search results. The skill is opinionated about staying in UI land (it explicitly skips data fetching and i18n concerns) and assumes you're working in TypeScript and React unless told otherwise. One thing worth noting: it will push back if you try to bypass the MCP server for WPDS docs, which is the right call but requires that server to actually be running.

skills.sh installs: 4.3K
GitHub stars: 2.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add wordpress/agent-skills --skill wpds --agent claude-code

Installs into .claude/skills of the current project.

Files

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;