Guide · Agent skill
How to use the Editorial Sketchnote agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
Editorial Sketchnote is an agent skill that tells an AI agent how to write and lay out a long, vertical, illustrated HTML article that explains one concept as a magazine-style detective dossier. It is for writers, educators and designers who want a concept's history told as a story rather than a textbook definition. By the end of this guide you will know what the skill changes about the agent's output, how to install it, how to ask for a page in a way the agent will pick up, and what to check before you publish.
Editorial Sketchnotenexu-io/html-anything · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Get the skill ZIP from this page. It contains SKILL.md, example.html and example.md.
- 2Unzip into a skills folder. Place the unzipped skill folder in ~/.claude/skills/ for personal use, or in the project's .claude/skills/ folder.
- 3Or upload in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Describe your concept. Ask for an illustrated editorial page on a concept's history, with the problem, failures, turning point and name.
- 5Check the output. Open the generated HTML in a browser and confirm the title hides the concept name and the story has a failure and a closing name.
What the skill makes the agent do
The skill turns a concept into an editorial page that the reader works through in order. The story starts with a concrete problem that is stuck, moves through failed attempts marked with crossed-out text, stamps and notes, reaches a sudden turning point, shows the insight, and only at the end gives the concept its name. The reader experiences the same sequence of being stuck, hitting a wall, turning the corner and seeing the thing.
The skill gives the agent six fixed page-section layouts that must be used in a set rhythm, a four-font system (serif, sans, mono and a handwriting face), and a four-main-colour palette. It also sets writing rules: natural Chinese phrasing, concrete verbs and objects, and no translation-style wording. The source describes the output as a single HTML file with inline CSS, Google Fonts loaded from a CDN, no JavaScript, and a fixed 1080px container with height that adjusts to content.
- Section headings and the title must not name the concept early, so the answer is withheld until the closing section.
- Each station uses a different layout so the page feels like a comic storyboard, not an evenly spaced gallery.
- Sketch-style SVG drawings and handwritten annotations carry much of the visual tone.
Install the skill from the ZIP
Download the ZIP for this skill from this page. Unzip it into your personal skills folder, ~/.claude/skills/, or into a project's .claude/skills/ folder if you want the skill to apply only to that project.
If you use the Claude apps instead of a local folder, open Settings, go to Capabilities, then Skills, and upload the skill there. Either way, the skill is the folder that contains SKILL.md, which is the instruction file the agent reads.
- Personal install: ~/.claude/skills/
- Project install: the .claude/skills/ folder inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
Ask for a page in plain language
You do not need a special command. Describe the concept, the people or period involved, and that you want an illustrated, magazine-style dossier. The skill's own description is a good model: it turns one concept into a page that walks from a real problem, through failures and a turning point, to the name.
Give the agent the material it needs: who was stuck, what they tried, and what they finally saw. The stronger your problem and failed attempts are, the better the story will work. If you have a finished example, the package includes example.md and example.html so you can show the agent the intended look and structure.
- Example request: "Make an editorial sketchnote page on how researchers came to name emergence. Start from the reductionist problem, include two failed attempts, then the turn and the name."
- Example request: "Write a long illustrated HTML feature on the history of the idea of an ecosystem, using the editorial sketchnote format. Keep the concept name out of the title."
- Ask for the page in Chinese if your readers are Chinese speakers, since the skill's writing rules are written for natural Chinese phrasing.
Check what the agent produces
Open the generated HTML file in a browser. Check that the title does not name the concept, that the page has a clear problem, at least one failure, a turning point and a closing name, and that the six sections do not look evenly spaced. Check the wording for translation-style phrasing and remove any self-referential lines such as telling the reader what they just learned.
The skill's own checklist asks for the same things. If a section fails, ask the agent to redo that section rather than the whole page.
- Title and headings do not reveal the concept name early.
- The problem is concrete and seen from the viewpoint of the person at that moment.
- At least one failed attempt has a visible clue such as strikethrough, a stamp or a footnote.
- The closing section is centred and the margins vary between sections.
Safety notes: scripts and network
According to the skill's listing, it does not run scripts and does not use the network. It requires nothing beyond the skill files themselves. The included files are SKILL.md, example.html and example.md.
The HTML the agent writes loads fonts (Noto Serif SC, Noto Sans SC, Caveat and JetBrains Mono) from the Google Fonts CDN when a reader opens it in a browser. That is a normal web request made by the page, not by the skill. If you need the page fully offline, you would need to replace those font links yourself.
- No scripts are run by this skill.
- No network access is listed for the skill itself.
- Viewing the generated page loads fonts from Google Fonts.
Tips for better results
Pick a concept with a real history of people getting stuck. The format works best when there was a wrong turn to show. For a simple definition, this skill will feel like overkill.
Use the example files as a reference for the intended rhythm. Ask the agent to vary the layouts rather than repeating one block for every section. Keep the colours to the palette the skill defines, which avoids pure black and limits the page to a few main colours.
- Give the agent real names, places and dates for the story so the scenes feel specific.
- If the result looks like a plain article, ask the agent to restore the magazine-style layouts and the stamp and strikethrough details.
- Do not use it for dense numerical reports; ask for a different format instead.
What people use it for
- An educator writing an illustrated explainer on how a scientific idea emerged.
- A writer turning a concept history into a long-form feature with a detective-file feel.
- A designer prototyping an editorial sketchnote look for a long HTML page.
- A student preparing a visual presentation on how an idea took shape.
Frequently asked questions
How do I install the Editorial Sketchnote agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can instead go to Settings, Capabilities, Skills and upload it there.
Does the Editorial Sketchnote skill require anything else to run?
The skill listing states that nothing else is required, that it does not run scripts, and that it does not use the network. The generated HTML does load fonts from Google Fonts when opened in a browser.
Is the Editorial Sketchnote skill free to use?
The source repository is licensed under Apache-2.0. The listing does not mention any price, so check the licence text in the repository for the terms that apply to you.
Can I use this skill for a quick definition or a reference card?
No. The skill is designed to withhold the answer until the end and add visual drama, so it is a poor fit for plain definitions or quick reference cards.
Why does the agent's page not show the concept name in the title?
The skill's rules require that the title and early headings avoid the concept name, and that the name appears only in the closing section. This keeps the reader following the discovery.
What should I use instead for a data-heavy report?
The listing says this skill is not for data-heavy reports that need charts and precise figures, because it focuses on narrative and sketch-style SVG drawings. Use a report or chart-focused format for that kind of work.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you want to explain an idea's history as an illustrated story with a clear turning point, and you are comfortable with the agent producing a Chinese-style magazine layout. Pick a different format for quick definitions, reference cards or data-heavy reports, since this one deliberately delays the answer and emphasises narrative over figures.
Download the skill