New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Editorial Illustrations

by huytieu in huytieu/COG-second-brain

Generate meaning-carrying editorial data-illustrations in the monotykamary / Linear aesthetic (near-black grayscale, Inter display + mono labels, hairline framed figures) with a single coral accent.

MITAuto-check passedWriting & Content

Install Editorial Illustrations

skills CLI
$ npx skills add huytieu/COG-second-brain --skill editorial-illustrations -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install huytieu/COG-second-brain editorial-illustrations --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/huytieu/COG-second-brain.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/editorial-illustrations .claude/skills/editorial-illustrations && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
editorial-illustrations
GitHub stars
1.3k
Token cost
~2.4k tokens
SKILL.md length
1,218 words
Files
5 (incl. references, assets)
Skills in repo
37
Repo updated
First seen
Licence
MIT

At a glance

Generate meaning-carrying editorial data-illustrations in the monotykamary / Linear aesthetic (near-black grayscale, Inter display + mono labels, hairline framed figures) with a single coral accent.

  • Works in 6 steps: Write the claim. One declarative… → Name the claim's structure. Which of… → Locate the point. Which single element… → …
  • Writing/illustrating a blog post
  • SKILL.md covers The core move, Method (run this every time), The aesthetic in one breath and The figure follows the host…, plus 3 more sections
  • Calls python3

What it does

Editorial Illustrations is an agent skill from huytieu/COG-second-brain. Generate meaning-carrying editorial data-illustrations in the monotykamary / Linear aesthetic (near-black grayscale, Inter display + mono labels, hairline framed figures) with a single coral accent. This is a GENERATIVE GUIDE, not a template gallery: it teaches the "claim - geometry" method so any session can invent the RIGHT figure for what a post actually argues, then render it as a self-contained, theme-aware, reduced-motion-safe HTML/SVG figure. Use when writing/illustrating a blog post, essay, spec, or slide…

Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including reference files and assets (for example `references/design-system.md`, `references/elements.md` and `references/worked-examples.md`).

It sits in Writing & Content, covering Essays and academic help, Blog and article writing and Slides and decks. The repository describes itself as: Self-evolving second brain with 35 AI skills, 10 agents, and people CRM. Closed-loop harness: a V-model verification lifecycle where the worker never grades its own homework… The licence is MIT.

When your agent uses it

  • Writing/illustrating a blog post
  • Slide and you want a chart
  • Illustration that carries a thesis (not decoration) in the house style

Example prompts

  • “claim - geometry”
  • “make a chart/diagram/illustration for this”
  • “visualize this argument”
  • “/editorial-illustrations”

Requirements

  • Python 3

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Write the claim. One declarative sentence. This becomes the
  2. Name the claim's structure. Which of these is the sentence really about?
  3. Locate the point. Which single element proves the claim? That one gets
  4. Draw in the system. Apply references/design-system.md: tokens, the
  5. Add motion only if it demonstrates the claim. A dot that pauses before a
  6. Caption it. Mono, 8px, uppercase, above-the-rule. State the meaning, not the

What it can do on your machine

Read from SKILL.md and the folder at commit 36ac9d7. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • python3

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Editorial Illustrations loads about 2.4k tokens when it runs, and up to ~10k if it reads all its reference files. Until then it costs about 197 tokens; SKILL.md has 1,218 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~197
When it runs · the whole SKILL.md, loaded when a task matches
~2.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~10k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from huytieu/COG-second-brain at commit 36ac9d7, republished under its MIT licence (© huytieu). 1,218 words, ~2,420 tokens.

Download SKILL.mdSave it as .claude/skills/editorial-illustrations/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
editorial-illustrations
description
Generate meaning-carrying editorial data-illustrations in the monotykamary / Linear aesthetic (near-black grayscale, Inter display + mono labels, hairline framed figures) with a single coral accent. This is a GENERATIVE GUIDE, not a template gallery: it teaches the "claim -> geometry" method so any session can invent the RIGHT figure for what a post actually argues, then render it as a self-contained, theme-aware, reduced-motion-safe HTML/SVG figure. Use when writing/illustrating a blog post, essay, spec, or slide and you want a chart, diagram, or illustration that carries a thesis (not decoration) in the house style. Triggers: "make a chart/diagram/illustration for this", "visualize this argument", "monotykamary/Linear style figure", "editorial graphic".

Editorial illustrations — claim → geometry

The look you want (monotykamary.com, linear.app/now) is not a chart library. It is a discipline: every figure is a single argument rendered as geometry, framed in a hairline box, captioned in mono uppercase with the meaning, drawn in grayscale with exactly one accent. Get the discipline right and any shape reads as "house." Copy templates blindly and it reads as slop.

Do not reach for a fixed set of charts. Reach for the method below and build the figure this specific sentence needs. The six worked examples in references/worked-examples.md are proof the method generalizes, not a menu.

