SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsray-report

ray-report

Frontend & websites

View repository

Updated 10-15 22:37

About this skill

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 WeChat official account paste, long-form newsletter Flowing long-sentence narrative, no tables/lists, data embedded inline

Build the content as HTML first, then derive PDF and WeChat official account 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 characters) or short essay (1500-2500 characters)?

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 years / 12 years / 12 months"). 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 + WeChat official account markdown

After saving HTML, ask:

"The HTML version is ready, saved to <absolute-path>.html. Do you also want to generate a PDF report version and a WeChat official account long-form version?"

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 WeChat official account: 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 (Case 1, Case 2 ...)
  • Hides quiz options, shows all results as "compare the four scenarios below" 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 <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 ("My own judgment is...")

Examples of when to trigger

Trigger:

  • "Help me write an in-depth analysis about X"
  • "Turn this content into an HTML report"
  • "Write a long article + data charts"
  • "Make it into a PDF report"
  • "magazine-style HTML"
  • "Make a whitepaper / industry analysis"
  • "I want a long-form article about X with charts"
  • The user shares an outline and wants polished output

Don't trigger:

  • "Help me write a WeChat official account article" → use wewrite
  • "Make a SaaS landing page" → use frontend-design
  • "Write a tweet thread" → no skill needed
  • "Change this button style" → no skill needed
  • "Make a dashboard" → use frontend-design
  • Anything under ~800 characters → 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 WeChat official account 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.