Visual explainer - Claude skills for journalism

When to use

Visualizing system architecture, CMS layouts, or data pipelines
Creating data tables, comparison audits, or source verification reports
Mapping editorial workflows, investigation timelines, or source networks
Building dashboards with KPIs, sparklines, and Chart.js visualizations
Reviewing code diffs, implementation plans, or project recaps visually

What's included

11 diagram types

Architecture, flowcharts, sequence diagrams, data tables, timelines, dashboards, source networks, investigation maps, and more.

3 reference templates

Architecture (terracotta/sage), Mermaid flowchart (teal/cyan, hand-drawn), and data table (rose/cranberry) with deliberately different palettes.

CSS pattern library

Theme setup, depth tiers, grid layouts, animations, status badges, KPI cards, zoom controls, and overflow protection.

Dark + light themes

Every generated page supports both themes via prefers-color-scheme. Both look intentional, not accidental.

Interactive Mermaid

Zoom/pan controls on every diagram. Ctrl+scroll zoom, click-and-drag panning, reset button.

Accessible by default

WCAG 2.1 AA contrast ratios, semantic tables, data table alternatives for charts, keyboard navigation, prefers-reduced-motion.

Prompt templates

Command	What it does
/generate-web-diagram	Generate an HTML diagram for any topic
/diff-review	Visual diff review with architecture comparison, code review, and decision log
/plan-review	Compare a plan against the codebase with risk assessment
/project-recap	Context-switching snapshot with architecture diagram and decision log
/fact-check	Verify accuracy of a document against actual code

Aesthetic directions

Each diagram picks a distinctive visual direction. The skill includes 13 options and encourages variety across generations.

Monochrome terminal Editorial broadsheet Blueprint Neon dashboard Paper and ink Hand-drawn sketch IDE-inspired Data-dense / wire service Gradient mesh Newsroom board Investigation wall Magazine feature Academic / research

How it works

1

Think

Determine audience, pick diagram type from routing table, choose aesthetic direction.

2

Structure

Read reference templates and CSS patterns. Route to Mermaid, CSS Grid, HTML tables, or Chart.js based on content type.

3

Style

Apply distinctive font pairing, CSS custom properties, depth tiers, animations, and accessibility checks.

4

Deliver

Write self-contained HTML file to ~/.agent/diagrams/ and open in browser.

Skill structure

visual-explainer/
├── SKILL.md                         # Core skill instructions
├── references/
│   ├── css-patterns.md              # Themes, cards, grids, animations
│   ├── libraries.md                 # Mermaid, Chart.js, anime.js, fonts
│   └── responsive-nav.md           # Sticky sidebar TOC pattern
├── templates/
│   ├── architecture.html            # CSS Grid cards (terracotta/sage)
│   ├── mermaid-flowchart.html       # Mermaid + hand-drawn (teal/cyan)
│   └── data-table.html             # Tables + KPIs (rose/cranberry)
└── prompts/
    ├── generate-web-diagram.md      # Generate HTML diagram
    ├── diff-review.md               # Visual diff review
    ├── plan-review.md               # Plan vs codebase comparison
    ├── project-recap.md             # Context-switching recap
    └── fact-check.md                # Verify claims against code

Installation

# Clone the repository

git clone https://github.com/jamditis/claude-skills-journalism.git

# Copy the skill to your Claude config

cp -r claude-skills-journalism/visual-explainer ~/.claude/skills/

Or download just this skill from the GitHub repository.

Credits

Adapted from nicobailon/visual-explainer (MIT) with design principles from Anthropic's frontend-design skill. Tailored for journalism, media, and academic workflows.

Related skills

Data journalism Accessibility compliance Zero-build frontend PDF design Editorial workflow Source verification