If you're building WordPress themes or plugins and want to stay consistent with the official design language, this pulls in the actual design tokens, typography scales, and component patterns that WordPress itself uses. It's curated directly from the WordPress development team's repository, so you're working with the same primitives as Gutenberg and the admin interface. Most useful when you're trying to make your custom work feel native to WordPress rather than bolted on. The Open Design integration means Claude can reference these patterns during planning, though you'll want to pull the upstream bundle for the full asset library and implementation examples.

skills.sh installs
2.8K
GitHub stars
106.9K
last updated
Aug 21, 2026

Install

$ npx -y skills add nexu-io/open-design --skill wpds --agent claude-code

Installs into .claude/skills of the current project.

Files

wpds

Curated from the WordPress development team.

What it does

WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.

Source

How to use

This catalogue entry advertises the skill in OpenDesign so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory:

# Inspect the upstream README for exact paths
open https://github.com/WordPress/skills

Then ask the agent to invoke this skill by name (wpds) or with one of the trigger phrases listed in this skill's frontmatter.

Sponsors

Details

Repository
github.com/nexu-io/open-design
Categories
Frontend Development, Design & UI/UX, PHP & Laravel
First seen
Jun 3, 2026

More from nexu-io/open-design

All 217
1freshtechbro avatarrive-interactivefreshtechbro/claudedesignskillsState machine-based vector animation with runtime interactivity and web integration. Use this skill when creating interactive animations, state-driven UI, anima2.8Kskills.sh installs
2pixel-point avataranimate-textpixel-point/animate-textCurated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps. Use when an agent needs to pick or translate named effects 2.8Kskills.sh installs
3dynatrace avatardt-obs-frontendsdynatrace/dynatrace-for-aiReal User Monitoring (RUM) on Dynatrace — web and mobile frontends. Core Web Vitals, user sessions, page performance, mobile crashes, frontend errors, and front2.8Kskills.sh installs
4langchain-ai avatarsocial-medialangchain-ai/deepagentsDrafts engaging social media posts, writes hooks, suggests hashtags, creates thread structures, and generates companion images. Use when the user asks to write 2.7Kskills.sh installs
5supermemoryai avatarsvg-animationssupermemoryai/skillsCreate beautiful, performant SVG animations and illustrations. Use this skill when the user asks to create SVG graphics, icons, illustrations, animated logos, p2.7Kskills.sh installs
6agricidaniel avatarblog-analyzeagricidaniel/claude-blogAudit and score blog posts on a 5-category 100-point scoring system covering content quality, SEO optimization, E-E-A-T signals, technical elements, and AI cita2.7Kskills.sh installs