원클릭으로 Manus에서 모든 스킬 실행

html-knowledge-poster-style

스타1

포크1

업데이트2026년 7월 9일 06:33

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.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

MARUCIE

MARUCIE/claude-html-style-router

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

name: html-knowledge-poster-style description: "Use when generating a vertical SOCIAL / WeChat KNOWLEDGE POSTER (公众号知识卡片/海报): one bilingual headline with a highlighted keyword, a hero stat or code card, numbered takeaways, brand footer. Trigger: 知识卡片 / 海报 / 公众号配图 / 推文封面 / knowledge poster / social card. Themeable (yellow/blue/…). NOT for multi-page reports (use economist/mckinsey) or guides (document). Routed by html-style-router." combo-tags: [html-rendering, wechat-content]

HTML Genre — Knowledge Poster (双语知识海报)

Typography base (inherited): composes ON TOP of the shared typography-system foundation — inline tokens/typography.css FIRST, then layer this skill for color + accent + brand font-family ONLY. Never re-declare scale/rhythm/measure/frame/CJK. Reference template: examples/genre/knowledge-poster.html (built by scripts/build-genre-templates.py, all 3 gates green).

Pixel-sampled from two reference posters (yellow "Open Knowledge Format" + blue "8× engineers"). One vertical poster system, color-themeable via data-theme. Source DNA: the source reference set (pixel-sampled from real designs).

When to use

A single shareable card (WeChat 公众号配图, 推文封面, 知识卡片) that delivers ONE idea: a punchy bilingual headline + ONE hero (a giant stat OR a code/frontmatter card) + 3 numbered takeaways. Portrait, sent alone over IM — so self-contained.

Layout frame + tokens (inject FIRST)

:root{ --kp-page-max:600px; --kp-page-gutter-total:clamp(28px,7vw,72px);
  --kp-paper:#F3EBD5; --kp-ink:#151410; }                 /* warm cream + near-black */
[data-theme="yellow"]{ --kp-accent:#FBD521; --kp-mark:#FE6127; --kp-panel:#151410; }
[data-theme="blue"]  { --kp-accent:#0330A7; --kp-mark:#FB8858; --kp-panel:#0330A7; }
.kp-poster{ box-sizing:border-box; background:var(--kp-paper); color:var(--kp-ink);
  width:min(var(--kp-page-max),calc(100% - var(--kp-page-gutter-total)));
  margin:48px auto; padding:clamp(32px,6vw,48px); }       /* 8pt-ramp spacing only */

Structure: .kp-top (mono kicker + brand tag) → .kp-rule (accent bar) → .kp-headline (sans, .mark = highlighter swatch on the keyword, .en = serif sub) → hero (.kp-stat giant tabular number OR .kp-code 2-col card OR .kp-panel core-question) → .kp-lede (accent left-border) → .kp-list (grid-placed 01/02/03 + bold title + muted sub) → .kp-foot (mono).

Gotchas

Theme via data-theme on the article, never fork the CSS. Yellow and blue are the SAME template; a new color = one more [data-theme] block (accent + mark + panel). The cream ground is shared (the theme is the ACCENT, not the whole ground — the source posters both sit on cream).
Footer color must pass AA on the cream ground. The standard #9B9B9D footer ink is for WHITE grounds — it renders ~2.1:1 on #F3EBD5/#E7DFC9 and the render gate (render-contrast-below-aa) ERRORs. Use a darker tone (#5A574C, ~5.5:1). The AA LAW outranks the cosmetic footer default.
Spacing snaps to the 8pt ramp [4,8,12,16,24,32,48,64,96,128]. 30/40/52/14px ERROR/WARN; em-based inner padding is fine. Use a real border for the code-card divider, never gap:1px.
The highlighter .mark is large-text only. White on --kp-mark coral (~3.4:1) passes the 3:1 LARGE-text floor but FAILS the 4.5:1 body floor — keep .mark inside the headline, never on body copy.
Hero is exactly ONE of stat / code-card / core-question. Stacking two competes for the eye; the poster delivers ONE idea.

Verify

python3 scripts/build-genre-templates.py
python3 skills/typography-system/scripts/validate_typography.py --render examples/genre/knowledge-poster.html
python3 scripts/html-inline-assets.py check examples/genre/knowledge-poster.html
python3 scripts/audit-genre-typography.py   # genre-boundary

Your Name | your@email.com

이 저장소의 다른 Skills

같은 저장소

html-archive-brutalist-style

MARUCIE/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.

2026-07-091

html-bloomberg-style

MARUCIE/claude-html-style-router

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).

2026-07-091

html-blueprint-style

MARUCIE/claude-html-style-router

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.

2026-07-091

html-document-style

MARUCIE/claude-html-style-router

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).

2026-07-091

html-economist-style

MARUCIE/claude-html-style-router

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).

