claude-html-style-router

Swiss Archival Brutalist genre (cream + serif + mono, compact info density). Use when: 档案, 复盘, dossier, archive note, condition map, positioning, 紧凑信息密度, Swiss brutalist, takeaway grid. Trigger: 档案 / 复盘 / dossier / archive note / condition map / positioning / Swiss brutalist / takeaway grid. Inherits typography-system. Single-surface note; NOT a warm long-form doc.

Bloomberg Terminal genre — data-dense, quantitative. Use when: financial report, earnings, valuation, portfolio, P&L, cashflow, dashboard, KPI report, metrics, performance/market/risk data, investment/trading memo, allocation, returns, yield. Trigger: financial report / earnings / valuation / portfolio / P&L / dashboard / KPI / metrics / data analysis / market data / investment memo / trading / 财报 / 估值 / 看板 / 数据. Inherits typography-system. NOT for: prose reports (economist/document).

Engineering Blueprint genre (graph-paper + mono + gauges). Use when: 技术图解, 拆解, 原理, blueprint, schematic, spec sheet, 参数对比, 工程海报, MOD panels. Trigger: 技术图解 / 拆解 / 原理 / blueprint / schematic / spec sheet / 参数对比 / 工程海报. Inherits typography-system. Single-surface technical poster.

Claude Warm Academic Humanism genre — the safe warm default. Use when: guide, manual, handbook, tutorial, proposal, kickoff, whitepaper, thought-leadership, memo, announcement, changelog, or postmortem. Trigger: guide / manual / handbook / how-to / tutorial / documentation / reference / spec / onboarding / proposal / kickoff / whitepaper / vision / manifesto / memo / newsletter / changelog / release notes / postmortem / 指南 / 手册 / 文档 / 提案 / 白皮书 / 说明. Inherits typography-system. NOT for: data dashboards (bloomberg), strategy decks (mckinsey), research briefs (economist).

The Economist Editorial genre — measured analytical register. Use when: research report, analysis, findings, study, survey, market/competitive landscape, benchmark, due diligence, briefing, executive summary, intelligence brief, policy/regulatory/compliance/risk analysis. Trigger: research / report / analysis / findings / study / market analysis / competitive / benchmark / briefing / executive summary / digest / policy / regulatory / audit / 研究 / 分析 / 简报 / 对标 / 竞品. Inherits typography-system. NOT for: warm guides (document), board decks (mckinsey).

Hermes retro-TUI / mythological genre — character-driven dev storytelling. Use when: AI agent biography/profile, CLI tool story, fork-vs-upstream history, dev-blog mythology, character-driven postmortem. Trigger: agent introduction / agent profile / CLI tool story / fork vs upstream / dev-blog history / project mythology / 智能体传记 / CLI故事 / retro terminal. Inherits typography-system. NOT for: business reports or dashboards.

Bilingual Knowledge Poster genre (single-surface visual card, themeable yellow/blue). Use when: 知识卡片, 海报, 公众号配图, 推文封面, knowledge poster, social card, 一图读懂, bilingual poster. Trigger: 知识卡片 / 海报 / 公众号配图 / 推文封面 / knowledge poster / social card / 一图读懂 / 双语海报. Inherits typography-system. Single-surface; NOT a multi-section report.

McKinsey Blue genre — consulting/strategy authority. Use when: strategy, roadmap, transformation, operating model, capability map, recommendation, board report, CEO briefing, board deck, decision memo, strategic options, investment case, go/no-go. Trigger: strategy / roadmap / transformation / operating model / recommendation / board report / consulting / CEO briefing / board deck / decision memo / go-no-go / 战略 / 咨询 / 路线图 / 董事会. Inherits typography-system. NOT for: raw data dashboards (bloomberg).

Neon-Pixel Dark Cover genre (black + neon magenta/green, Geist Pixel display). Use when: 封面, dark cover, edition, 榜单, Top-N list, a16z-style, neon, tech-editorial dark, pixel typography. Trigger: 封面 / dark cover / edition / 榜单 / Top-N / neon / Geist Pixel / pixel display / 像素字体 / 像素封面. Inherits typography-system. Single-surface cover; NOT body copy or reports.

Academic Figure genre (white + muted categorical + captions). Use when: 论文配图, 实证结果, figure, benchmark plot, ablation, multi-panel chart, 学术图表, NeurIPS/arXiv figure. Trigger: 论文配图 / 实证结果 / figure / benchmark plot / ablation / multi-panel chart / 学术图表 / academic figure. Inherits typography-system. Single-surface scientific figure.

Route any standalone HTML deliverable to the correct design system BEFORE writing markup. Reads document intent and picks one of 10 genre skills (warm-academic / Economist / McKinsey / Bloomberg / Hermes-TUI + 5 visual-poster genres), all composing on the shared typography foundation. Use when: producing ANY report, document, dashboard, poster, cover, card, figure, or briefing as HTML. Trigger: html report / 生成HTML / 网页报告 / 做个报告 / dashboard / 海报 / 封面 / 知识卡片 / whitepaper / strategy deck / 研究简报 / style this / 风格路由 / which design system. NOT for: React component logic, inline HTML snippets, or PPT decks (that is a slides router).

The shared low-level TYPESETTING foundation every output surface inherits — type scale, vertical rhythm, measure (line length), grid, font stacks, CJK/中文 correctness, PLUS the v2 升维 adaptive layer: variable fonts, fluid responsive type/space, dark/light adaptive color, perceptual accessibility (APCA/WCAG2.2), and motion typography. Use BEFORE producing ANY typeset artifact: HTML reports, PPT/slide decks, documents (md→HTML/PDF), web pages, app screens. Trigger: 排版 / typeset / typography / 字体 / 行距 / 字号 / 网格 / grid / line-height / measure / modular scale / 中文排版 / CJK / 可变字体 / variable font / 响应式 / fluid / responsive / 暗色 / dark mode / 无障碍 / a11y / accessibility / 动效 / motion. Composes UNDER html-style-router (this is the base; genre/brand only overrides color+accent+brand-font). NOT for: choosing a brand/genre visual identity (that is html-style-router), inline HTML snippets, or React component logic.