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.
التثبيت
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
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.
