ray-report

# Editorial Report Builder Generate a long-form editorial article in three coordinated formats. The three formats share the same underlying content — they just present it differently. | Format | Use case | How | |--------|----------|-----| | **HTML (interactive)** | Web reading, sharing, archiving | Single self-contained file with Tab / Quiz / Chart.js / Timeline / Accordion components | | **PDF (report)** | Print, distribution, formal/PDF reading | Headless Chrome render of HTML with `@media print` expanding interactive components | | **WeChat markdown** | 公众号 paste, long-form newsletter | Flowing long-sentence narrative, no tables/lists, data embedded inline | Build the **content as HTML first**, then derive PDF and 公众号 Markdown from it. ## Why this skill exists Generic AI-generated HTML defaults to SaaS dashboard aesthetics — dark hero with gradients, saturated neon accents, rounded card shadows, big CTA buttons. That look is wrong for long-form analysis. This skill enforces **editorial design language** — the look of a New Yorker article or NYT long-read. The opposite of slop. The reference aesthetic is a magazine-style long-read layout — think `article-magazine`, `data-report`, or `parchment-document` template families rather than any SaaS UI kit. ## Workflow ### 1. Understand the content Before writing anything, get clear on: - **Topic & angle** — what's the thesis? Is this analysis, opinion, deep dive, or report? - **Structure** — how many sections? What's the narrative arc? - **Evidence** — what data, cases, quotes, charts are needed? - **Audience** — general reader, sophisticated reader, or domain expert? - **Length target** — long-read (3000-5000 字) or short essay (1500-2500 字)? If the user gave only a topic, ask for an outline or do research first (WebSearch is OK). Don't start writing without understanding what's being said. ### 2. Choose components based on content The interactive HTML has a fixed component library. Pick what fits the content — don't force components that don't earn their place. See `references/components.md` for full snippets. Decision guide: - **Stat card row** (3 cards) — when you have 3 comparable numbers that anchor the article's thesis (e.g., "100 年 / 12 年 / 12 个月"). Put near the top. - **Timeline** — historical sequence of events, each with date + title + body + lesson. Best for 3-6 items. - **Pull quote** — one pivotal quote per article, max two. Italic serif, no colored box. - **Tab section** — 4-8 parallel cases (companies, scenarios, options). Each gets its own panel. - **Quiz** — interactive self-test with 4 outcomes. Use once per article max. - **Accordion** — list of warnings, principles, or expandable details. 3-6 items. - **Chart.js bar/line** — quantitative data that benefits from visual comparison. Don't overdo — 1-2 charts is plenty. - **Layer grid** (3-5 cards) — concepts/principles in parallel structure. - **Danger / Safe box** — short callouts for "do this / don't do this" within a section. - **Ornament divider** (`· · ·`) — between every major section. Not optional. ### 3. Build the HTML Start from `assets/skeleton.html` — it has all the CSS, fonts, scripts loaded. Copy it to the target output path, then fill in content. ``` 1. Update masthead: kicker, h1, sub, byline 2. Drop in opening paragraph with class="lead" (gets drop cap) 3. Add pullquote near opening if there's a key quote 4. Each section: <div class="ornament"><span>· · ·</span></div> + section + content 5. Each h2 needs: <span class="h2-num">01 · 标签</span>section title 6. Use snippets from references/components.md for components 7. End with closing section + epilogue + article footer ``` Save to the user-selected output directory. If none was specified, use the current workspace and report the absolute path; do not assume the home directory is writable. ### 4. Apply design system rigorously The design language is **not negotiable** — the whole skill exists to enforce it. See `references/design-system.md` for tokens. Key rules: - **Headings** in `'Noto Serif SC', Georgia, serif` — this is the #1 magazine signal - **Body** in `'Inter', 'Noto Sans SC', sans-serif` - **Small caps/numbers** in `'JetBrains Mono', monospace` - **Colors**: paper `#fafaf7`, ink `#1a1a1a`, accent `#b8553a` (rust), cream `#f4ede0` - **Containers**: narrow 720px (text), wide 1080px (charts/tabs/grids) - **Numbers**: enable `font-feature-settings: 'tnum'` everywhere Anti-slop checklist (read `references/design-system.md` for full list): | Never | Always | |-------|--------| | Dark hero with gradient | Cream `#fafaf7` masthead | | Saturated neon (`#c8501a`) | Muted rust (`#b8553a`) | | Rounded cards + drop shadows | Flat cards, 1px borders | | Big colored CTA buttons | None — this is a report | | Generic emoji icons | None | | Sans-serif everywhere | Serif headings, sans body | | Pure white background | Cream `#fafaf7` + grain overlay | | Block-color pull quotes | Italic serif, no fill | ### 5. Ask about PDF + 公众号 markdown After saving HTML, ask: > "HTML 版生成好了，保存到 `<absolute-path>.html`。要不要也生成 PDF 报告版和公众号长句版？" If PDF: use the Skill loader's reported base directory and run `<skill-base>/scripts/render-pdf.sh <html-path>` — this produces `<html-path>.pdf` next to it. Never hardcode a Claude, Codex, WorkBuddy, or other host-specific Skill directory. If 公众号: follow `references/wechat-conversion.md` rules to rewrite as flowing narrative. Save beside the HTML unless the user selected another output directory; do not assume the home directory is writable. ## Format-specific notes ### HTML mode (default) - Self-contained single file (all CSS inline, scripts from CDN) - Uses Chart.js, AOS, Google Fonts (Noto Serif SC, Inter, Noto Sans SC, JetBrains Mono) - Tab buttons + Quiz options work via vanilla JS at the end of file - The skeleton already has the JS — just add markup ### PDF mode The skeleton already includes `@media print` CSS that: - Makes masthead a full-page cover - Hides tab buttons, shows all tab panels with case labels (案例 1, 案例 2 ...) - Hides quiz options, shows all results as "对照下面四种情境" scenarios - Forces all accordion `<details>` open - Sets `page-break-inside: avoid` on cards/charts/tables/timeline items - Sets `print-color-adjust: exact` to preserve colors - Disables AOS (`[data-aos] { opacity: 1 }`) Generate: ```bash bash <skill-base>/scripts/render-pdf.sh input.html [output.pdf] ``` The script uses headless Chrome with `--virtual-time-budget=12000` to ensure Chart.js renders before printing. ### WeChat markdown mode Output is a `.md` file the user pastes into the WeChat editor. The conversion is **not** mechanical — it's a rewrite. See `references/wechat-conversion.md`. Key rules: - No bullet lists, no tables — fold everything into flowing sentences - Long paragraphs (4-7 sentences each) - Keep `**bold**` for in-line emphasis - Drop charts (or describe their content inline) - Drop interactive components (no quiz, tabs become paragraph-by-paragraph case discussions) - Replace `· · ·` ornament with a blank line + `---` - First-person voice OK ("我自己的判断是...") ## Examples of when to trigger **Trigger**: - "帮我写一篇关于 X 的深度分析" - "这个内容做成 HTML 报告" - "写一篇长文章 + 数据图表" - "做成 PDF 报告" - "magazine 风格的 HTML" - "做个白皮书 / 行业分析" - "I want a long-form article about X with charts" - The user shares an outline and wants polished output **Don't trigger**: - "帮我写公众号文章" → use `wewrite` - "做个 SaaS 落地页" → use `frontend-design` - "写一段 tweet thread" → no skill needed - "改一下这个按钮样式" → no skill needed - "做个 dashboard" → use `frontend-design` - Anything under ~800 字 → too short for this format ## Reference files - `references/design-system.md` — Colors, fonts, spacing, anti-slop rules in detail - `references/components.md` — Copy-pasteable HTML snippets for each component - `references/print-css.md` — `@media print` rules + how interactive→static transformation works - `references/wechat-conversion.md` — Rules + before/after examples for 公众号 conversion ## Assets - `assets/skeleton.html` — Complete starter HTML with all CSS, fonts, scripts. **Start here** — copy this file and fill in content. ## Scripts - `scripts/render-pdf.sh` — Generate PDF from HTML via headless Chrome ## Reference implementation A complete example is three coordinated files for the same article — e.g. a data-heavy long-read on a topic like "the AI layoff wave": - `<output-dir>/<topic-slug>.html` — HTML interactive version - `<output-dir>/<topic-slug>.pdf` — PDF report version - `<output-dir>/<topic-slug>-公众号版.md` — WeChat markdown version If you have such a set on hand, read all three side-by-side for "how the final output looks" — study the structure and feel, don't copy the content.