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
Aug 14, 2026
Version
V4
Usage
10 Installs · 4 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. The file is bare CSS with NO <style> tags of its own — write exactly one <style>...</style> pair around it (zero wraps leave raw CSS as visible page text; a double wrap makes the browser drop the :root variable block and every color/card style silently disappears).
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.