agentsclimarketplace

Openplan html brief

Skill BANANASJIM/openplan-skill/skills/openplan-html-brief

Portable OpenPlan-style Agent Skills for Codex and Claude Code: intent alignment, docs governance, review, handoff, and safe auto workflows.

Install
npx -y skills add BANANASJIM/openplan-skill --skill openplan-html-brief

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Create a temporary human-facing HTML frontend for OpenPlan-style agent work. Use when an agent needs to present what it did, what it found, what decisions remain, a handoff snapshot, an auto-review report, or a compact teaching/explanation artifact in a clearer visual format. Generate disposable, self-contained HTML for human reading; do not treat it as persistent project documentation or a committed artifact unless the user explicitly asks.

SKILL.md

4.5 KB, as published. Nobody here has run it

OpenPlan HTML Brief

Use this as a better temporary frontend for human understanding. It turns agent output into a concise, readable HTML page.

Default Behavior

  • Generate a single self-contained .html file.
  • Default location: /tmp/openplan-brief-<timestamp>.html.
  • Do not add it to git.
  • Do not place it in the project repo unless the user explicitly asks.
  • Do not make it the source of truth. It is a visual summary over durable artifacts.
  • If file writing is unavailable, return the HTML in a fenced code block.

Good Uses

  • Summarize what an agent did.
  • Present auto-review findings.
  • Teach a project concept visually.
  • Show a handoff snapshot to a human.
  • Compare goal/intent/design/spec/code surfaces.
  • Explain next safe actions and human decisions.

Page Shape

Keep it simple:

  1. Header: title, timestamp, scope.
  2. Status strip: mode, result, risk level, human decision needed.
  3. Main summary: 3-6 bullets.
  4. Evidence cards: paths, commands, reports, or missing artifacts.
  5. Findings or lessons: grouped by severity or topic.
  6. Human decisions: explicit non-automated decisions.
  7. Next safe action.
  8. Residual risk.

Frontend Rules

  • Use plain HTML/CSS/JS only.
  • Inline CSS; avoid external CDN dependencies.
  • Responsive layout, readable on laptop and mobile.
  • No heavy decoration, no marketing hero, no gradients unless useful for status.
  • Prefer tables for comparisons, cards for repeated findings, and callouts for decisions/blockers.
  • Keep text concise; do not dump raw logs.
  • Escape user/file content before embedding.
  • Do not include secrets or credentials.

Visual Semantics

Use calm status colors:

  • green: no blocking findings;
  • amber: attention or uncertainty;
  • red: blocked/P0/P1;
  • blue/gray: informational.

Do not let color be the only signal; include text labels.

Minimal Template

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OpenPlan Brief</title>
<style>
  :root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
  body { margin: 0; background: #f6f7f9; color: #1f2937; }
  main { max-width: 1080px; margin: 0 auto; padding: 28px; }
  header { margin-bottom: 18px; }
  h1 { margin: 0 0 6px; font-size: 28px; letter-spacing: 0; }
  h2 { margin: 22px 0 10px; font-size: 18px; }
  .meta { color: #667085; font-size: 14px; }
  .strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
  .tile, .card { background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px; }
  .label { color: #667085; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
  .value { margin-top: 4px; font-weight: 650; }
  .ok { border-left: 4px solid #16a34a; }
  .warn { border-left: 4px solid #d97706; }
  .bad { border-left: 4px solid #dc2626; }
  ul { padding-left: 20px; }
  code { background: #f2f4f7; padding: 2px 5px; border-radius: 4px; }
  table { width: 100%; border-collapse: collapse; background: white; border: 1px solid #e5e7eb; }
  th, td { text-align: left; padding: 10px; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
  th { background: #f9fafb; font-size: 13px; color: #475467; }
</style>
<main>
  <header>
    <h1>OpenPlan Brief</h1>
    <div class="meta">Scope: ... · Generated: ...</div>
  </header>
  <section class="strip">
    <div class="tile"><div class="label">Mode</div><div class="value">Review</div></div>
    <div class="tile"><div class="label">Result</div><div class="value">No blocking findings</div></div>
    <div class="tile warn"><div class="label">Human Decision</div><div class="value">Needed</div></div>
  </section>
  <section>
    <h2>Summary</h2>
    <div class="card"><ul><li>...</li></ul></div>
  </section>
</main>
</html>

Handoff

If the HTML summarizes work for another agent, pair it with $openplan-handoff. The HTML is for people; the handoff snapshot is for agents.

For Claude Code, use assets/claude-code-command.md as a slash command or prompt seed.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.