Skip to content

Editorial Sketchnote

Turns a concept into a magazine-style visual story: a real problem, failed attempts, a turning point, then the name.

Stars
9,376
Licence
Apache-2.0
Files
3 files

What it does

This skill tells the agent how to lay out a long, vertical, illustrated article that explains an idea as a detective-style magazine dossier. Instead of a textbook definition, the page walks the reader through a stuck problem, failed attempts marked with crossed-out text and stamps, a dramatic turning point, and finally the concept's name. The agent gets six fixed page-section templates, a four-font and four-main-colour system, and writing rules that ask for natural Chinese phrasing without translation-style wording.

Great for

  • Writers or educators who want to explain a concept history as an engaging illustrated story
  • Designers who want an editorial sketchnote look for long-form HTML pages
  • Students preparing visual explainers on how an idea emerged

Skip it if

  • Quick reference cards or plain definitions, since the format deliberately withholds the answer until the end and adds visual drama
  • Data-heavy reports that need charts and precise figures, because the skill focuses on narrative and sketch-style SVG drawings

Try asking

  • “Make an editorial sketchnote about how the idea of emergence was named, starting from the failure of reductionism”
  • “Turn this history of the transistor into a magazine-style visual dossier with a failed attempt and a turning point”
  • “Create a six-part illustrated feature on the concept of feedback loops in economics”
Step-by-step guide: how to use Editorial SketchnoteInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    article-sketchnote-editorial.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip article-sketchnote-editorial.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip article-sketchnote-editorial.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent a specific, concrete starting problem rather than a term definition, so the narrative has tension to work with
  • Ask for the output as a single HTML file and check that the six sections use distinct layouts, since the skill warns against uniform spacing
  • Review the historical claims yourself, because the skill focuses on story structure and does not add sources or verify facts

What's inside

  • example.html
  • example.md
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.