The core move

Take the one sentence the figure must prove. Find that sentence's structure. Render the structure so the reader believes the sentence before reading it.

The caption is the thesis, written first. If you can't state the figure's claim in one sentence, you don't have a figure yet, you have decoration. Stop.

Method (run this every time)

  1. Write the claim. One declarative sentence. This becomes the <figcaption> verbatim. Example: "Nothing is billable until work crosses the delivery boundary."

  2. Name the claim's structure. Which of these is the sentence really about? Match to a geometric primitive:

    If the claim is about…Render it as…Atom (§5)
    a spectrum / more-vs-less / a gradientordered cells, rising fill5a
    ranked magnitudes / shares / a comparisonhorizontal bars, real axis5b
    a sequence with a tipping pointstage grid + traveling dot5a + rail
    mutual causation / a feedback relationshiptwo coupled orbits + bridge5d
    a branch / decision under uncertaintynode-and-branch SVG tree5c
    one thing changing form / a data pipelinestage rail, a glyph per stage5e
    accumulation toward a targetstacked / filling bar5a/5b
    a boundary / inside-vs-outsidea framed region + a crossingcompose
    a distribution / where mass sitsdot-strip or small-multiplescompose

    If nothing matches, compose a new primitive from the atoms in references/design-system.md §5. The novelty is expected and welcome; the tokens and restraint are what must stay constant.

  3. Locate the point. Which single element proves the claim? That one gets --accent (coral). Everything else stays grayscale. One accent, maybe two. No point → the figure has no thesis → go back to step 1.

  4. Draw in the system. Apply references/design-system.md: tokens, the typography law (display = Inter 480–540 tight; everything else mono, tiny, UPPERCASE labels), the framed-figure chrome, 720-wide SVG viewBox, hairlines only, no chartjunk.

  5. Add motion only if it demonstrates the claim. A dot that pauses before a boundary; a pulse crossing between two loops; a signal falling down a branch. 2–6s, ease-in-out, and always killed under prefers-reduced-motion. If motion doesn't show the argument, omit it. Static is fine and often better.

  6. Caption it. Mono, 8px, uppercase, above-the-rule. State the meaning, not the data source alone. ("…because X," not "Figure 3.")

The aesthetic in one breath

  • Field: matches the host — near-black --ground:#080807 on a dark page, white/ off-white on a light page (both token sets in design-system.md). Framed figures on a faint surface; backdrop-filter: blur(16px) on dark, a hairline + faint shadow on light.
  • Type: Inter for the rare big display; mono for everything inside a figure, 7–11px, labels/captions UPPERCASE. Never a second sans, never a bold display.
  • Color: grayscale ramp (--ink → --quiet) + one accent = Claude-coral #D97757, on the point only. (Set --accent: var(--ink) for monotykamary-faithful pure grayscale.)
  • Structure: 1px hairlines, true-circle nodes, dashed = provisional/failure, no shadows, no gradients except a single axis-direction hairline.
  • Density: small type, tight cells, edge-to-edge. Restraint is the style.

Full spec + copy-paste token blocks (dark AND light) + primitive CSS: references/design-system.md. Worked examples with the claim→geometry reasoning: references/worked-examples.md. Non-chart editorial elements (metric strip, status aside, kicker+sigil, numbered chapter index, prose type, inline cards): references/elements.md. Live rendered proof (coral house style, toggleable): assets/gallery.html.

Show full SKILL.md (600 more words)Show less

The figure follows the host page's theme (ALWAYS)

A figure is a guest on someone's page. It must match that page's light/dark, not impose its own. A dark exhibit panel dropped into a light article reads as a foreign object (learned the hard way, 2026-07-22).

  • Look at the host first. Light page → light figure. Dark page → dark figure. a host site may default light and carry its own theme toggle (e.g. Charter serif heads + Public Sans body, blue accent) that stamps data-theme="light"|"dark" on <html> — figures there must follow data-theme, defaulting light.
  • If the host has an explicit theme system, key the dark override off IT, not the media query. Use :root[data-theme="dark"] .yourfig { … }, NOT @media (prefers-color-scheme: dark). Real bug (2026-07-22): a figure keyed on the media query rendered dark on the light blog because the viewer's OS was dark and the page theme was light. The page's data-theme is the source of truth; the media query only applies on hosts that have no toggle. On a toggled host, match the site's own dark tokens (ground #171b22, line #262c36, ink #f1f5f9) so the figure's dark panel sits in the site's dark, not a foreign near-black.
  • Build token-based so it adapts. Define the palette on the figure's own scope, default = the host's default theme, plus a :root[data-theme="dark"] .fig override (and a @media (prefers-color-scheme: dark) override too ONLY if the host has no toggle). Costs nothing, future-proofs the figure.
  • Coral is AA-safe per ground. On white use --accent:#c15f3c for text/strokes (keep #D97757 only for large node fills); on near-black use #D97757 directly.
  • The claim→geometry method and the restraint rules are theme-independent. Only the palette tokens swap. Grayscale-ramp + one coral accent holds on both grounds.

Output contract

  • One self-contained <figure> per illustration: inline <style> scoped to the figure (or shared token :root), inline SVG, no external requests.
  • Theme = host's (see above): light default when embedded in a light page, but always token-based with prefers-color-scheme + :root[data-theme] overrides, and reduced-motion-safe. Both are house rules, not optional.
  • For an Artifact: no external fonts/CDN (CSP blocks them); inline @font-face data-URIs or fall back to system-ui/ui-monospace.
  • For blog posts on your own site: emit the figure HTML/CSS into the post body (markdown passes raw HTML through verbatim via build.py). The blog is light, so the light tokens apply; keep the dark override for portability. Rebuild with python3 build.py; the built page uses absolute asset paths so preview it via a local server or a self-contained standalone copy, never a bare file:// open (that renders the post unstyled). See a local self-contained HTML preview.

Verify (mandatory — this is a UI/UX output)

Per the Visual Verification rule, a DOM check is not enough. Render it and look.

  1. Open the figure in browser-harness, screenshot it (evidence_shot).
  2. Read the image against the claim: does the geometry make the sentence obvious? Is coral on the point and nowhere else? Any clipped mono text, misaligned SVG labels, off-by-one bar math, broken responsive stack at ≤720px?
  3. Fix what you see, re-shot to prove it. Check the light variant too.
  4. Confirm motion stops under reduced-motion.

Anti-slop checklist (reject the figure if any fail)

  • The figcaption is a real claim, stated in one sentence.
  • The geometry encodes that claim's structure (not a generic chart pinned on).
  • Exactly one accent element (coral), on the point.
  • Every in-figure label/value/caption is mono + tiny; labels UPPERCASE.
  • Hairlines only; no shadows, no gradients (bar-axis hairline excepted), no rounded rectangles.
  • Gridlines present only if the figure is genuinely quantitative.
  • Motion (if any) demonstrates the claim and dies under reduced-motion.
  • Renders correctly in both dark and light, and stacks cleanly on mobile.

© huytieu, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (references, assets) in skills/editorial-illustrations of huytieu/COG-second-brain.

  • SKILL.md
  • assets/gallery.html
  • references/design-system.md
  • references/elements.md
  • references/worked-examples.md

Open the folder on GitHubat commit 36ac9d7

Compare with similar skills

Editorial Illustrations next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Editorial Illustrations compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Editorial Illustrations this skillhuytieu/COG-second-brain1.3k—~2.4kAutomated safety check: PassMIT
Reportmicrosoft/data-formulator18k—~1.5kAutomated safety check: PassMIT
Blog Cover Posterdigoal/blog8.6k—~1.4kAutomated safety check: PassGPL-2.0
Storytelling Narrativesammcj/agentic-coding162—~3.6kAutomated safety check: PassApache-2.0
Extract Wisdomsammcj/agentic-coding162—~5.3kAutomated safety check: PassApache-2.0
EasyslidesRimagination/easyslides138—~12kAutomated safety check: PassMIT

Similar skills

  • Report

    microsoft/data-formulator

    Official

    Turn an exploration (threads, findings, charts) into a single Markdown report — note, blog post, executive summary, KPI dashboard, slide brief, or multi-section analytical report, with embedded…

    18k GitHub stars~1.5k tokensUpdated 2 days ago
    Writing & ContentAuto-check passed

  • Blog Cover Poster

    digoal/blog

    Turn a blog post, article, notes, or any source material into a set of vertical poster images — one cover plus several coherent content slides that explain the core points.

    8.6k GitHub stars~1.4k tokensUpdated yesterday
    Writing & ContentAuto-check passed

  • Storytelling Narrative

    sammcj/agentic-coding

    Structure, refine, or draft narrative content or storytelling for business communication such as slide decks, blog posts, pitches, reports.

    162 GitHub stars~3.6k tokensUpdated yesterday
    Writing & ContentAuto-check passed

  • Extract Wisdom

    sammcj/agentic-coding

    Extract wisdom, insights, and actionable takeaways from YouTube videos, blog posts, articles, or text files.

    162 GitHub stars~5.3k tokensUpdated yesterday
    Documents & OfficeAuto-check passed

  • Easyslides

    Rimagination/easyslides

    Use EasySlides to create, distill, edit, review, and export editable academic PPTX presentations, including 蒸馏PPT、提取模板、复用模板和答辩PPT。

    138 GitHub stars~12k tokensUpdated 27 days ago
    Documents & OfficeAuto-check passed

  • Ppt Visual Replica

    ZhiweiWei-NAMI/PPT-Visual-Replica

    Create and edit editable PowerPoint decks, recreate slides or infographics from reference images, and develop scientific talks, teaching slides, and thesis defenses by generating slide drafts with…

    135 GitHub stars~1.8k tokensUpdated 24 days ago
    Documents & OfficeAuto-check passed

More from huytieu/COG-second-brain

All 37 skills in this repo

  • Voice Baseline

    huytieu/COG-second-brain

    Measure your own writing corpus for the words and sentence shapes you over-use, so an agent writing in your voice stops amplifying your tics into a style.

    1.3k GitHub stars~957 tokensUpdated 7 days ago
    Auto-check passed

  • Daily Journal

    huytieu/COG-second-brain

    A passive daily work journal that Claude keeps FOR you so you never have to write it yourself.

    1.3k GitHub stars~1.3k tokensUpdated 7 days ago
    Auto-check passed

  • Loop Engineering

    huytieu/COG-second-brain

    Shared loop-engineering reference for COG skills - the agent loop, deterministic verifiers, termination conditions, in-loop context management, and named patterns.

    1.3k GitHub stars~1.5k tokensUpdated 7 days ago
    Auto-check passed

  • Release Video

    huytieu/COG-second-brain

    Turn a product release (the list of shipped items plus real screen recordings) into a motion recap video and one explained demo per feature, with sound effects tied to on-screen motion and a…

    1.3k GitHub stars~1.7k tokensUpdated 7 days ago
    Auto-check passed

  • Onboarding

    huytieu/COG-second-brain

    Personalize COG for your workflow - creates profile, interests, and watchlist files with guided setup (run this first!)

    1.3k GitHub starsUsed in 1 repo~3.1k tokens
    Auto-check passed

  • Slop Gate

    huytieu/COG-second-brain

    Deterministic pre-publish scan that refuses AI-slop tells in anything about to be written, published, or sent: files, artifacts, slide titles, table headers, diagram labels, chat messages, commit…

    1.3k GitHub stars~1.6k tokensUpdated 7 days ago
    Auto-check passed

Categories

Questions about Editorial Illustrations

What does Editorial Illustrations do?

Generate meaning-carrying editorial data-illustrations in the monotykamary / Linear aesthetic (near-black grayscale, Inter display + mono labels, hairline framed figures) with a single coral accent. Editorial Illustrations is an agent skill from huytieu/COG-second-brain. Generate meaning-carrying editorial data-illustrations in the monotykamary / Linear aesthetic (near-black grayscale, Inter display + mono labels, hairline framed figures) with a single coral accent.

When should I use Editorial Illustrations?

Editorial Illustrations fits situations like: writing/illustrating a blog post; slide and you want a chart; illustration that carries a thesis (not decoration) in the house style.

How do I install Editorial Illustrations in Claude Code?

Run `npx skills add huytieu/COG-second-brain --skill editorial-illustrations -a claude-code`. Or copy the skill folder (skills/editorial-illustrations in huytieu/COG-second-brain) into .claude/skills/editorial-illustrations in your project. Claude Code loads it when a task matches its description.

How do I install Editorial Illustrations in Codex?

Run `npx skills add huytieu/COG-second-brain --skill editorial-illustrations -a codex`. Or copy the skill folder (skills/editorial-illustrations in huytieu/COG-second-brain) into .agents/skills/editorial-illustrations in your project. Codex loads it when a task matches its description.

Can I use Editorial Illustrations in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add huytieu/COG-second-brain --skill editorial-illustrations -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/editorial-illustrations, .gemini/skills/editorial-illustrations, .github/skills/editorial-illustrations and .opencode/skills/editorial-illustrations in your project.

What does Editorial Illustrations need to run?

Going by SKILL.md and its folder, Editorial Illustrations needs the command-line tools its instructions call (python3). Our summary lists: Python 3.

Does Editorial Illustrations access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Editorial Illustrations safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Editorial Illustrations use?

Editorial Illustrations is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Editorial Illustrations use?

About 2.4k tokens (SKILL.md is roughly 9.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 8k tokens, read only when the agent opens those files.

What are the alternatives to Editorial Illustrations?

Skills that share tags, products or a category with Editorial Illustrations: Report (microsoft/data-formulator, 18k stars), Blog Cover Poster (digoal/blog, 8.6k stars), Storytelling Narrative (sammcj/agentic-coding, 162 stars) and Extract Wisdom (sammcj/agentic-coding, 162 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Editorial Illustrations?

huytieu (a GitHub user) maintains it in huytieu/COG-second-brain, which has 1,268 GitHub stars. The repository holds 37 skills in this directory. The repository was last updated on October 2, 2026.

Source: huytieu/COG-second-brain on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.