# 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.

- **Type:** Skill
- **Install:** `agentstack add skill-shaunandrews-agent-skills-wordpress-mockups`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [shaunandrews](https://agentstack.voostack.com/s/shaunandrews)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [shaunandrews](https://github.com/shaunandrews)
- **Source:** https://github.com/shaunandrews/agent-skills/tree/main/skills/wordpress-mockups

## Install

```sh
agentstack add skill-shaunandrews-agent-skills-wordpress-mockups
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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
  
    /* Paste tokens, base, and component CSS here */
  

  

```

### 2. Add Design Tokens

Copy the contents of `tokens/wordpress-tokens.css` into your `` 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 `` 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

  
    
  

```

### 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 Text

```

### Input with Label
```html

  Label
  
    
    
  

```

### Collapsible Panel
```html

  
    Section Title
    ...
  
  Panel content...

```

## 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/`

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [shaunandrews](https://github.com/shaunandrews)
- **Source:** [shaunandrews/agent-skills](https://github.com/shaunandrews/agent-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-shaunandrews-agent-skills-wordpress-mockups
- Seller: https://agentstack.voostack.com/s/shaunandrews
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.