Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From caspar
Generate a single self-contained, clickable HTML prototype to make a feature visible before planning — resolving ambiguity pre-scope, validating flows pre-plan, or rendering an approved UX spec for stakeholder review. Triggers on "prototype this", "mock up the UI", "make a clickable preview", or a mid-flow `ux` Stage 1→2 transition. Do NOT trigger to write production app code, build a multi-file frontend, or plan/scope the work itself — this produces one throwaway HTML file only.
npx claudepluginhub codename-inc/caspar --plugin casparHow this skill is triggered — by the user, by Claude, or both
Slash command
/caspar:caspar-prototypeThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Produce one portable, self-contained HTML file that makes a feature visible before it is planned. Output saved to `{OUT_DIR}/prototypes/{slug}_{MMDDYY}.html`.
Guides technical evaluation of code review feedback: read fully, restate for understanding, verify against codebase, respond with reasoning or pushback before implementing.
Share bugs, ideas, or general feedback.
Produce one portable, self-contained HTML file that makes a feature visible before it is planned. Output saved to {OUT_DIR}/prototypes/{slug}_{MMDDYY}.html.
$ARGUMENTS (feature description, --explore flag, optional output path).FROM_UX=true, FROM_KICKOFF=true.docs/tasks/{branch}/concepts/scope.md, .../specs/prd.md, .../ux.md. Resolve branch via git rev-parse --abbrev-ref HEAD at runtime.| Mode | Signal | Fidelity | Job |
|---|---|---|---|
| post-ux | complete ux.md (has Screens, Layouts, Components, Interactions, States, Content) | high-fi | render the spec faithfully — do not invent screens or contradict documented states/copy |
| flows-only ux | FROM_UX=true, or ux.md with flows but missing Stage-2 sections | mid-fi | flows are approved input; you make the UI calls |
| explore | --explore flag | low-fi (grayscale, layout-only) | concept unvalidated |
| post-scope | scope.md exists, no ux.md | mid-fi | validate scope |
| standalone | none | mid-fi | ask what we're prototyping |
Stage 1 intake (tight: 2–4 questions, never a form), then a gated parallel research+generate pass. Single-threaded write of the HTML.
ux.md when FROM_UX=true). If ARGUMENTS empty → ask what we're prototyping.FROM_UX=true).@caspar:web-research — 2–3 living UI references + the established convention for this interaction type + concrete palette/type/layout decisions for the anchor (hex, font families). Anti-slop forcing function: without it the model defaults to Inter + purple gradients. <400 words, cite sources.@caspar:analyst — extract mode (post-ux): pull Screens/Layouts/Components/Interactions/States/Content verbatim from ux.md; use documented copy EXACTLY; flag spec-silent details as "filled assumptions"; never invent screens. synthesize mode (else): primary flow, per-screen state list, realistic domain content (no Lorem ipsum), component inventory.@caspar:patterns — only if an existing app to anchor to: real design tokens, component conventions, interaction patterns (return actual hex/class values, not paths). Skip otherwise.
Return findings in-thread (compressed); write no intermediate docs.@caspar:dev (or inline if trivial). Embed the negative constraints below verbatim in the dev prompt.<!DOCTYPE html> + minimal <head> (<meta viewport>, inline <style>).<head>: Feature · Fidelity · Generated (date) · Branch · Flow covered · Screens/states · Visual anchor · Source spec (ux.md path or "synthesized from …") · Key assumptions · Filled assumptions (post-ux only) · NOT included · Next step.:root.display:block/none toggling. No router, no framework.<section> per screen, in user-encounter order. Every screen shows the happy path AND ≥1 of: empty / error / loading state.<script> at end of body for interactions. Vanilla JS only.<img src="http…">, no local relative paths (./, ../), no custom WOFF. Fonts: one Google-Fonts family (≤2 weights) or system.href="#" jumps, no console errors). No inconsistent components — each recurring element = one named CSS class, reused, never re-styled inline.File at {OUT_DIR}/prototypes/{slug}_{MMDDYY}.html (OUT_DIR=docs/tasks/{branch} unless FROM_UX/FROM_KICKOFF reuse the task dir or user gives a path; mkdir -p the prototypes subdir). DONE when:
:root.Present: path, size, screen count, fidelity, visual anchor, key assumptions, NOT-included list; tell user to open it in a browser and that it is fully shareable. Iterate on feedback (small tweaks → edit HTML; structural → re-run subagents + regen; re-run the portability check after any edit). post-ux only: surface filled assumptions and offer to promote selected ones into ux.md (edit the matching section, re-present with a one-line diff). Close with an inline Next-Steps line, mode-specific: FROM_UX → resume /caspar:ux Stage 2; --explore → /caspar:scope; post-scope → /caspar:ux or /caspar:plan.
ux.md and the HTML together and re-run the portability check.