article-sketchnote-editorial

Generates single-file HTML editorial sketchnote pages narrating a concept's history through six layout sections.

8.6k|844|Updated May 11, 2026
One-click install
npx skills add https://github.com/nexu-io/html-anything --skill article-sketchnote-editorial
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: article-sketchnote-editorial
Source: https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/article-sketchnote-editorial
Command: npx skills add https://github.com/nexu-io/html-anything --skill article-sketchnote-editorial

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Turning an abstract concept into an engaging visual story is hard: most AI-generated explainers read like flat textbook definitions. This Skill produces a magazine-style editorial sketchnote as a single HTML file, walking readers through a narrative arc of real problem, failed attempts, turning point, insight, and final naming.

Core Features & Use Cases

  • Six locked layout molds: feature opener, sticky-note failure, archive stamp failure, 200px cross turning point, hero insight, and centered closing name reveal, with enforced rhythm of alternating open and tight spacing.
  • Four-typeface contrast system: mandates Serif, Sans, Mono, and Handwriting fonts (Noto Serif SC, Noto Sans SC, JetBrains Mono, Caveat) plus a constrained four-color palette with no pure black.
  • Narrative discipline rules: six axioms requiring a concrete opening problem, at least one failure, insight before naming, restrained non-meta prose, and native Chinese expression without translation tone.
  • Use Case: Ask the agent to explain the concept of emergence; it outputs a 1080px-wide vertical long-form HTML page styled like a magazine dossier, from reductionism's failure to Anderson's 1972 naming, ready to export or share.

Quick Start

Use the article-sketchnote-editorial skill to turn the concept of emergence into an editorial sketchnote HTML page following the six-station narrative arc.

Frequently Asked Questions about article-sketchnote-editorial

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a visual sketchnote article explaining a concept?

Provide the concept and its historical context, and the skill generates a single HTML file with six narrative sections: opening problem, two failed attempts, a turning point, the insight, and the final naming. The output uses inline CSS and Google Fonts with no JavaScript.

What output format does this editorial sketchnote template produce?

It produces a single self-contained HTML file, 1080px wide with adaptive height, using inline CSS and Google Fonts CDN links for Noto Serif SC, Noto Sans SC, Caveat, and JetBrains Mono. No JavaScript is included; the result is a static vertical long-form page.

Can I customize the layout sections or colors in the generated page?

The six layout molds and their rhythm are fixed by the template's rules, but content, SVG illustrations, and the turning-point headline are content-driven. The color system is limited to four main colors and forbids pure black to preserve the editorial look.

Why must the concept name not appear in the article title?

The template enforces an insight-before-naming narrative rule: readers must see the idea before being told its name, so the concept name only appears in the closing section. Revealing it in the title spoils the narrative arc and fails the self-check.

Does this skill work for English-language content?

The template is optimized for Chinese native expression and explicitly forbids translation-style phrasing, with Chinese typefaces like Noto Serif SC. English labels appear only as accents such as kickers, bylines, and the concept's English name.