LobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
Create one self-contained HTML prototype to resolve ambiguity, validate flows, or render UX before planning.
$ npx skills add joenandez/spectre --skill spectre-prototype -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install joenandez/spectre spectre-prototype --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/joenandez/spectre.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/spectre/skills/spectre-prototype .claude/skills/spectre-prototype && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "spectre-prototype" agent skill from https://github.com/joenandez/spectre/tree/main/plugins/spectre/skills/spectre-prototype into .claude/skills/spectre-prototype/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spectre-prototype", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/joenandez/spectre/tree/main/plugins/spectre/skills/spectre-prototypeType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add joenandez/spectre --skill spectre-prototype -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install joenandez/spectre spectre-prototype --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/joenandez/spectre.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/spectre/skills/spectre-prototype .agents/skills/spectre-prototype && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "spectre-prototype" agent skill from https://github.com/joenandez/spectre/tree/main/plugins/spectre/skills/spectre-prototype into .agents/skills/spectre-prototype/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spectre-prototype", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add joenandez/spectre --skill spectre-prototype -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install joenandez/spectre spectre-prototype --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/joenandez/spectre.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/spectre/skills/spectre-prototype .cursor/skills/spectre-prototype && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "spectre-prototype" agent skill from https://github.com/joenandez/spectre/tree/main/plugins/spectre/skills/spectre-prototype into .cursor/skills/spectre-prototype/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spectre-prototype", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/joenandez/spectre.git --path plugins/spectre/skills/spectre-prototype--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add joenandez/spectre --skill spectre-prototype -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install joenandez/spectre spectre-prototype --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/joenandez/spectre.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/spectre/skills/spectre-prototype .gemini/skills/spectre-prototype && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "spectre-prototype" agent skill from https://github.com/joenandez/spectre/tree/main/plugins/spectre/skills/spectre-prototype into .gemini/skills/spectre-prototype/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spectre-prototype", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install joenandez/spectre spectre-prototypeInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add joenandez/spectre --skill spectre-prototype -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/joenandez/spectre.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/spectre/skills/spectre-prototype .github/skills/spectre-prototype && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "spectre-prototype" agent skill from https://github.com/joenandez/spectre/tree/main/plugins/spectre/skills/spectre-prototype into .github/skills/spectre-prototype/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spectre-prototype", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add joenandez/spectre --skill spectre-prototype -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install joenandez/spectre spectre-prototype --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/joenandez/spectre.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/spectre/skills/spectre-prototype .opencode/skills/spectre-prototype && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "spectre-prototype" agent skill from https://github.com/joenandez/spectre/tree/main/plugins/spectre/skills/spectre-prototype into .opencode/skills/spectre-prototype/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spectre-prototype", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
spectre-prototypeCreate one self-contained HTML prototype to resolve ambiguity, validate flows, or render UX before planning.
Spectre Prototype is an agent skill from joenandez/spectre. 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.
Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
The repository describes itself as: Spectre is a battle-tested 6 stage agentic engineering workflow for building complex, production-ready features. You stay in the loop for the decisions that matter. Your agents…. The licence is MIT.
4 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 931c9e8. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Spectre Prototype loads about 1.3k tokens when it runs. Until then it costs about 62 tokens; SKILL.md has 571 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from joenandez/spectre at commit 931c9e8, republished under its MIT licence (© joenandez). 571 words, ~1,279 tokens.
.claude/skills/spectre-prototype/SKILL.md (or your agent's skills folder).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; marker FROM_UX=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 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.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.
| Handoff | Details |
|---|---|
| 🧭 Current phase | Done |
| 📦 What was just done | Result |
| ▶️ Proposed next step | Render resolved action. |
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.
ux.md and HTML together, then revalidate.Next step: follow the mode-specific handoff above.
© joenandez, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in plugins/spectre/skills/spectre-prototype of joenandez/spectre.
Open the folder on GitHubat commit 931c9e8
Spectre Prototype next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Spectre Prototype this skilljoenandez/spectre | 164 | — | ~1.3k | Automated safety check: Pass | MIT | |
| LobeHub Interactive Prototypelobehub/lobehub | 83k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| PrototypeDonchitos/Claude-Code-Game-Studios | 26k | — | ~8.1k | Automated safety check: Notes | MIT | |
| PrototypeEpicenterHQ/epicenter | 4.8k | — | ~767 | Automated safety check: Pass | Custom licence | |
| Compound Engineering PrototypeEveryInc/compound-engineering-plugin | 25k | — | ~1.9k | Automated safety check: Pass | MIT | |
| Apple Containersickn33/agentic-awesome-skills | 47k | 1 repos | ~2.5k | Automated safety check: Pass | Apache-2.0 |
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
Donchitos/Claude-Code-Game-Studios
Concept prototype before GDDs — throwaway HTML, Engine or Paper build, PROCEED/PIVOT/KILL/NOT ASSESSED.
EpicenterHQ/epicenter
Build a throwaway prototype to answer a focused logic, state-model, or UI question before committing to production design.
EveryInc/compound-engineering-plugin
Builds a throwaway prototype at just the fidelity needed to settle a specific how-it-should-work-or-feel question, before committing to an approach other work will treat as fixed.
sickn33/agentic-awesome-skills
Build, run, and manage OCI/Linux containers as lightweight per-container VMs on Apple-silicon macOS using Apple's open-source container CLI, no Docker daemon required.
vinvcn/mattpocock-skills-zh-CN
构建一次性原型来回答一个设计问题。适用于用户想验证某个 state model 或 logic 是否感觉对,或探索 UI 应该长什么样时。
joenandez/spectre
A skill your agent uses when validating that the Spectre plugin itself still works after ANY change to this repo — skills, prompts, agents, hooks, the CLI, the Codex mirror, or a release.
joenandez/spectre
A skill your agent uses when modifying the Codex SPECTRE install flow, SessionStart continuity, project skill syncing, registry injection, or Codex-specific runtime files.
joenandez/spectre
Save a quiet, branch-keyed session snapshot with continuity, active work, and optional task/todo state for automatic resume.
joenandez/spectre
User-invoked front door for durable capture. An agent skill from joenandez/spectre.
joenandez/spectre
Rewrite a verbose SPECTRE skill into a compact, contract-form Spectre skill proposal — clear on WHAT, silent on HOW — grounded in the spectre-light distillation and freedom-tier budget.
joenandez/spectre
Rewrite Spectre subagent definitions into compact, contract-driven agents with clear routing, least-privilege tools, output schemas, and an auditable rewrite trail.
Create one self-contained HTML prototype to resolve ambiguity, validate flows, or render UX before planning. Spectre Prototype is an agent skill from joenandez/spectre. Create one self-contained HTML prototype to resolve ambiguity, validate flows, or render UX before planning.
Spectre Prototype fits situations like: prototype/mockup/preview requests and UX Stage 1→2; not for production code; multi-file apps.
Run `npx skills add joenandez/spectre --skill spectre-prototype -a claude-code`. Or copy the skill folder (plugins/spectre/skills/spectre-prototype in joenandez/spectre) into .claude/skills/spectre-prototype in your project. Claude Code loads it when a task matches its description.
Run `npx skills add joenandez/spectre --skill spectre-prototype -a codex`. Or copy the skill folder (plugins/spectre/skills/spectre-prototype in joenandez/spectre) into .agents/skills/spectre-prototype in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add joenandez/spectre --skill spectre-prototype -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/spectre-prototype, .gemini/skills/spectre-prototype, .github/skills/spectre-prototype and .opencode/skills/spectre-prototype in your project.
SKILL.md names no scripts, command-line tools or credentials: Spectre Prototype is instructions for the agent only.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Spectre Prototype is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Spectre Prototype: LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Prototype (Donchitos/Claude-Code-Game-Studios, 26k stars), Prototype (EpicenterHQ/epicenter, 4.8k stars) and Compound Engineering Prototype (EveryInc/compound-engineering-plugin, 25k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
joenandez (a GitHub user) maintains it in joenandez/spectre, which has 164 GitHub stars. The repository holds 26 skills in this directory. The repository was last updated on October 2, 2026.
Source: joenandez/spectre on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.