skills.rest
dr-robert-li
dr-robert-liCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

wpds

Develop and review WordPress UIs using WPDS components and design tokens.

27|1|Updated Feb 16, 2026
Search Tags:#design system#components#design tokens#ui development#wordpress#wpds
One-click install
npx skills add https://github.com/dr-robert-li/cowork-wordpress-expert --skill wpds-dr-robert-li
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wpds
Source: https://github.com/dr-robert-li/cowork-wordpress-expert/tree/main/references/wpds
Command: npx skills add https://github.com/dr-robert-li/cowork-wordpress-expert --skill wpds-dr-robert-li

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers build user interfaces that adhere to the WordPress Design System (WPDS) by providing access to its components, tokens, and patterns.

Core Features & Use Cases

  • UI Development: Assists in creating and reviewing UIs within WordPress contexts (Gutenberg, WooCommerce, etc.).
  • Component Usage: Guides the selection and implementation of WPDS components and design tokens.
  • Use Case: A developer needs to create a new modal component for a WordPress plugin that matches the official design guidelines. This Skill can provide the correct WPDS component and styling information.

Quick Start

Use the wpds skill to find the correct component for a WordPress UI button.

Frequently Asked Questions about wpds

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build user interfaces that match the WordPress Design System?▼

You can build user interfaces that match the WordPress Design System by accessing canonical components, design tokens, and UI patterns to ensure your WordPress plugins adhere to official design guidelines.

What are WordPress design tokens and how do I use them in UI development?▼

WordPress design tokens are canonical styling variables used in UI development to maintain visual consistency. You use them by referencing the provided tokens instead of hardcoding styles within Gutenberg or WooCommerce projects.

How do I find the correct WPDS component for a WordPress plugin modal?▼

To find the correct WPDS component for a WordPress plugin modal, you query the design system references to retrieve the official modal component implementation and its required styling information.

Can I use WordPress Design System components for Gutenberg and WooCommerce projects?▼

Yes, you can use WordPress Design System components for Gutenberg and WooCommerce projects. The system supports UI development and review across various WordPress-related contexts to maintain visual consistency.

Do I need a specific server to access WordPress Design System documentation?▼

Yes, you need the WPDS MCP server to access canonical documentation and resources. This server provides the necessary references for correctly selecting and implementing UI components and design tokens.

Related Skills

Explore More Software Engineering Skills→
HungNthHungNth

wpds

Retrieve WPDS documentation, components, and design tokens from the MCP server.

Community
Intermediate
zenbuappszenbuapps

wpds

Standardize WordPress UI with WPDS components and tokens via MCP server.

Official
Intermediate
briglebbrigleb
2

wpds

Access WordPress Design System documentation for UI development.

Community
Intermediate
ihatesea69ihatesea69
3

wpds

Develop and review WordPress UIs using WPDS components and design tokens.

Community
Intermediate