Wpds

If you're building WordPress admin interfaces, Gutenberg blocks, or anything touching WooCommerce or Jetpack, this skill keeps you honest with the WordPress Design System. It leans hard on the WPDS MCP server for component docs, design tokens, and spacing scales rather than letting you fumble around with web searches. The skill is opinionated about boundaries: it focuses on UI implementation with React, TypeScript, and CSS while explicitly skipping data fetching and i18n concerns. What I appreciate is the pragmatism here. It validates your code against local linting when available and recaps what got built and what got deliberately left out, which saves the back and forth of "wait, what about the store integration" when that was never the point.

skills.sh installs: 341
GitHub stars: 211
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add automattic/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;