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.
npx claudepluginhub automattic/design-skills --plugin a8c-designThis skill uses the workspace's default tool permissions.
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.svgMandates invoking relevant skills via tools before any response in coding sessions. Covers access, priorities, and adaptations for Claude Code, Copilot CLI, Gemini CLI.
Share bugs, ideas, or general feedback.
Build 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/