shaunandrews/wordpress-mockups
skills/wordpress-mockups/SKILL.md
Build accurate WordPress/Gutenberg UI mockups using pre-extracted design tokens, icons, and components. Use when prototyping WordPress admin interfaces or Site Editor concepts.
$ install --global
skillsauthnpx skillsauth add shaunandrews/agent-skills wordpress-mockupsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 14, 2026, 2:04 AM37.9s5 files scanned
SKILL.md
- name:
- wordpress-mockups
- description:
- Build accurate WordPress/Gutenberg UI mockups using pre-extracted design tokens, icons, and components. Use when prototyping WordPress admin interfaces or Site Editor concepts.
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:
<!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:
- Open the relevant component file (e.g.,
components/button.html) - Copy the CSS from the
<style>block - Copy the HTML markup you need from the examples
- Customize the content
5. Add Icons
To include an icon:
- Check
icons/ICONS.mdfor the icon name - Read the SVG:
cat skill/icons/svg/{name}.svg - Paste the SVG inline in your markup
Example:
<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.mdfor 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.mdfor where values come from - All spacing is based on 8px grid (
--wp-grid-unit) - Use
--wp-admin-theme-colorfor 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.mdfor available components - Class naming:
.components-{name},.components-{name}__{element} - Modifiers:
.is-primary,.is-compact,.is-pressed, etc.
Common Patterns
Button with Icon
<button class="components-button has-icon has-text">
<svg>...</svg>
Button Text
</button>
Input with Label
<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
<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
- Always use tokens — Don't hardcode colors or spacing
- Copy, don't reference — Each mockup should be self-contained
- Check component variants — Most components have multiple states/sizes
- Use semantic modifiers —
.is-primary, not custom color classes
Source
Design tokens, icons, and component styles extracted from:
- Gutenberg —
packages/base-styles/andpackages/components/
Related Skills
shaunandrews/skill-creator
data-ai
VerifiedTrustedCommunity
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
8SKILL.mdUpdated Apr 14, 2026
shaunandrews/project-setup
development
VerifiedTrustedCommunity
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.
8SKILL.mdUpdated Apr 14, 2026
shaunandrews/pressable
tools
VerifiedTrustedCommunity
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.
8SKILL.mdUpdated Apr 14, 2026
shaunandrews/headless-browser
development
VerifiedTrustedCommunity
Browse the web invisibly using a headless Chromium in Docker. Take screenshots, extract content, and generate PDFs without interrupting the user's screen.
8SKILL.mdUpdated Apr 14, 2026