visual-storytelling-design
$
npx mdskill add lyndonkl/claude/visual-storytelling-designCraft compelling data narratives with narrative structure and annotation.
- Transforms raw data into engaging stories for journalism and presentations.
- Integrates cognitive design principles and D3.js visualization libraries.
- Decides on approach by analyzing user intent and data complexity.
- Delivers annotated charts and scrollytelling experiences with clear guidance.
SKILL.md
.github/skills/visual-storytelling-designView on GitHub ↗
--- name: visual-storytelling-design description: Transforms data into compelling visual narratives by applying narrative structure, annotation techniques, scrollytelling patterns, and honest framing to data journalism, presentations, and infographics. Use when creating data-driven articles or reports, designing infographics with narrative, building scrollytelling experiences, annotating charts to guide interpretation, or when user mentions data storytelling, presentation design, annotated chart, narrative visualization. --- # Visual Storytelling Design ## Table of Contents - [Story Design Workflow](#story-design-workflow) - [Path Selection Menu](#path-selection-menu) - [Path 1: Build Narrative Structure](#path-1-build-narrative-structure) - [Path 2: Master Annotation](#path-2-master-annotation) - [Path 3: Design Scrollytelling](#path-3-design-scrollytelling) - [Path 4: Apply Framing & Metaphors](#path-4-apply-framing--metaphors) - [Quick Reference](#quick-reference) - [Guardrails](#guardrails) --- **Core principle:** Structuring data as narrative (Context → Problem → Evidence → Insight) aids comprehension and retention. Annotations guide attention, progressive disclosure reveals complexity gradually, and framing provides context for accurate interpretation. **Related skills:** Use `cognitive-design` for cognitive principles, `d3-visualization` for D3.js implementation, `design-evaluation-audit` for systematic evaluation, `cognitive-fallacies-guard` for integrity checks. --- ## Story Design Workflow **Time:** 1-2 hours **Copy this checklist and track your progress:** ``` Story Design Progress: - [ ] Step 1: Define Narrative - [ ] Step 2: Choose Structure - [ ] Step 3: Apply Cognitive Techniques - [ ] Step 4: Review for Clarity & Integrity ``` ### Step 1: Define Narrative Determine the story arc: What's the context? What's the question/problem? What data answers it? What's the insight? Choose an opening strategy: lead with human impact, surprising finding, or visual. **Resource:** [Narrative Techniques](resources/narrative-techniques.md) — Narrative Structure section ### Step 2: Choose Structure Select a template and pattern that fits your story type, audience, and medium. Options include step-by-step article, magazine style, annotated chart, interactive exploration, or presentation deck. **Resource:** [Storytelling Patterns](resources/storytelling-patterns.md) — Templates and Decision Matrix ### Step 3: Apply Cognitive Techniques Add annotations (callouts, arrows, shaded regions, direct labels). Apply framing with baselines, comparisons, and denominator clarity. Use scrollytelling for progressive revelation if web-based. Consider visual metaphors. **Resource:** [Narrative Techniques](resources/narrative-techniques.md) — Annotations, Scrollytelling, Framing sections ### Step 4: Review for Clarity & Integrity Verify the story is honest (no cherry-picking, balanced framing), clear (insight obvious in 5 seconds), and complete (sources cited, limitations noted). Use `design-evaluation-audit` for systematic evaluation and `cognitive-fallacies-guard` for integrity verification. --- ## Path Selection Menu ### Path 1: Build Narrative Structure **Choose this when:** Starting a data story and need to define the narrative arc and opening strategy. **→ [Go to Narrative Techniques](resources/narrative-techniques.md) — Sections 1-2** --- ### Path 2: Master Annotation **Choose this when:** Adding annotations to guide interpretation of existing charts and visualizations. **→ [Go to Narrative Techniques](resources/narrative-techniques.md) — Section 3** --- ### Path 3: Design Scrollytelling **Choose this when:** Building web-based progressive revelation experiences. **→ [Go to Narrative Techniques](resources/narrative-techniques.md) — Section 4** --- ### Path 4: Apply Framing & Metaphors **Choose this when:** Providing context, baselines, comparisons, and visual metaphors. **→ [Go to Narrative Techniques](resources/narrative-techniques.md) — Sections 5-6** --- ## Quick Reference ### 5 Storytelling Principles 1. **Lead with insight, not topic** — Title: "Remote workers report 23% higher satisfaction" not "Remote work survey results" 2. **Annotate the insight** — Don't make readers discover it; point it out with callouts 3. **Provide context** — Baselines, historical comparisons, denominators for every percentage 4. **One change at a time** — Scrollytelling: highlight OR annotate, not both simultaneously 5. **Be honest** — Show full data, acknowledge limitations, avoid cherry-picking --- ## Guardrails **Scope:** This skill provides narrative structure, annotation techniques, scrollytelling patterns, framing guidance, story templates, and quality checklists for data storytelling. It does not implement code, evaluate general usability, teach cognitive theory, or check for misleading patterns.
More from lyndonkl/claude
- abstraction-concrete-examplesBuilds structured abstraction ladders that translate high-level principles into concrete, actionable examples across 3-5 levels. Bridges communication gaps, reveals hidden assumptions, and tests whether abstract ideas work in practice. Use when explaining concepts at different expertise levels, moving between abstract principles and concrete implementation, identifying edge cases by testing ideas against scenarios, designing layered documentation, decomposing complex problems into actionable steps, or bridging strategy-execution gaps.
- academic-letter-architectGuides the creation of evidence-based academic recommendation letters, reference letters, and award nominations that combine concrete examples, meaningful comparisons, and genuine enthusiasm. Use when writing recommendation letters for students, postdocs, or colleagues, or when user mentions recommendation letter, reference, nomination, letter of support, endorsement, or needs help with strong advocacy and comparative statements.
- adr-architectureDocuments significant architectural and technical decisions with full context, alternatives considered, trade-offs analyzed, and consequences understood. Creates a decision trail that helps teams understand why decisions were made. Use when choosing between technology options, making infrastructure decisions, establishing standards, migrating systems, or when user mentions ADR, architecture decision, technical decision record, or decision documentation.
- adverse-selection-priorProduces a Bayesian prior probability that an offered transaction is +EV for the recipient, given that the counterparty chose to propose it. Applies Akerlof market-for-lemons logic -- if they offered it, they believe it is +EV for them, so the prior that it is +EV for us is materially below 50%. Reusable across trade evaluation, waiver drops (another team dropping a player is also adverse selection), job-offer analysis, M&A, and any "someone offered me this" situation. Use when you receive an unsolicited trade/offer/proposal, analyzing incoming trade prior, evaluating why a counterparty proposed a deal, or when user mentions adverse selection, market for lemons, why did they offer this, incoming trade prior, they proposed it, Bayesian adjustment on received offer.
- alignment-values-north-starCreates actionable alignment frameworks that give teams a shared North Star (direction), values (guardrails), and decision tenets (behavioral standards). Enables autonomous decision-making while maintaining organizational coherence. Use when starting new teams, scaling organizations, defining culture, establishing product vision, resolving misalignment, creating strategic clarity, or when user mentions North Star, team values, mission, principles, guardrails, decision framework, or cultural alignment.
- analogy-weight-checkFor every analogy in a substacker draft, verifies it carries mechanical weight — the analogy does real work explaining the mechanism, not merely decorates it. Cross-references analogy-catalog.md for novelty (is this analogy reused from a prior post?) and domain fit (biology > organizational > sports preferred; physics/military disfavored). Use whenever an analogy appears in the draft. Trigger keywords: analogy weight, decorative, mechanical weight, reused analogy, catalog check, metaphor check.
- answer-uncomfortable-questionTakes one strategic question about substacker ("should we launch paid?", "is this section dead?", "are we writing for the wrong audience?") and produces the mandatory evidence + reasoning + downside triad plus a recommendation. Used 3 times per Growth Strategist review. Trigger keywords: uncomfortable question, strategic question, evidence reasoning downside, triad.
- attribute-performanceFor each substacker post that materially over- or under-performs the rolling baseline (|z| ≥ 1.0), produces a plain-English attribution paragraph with calibrated confidence (high / medium / low / unexplained). Considers subject-line effect, topic zeitgeist, external share, day-of-week, length effect, and audience-notes signals. Labels unexplained outliers explicitly rather than fabricating a story. Use after compute-baseline when outlier posts exist. Trigger keywords: attribution, why did this post work, outlier explanation, performance analysis.
- auction-first-price-shadingComputes the optimal shaded bid for a first-price sealed-bid auction given a true private value, an estimate of the number of competing bidders N, and a value-distribution assumption. Implements the `(N-1)/N` equilibrium shading rule for uniform private values, adjusts for log-normal or empirical value distributions, layers a risk-aversion adjustment, and caps output against the bidder's remaining budget. Domain-neutral auction theory reusable across fantasy sports (baseball FAAB, NBA/NHL waiver auctions), prediction-market limit sizing, sealed procurement bids, and any blind-bid context. Use when user mentions "first-price auction bid", "sealed bid shading", "(N-1)/N", "FAAB bid amount", "auction shading", "optimal bid first-price", "bid for sealed-bid", "blind bid sizing", or when downstream logic needs a principled shade factor rather than an ad-hoc heuristic.
- auction-winners-curse-haircutApplies a Bayesian haircut to a bid valuation for common-value auctions where winning is itself evidence the bidder over-estimated. Takes a raw valuation, a value-type classification (common_value / private_value / mixed), the number of informed bidders N, and a signal-dispersion estimate, and returns an adjusted valuation. Domain-neutral and reusable across fantasy FAAB, prediction markets, M&A bids, ad-auction budgets, and any generic bidding context. Use when user mentions "winner's curse", "common value auction", "valuation haircut", "adverse valuation", "Bayesian bid adjustment", or "over-paying in auction".