# 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. Use when this capability is needed.
- Skill: `tomevault-io/wordpress-mockups` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/wordpress-mockups`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/wordpress-mockups/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/wordpress-mockups
---
# 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
Mockup Name
```
### 2. Add Design Tokens
Copy the contents of `tokens/wordpress-tokens.css` into your `