From a8c-design
Build accurate WordPress/Gutenberg UI mockups using pre-extracted design tokens, icons, and components. Use when prototyping WordPress admin interfaces or Site Editor concepts.
How this skill is triggered — by the user, by Claude, or both
Slash command
/a8c-design:wordpress-mockupsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Build accurate WordPress/Gutenberg UI mockups using pre-extracted design tokens, icons, and components.
base.csscomponents/COMPONENTS.mdcomponents/button.htmlcomponents/card.htmlcomponents/checkbox.htmlcomponents/input.htmlcomponents/modal.htmlcomponents/notice.htmlcomponents/panel.htmlcomponents/popover.htmlcomponents/select.htmlcomponents/spinner.htmlcomponents/tabs.htmlcomponents/toolbar.htmlicons/ICONS.mdicons/svg/add-card.svgicons/svg/add-submenu.svgicons/svg/add-template.svgicons/svg/align-center.svgicons/svg/align-justify.svgBuild accurate WordPress/Gutenberg UI mockups using pre-extracted design tokens, icons, and components.
Use this skill when building HTML/CSS mockups of WordPress admin UI, the Site Editor, or any Gutenberg-based interface.
skill/
├── SKILL.md # This file
├── base.css # Reset + base typography
├── tokens/
│ ├── TOKENS.md # Token documentation
│ └── wordpress-tokens.css # CSS custom properties
├── icons/
│ ├── ICONS.md # Icon documentation + full list
│ └── svg/ # 321 SVG icon files
├── components/
│ ├── COMPONENTS.md # Component documentation
│ └── *.html # 12 component files
└── patterns/
├── PATTERNS.md # Pattern documentation + composition rules
└── *.html # Layout patterns (Site Editor header, etc.)
Before building from scratch, check patterns/ for a pre-built layout:
patterns/site-editor-header.htmlcomponents/modal.htmlPatterns > Components > Custom CSS
Patterns are complete, correct layouts. Components are building blocks. Only write custom CSS for things not covered by either.
Create an HTML file with the basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mockup Name</title>
<style>
/* Paste tokens, base, and component CSS here */
</style>
</head>
<body>
<!-- Mockup content -->
</body>
</html>
Copy the contents of tokens/wordpress-tokens.css into your <style> block. This gives you all the CSS custom properties:
var(--wp-gray-900), var(--wp-admin-theme-color)var(--wp-grid-unit-20), var(--wp-grid-unit-05)var(--wp-font-size-medium), var(--wp-font-weight-medium)var(--wp-button-size), var(--wp-header-height)var(--wp-elevation-medium)var(--wp-radius-small)Copy the contents of base.css after the tokens. This sets up:
For each UI element you need:
components/button.html)<style> blockTo include an icon:
icons/ICONS.md for the icon namecat skill/icons/svg/{name}.svgExample:
<button class="components-button has-icon" aria-label="Settings">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="..."/>
</svg>
</button>
Compose components into your mockup layout. Add custom CSS for:
patterns/PATTERNS.md for available layouts and composition rulestokens/TOKENS.md for where values come from--wp-grid-unit)--wp-admin-theme-color for accent/interactive elementsicons/svg/viewBox="0 0 24 24"fill="currentColor" to inherit text colorcomponents/COMPONENTS.md for available components.components-{name}, .components-{name}__{element}.is-primary, .is-compact, .is-pressed, etc.<button class="components-button has-icon has-text">
<svg>...</svg>
Button Text
</button>
<div class="components-input-control">
<label class="components-input-control__label">Label</label>
<div class="components-input-control__container">
<input type="text" class="components-input-control__input">
<div class="components-input-control__backdrop"></div>
</div>
</div>
<div class="components-panel__body is-opened">
<button class="components-panel__body-toggle">
Section Title
<svg class="components-panel__arrow">...</svg>
</button>
<div>Panel content...</div>
</div>
.is-primary, not custom color classesDesign tokens, icons, and component styles extracted from:
packages/base-styles/ and packages/components/Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub automattic/design-skills --plugin a8c-design