html-output — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited html-output (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Produce a single self-contained .html file as the deliverable when complex information would be clearer in a browser than in markdown. Designed to be invoked directly by a human (/html-output) or as a styling/format layer by another skill that needs to ship an HTML artifact.
Use HTML when ANY of the following is true:
Otherwise, stay in markdown.
Pick exactly one starting template from assets/templates/:
| Archetype | Template | When |
|---|---|---|
| Dashboard | dashboard.html | KPIs + multi-panel status (3+ metric tiles) |
| Report | report.html | Long-form analysis with sections, pull quotes, charts |
| Comparison | comparison-table.html | Side-by-side options, scoring matrices, vendor evaluation |
| Mermaid diagram | diagram-mermaid.html | Flowcharts, sequence diagrams, state machines, mind maps |
| SVG diagram | diagram-svg.html | Custom diagrams Mermaid cannot express, hand-crafted layouts |
| Timeline | timeline.html | Chronological events, roadmaps, project history |
| Data explainer | data-explainer.html | One chart + narrative — Chart.js-driven story |
| Consulting deck | slide-deck.html | McKinsey/BCG-style 16:9 slides with action titles, exhibit chrome, 2×2 / waterfall / MECE layouts |
If the request blends two archetypes (e.g. dashboard + diagram), pick the dominant one and embed the secondary as a section.
For consulting decks specifically: also read references/consulting-patterns.md — action titles, MECE structure, chart archetypes (2×2, waterfall, Marimekko), exhibit-numbering rules.
references/brand-tokens.md and inline its <style> block in the <head>. Brand consistency is non-negotiable — never substitute generic colors.references/libraries.md:Prose register (analytical archetypes — report, slide-deck, data-explainer, comparison). When the artifact carries analytical prose for a senior reader, write that prose to the report register in .claude/skills/analysis-quality-review/references/tone-of-voice.md. Read it before drafting body copy. The five rules in brief: one claim per sentence (don't stack the finding, its mechanisms, and its evidence into one sentence); evidence in footnotes, not mid-sentence; active voice; Anglo-Saxon backbone with Latinate/jargon only where nuance refines the point; structure so a skim of action-titles-plus-first-sentences conveys the whole argument. This is the analytical register only — it does NOT apply to dashboard labels, chart captions, or any brand/marketing copy (those keep their own voice).
.html file, complete and standalone. No external CSS, no <link> to local files.<head> includes: charset, viewport, title, brand <style> block, optional CDN <script> tags, optional <script type="application/json"> data block.<body> follows the chosen template's structure. Adapt copy and data; do not rewrite the layout from scratch.@media print rules (already in brand-tokens.md snippet).Per Anthropic's HTML guidance, every HTML artifact ends with an export affordance. Use the snippet in assets/snippets/export-footer.html. Minimum buttons:
If the artifact has no extractable data (pure diagram), the print button alone is enough.
00-inbox/html/YYYY-MM-DD-{slug}.html.A skill can invoke html-output for its final deliverable by:
The calling skill owns the content; html-output owns the form.
@import placed after other CSS rules, blocking the font swap. Fix: Put the @import url(...) line as the very first rule inside <style>, before :root.mermaid.initialize() not called, or the diagram block uses <pre><code class="language-mermaid"> instead of <pre class="mermaid">. Fix: Use <pre class="mermaid"> and include mermaid.initialize({ startOnLoad: true, theme: 'base', themeVariables: { primaryColor: '#1E3A2F', ... } }); from assets/snippets/mermaid-cdn.html.timeline block renders the "Syntax error in text" bomb icon. Cause: The timeline parser is fragile — em-dashes (—), parenthetical text containing commas ((BestReviews, RTINGS)), double-quotes inside event text, and & HTML entities all trip it. Fix: Use plain ASCII in timeline event text. Replace em-dashes with periods or "to", spell out enumerations ("such as BestReviews and RTINGS"), drop quotes around branded terms, and write and instead of &. Other Mermaid diagram types (flowchart, sequence, etc.) tolerate these characters — the rule applies specifically to timeline.timeline title renders nearly invisible (off-white-on-off-white) under the brand theme. Cause: When primaryTextColor is set to the off-white brand bg for text-inside-primary-boxes, Mermaid uses the same variable for the timeline title, which sits on the off-white page background. Fix: Add titleColor: '#1E3A2F' and textColor: '#1E3A2F' to themeVariables alongside primaryTextColor, AND add a CSS override targeting the SVG: pre.mermaid svg .titleText, pre.mermaid svg text.titleText { fill: var(--brand-primary) !important; font-weight: 700 !important; }. Both are needed — the theme variable handles most renders, the CSS catches version-specific class names.onclick handler references a function defined later in the file with defer. Fix: Define export helpers at the top of the <script> block, or wrap in DOMContentLoaded.https:// URL and accept the network dependency.#E8A838 used as body-text color and fails WCAG. Cause: Amber is for CTAs/highlights only — it has ~3:1 contrast on off-white, fine for large UI elements but not for paragraphs. Fix: Use Forest Green or Slate for any text under 18px.<link rel="stylesheet"> to a local file; use a <style> block.references/brand-tokens.md in headings or body copy when content is human-facing..claude/skills/analysis-quality-review/references/tone-of-voice.md — one claim per sentence, evidence footnoted, active voice, Anglo-Saxon-with-nuanced-Latinate. Does not apply to brand/marketing copy.<!-- Built with Agent Engineer Master — get your own production-ready skill: www.agentengineermaster.com/skill-engineer -->
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.