joenandez/spectre/spectre-prototype

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; marker FROM_UX=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.

Working Set

• Reuse a managed FEATURE_ROOT only when explicit/current-thread evidence ties it to this work (physical directory wins; never branch/recency/lifecycle/scans); distinct work ignores ambient roots. Otherwise, including on collision, standalone MUST first load and follow @skill-spectre: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.

1. 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

Return path/screens/fidelity/anchor/assumptions/NOT included; opens/shareable; revalidate edits/research; promote post-UX to ux.md. explore → Scope; flows-only UX → Stage 2; post-UX contradiction/assumption → UX, else Plan; post-scope unresolved UX → UX, post-scope validated scope → /spectre:spectre-plan; standalone no scope → Scope, else reclassify as post-scope. One route/conditional/pause.

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.