DatabchoorFree

writing-rich-html-docs

Use when producing or modifying a human-review doc (spec.html, design.html, adr-*.html, retro.html, postmortem.html). Provides an opinionated single-file HTML template, theme tokens, component library, and pedagogical-strategy menu so the agent picks pedagogy and never spends thinking tokens on visual implementation. Required for any HTML output under docs/feat-*/.

Repo bundle on Versuzbchoor/p2e-plugin27 indexed entries (SKILL.md and CLAUDE.md) from this repository — open the full bundle view.

Open bundle →

View on GitHub ↗</>github.com/bchoor/p2e-plugin Yours? Claim it ↗

§ 01 — Stats

Prior1090

Quality—

Score—

Tasks—

§ 02 — Install

Get writing-rich-html-docs.

Free SKILL.md scraped from GitHub. Clone the repo or copy the file directly into your Claude Code skills directory.

One-line install · Claude Code

$npx versuz@latest install bchoor-p2e-plugin-skills-writing-rich-html-docs

Or clone the repo

$git clone https://github.com/bchoor/p2e-plugin.git

Or copy the SKILL.md manually

$cp p2e-plugin/SKILL.MD ~/.claude/skills/bchoor-p2e-plugin-skills-writing-rich-html-docs/SKILL.md

More Versuz picks

★ Featured$1.99

vz-bench-debug

Document

★ Featured$0.99

vz-scrape-runner

Web

Got something better ?Submit your skill — it enters tomorrow's cycle. No fee.

Submit yours →

§ 05 — Challenge

Think you can beat it?

$npx versuz challenge bchoor-p2e-plugin-skills-writing-rich-html-docs↵

Show SKILL.md content (~618 tokens)

---
name: writing-rich-html-docs
description: Use when producing or modifying a human-review doc (spec.html, design.html, adr-*.html, retro.html, postmortem.html). Provides an opinionated single-file HTML template, theme tokens, component library, and pedagogical-strategy menu so the agent picks pedagogy and never spends thinking tokens on visual implementation. Required for any HTML output under docs/feat-*/.
---

# writing-rich-html-docs

Read first:
- `workflows/p2e-rich-html-docs.md` — the full workflow contract (audience classification, HTML production, MD→HTML conversion, doc-reviewer compatibility, skill quality bar)
- `skills/writing-rich-html-docs/references/template.html` — the canonical single-file HTML skeleton (placeholders for title/status/date/owner/hash; section comments showing what each section should contain)
- `skills/writing-rich-html-docs/references/components.md` — copy-paste blocks for every named component (TL;DR card, decision card open + RESOLVED, callouts, premise list, comparison table, three-pieces grid, anatomy grid, steps list, code block, deferred bullets)
- `skills/writing-rich-html-docs/references/strategies.md` — pedagogical strategy menu mapping cognitive tasks to visual patterns; section-shape templates; cognitive-amortization rules of thumb

Hard rules:
- The agent's job is content + strategy choice. NEVER re-derive colors, fonts, spacing, or component CSS — these are in `template.html`'s `<style>` block. NEVER reach for Tailwind, Bootstrap, or any CSS framework.
- Doc must be a single self-contained `.html` file. Forbidden: `<script>` tags, `<details>` / `<summary>` for content discovery, `<a href="#...">` anchor nav, `position: sticky` / `position: fixed`, in-doc TOC. These break the doc-reviewer rail (memory: `feedback_html_doc_no_interactive`).
- Doc-reviewer's rail handles outline navigation — never duplicate it in-doc.
- Inline SVG for diagrams. NEVER Mermaid — Mermaid needs JS.
- Stable element IDs on each `<section>` and major `<h2>`/`<h3>` so doc-reviewer can anchor comments.
- Single linear scroll. Visual hierarchy via typography, color, layout grids, inline SVG.
- Default status is DRAFT (amber pill). Status updates flip the pill color via the existing CSS variants documented in `components.md`.