# Mine Mockup

> Use when the user says: "mockup this UI", "show me what it looks like", "HTML mockup", "UI preview", or "generate a mockup". Generate self-contained HTML mockup files. Reads design/context.md if present for consistent styling.

- Skill: `nodejsmith/mine-mockup` (Agent Skill, multi-file: 8 files)
- Install (CLI): `npx skillmds@latest add nodejsmith/mine-mockup`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nodejsmith/mine-mockup/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: NodeJSmith (https://skillmd.com/u/nodejsmith)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/nodejsmith/mine-mockup

---


# Mockup

Dispatches a subagent to generate self-contained HTML mockups. The main agent resolves design context, then hands off generation entirely.

## Arguments

$ARGUMENTS — a description of what to mockup. If empty, ask the user what they want to mockup.

## Resolve Context

Look for `design/specs/*/design.md`:
- **None found** — proceed without a design doc.
- **Exactly one** — read its **User Scenarios** section. Note the path for the subagent.
- **Multiple** — list the feature directories and ask which this mockup targets.

Look for design context (checked in order, first match wins): `design/context.md`, `.impeccable.md`, `design/direction.md`. If found, note its path. If none found, proceed without — the worker uses its default aesthetic.

## Execute

Launch one subagent (`subagent_type: standard-worker`):

> Generate an HTML mockup.
>
> **What to build:** <user's description from $ARGUMENTS>
> **Design context file:** <path to design/context.md or equivalent, or "none">
> **Design doc:** <path to design.md if found, or "none">
>
> Read `${CLAUDE_CONFIG_DIR:-~/.claude}/skills/mine-mockup/worker.md` for the complete workflow. Follow every step. Do NOT use the Skill tool — the instructions are in worker.md, not a skill.

The subagent returns the file path of the generated HTML.

Present the file path to the user. If no `design/context.md` exists, suggest: "Want more control over styling? Run `/i-teach-impeccable` to set up design tokens."