← ClaudeAtlas

animationlisted

Interactive motion brief. Six-section survey (page-load, scroll, text, blocks, micro-interactions, intensity) driven by the user's references from references/animation/ and references/motion/. Outputs brief/animation.md and appends motion tokens to DESIGN-LOCK §5. /build enforces the resulting animations as required elements.
dkadts/landing-kit-building · ★ 1 · Web & Frontend · score 74
Install: claude install-skill dkadts/landing-kit-building
# /animation Motion is a first-class design system decision, not an afterthought. This skill runs a dedicated conversation about **what animates, how, and why**, grounded in the user's references. Output feeds `/tokens` and is enforced by `/build`. ## When to use - After `/design-lock` (need ease + duration baseline from §5). - Before `/blocks` if the interactive blocks depend on motion (e.g. a modal reveal style must match section reveals). - Before `/tokens` — this skill adds motion tokens that `/tokens` writes to `tokens.css`. ## Requirements - `DESIGN-LOCK.md` §5 (Motion) is `LOCKED` (has ease + duration). - `brief/05-design.md` is filled (mood — affects motion intensity default). - If `references/animation/` or `references/motion/` contain refs: `references/proposal.md` should mention motion patterns found there. If no motion references exist, still run the skill — but every question defaults to `subtle` and explicitly asks the user to confirm rather than accept. ## Process Six sections, in order. Each section: **show what refs suggest → offer 3-4 options → user picks → record.** ### Section 1. Page-load choreography What appears first on initial page load, in what order, with what stagger? Reference read: any first-frame screenshots or notes in `references/animation/*/notes.md`. Options (present as A / B / C, first option always "match reference X" if a ref exists): - **Instant** — everything visible at first paint, no entrance. - **Hero-first** — hero conte