skills.rest
shaunandrews
shaunandrewsCOMMUNITY
Explore all skills by this author →
𝕏@shaunandrewsGitHub

wordpress-mockups

Create WordPress/Gutenberg UI mockups from design tokens, icons, and components.

8|Updated Feb 3, 2026
Search Tags:#wordpress#design-patterns#design-tokens#gutenberg#site-editor#ui-mockups
One-click install
npx skills add https://github.com/shaunandrews/agent-skills --skill wordpress-mockups
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wordpress-mockups
Source: https://github.com/shaunandrews/agent-skills/tree/main/skills/wordpress-mockups
Command: npx skills add https://github.com/shaunandrews/agent-skills --skill wordpress-mockups

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

WordPress/Gutenberg UI mockups can be time-consuming to assemble from scratch; this skill provides a token-driven, icon-rich starting point to accelerate visual prototyping.

Core Features & Use Cases

  • Token-driven styling: leverages tokens/wordpress-tokens.css for consistent colors, typography, spacing, radii, and elevation across mockups.
  • Icon library: uses icons/ with 321 SVGs to create authentic WordPress admin visuals.
  • Component patterns: includes components/, patterns/ and related docs to assemble complete UI mockups (buttons, panels, cards, modals, forms, and layouts).
  • Pattern-first workflows: patterns folder offers pre-built Site Editor-like layouts to jump-start layout decisions and composition.
  • Quick-start templates: provides a self-contained skeleton to start new mockups rapidly and adapt for Site Editor concepts.

Quick Start

Copy the WordPress Mockups skeleton into your project, load tokens and base styles, then assemble a page with components and patterns to resemble a WordPress admin UI.

Frequently Asked Questions about wordpress-mockups

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prototype WordPress admin UI mockups quickly?▼

Create WordPress admin UI mockups using a self-contained token system for colors and typography, pre-built component patterns for panels and modals, and a 321-SVG icon library to ensure authentic Gutenberg visuals.

What are WordPress design tokens and how do they work for Gutenberg UI?▼

WordPress design tokens are CSS variables standardizing colors, typography, spacing, and radii, ensuring consistent Gutenberg UI styling across all mockup components and patterns without manual adjustments.

Can I use these WordPress mockup components for Site Editor concepts?▼

Yes, you can adapt the pattern-driven components and pre-built Site Editor-like layouts to prototype custom Site Editor concepts, utilizing the included quick-start skeleton and icon library for accurate visual representation.

Do I need any external dependencies to create Gutenberg UI explorations?▼

No, you need zero external dependencies to create Gutenberg UI explorations because the skill provides a self-contained design-token CSS file, a local library of 321 SVG icons, and built-in component patterns.

What is the best way to build WordPress admin panels and modals for prototypes?▼

The best way to build WordPress admin panels and modals is using the included pattern-first workflows, which offer pre-built component structures like cards and forms to accelerate layout composition and visual prototyping.

When should I use a token-driven approach for WordPress UI mockups?▼

Use a token-driven approach for WordPress UI mockups when you need consistent colors, typography, spacing, and elevation across multiple Gutenberg interfaces, ensuring visual accuracy without repetitive manual styling.

Related Skills

Explore More Design & Creative Skills→
fabioc-alohafabioc-aloha
1

Graphic Design Skill

Guide visual design with layout, typography, color theory, and SVG creation.

Community
Advanced
wpgauravwpgaurav
14

greenlight-vibe

Convert Greenshift/GreenLight designs into WordPress Gutenberg blocks with JSON parameters.

Community
Advanced
mikkelkrogsholmmikkelkrogsholm
2

wordpress-blocks

Develop and deploy WordPress Gutenberg blocks using Block Hooks and Interactivity APIs.

Community
Intermediate
AnandaAnugrahHandyantoAnandaAnugrahHandyanto

claude-design

Generate self-contained HTML artifacts with embedded CSS and JavaScript via CLI/API workflows.

Community
Advanced