Scaffold and maintain a single-file HTML project console that replaces scattered markdown status docs with one browser-renderable control center for planning, progress tracking, artifacts, and human feedback.
Installation
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Scaffold and maintain a single-file HTML project console that replaces scattered markdown status docs with one browser-renderable control center for planning, progress tracking, artifacts, and human feedback.
pipeline-status
["new"]
html-project-console
Purpose
Use this skill when the user wants a browser-native project cockpit instead of
many markdown files. It creates a predictable project-console.html that the
agent can keep updating over time.
What this skill scaffolds
templates/project-console.html — a no-build, single-file SPA starter.
commands/bootstrap-project-console.md — reusable prompt to instantiate the
file into any target project path.
references/design-principles.md — shared UX and content model rules.
Workflow
Copy templates/project-console.html to the chosen project location as
project-console.html.
Fill the window.PROJECT_CONSOLE_DATA JSON object with:
vision
plan
todo
changelog
artifacts
feedback
Keep updates append-only where possible (changelog, decisions) for
traceability.
Regenerate only the data object unless user asks for layout changes.
Guardrails
Keep it dependency-free (plain HTML/CSS/JS only).
Keep all data local in the file by default.
Preserve section IDs for stable automation targets.
Prefer progressive enhancement over framework complexity.
Extension ideas
Add a <dialog>-based feedback form that writes JSON snippet for copy/paste.
Add side-by-side colored diffs for latest changed files.
