# HTML Project Console
> 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.
- Skill: `delorenj/html-project-console` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add delorenj/html-project-console`
- Raw SKILL.md: https://api.skillmd.com/api/skills/delorenj/html-project-console/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: delorenj (https://skillmd.com/u/delorenj)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/delorenj/html-project-console
---
# 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
1. `templates/project-console.html` — a no-build, single-file SPA starter.
2. `commands/bootstrap-project-console.md` — reusable prompt to instantiate the
file into any target project path.
3. `references/design-principles.md` — shared UX and content model rules.
## Workflow
1. Copy `templates/project-console.html` to the chosen project location as
`project-console.html`.
2. Fill the `window.PROJECT_CONSOLE_DATA` JSON object with:
- vision
- plan
- todo
- changelog
- artifacts
- feedback
3. Keep updates append-only where possible (`changelog`, `decisions`) for
traceability.
4. 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 `