# Policy HTML Explainer

> Turns policy documents into self-contained, accessible HTML explainers with clear structure and intact mandatory language. Use this skill when the user wants a policy as a shareable HTML page or printable explainer. Do not use when/for story-led markdown rewrites without HTML (use policy-story-explainer) or general marketing landing pages.

- Skill: `jagreehal/policy-html-explainer` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add jagreehal/policy-html-explainer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jagreehal/policy-html-explainer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: jagreehal (https://skillmd.com/u/jagreehal)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/jagreehal/policy-html-explainer

---


# Policy HTML Explainer

## Critical rules

- Accuracy outranks aesthetics. Never soften `must`/`shall`, invent thresholds, or widen exceptions in text or diagram labels.
- Inherit every accuracy rule from `policy-story-explainer` before styling.
- One self-contained `.html` file: no network CSS/JS/fonts/images; opens offline; prints cleanly.
- Show seams: verbatim policy, explanation, scenario, and "why" are visually distinct.
- Diagrams restate rules already in text; never the only place a rule appears.
- Before building, read [references/output-format.md](references/output-format.md), [references/design-system.md](references/design-system.md), and [references/diagrams.md](references/diagrams.md). Copy [assets/policy-template.html](assets/policy-template.html); do not hand-roll CSS.

## Workflow

1. Read the three reference files and start from the HTML template (mandatory).
2. Do content work exactly as `policy-story-explainer`: themes with five blocks (situation, meaning, verbatim policy, what to do, why).
3. Add a diagram only when it earns one (branches → decision tree; tiers → ladder; allow/deny → do/don't; deadlines → timeline).
4. Fill template: header, executive summary (long policies), TOC, themes, exceptions, review flags, understanding checklist.
5. Save as `<policy-slug>-explained.html` and give an open command (e.g. `open …`).
6. Run Validation.

## Resources

- [references/output-format.md](references/output-format.md) — page structure. Read before filling the template.
- [references/design-system.md](references/design-system.md) — visual rules and block styles. Read before styling.
- [references/diagrams.md](references/diagrams.md) — SVG/CSS diagram patterns and a11y. Read before adding diagrams.
- [assets/policy-template.html](assets/policy-template.html) — starting HTML/CSS. Copy as the base file.

## Validation

- [ ] Single offline file; no external asset requests
- [ ] Verbatim blocks distinct; mandatory language intact in text and diagrams
- [ ] No invented numbers/branches; exceptions not widened
- [ ] Every diagram rule also appears in text
- [ ] Keyboard nav, heading order, contrast, print preview OK
- [ ] Closing checklist confirms understanding of specific rules, not attendance

## Constraints

- Ask if audience, branding, or "friendlier" wording could change meaning.
- Content sibling: `policy-story-explainer` (use its examples for fidelity traps).