メニュー
Create one self-contained HTML prototype to resolve ambiguity, validate flows, or render UX before planning. Use for prototype/mockup/preview requests and UX Stage 1→2; not for production code, multi-file apps, scope, or planning.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/joenandez/spectre --skill spectre-prototypeコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
SOC 職業分類に基づく
| name | spectre-prototype |
| description | Create one self-contained HTML prototype to resolve ambiguity, validate flows, or render UX before planning. Use for prototype/mockup/preview requests and UX Stage 1→2; not for production code, multi-file apps, scope, or planning. |
| user-invocable | true |
| disable-model-invocation | true |
Produce one HTML prototype at {FEATURE_ROOT}/prototypes/{slug}_{MMDDYY}.html. The primary owns it; agents provide evidence only.
$ARGUMENTS: feature root/name or descendant, description, optional --explore; markers FROM_UX=true, FROM_KICKOFF=true.concepts/scope.md, specs/prd.md, ux.md, then legacy specs/ux.md fully before questions.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 |
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.The single HTML file contains:
<!DOCTYPE html>, viewport metadata, inline CSS, and inline end-of-body JavaScript.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.:root custom properties.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.
FROM_UX=true may begin by reading ux.md; if no arguments or context, ask what to prototype.FROM_UX=true.@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.@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.
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.
ux.md and HTML together, then revalidate.Next step: follow the mode-specific handoff above.