Agent Skills: 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/design-system.md, and references/diagrams.md. Copy 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 — page structure. Read before filling the template.
• references/design-system.md — visual rules and block styles. Read before styling.
• references/diagrams.md — SVG/CSS diagram patterns and a11y. Read before adding diagrams.
• 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).