RepoAI
Browse MCPs

Wpds

94TrustedInstructions only

Interface components and style tokens for WordPress-native development projects.

What it does

Wpds integrates the official WordPress Design System directly into your assistant's workflow. It ensures that UI code generation adheres to established standards, prioritizing official component libraries and specific design variables over generic web development patterns.

By installing this skill, your assistant gains the ability to reference authoritative documentation for components, typography, and spacing. The output includes code snippets tailored for TypeScript and React, accompanied by explanations that justify design choices through the lens of the official system.

When it earns its place

Reach for it when…

Apply this skill when drafting frontend code for Gutenberg blocks, WooCommerce extensions, or administrative interfaces within the WordPress ecosystem. It is suitable for selecting the correct design tokens, picking appropriate UI components from the official library, and ensuring the structure aligns with standard WordPress styling requirements.

Look elsewhere when…

Do not rely on this skill for backend logic, database architecture, or data fetching strategies, as these fall outside its interface-focused scope. It is not intended for non-WordPress web projects, where the specific component names and design tokens defined in this system would be inapplicable.

What to say to use it

You never invoke a skill directly — the assistant picks it up when your request matches what it covers. These are the kinds of things that do that.

  • Build a settings panel using WordPress design tokens
  • Show me how to implement the standard WordPress modal component
  • Update my component code to follow WPDS spacing guidelines
  • Which typography variables should I use for a block interface

Install it

Install for all your projects

Copy the skill directory into your personal skills folder. Claude picks it up on its own the next time your request matches what it does — there is nothing to enable.

bash
git clone --depth 1 --branch trunk https://github.com/WordPress/agent-skills.git /tmp/agent-skills
mkdir -p ~/.claude/skills
cp -r /tmp/agent-skills/skills/wpds ~/.claude/skills/wpds

Install for one project only

Put it in the project's own skills folder instead, so it can be committed and shared with everyone working on that repository.

bash
cp -r /tmp/agent-skills/skills/wpds .claude/skills/wpds

If a skill of the same name exists in both places, the personal one wins.

Installing on Claude.ai or through the API instead? The full guide covers every surface.

Pair it with an MCP server

Wpds changes how the work is done. These servers change what Claude can reach while doing it.

How skills and MCP servers differ →