# Report Blocks

> Composable HTML block patterns for agentsociety-analysis reports — KPI strips, figure cards, Mermaid, EDA tabs, optional interactive chart iframes. Use during Stage 5 produce when authoring report_zh.html / report_en.html.

- Skill: `tsinghua-fib-lab/report-blocks` (Agent Skill)
- Install (CLI): `npx skillmds@latest add tsinghua-fib-lab/report-blocks`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tsinghua-fib-lab/report-blocks/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tsinghua-fib-lab (https://skillmd.com/u/tsinghua-fib-lab)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/tsinghua-fib-lab/report-blocks

---


# Report Blocks (bundled support)

Read `references/reports.md` at the agentsociety-analysis skill root first.

## Files

| File                                       | Purpose                  |
| ------------------------------------------ | ------------------------ |
| `../../references/reports.md`              | Blocks, embeds, workflow |
| `../../assets/report-shell.reference.html` | Working HTML/CSS/JS      |

## External inspiration absorbed

- **folio / datainpane** — block composition, KPI strips, offline HTML
- **report-creator** — Mermaid diagrams-as-code, metric groups
- **Evidence.dev** — value-box hierarchy (KPI → prose → charts)
- **Cursor canvas** — mandatory plot labeling (title, axes, source)

## Guardrails

Evidence-first, scientific tone, navy/slate shell. See `support/frontend-design/references/analysis-reports.md` for typography only.