skills.rest
ihatesea69
ihatesea69COMMUNITY
Explore all skills by this author →
WebsiteGitHub

wpds

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

3|Updated Feb 21, 2026
Search Tags:#react#design system#ui development#wordpress#gutenberg#wpds
One-click install
npx skills add https://github.com/ihatesea69/HieuNghi-AI-Skills --skill wpds-ihatesea69
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wpds
Source: https://github.com/ihatesea69/HieuNghi-AI-Skills/tree/main/wordpress_skills/wpds
Command: npx skills add https://github.com/ihatesea69/HieuNghi-AI-Skills --skill wpds-ihatesea69

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill assists in building and reviewing user interfaces within the WordPress ecosystem, ensuring adherence to the WordPress Design System (WPDS) components, tokens, and patterns.

Core Features & Use Cases

  • UI Development: Create or review UIs for WordPress-related projects (Gutenberg, WooCommerce, etc.).
  • Component & Token Usage: Leverage specific WPDS components and design tokens for consistent design.
  • Use Case: When developing a new feature for a WordPress plugin, use this skill to ensure all UI elements, like buttons and forms, conform to the official WPDS guidelines and utilize the correct design tokens for spacing and typography.

Quick Start

Use the wpds skill to build a React component for a WordPress admin page using the WPDS button component.

Frequently Asked Questions about wpds

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

FAQPage Schema
How do I build React interfaces using the WordPress Design System?▼

To build React interfaces using the WordPress Design System, you leverage WPDS components, design tokens, and patterns. This ensures UI elements like buttons and forms conform to official WordPress guidelines for consistent design.

What is the best way to ensure my Gutenberg plugin UI adheres to WordPress design guidelines?▼

To ensure your Gutenberg plugin UI adheres to WordPress design guidelines, apply WPDS best practices and utilize specific design tokens for spacing and typography. This enforces visual consistency across WordPress projects.

Do I need an MCP server to access WordPress Design System component documentation?▼

Yes, you need the WPDS MCP server to access canonical documentation on components and design tokens. This server provides the necessary references for accurate UI development and review within WordPress environments.

Can I use WPDS design tokens for spacing and typography in WooCommerce development?▼

Yes, you can use WPDS design tokens for spacing and typography in WooCommerce development. The system facilitates UI development and review across various WordPress-related projects, ensuring proper component and token usage.

How does the WordPress Design System handle UI component reviews for WordPress admin pages?▼

The WordPress Design System handles UI component reviews by checking elements against WPDS guidelines and canonical documentation. It verifies that React components for admin pages utilize correct 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
oileroiler

wordpress-blocks

Create WordPress Gutenberg blocks with PHP render callbacks and register_block_type.

Community
Intermediate
dr-robert-lidr-robert-li
27

wpds

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

Community
Intermediate