html-report-style

Name: html-report-style
Author: zway

公司分析

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.

由zway

版本V4

安装次数13

运行次数23

zway

版本V4

安装次数13运行次数23

工作原理

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.

html

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"><title>REPORT TITLE</title><style>/* paste full CSS here */</style></head><body>  [[ HERO — Hero Header markup from Step 3 ]]  [[ BODY SECTIONS

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"><title>REPORT TITLE</title><style>/* paste full CSS here */</style></head><body>  [[ HERO — Hero Header markup from Step 3 ]]  [[ BODY SECTIONS

该作者的其他技能

us-earnings-insight

公司分析估值

Buy-side deep-read of a US company earnings report producing a brand-styled single-page HTML report with consensus scorecard, growth/margin/cash quality checks, transcript signals, and overlooked-detail insights. TRIGGER when: analyze a US earnings report or quarter results, post-earnings deep dive, earnings quality review, or a Chinese-language US earnings analysis request for a specific ticker. DO NOT USE when: earnings calendar lookup, pure fair-value work, non-US issuers, or general stock analysis without a reported quarter.

zway

40200

xueqiu-sentiment-report

公司分析

Analyze and visualize retail sentiment of a stock on Xueqiu. TRIGGER when: user asks to summarize Xueqiu sentiment, retail views, or public opinion on a specific ticker.

zway

2058

first-principles-analysis

公司分析估值

Musk-style first-principles company analysis: kill analogies, rebuild from physical cost primitives, Idiot Index, reverse DCF. TRIGGER when: first-principles or Musk-style analysis of a company. DO NOT USE when: quick quotes or standard valuation.

zway

1810

i-feel-lucky

公司分析估值

One press, one pick. The "luck" is fully engineered: a three-pass sweep (screener + earnings catalysts + big movers) builds the pool, 4-dimension scoring crowns a single winner, and a fresh-data deep dive delivers an 8-section report with buy/abandon triggers. US by default; HK/CN on request. TRIGGER when: user asks for a daily/fresh stock idea without naming a ticker.

zway

1635

工作原理

HTML Report Design System

Design Identity

Step 1 — Embed the CSS

Step 2 — Page Shell

该作者的其他技能

us-earnings-insight

xueqiu-sentiment-report

first-principles-analysis

i-feel-lucky

更多Company analysis技能

us-earnings-insight

income-sankey