Help us improve
Share bugs, ideas, or general feedback.
From project-status
Generate or update an interactive HTML status page (project_status.html in the project root) summarizing the main parts of a project, what shipped recently, and what's still on the agenda. Inspired by watchtower's pipeline_status.html and restyled with the ivory/clay/olive palette from thariqs.github.io/html-effectiveness. Use when the user says "build a status page", "make a progress tracker", "generate a project board", "what's the agenda look like", "create a project dashboard", or invokes "/project-status".
npx claudepluginhub moebit/claude --plugin project-statusHow this skill is triggered — by the user, by Claude, or both
Slash command
/project-status:project-statusThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate or maintain `project_status.html` in the project root. The page is a static, self-contained HTML document with an interactive pipeline-of-parts view: click a part to see what shipped and what's pending. Designed to live in the repo, be opened directly in a browser, and stay current as work progresses.
Guides Next.js Cache Components and Partial Prerendering (PPR): 'use cache' directives, cacheLife(), cacheTag(), revalidateTag() for caching, invalidation, static/dynamic optimization. Auto-activates on cacheComponents: true.
Processes PDFs: extracts text/tables/images, merges/splits/rotates pages, adds watermarks, creates/fills forms, encrypts/decrypts, OCRs scans. Activates on PDF mentions or output requests.
Share bugs, ideas, or general feedback.
Generate or maintain project_status.html in the project root. The page is a static, self-contained HTML document with an interactive pipeline-of-parts view: click a part to see what shipped and what's pending. Designed to live in the repo, be opened directly in a browser, and stay current as work progresses.
Look in the target directory (default: cwd; if $ARGUMENTS is a path, use that):
project_status.html → create mode.project_status.html → update mode.$ARGUMENTS literal "create" or "update" → force that mode.Read just enough to understand the project's structure. Highest-signal sources, in order:
README.md — section headings usually map directly to the main parts.package.json / pyproject.toml / Cargo.toml / Gemfile / go.mod — project name, dependencies.ls -1 or Glob for */.git log --oneline -50.TODO*, ROADMAP*, AGENDA*, NEXT_STEPS*, planning docs in docs/.Don't read every file. Read the cues.
These are the cards on the page. Pick parts that match the user's mental model:
README section structure is usually the right answer. Otherwise top-level dirs.
For each, draft:
{
id: "kebab-case-slug",
num: "01", // two-digit display
name: "Short Title",
blurb: "One-line card summary, ≤90 chars.",
detail: "1–2 sentence panel intro.",
shipped: [
["item description (HTML allowed: <code>foo</code>)", "ref: sha / cycle 18 / 2026-05-13"],
["another shipped item", ""]
],
pending: [
["carry-forward item", "next pass"]
]
}
Be specific. "Data layer" is weak; "Postgres schema + migrations + connection pool" is strong. If a section has nothing pending, use [["No active carry-forwards"]] (single entry, no ref).
Read ${CLAUDE_SKILL_DIR}/templates/project_status.html. Substitute these placeholders:
| Placeholder | What to put |
|---|---|
{{PROJECT_NAME}} | Project name from manifest or README h1 |
{{EMPHASIS_WORD}} | One word to render in italic clay color. Pick what reads best italicized — e.g. "status", or a word from the project name. |
{{SUBTITLE}} | One sentence under the h1. Mention number of parts and invite click. |
{{SNAPSHOT_DATE}} | Today, YYYY-MM-DD (use the current date from the environment) |
{{STAGES_JSON}} | The populated STAGES array as JavaScript literal (not strict JSON — strings can contain <code> HTML). Use double-quoted keys and values, escape </script> as <\/script> if it appears in any string. |
{{FOOTER}} | One-line footer. If nothing project-specific, use: Generated by /project-status. Update by re-invoking the skill or editing the STAGES array directly. |
Write the result to <target>/project_status.html.
Read ${CLAUDE_SKILL_DIR}/assets/claude_md_tracking.md. Append it to <target>/CLAUDE.md:
CLAUDE.md doesn't exist, create it with the snippet as the only content (no preceding blank lines).CLAUDE.md exists but doesn't contain the heading ## Project status tracking, append the snippet with a blank line before it.One sentence. Path written, number of stages, mode. Example:
Wrote
project_status.html(7 parts, create mode). Added tracking note toCLAUDE.md.
Read the existing project_status.html. The STAGES = [...] array lives in the <script> block near the bottom.
Extract Snapshot YYYY-MM-DD from the header. Then:
git log --since="<that-date>" --oneline
…to see what's been merged since. Also scan any change notes the user might have written in the conversation.
Use the Edit tool. For each meaningful change:
pending entry into shipped (with a fresh ref — short SHA, cycle number, date).shipped entry.pending only if the user explicitly mentioned new agenda items.Bump Snapshot YYYY-MM-DD in the header subtitle to today.
Do not regenerate the file, reorder stages, drop user-curated entries, or touch the styling. Only the data inside STAGES and the snapshot date.
One sentence. Stages touched, mode. Example:
Updated
project_status.html(3 stages touched, snapshot bumped to 2026-05-13).
<script>, not JSON. Strings can contain HTML (<code>…</code>). This is intentional — it keeps the page a single self-contained file with no external data fetch.--ivory, --clay, --olive, etc.) are the skill's visual identity. Don't change the palette.$ARGUMENTS that doesn't exist, exit early and ask them to clarify.