animated-landing-workflow
Animated Landing Workflow
Purpose
This skill encodes a reproducible pipeline for producing top-tier animated landing pages, sourced from a tutorial by Viktor Oddy (@viktoroddy on X), published shortly after Anthropic launched Claude Design on 2026-04-17. Claude Design is the orchestrator; five accelerator tools feed it inspiration, animated backgrounds, AI-generated animation previews, component references, showcase assets, and full-page templates.
It is not a code-pattern skill. For GSAP / Framer Motion / Anime.js / Lenis code, defer to the awwwards-animations skill. This skill owns the pre-code orchestration layer: how to move from a blank brief to a vetted visual prototype ready for Claude Code to implement.
Where it fits in the stack
This is the fourth skill in the design-system-stack repo. The stack's four tiers:
- PRIMARY — how to extract:
extract-design-system(tokens + primitives from an existing site) - PRIMARY — how to build:
design-system-patterns(token hierarchy, theming, variants, pipelines) - COMPLEMENTARY — catalog:
awesome-design-systems(185 shipped systems indexed by feature flag) - APPLIED WORKFLOW — this skill: pre-code orchestration for animated landings
This skill uses the other three. During the workflow, it calls on awesome-design-systems for precedent lookups, design-system-patterns for token-and-variant decisions, and extract-design-system if the landing needs to inherit an existing brand's primitives.