Marketing Skills Directory Interactive Blog UX
Description
Turn any blog post into an interactive reading experience where every visual proves a claim. This skill encodes the design method behind the best interactive publications on the web: ngrok’s engineering essays, altermag’s editorial features, and Bartosz Ciechanowski’s explainers, distilled from code-level teardowns of how they actually work. Claude learns to classify a post and pick the right motion engine (hand-driven vs scroll-driven), extract the argument spine and turn the thesis claim into a bespoke interactive set-piece, storyboard a figure ladder (one new variable per figure), design a color contract that binds terms in prose to chart elements and slider knobs through shared CSS tokens, and build it all with tiered recipes from CSS-only wit to canvas widgets, scrollytelling, and 3D showpieces. Ends with a reader-first QA checklist covering accessibility, performance, and the rule that figures must never lie.
What Claude Learns
- → Classify a post's genre and pick the right motion engine (hand-driven vs scroll-driven)
- → Extract the argument spine: the thesis claim gets the bespoke interactive set-piece
- → Storyboard a figure ladder: one new variable per figure, hero first, failures before fixes
- → A 14-entry idea menu mapping content shapes to proven figure types
- → The color contract: one concept = one hue in prose, diagrams, and slider knobs via shared tokens
- → Prose interlock: colon setups, notice-that debriefs, preset links that set figure state
- → Build recipes in 4 budget tiers: CSS-only, canvas/SVG widgets, scrollytelling, 3D
- → Performance discipline: paused-by-default, IntersectionObserver, coalesced rAF, zero layout shift
- → Reader-first QA: drive every widget and fix prose that overclaims what figures show
Installation
claude /install interactive-blog-ux
# Or copy SKILL.md to your project:
mkdir -p .claude/skills/interactive-blog-ux
cp SKILL.md .claude/skills/interactive-blog-ux/Stack & Dependencies
Frequently Asked Questions
Is Interactive Blog UX free to use?
Purchase workflow will be available soon. Contact us to get early access.