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
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
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.
