prototype. moacyrricardo/skills

Claude Code · clickable mocks

See the change before you spec it.

One command, mockup, turns a half-formed UI idea into a faithful, clickable HTML mock in your product's own look — before the flow is decided. It clones the real screen and applies only your change, so you have something concrete to react to.

idea→ preflight→ clone the real page + your change→ a clickable mock

Install

One command to add it, one to install

The repo is a plugin marketplace. prototype is standalone — no dependencies, no spec or tracker coupling.

claude code
# 1 · register the marketplace (once)
/plugin marketplace add moacyrricardo/skills

# 2 · install
/plugin install prototype@moacyr-skills

# 3 · activate in the current session
/reload-plugins

Once installed the command is namespaced — /prototype:mockup.

The idea

A mock is the product

What makes mockup different from a document generator is that a mock is the product — a facsimile of the real UI — not a document about it. That one distinction sets every rule, and it's the opposite posture from the rich-html document tools.

is-the-thing

mockup

A facsimile of the product UI. It resembles the real thing so you can react to a change in context — pixels, not prose.

about-a-thing

a document

Presents information about something — readable, theme-adaptive, annotated. The right posture for reports; wrong for a mock.

Matches the product's real theme
Even light-only. Not viewer-theme-aware — a light/dark toggle would lie about the product.
No document chrome
The only meta-layer is a toggleable annotation overlay, off by default, so the bare mock reads as the product.
Fidelity beats legibility
Reproduces the real look even where it's dense or cramped. It optimizes for resemblance, not readability.
Never a neutral fallback
A generic-looking mock is worthless. When there's no design system, it climbs a ladder instead.

The preflight

Four things decided before a pixel is drawn

mockup never guesses silently. For every choice below the rule is the same: infer from the prompt and the conversation first; only if it genuinely can't, ask — never decide for you.

The fidelity ladder

Where the look comes from — never generic

When there's no formal design system, mockup climbs a ladder rather than falling back to something neutral. Wherever it lands, it declares the basis in the overlay, so you always know whether you're seeing real fidelity or a labeled placeholder.

1 · real
Design system
tokens, components, documented pages
→
2 · inherited
Product signals
logo, brand color, existing CSS, app name
→
3 · inferred
Domain archetype
pet → playful; finance → sober; clinical → calm (labeled)
→
4 · last resort
Ask you
point me at one, or confirm the guess

Step by step

Idea → mock, in four moves

1

Describe the change

Point mockup at what you want to see — a change to an existing screen, or a brand-new surface. The more concrete, the less it has to ask.

/prototype:mockup add quick-filter chips to the transactions list
2

Let the preflight resolve

It locates the design system and the real page, reads your intent, and settles form factor and versions — asking only where it genuinely can't infer. It states its read in one line before generating.

3

Clone + apply only the delta

For a change it reproduces the real page as the baseline and applies only what you asked — stubbing unrelated heavy components (a big chart, an untouched grid) to keep the delta in focus, and declaring what it stubbed. The change reads as a true delta in real context.

4

Open it, react, iterate

You get one self-contained HTML file, clickable enough to demonstrate the flow. Flip on the annotation overlay to see the fidelity basis and anything invented — then correct it ("no, more like X"); a mock is made to be re-skinned cheaply.

What you get

One honest, self-contained file

Self-contained
Inline CSS/JS, no network, data: URIs — opens as a local file, an email attachment, or a Claude Artifact.
Annotation overlay
Toggleable, off by default. Declares the fidelity basis, any invented components, and anything stubbed or substituted.
Clickable enough
Demonstrates the states and transitions the idea hinges on — a mock, not a working app.
Project-agnostic. The design system, the status-quo pages, and the app's domain all come from the target project (its repo + CLAUDE.md) — nothing is hard-coded. A finished mock is a natural seed for a spec-workflow concern's design reference, but prototype has no dependency on it and works standalone.