TypingMindTypingMindThe best frontend for AI
Html Report logo

Html Report

Community
belos-street
html-report

封装 HTML 自包含报告的生成能力：设计系统 CSS、组件库（指标卡/表格/Callout/情景卡/价位地图）、ECharts 图表样板、字体与脚本资源、一键脚手架。当用户要求生成 HTML 报告、持仓诊断报告、研究文档交付物时调用此技能。区别于 .agents/skills/ 下的股票分析内容技能——本技能只管'怎么把分析结果做成报告'，不产出分析内容本身。

Overview

Publisherbelos-street
Repositorystock-analytics-agent
Skill namehtml-report
Stars
57
Forks
9
Bundled files
9
LicenseMIT
Links
Skill sourceRepository
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 9 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by belos-street on GitHub. Read the source before you install it.

Installation

Install the Html Report AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/belos-street/stock-analytics-agent/tree/main/.agents/business/html-report
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/belos-street/stock-analytics-agent.git /tmp/stock-analytics-agent
mkdir -p .claude/skills
cp -r /tmp/stock-analytics-agent/.agents/business/html-report .claude/skills/html-report
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Html Report in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Html Report on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Html Report is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

HTML 报告生成 Skill（业务技能）

定位

.agents/business/ 存放业务/交付类技能——与 .agents/skills/ 的区别：

目录内容例子
.agents/skills/股票分析内容方法论stock-deep-analysis、fund-comparison
.agents/business/交付/生产能力封装html-report（本技能）

分析 skill 负责"说什么"，业务 skill 负责"怎么交付"。生成报告时两者配合：先调用分析 skill 得到内容，再用本技能渲染成交付物。

目录结构

html-report/
├── SKILL.md              ← 本文件
├── template/             ← 可直接复制的报告骨架
│   ├── index.html        ← 设计系统 CSS + 组件库 + 页面骨架
│   ├── assets/charts.js  ← 4 类常用图表的 ECharts 样板
│   └── _shared/
│       ├── fonts/        ← 5 个 ttf（PlexSerif/InsSans/PlexMono）
│       └── js/echarts.min.js
└── scripts/new-report.sh ← 一键脚手架

快速开始

bash
bash .agents/business/html-report/scripts/new-report.sh <report-slug> reports

生成 reports/<report-slug>/，其中 <slug>.html 即主文件。单文件夹整体发给接收者即可离线打开（全部相对路径、无外网依赖）。

设计系统（template/index.html 内已配好）

  • 配色令牌（唯一来源，图表 JS 从 CSS 变量读取，禁止硬编码色值）： --bg #faf8f5 / --bg2 #f1ece4 / --ink #1b2534 / --muted #64707f / --rule #ddd4c6 / --accent #1f4e79（蓝） / --accent2 #b4552d（赭红=警示/亏损）
  • 字体：标题 PlexSerif（衬线）+ 正文 InsSans + 数据 PlexMono（数字/代码一律用它）
  • 版式：980px 居中单栏、封面 + 章节流、印刷/移动端已适配

组件库（直接复制 HTML 块即可用）

组件类名用途
封面.coverkicker 小标签 + 标题 + 副标题 + 元信息行
指标卡组.diag-card > .metrics > .metric4 列关键数字，.num.bad/.good 红蓝语义
表格.table-wrap > table自动滚动容器，斑马纹，.num/.neg/.pos
Callout.callout（.blue）结论/警示框，默认赭红、blue 为信息
图表.chart-figure > figcaption + .chart-boxECharts 容器，必须带标题
情景卡.scenario > .sc.hold/.add/.trim三情景决策卡，头色区分
价位地图.price-map > .pm-row.cost/.press/.sup成本/压力/支撑分层
强调<mark class="key"> / <strong>重点句高亮（全文统一用一种）
来源引用sup a → footer .sources ol上标锚点跳转到页脚编号

图表规则（assets/charts.js 已内置 4 个样板）

  1. 模板自带 4 类图：分组柱状图、横向条形图、折线/面积图、K 线+参考线——复制 chart 块、改数据和容器 id 即可
  2. 颜色只从 CSS 变量读（脚本顶部已写好 getComputedStyle 取值）
  3. 每个图表必须有 <figcaption> 标题
  4. animation: false，每个实例注册 window.resize
  5. 引用方式固定： 
    html
    <script src="./_shared/js/echarts.min.js"></script>
<script src="assets/charts.js"></script>

工作流

  1. new-report.sh 生成骨架
  2. 填充内容（来自分析 skill 的结论/数据/表格）
  3. 需要的图表：从 template/assets/charts.js 复制对应样板，改数据
  4. 页脚 Sources 补引用（id="cite-N" 与正文 sup a 一一对应）+ 免责声明
  5. 本地起服务验证渲染（python3 -m http.server + 浏览器检查图表与控制台）
  6. 交付前必须调用 report-review 技能做多维度审查（数据核验/口径核验/图表一致性等七维度），审查通过并汇报后才算交付完成

约定

  • 所有 HTML 首行保留 <!-- Generated by Trae Work -->
  • 禁止绝对路径、外网 CDN、base64 内联大图——保证离线可打开
  • 报告语言跟随用户语言
  • 投资类报告免责声明必含：不构成投资建议、市场有风险、以官方披露为准

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Html Report AI skill do?

封装 HTML 自包含报告的生成能力：设计系统 CSS、组件库（指标卡/表格/Callout/情景卡/价位地图）、ECharts 图表样板、字体与脚本资源、一键脚手架。当用户要求生成 HTML 报告、持仓诊断报告、研究文档交付物时调用此技能。区别于 .agents/skills/ 下的股票分析内容技能——本技能只管'怎么把分析结果做成报告'，不产出分析内容本身。

Why use Html Report on TypingMind?

Because you install it once and use it with any model. Html Report is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Html Report in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/belos-street/stock-analytics-agent/tree/main/.agents/business/html-report. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Html Report?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Html Report?

As many as you like. As long as a model supports skills, you can use Html Report with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Html Report AI skill free?

Yes. It is published on GitHub by belos-street under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Related AI Skills

View all
NousResearch logo

Mono Color

NousResearch
OrganizationPopular

Generate one- or two-ink editorial print poster images.

53.5K
250.4K
9 files
View
NousResearch logo

Pretext

NousResearch
OrganizationPopular

Build creative browser demos with DOM-free text layout.

53.5K
250.4K
3 files
View
NousResearch logo

Sketch

NousResearch
OrganizationPopular

Throwaway HTML mockups: 2-3 design variants to compare.

53.5K
250.4K
Instructions
View
NousResearch logo

Tldraw Offline

NousResearch
OrganizationPopular

Drive and script tldraw offline canvases with an agent.

53.5K
250.4K
3 files
View

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