skills.rest
bretbouchard
bretbouchardCOMMUNITY
Explore all skills by this author →
GitHub

ui-mockup

Extract semantic footprint from Skill Units into structured JSON fields.

2|Updated Nov 18, 2025
Search Tags:#automation#plugin UI#two-phase workflow#ui-mockup#design-iteration#webview
One-click install
npx skills add https://github.com/bretbouchard/plugin-freedom-system --skill ui-mockup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-mockup
Source: https://github.com/bretbouchard/plugin-freedom-system/tree/main/.claude/skills/ui-mockup
Command: npx skills add https://github.com/bretbouchard/plugin-freedom-system --skill ui-mockup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

Orchestrates WebView UI mockups without generating production files, enabling design iteration and handoff to specialized subagents.

Core Features & Use Cases

  • Two-phase UI workflow: Phase A generates machine-readable design spec (v[N]-ui.yaml) and a browser-testable mockup (v[N]-ui-test.html); Phase B produces production HTML and C++ boilerplate after design approval.
  • Context-aware design: Reads creative briefs, aesthetics, and plugin context to tailor UI workflows.
  • Use Case: When a user mentions UI design, mockups, or WebView interfaces, this skill coordinates the mockup workflow.

Quick Start

Run: /dream ui-mockup to start a two-phase mockup for a plugin, producing v1-ui.yaml and v1-ui-test.html.

Frequently Asked Questions about ui-mockup

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

FAQPage Schema
How do I automate UI mockup iteration for plugin development?▼

UI mockup automation orchestrates WebView designs through a two-phase workflow: Phase A generates a machine-readable design spec (v[N]-ui.yaml) and testable mockup (v[N]-ui-test.html) for iteration, then Phase B produces production HTML and C++ boilerplate after design approval, eliminating manual rework.

What's the difference between design mockups and production UI files?▼

Design mockups are browser-testable prototypes that validate layout and interactions without generating production code. This workflow separates design iteration (mockup phase) from production handoff (boilerplate generation), letting designers refine UI before specialized subagents build final files.

Can I use WebView UI design workflows with plugin development?▼

Yes. WebView UI workflows coordinate context-aware design based on creative briefs and plugin aesthetics, producing testable mockups that integrate with plugin architecture. The two-phase approach ensures design approval before generating C++ boilerplate.

How do I start a UI mockup workflow for a plugin?▼

Run `/dream ui-mockup` to initiate the two-phase mockup process. The workflow generates v1-ui.yaml (design spec) and v1-ui-test.html (browser-testable mockup) for design validation before production code generation.

What file formats does the UI mockup workflow produce?▼

The workflow outputs v[N]-ui.yaml (machine-readable design specification) and v[N]-ui-test.html (browser-testable mockup prototype). After design approval, Phase B generates production HTML and C++ boilerplate files.

Can I handoff UI designs to other team members or subagents?▼

Yes. The two-phase workflow produces design specs and testable mockups specifically for handoff to specialized subagents. Designers iterate on mockups before handing approved designs to subagents for production file generation.

Related Skills

Explore More Design & Creative Skills→
SwimmingLiuSwimmingLiu
1

teach-impeccable

Gather and persist project design context into a configuration file.

Community
Intermediate
huichenhuichen

design-html

Convert approved AI design mockups into Pretext-native HTML/CSS with responsive layouts.

Community
Advanced
glittercowboyglittercowboy
206

ui-mockup

Generate WebView UI mockup artifacts for audio plugins.

Community
Advanced
The13thNodeThe13thNode
3

design-consultation

Create a design direction and React component mockups for a product feature.

Community
Intermediate