html-report-style
Apply the Driven report design system to any HTML output. TRIGGER when: generating any HTML report, analysis page, or dashboard. DO NOT USE when: building interactive web apps or non-report HTML.
Creator
zway🐒
Created time
Jul 13, 2026
Last update
Jul 21, 2026
Version
V3
Usage
3 Installs · 2 Runs
How it works
HTML Report Design System
Default behavior: Any time you generate an HTML report or page, embed this design system automatically — no explicit request needed.
Design Identity
Warm off-white paper background (#FBFAF7), green accent (#0E9C6E), clean sans-serif typography. Professional financial report aesthetic — not a dashboard, not a landing page.
Step 1 — Embed the CSS
Read references/design-system.css (path relative to this skill's folder) and paste it verbatim inside <style> tags in the Page Shell below.
Icons are fully offline — no CDN, no external requests. Read references/lucide-inline.min.js (bundled Lucide icon subset, ISC license, ~19KB) and paste its content verbatim in a <script> tag before </body>, then call lucide.createIcons() — see the exact placement in Step 2's Page Shell.
Authoring is unchanged: <i data-lucide="icon-name">. Unknown icon names fall back to a circle glyph.
Step 2 — Page Shell
lang is zh or en depending on report language.
