wpds_skill

Overview

This skill helps designers and developers build UIs using the WordPress Design System (WPDS), its components, tokens, and patterns. It guides component selection, token usage, and layout decisions assuming a TypeScript + React + CSS stack. Use it to ensure conformity with WPDS best practices and to produce working component code snippets.

How this skill works

The skill inspects the UI requirements and maps them to WPDS reference documentation available on the WPDS MCP server (components, pages, and design-tokens). It recommends the appropriate @wordpress components, design tokens, and accessibility patterns, then provides example TypeScript/React code that follows WPDS conventions. At the end it summarizes what was implemented and why, and explicitly notes UI-only boundaries and omitted non-UI concerns.

When to use it

• When building or reviewing WordPress-related UIs (Gutenberg, WooCommerce, Jetpack, WordPress.com).
• When you need to select WPDS components, tokens, or patterns for a UI element.
• When converting visual specs to WPDS-compliant React + TypeScript code.
• When validating spacing, color, and typography against WPDS token sets.
• When you need accessible component patterns consistent with WPDS.

Best practices

• Always consult the WPDS MCP reference pages and token lists before proposing components.
• Prefer official @wordpress/components packages and WPDS tokens over custom styles.
• Keep UI logic separate from data fetching and localization; focus on presentation.
• Use TypeScript + React and follow existing lint scripts in the local project.
• Verify accessibility attributes and keyboard interactions for interactive components.

Example use cases

• Create a WPDS Button using @wordpress/components with token-based colors: import { Button } from '@wordpress/components'; /* use wpds token variables for color and spacing */
• Build a form row using WPDS spacing and typography tokens in a TSX component: const FormRow: React.FC = () => (<div style={{ gap: 'var(--wpds-space-3)' }} />);
• Review a header layout and replace custom primitives with WPDS layout patterns and container tokens for consistent breakpoints.
• Convert a design token (color/spacing/typography) into CSS custom properties and import them into a component stylesheet.
• Compose a modal using WPDS modal patterns and ensure focus trap and accessible labels are included.