Skip to main content
GeneralCodename-Inc

spectre-prototype

👻 | Generate a self-contained HTML prototype to validate a feature visually before planning - primary agent

Stars
142
Source
Codename-Inc/spectre
Updated
2026-05-28
Slug
Codename-Inc--spectre--spectre-prototype
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/Codename-Inc/spectre/HEAD/plugins/spectre-codex/skills/spectre-prototype/SKILL.md -o .claude/skills/spectre-prototype.md

Drops the SKILL.md into .claude/skills/spectre-prototype.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

prototype

Purpose

Produce one HTML prototype at {FEATURE_ROOT}/prototypes/{slug}_{MMDDYY}.html. The primary owns it; agents provide evidence only.

Inputs

  • $ARGUMENTS: feature root/name or descendant, description, optional --explore; markers FROM_UX=true, FROM_KICKOFF=true.
  • Read existing concepts/scope.md, specs/prd.md, ux.md, then legacy specs/ux.md fully before questions.
  • Silently read repo-root product.md when present, plus design.md or fallback design/design.md; apply them; do not mention missing files.
Mode Signal Fidelity Contract
post-ux complete ux.md: Screens, Layouts, Components, Interactions, States, Content high render faithfully; exact documented copy; no invented screens
flows-only ux FROM_UX=true or flows without complete Stage 2 mid preserve approved flows; choose UI details
explore --explore low, grayscale/layout-only visualize an unvalidated concept
post-scope scope, no UX mid validate scope
standalone no artifact mid establish what to prototype

Working Set

  • Resolve one managed FEATURE_ROOT for this work from explicit/current-thread evidence only (physical directory wins; never branch/recency/lifecycle/scans). If none is confirmed, including when the candidate path is occupied, standalone MUST first load and follow Skill(spectre-feature-root) through DONE; orchestrated calls escalate. Keep writes beneath it and pass it unchanged.
  • Repair stale feature/root metadata in artifacts this workflow touches.

Outputs + DONE

The single HTML file contains:

  • <!DOCTYPE html>, viewport metadata, inline CSS, and inline end-of-body JavaScript.
  • A top-of-head comment beginning Feature: and Feature Root:, followed by Fidelity, Generated, Flow covered, Screens/states, Visual anchor, Source spec, Key assumptions, post-UX Filled assumptions, NOT included, and Next step.
  • A design-token comment for Primary, Accent, Surface, Text, Font, Border-radius, Spacing, mirrored as :root custom properties.
  • If multi-screen, vanilla-JS display:block/none navigation; one ordered <section> per screen, each with happy path plus an empty, error, or loading state.

DONE when mode/fidelity/anchor are explicit; available context and research preceded generation; the primary authored and validated the file; documented UX is faithful; content is realistic; components reuse named classes; interactions have no console errors; and states, reuse, and portability pass. Surface failures as caveats.

Method / guardrails

  1. Reply before tools, except FROM_UX=true may begin by reading ux.md; if no arguments or context, ask what to prototype.
  2. Ask 2–4 focused questions. Confirm fidelity and a visual anchor (colors, fonts, URL, or named aesthetic); if skipped, declare one. Gate: wait unless FROM_UX=true.
  3. After the gate, dispatch in parallel; each returns ≤2,000 tokens in-thread and writes no files:
    • @spectre_web_research: 2–3 current references, interaction convention, and concrete palette/type/layout values; <400 words with citations.
    • @spectre_analyst: post-UX extracts required sections and copy verbatim, marking spec-silent details as filled assumptions; otherwise synthesizes flow, screen states, realistic content, and components.
    • @spectre_patterns: only for an existing app; return actual tokens and interaction conventions.
  4. After all findings return, the primary alone creates, edits, and validates the HTML; not even @spectre_dev modifies it.

Use inline SVG/data URIs/CSS shapes only: no remote images, relative assets, custom WOFF, filler, Inter/Roboto defaults, purple-on-white gradients, broken href="#", happy-path-only screens, or inline restyling of recurring components. Use one Google family (≤2 weights) or system fonts. Tailwind CDN is mid/high-fi only.

Handoff

Report path, screens, fidelity, anchor, assumptions, filled assumptions, and NOT included; note it opens directly and is shareable. Revalidate every edit; structural feedback reruns research. Promote user-selected post-UX assumptions to the matching ux.md section and report a one-line diff.

Route once by observed state: explore → spectre-scope; flows-only ux → spectre-ux Stage 2; post-ux contradictions/material assumptions → spectre-ux, otherwise spectre-plan; post-scope unresolved UX → spectre-ux, validated scope → spectre-plan; standalone without scope → spectre-scope, otherwise reclassify as post-scope. Render exactly Next (recommended): ... — because {mode + signal}., at most one conditional alternative, and optionally Pause: spectre-handoff {feature} with the path and next step.

Escalate-If

  • A post-UX contradiction exists: ask which is authoritative, update ux.md and HTML together, then revalidate.
  • A required mode artifact is missing/unreadable, or neither the user nor context supplies a usable visual anchor/aesthetic.

Next step: follow the mode-specific handoff above.