wordpress-mockups
Build accurate WordPress/Gutenberg UI mockups using pre-extracted design tokens, icons, and components. Use when prototyping WordPress admin interfaces or Site Editor concepts.
Best use case
wordpress-mockups is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Build accurate WordPress/Gutenberg UI mockups using pre-extracted design tokens, icons, and components. Use when prototyping WordPress admin interfaces or Site Editor concepts.
Teams using wordpress-mockups should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/wordpress-mockups/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How wordpress-mockups Compares
| Feature / Agent | wordpress-mockups | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Build accurate WordPress/Gutenberg UI mockups using pre-extracted design tokens, icons, and components. Use when prototyping WordPress admin interfaces or Site Editor concepts.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# WordPress Mockups Skill
Build accurate WordPress/Gutenberg UI mockups using pre-extracted design tokens, icons, and components.
## When to Use
Use this skill when building HTML/CSS mockups of WordPress admin UI, the Site Editor, or any Gutenberg-based interface.
## Directory Structure
```
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.)
```
## Workflow
### 0. Check for Patterns First
Before building from scratch, check `patterns/` for a pre-built layout:
- Building a Site Editor mockup? Start with `patterns/site-editor-header.html`
- Building a modal? Start with `components/modal.html`
**Patterns > Components > Custom CSS**
Patterns are complete, correct layouts. Components are building blocks. Only write custom CSS for things not covered by either.
### 1. Start a New Mockup
Create an HTML file with the basic structure:
```html
<!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>
```
### 2. Add Design Tokens
Copy the contents of `tokens/wordpress-tokens.css` into your `<style>` block. This gives you all the CSS custom properties:
- Colors: `var(--wp-gray-900)`, `var(--wp-admin-theme-color)`
- Spacing: `var(--wp-grid-unit-20)`, `var(--wp-grid-unit-05)`
- Typography: `var(--wp-font-size-medium)`, `var(--wp-font-weight-medium)`
- Dimensions: `var(--wp-button-size)`, `var(--wp-header-height)`
- Shadows: `var(--wp-elevation-medium)`
- Radii: `var(--wp-radius-small)`
### 3. Add Base Styles
Copy the contents of `base.css` after the tokens. This sets up:
- Box-sizing reset
- Default font family and size
- Focus styles
- Link styles
### 4. Add Components
For each UI element you need:
1. Open the relevant component file (e.g., `components/button.html`)
2. Copy the CSS from the `<style>` block
3. Copy the HTML markup you need from the examples
4. Customize the content
### 5. Add Icons
To include an icon:
1. Check `icons/ICONS.md` for the icon name
2. Read the SVG: `cat skill/icons/svg/{name}.svg`
3. Paste the SVG inline in your markup
Example:
```html
<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>
```
### 6. Build Layout
Compose components into your mockup layout. Add custom CSS for:
- Page structure
- Component arrangement
- Mockup-specific styling
## Key References
### Patterns
- See `patterns/PATTERNS.md` for available layouts and **composition rules**
- Composition rules tell you how WordPress UIs are assembled (what goes where, which buttons are primary, etc.)
- **Always check patterns before building a layout from scratch**
### Tokens
- See `tokens/TOKENS.md` for where values come from
- All spacing is based on 8px grid (`--wp-grid-unit`)
- Use `--wp-admin-theme-color` for accent/interactive elements
### Icons
- 321 icons available in `icons/svg/`
- All use `viewBox="0 0 24 24"`
- Add `fill="currentColor"` to inherit text color
### Components
- See `components/COMPONENTS.md` for available components
- Class naming: `.components-{name}`, `.components-{name}__{element}`
- Modifiers: `.is-primary`, `.is-compact`, `.is-pressed`, etc.
## Common Patterns
### Button with Icon
```html
<button class="components-button has-icon has-text">
<svg>...</svg>
Button Text
</button>
```
### Input with Label
```html
<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>
```
### Collapsible Panel
```html
<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>
```
## Tips
1. **Always use tokens** — Don't hardcode colors or spacing
2. **Copy, don't reference** — Each mockup should be self-contained
3. **Check component variants** — Most components have multiple states/sizes
4. **Use semantic modifiers** — `.is-primary`, not custom color classes
## Source
Design tokens, icons, and component styles extracted from:
- [Gutenberg](https://github.com/WordPress/gutenberg/tree/trunk) — `packages/base-styles/` and `packages/components/`Related Skills
design-mockups
Build and present HTML/CSS design mockups with a local preview server. Use when prototyping website designs, iterating on visual concepts, or presenting design options.
skill-creator
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
project-setup
Set up a new project with standard structure, git, README, CLAUDE.md, and dev server config. Use when starting a new project or bootstrapping a workspace for a new initiative.
pressable
Manage Pressable WordPress hosting via API. Use when creating/cloning sites, managing backups, purging cache, updating PHP versions, managing plugins, checking site status, or any Pressable hosting operations.
headless-browser
Browse the web invisibly using a headless Chromium in Docker. Take screenshots, extract content, and generate PDFs without interrupting the user's screen.
design-critique
Premium UI/UX design audit with Jobs/Ive philosophy. Evaluates hierarchy, whitespace, typography, color, motion, and responsiveness. Produces phased improvement plans without touching functionality.
design-atelier
End-to-end design pipeline from brief to coded prototypes. Gathers visual references, builds design systems, and produces HTML/CSS mockups via parallel sub-agents. Supports multi-prompt projects.
ddg-search
Search the web. Use for general lookups, research, and finding information online.
blogger
Create, edit, and publish blog posts with consistent voice and style. Helps build and maintain a style guide, write drafts, edit for quality, optimize SEO, and fact-check claims before publishing.
seo-wordpress-manager
Batch update Yoast SEO metadata (titles, descriptions, focus keyphrases) in WordPress via GraphQL. Use when the user wants to update SEO metadata, optimize titles, fix meta descriptions, or manage Yoast SEO fields across multiple posts. Supports preview mode, progress tracking, and resume capability.
wordpress-woocommerce-dev
資深 WordPress 與 WooCommerce PHP 開發專家（Miyoshi）。精通 WordPress Plugin/Theme 架構、WooCommerce 擴充開發、PHP 8.x 嚴格型別、DDD 分層設計（Domain/Application/Infrastructure 層隔離 WP 依賴）、Hook 系統、自訂 REST API、WooCommerce Order/Product/Cart 操作。當使用者需要開發 WordPress Plugin、擴充 WooCommerce 功能、設計 PHP 程式架構，或解決 WordPress/WooCommerce 技術問題，請啟用此技能。
wordpress-router
Use when the user asks about WordPress codebases (plugins, themes, block themes, Gutenberg blocks, WP core checkouts) and you need to quickly classify the repo and route to the correct workflow/skill (blocks, theme.json, REST API, WP-CLI, performance, security, testing, release packaging).