Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

wpds · wordpress — Claude Code skill: what it does, how to install

Feeds WordPress Design System docs to your agent through an MCP server, so UI work lands on real components and tokens instead of guesses.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add WordPress/agent-skills --skill wpds -a claude-code
Open on GitHub

What wpds does

The skill points the agent at WordPress Design System material: reference pages, the component list, a single component entry, the token list (wpds://pages, wpds://components, wpds://design-tokens). Any UI task in a WordPress context then rests on those docs rather than on what the model remembers.

Start the WPDS MCP server first; without it there is nothing to pull from. Web lookups for WPDS docs are blocked, and pushing for one gets a warning before anything else happens. The assumed stack is TypeScript, React and CSS. Targets WordPress 7.0+ on PHP 7.4.0+.

Scope stays narrow: store fetches and string localization fall outside, the skill handles UI only. Replies close with a recap of the decisions, a note on what was left out, and code you can run. Lint scripts in the project get used to check that code when they exist.

What it helps with

  • build a settings screen from @wordpress/components
  • swap hardcoded spacing for design tokens
  • review a WooCommerce UI against WPDS patterns
  • find the right typography preset for a block
  • justify component choices in a pull request

Example prompts for the agent

  • Build the WooCommerce product card with WPDS components and design tokens
  • Check this `@wordpress/ui` component and list the tokens I hardcoded
  • Which WPDS components fit a filter sidebar?

How to install wpds

1Skills CLI (Vercel)

npx skills add WordPress/agent-skills --skill wpds -a claude-code

2Manually: put the files in place

~/.claude/skills/wpds/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/wpds/

From the same set8

The whole set →
wp-plugin-development WordPress This skill guides WordPress plugin work, from project structure and hooks to admin settings, security checks and release packaging. Claude Code CX Codex Cursor +1 7,900installs wp-performance WordPress Backend profiling skill for optimizing WordPress sites using WP-CLI, REST headers, and diagnostic scripts without browser access. Claude Code CX Codex Cursor +1 6,100installs wp-block-themes WordPress Guides the agent through building WordPress block themes, editing theme.json, and organizing templates. Useful when styles fail to apply in the Site Editor. Claude Code CX Codex Cursor +1 5,800installs wp-block-development WordPress A WordPress skill for Claude Code, Codex and Cursor that walks an agent through Gutenberg block work, from block.json metadata down to deprecations. Claude Code CX Codex Cursor +1 5,500installs wordpress-router WordPress Identifies the structure of a WordPress codebase and directs the agent to the appropriate workflow. Useful before starting work on plugins, themes, or core checkouts. Claude Code CX Codex Cursor +1 5,500installs wp-wpcli-and-ops WordPress A skill for WordPress operations through wp: move domains, export the database, install plugins, inspect cron. Useful when the agent has to touch a live site, not just theme files. Claude Code CX Codex Cursor +1 5,400installs wp-phpstan WordPress Sets up PHPStan static analysis in WordPress plugins and themes, while managing baselines and WordPress-specific PHPDoc types. Claude Code CX Codex Cursor +1 4,600installs

Other versions of wpds

wpds nexu-io Applies official WordPress Design System tokens, typography, and component patterns to themes and sites. Claude Code CX Codex Cursor +1 2,700installs

Similar

reka-ui onmax A skill for working with Reka UI, a library of unstyled Vue 3 components with full accessibility support. Use it when building interfaces from scratch or working with Nuxt UI and shadcn-vue. Claude Code CX Codex Cursor +1 7,400installs migrate-nativewind-to-uniwind uni-stack A skill that automates migrating React Native projects from NativeWind to Uniwind. It updates configs, removes old packages, rebuilds CSS, and handles all breaking changes. Claude Code CX Codex Cursor +1 2,000installs react-router TanStack A skill that teaches your coding agent the React bindings for TanStack Router: hook reference, components, and a file-based routing setup on Vite. Claude Code CX Codex Cursor +1 546installs narrow-react-prop-types humanlayer A skill that cuts React component prop types back to the contract your live code actually uses, then makes stories and tests match it instead of weakening it. Claude Code CX Codex Cursor +1 1,200installs tanstack-query-best-practices DeckardGer A rule set for TanStack Query in React: query keys, caching, mutations, SSR. Installs into Claude Code, Codex, Cursor or Copilot so data fetching follows one pattern across the repo. Claude Code CX Codex Cursor +1 12,800installs senior-frontend Alireza Rezvani This skill supports React and Next.js work, from project scaffolding to bundle checks. Use it when building components, reviewing frontend code, or working on accessibility. Claude Code 1,630installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about wpds

How do I install wpds in Claude Code?

Run npx skills add WordPress/agent-skills --skill wpds -a claude-code. The skill file lands at ~/.claude/skills/wpds/SKILL.md.

What does wpds do?

It has the agent read WordPress Design System documentation through the MCP server before touching UI, then pick components, tokens and patterns from there. Each reply ends with the reasoning and working snippets.

What does wpds need to run?

A configured, running WPDS MCP server, which supplies the reference pages, components and tokens. The project should target WordPress 7.0+ and PHP 7.4.0+.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor