AugmentClaude
MITUI/UXDashboardsWriting

Reimagine It Infographic

By Kayforkind· Kayforkind/reimagine-it· 0

Turn your content into a data-driven infographic poster using evidence-based visual design.

Installation

  1. Make sure Claude is on your device and in your terminal.

    Skills load from ~/.claude/skills/ when Claude Code starts up — so you need it on your machine first. If you don't have it yet, install it once with the command below, then run claude in any terminal to verify.

    One-time setup
    npm i -g @anthropic-ai/claude-code

    Already have it? Skip ahead.

  2. Paste into Claude Code or into your terminal.
    Install
    Sign up to copy
    Sign up free to reveal

    This copies the whole skill folder into ~/.claude/skills/reimagine-it-infographic-kayforkind/ — the SKILL.md plus any scripts, reference docs, or templates the skill ships with. Safe default: works for every skill.

    Faster alternative (instruction-only skills)

    Skips the clone and grabs only the SKILL.md file. Don't use this if the skill ships Python scripts, reference markdowns, or asset templates — they won't be downloaded and the skill will fail when it tries to load them.

    Quick install (SKILL.md only)
    Sign up to copy
    Sign up free to reveal
  3. Restart Claude Code.

    Quit and reopen Claude Code (or any other agent that loads from ~/.claude/skills/). New skills are picked up on startup.

  4. Just ask Claude.

    Skills auto-activate when your request matches the skill's description — no slash command needed. Trigger phrases live in the skill's own frontmatter; you can read them in the “What this skill does” section above.

Prefer to read the source first? Open on GitHub.

When Claude uses it

Content-derived infographic poster — reads the source file and builds a statistical poster from the facts already in it. Not a dashboard, not a CV, not an AntV template. Uses common-scale encodings (Cleveland–McGill floor), ISOTYPE unit counts (Neurath), custom data glyphs (Lupi/Fragapane), and a lossless data table. Palette, glyphs, and composition are derived from the source's own content. No pies, donuts, gauges, 3D charts, or fabricated KPIs. Part of the reimagine-it Content-Derived Design suite.

What this skill does

/reimagine-it infographic

Parent: ../SKILL.md — the full Content-Derived Design engine. Research pack: ../references/research/infographic-craft.md — 15-source infographic method (Cleveland–McGill, Tufte, Bertin, ISOTYPE, Minard/Snow, Cairo, Lupi, FT Visual Vocabulary, USWDS, WCAG charts, InfoAlign layouts). Domain pack: ../references/domains/infographic.md — the infographic domain non-negotiables.

Builds a statistical poster of facts already in the source — not an ops dashboard, not a CV, not an AntV template clone.

Hard non-negotiables

  1. Cleveland–McGill perceptual ranking. Position along a common scale > length > angle > area > volume > color saturation. Encode the most important comparisons as positions, not pies.
  2. ISOTYPE unit counts when the data is discrete countable things (Neurath: one pictogram = N units, repeated, not scaled).
  3. Custom glyphs from the source. Lupi/Fragapane pattern — draw a visual alphabet from the data itself (leaves, braids, snakes, whatever the content demands), not generic bar/pie/donut.
  4. Lossless data table. Every chart has a companion table; the infographic is a supplement to the data, not a replacement.
  5. No pies, donuts, gauges, or 3D charts. Pie charts rank last in Cleveland–McGill; donuts are pies with the center punched out (worse); 3D distorts perception.
  6. No fabricated KPIs. Every number on the poster comes from the source, not extrapolated or invented.

Structure router

Before drawing, sniff the source and lock a structure:

StructureWhenInfoAlign scenery
listUnordered peersgrid, star
sequenceSteps / dated beatsportrait, landscape
hierarchyTree / nestingportrait
compareTwo+ groupsportrait-grid
valuesMagnitudesportrait-grid
relationNodes + edges the source namesspiral

Do not default to gold Texas (sequence+compare on portrait-grid). Derive from THIS source.

Procedure

  1. Load ../references/research/infographic-craft.md and ../references/domains/infographic.md.
  2. Extract anchors from the source (3–5 concrete nouns, dates, numbers).
  3. Route the structure (list/sequence/hierarchy/compare/values/relation).
  4. Pick InfoAlign scenery (grid/star/portrait/landscape/portrait-grid/spiral).
  5. Derive palette from source content (≤ 5 colors).
  6. Build a custom visual alphabet from one datapoint.
  7. Encode comparisons using common-scale positions (not pies).
  8. Include a lossless data table below the poster.
  9. Verify: every number traceable to source, no fabricated KPIs, no AntV template chrome.

Must not

  • Clone gold Texas infographic's scenery or poster chrome onto a different source
  • Use a pie chart, donut, gauge, or 3D chart
  • Invent statistics the source does not contain
  • Use AntV/Looker/Datawrapper templates
  • Skip the structure router and default to portrait-grid
  • Ship without a lossless data table

Related skills

U

UI/UX Pro Max

anthropics

Build production-grade web components and interfaces with distinctive, polished design.

OfficialComplete terms in LICENSE.txt
R

React Native Best Practices

vercel-labs

Build performant React Native apps with optimization and animation guidance.

MIT
R

React View Transitions

vercel-labs

Animate page and component transitions using React's native View Transition API.

MIT
U

UI Design Guidelines Reviewer

vercel-labs

Review UI code for compliance with web interface best practices and accessibility standards.