2026-07-091

html-hermes-style

MARUCIE/claude-html-style-router

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.

2026-07-091

name

html-knowledge-poster-style

description

name: html-knowledge-poster-style description: "Use when generating a vertical SOCIAL / WeChat KNOWLEDGE POSTER (公众号知识卡片/海报): one bilingual headline with a highlighted keyword, a hero stat or code card, numbered takeaways, brand footer. Trigger: 知识卡片 / 海报 / 公众号配图 / 推文封面 / knowledge poster / social card. Themeable (yellow/blue/…). NOT for multi-page reports (use economist/mckinsey) or guides (document). Routed by html-style-router." combo-tags: [html-rendering, wechat-content]

HTML Genre — Knowledge Poster (双语知识海报)

Typography base (inherited): composes ON TOP of the shared typography-system foundation — inline tokens/typography.css FIRST, then layer this skill for color + accent + brand font-family ONLY. Never re-declare scale/rhythm/measure/frame/CJK. Reference template: examples/genre/knowledge-poster.html (built by scripts/build-genre-templates.py, all 3 gates green).

When to use

Layout frame + tokens (inject FIRST)

:root{ --kp-page-max:600px; --kp-page-gutter-total:clamp(28px,7vw,72px);
  --kp-paper:#F3EBD5; --kp-ink:#151410; }                 /* warm cream + near-black */
[data-theme="yellow"]{ --kp-accent:#FBD521; --kp-mark:#FE6127; --kp-panel:#151410; }
[data-theme="blue"]  { --kp-accent:#0330A7; --kp-mark:#FB8858; --kp-panel:#0330A7; }
.kp-poster{ box-sizing:border-box; background:var(--kp-paper); color:var(--kp-ink);
  width:min(var(--kp-page-max),calc(100% - var(--kp-page-gutter-total)));
  margin:48px auto; padding:clamp(32px,6vw,48px); }       /* 8pt-ramp spacing only */

Gotchas

Theme via data-theme on the article, never fork the CSS. Yellow and blue are the SAME template; a new color = one more [data-theme] block (accent + mark + panel). The cream ground is shared (the theme is the ACCENT, not the whole ground — the source posters both sit on cream).
Footer color must pass AA on the cream ground. The standard #9B9B9D footer ink is for WHITE grounds — it renders ~2.1:1 on #F3EBD5/#E7DFC9 and the render gate (render-contrast-below-aa) ERRORs. Use a darker tone (#5A574C, ~5.5:1). The AA LAW outranks the cosmetic footer default.
Spacing snaps to the 8pt ramp [4,8,12,16,24,32,48,64,96,128]. 30/40/52/14px ERROR/WARN; em-based inner padding is fine. Use a real border for the code-card divider, never gap:1px.
The highlighter .mark is large-text only. White on --kp-mark coral (~3.4:1) passes the 3:1 LARGE-text floor but FAILS the 4.5:1 body floor — keep .mark inside the headline, never on body copy.
Hero is exactly ONE of stat / code-card / core-question. Stacking two competes for the eye; the poster delivers ONE idea.

Verify

python3 scripts/build-genre-templates.py
python3 skills/typography-system/scripts/validate_typography.py --render examples/genre/knowledge-poster.html
python3 scripts/html-inline-assets.py check examples/genre/knowledge-poster.html
python3 scripts/audit-genre-typography.py   # genre-boundary

Your Name | your@email.com