🎨 Frontend Engineering · CSS & Design Systems

Add motion that guides attention

Animate with purpose: entrance choreography, micro-interactions, and reduced-motion respect.

intermediate~30 minFrontend EngineersFull-Stack DevelopersDesign Engineers

Steps

1Define durations: 150ms feedback, 250ms transitions, 400ms entrances max
2Animate transform and opacity only; layout properties cause jank
3Choreograph staggered lists at 40-70ms increments
4Give interactive elements hover AND active AND focus-visible motion
5Wrap all animation in prefers-reduced-motion guards offering static fallbacks
6Profile long pages; drop anything causing dropped frames mid-scroll

Common Pitfalls

▲Entrance animations replaying on every tab return
▲Parallax that fights scroll-linked rendering on mobile

Commands

Install with skills CLI

$ npx skills add aniruddhaadak80/skills --skill css-design-systems-animation-craft

Install globally

$ npx skills add aniruddhaadak80/skills --skill css-design-systems-animation-craft -g

Tags

#css#animation#ux#frontend-engineering#css-design-systems

Install this skill

$ npx skills add aniruddhaadak80/skills --skill css-design-systems-animation-craft -a opencode

SKILL.md

# Add motion that guides attention

> Animate with purpose: entrance choreography, micro-interactions, and reduced-motion respect.

## When to Use This Skill

Animate with purpose: entrance choreography, micro-interactions, and reduced-motion respect.

## Steps

1. Define durations: 150ms feedback, 250ms transitions, 400ms entrances max
2. Animate transform and opacity only; layout properties cause jank
3. Choreograph staggered lists at 40-70ms increments
4. Give interactive elements hover AND active AND focus-visible motion
5. Wrap all animation in prefers-reduced-motion guards offering static fallbacks
6. Profile long pages; drop anything causing dropped frames mid-scroll

## Common Pitfalls

- Entrance animations replaying on every tab return
- Parallax that fights scroll-linked rendering on mobile

View source on GitHub ↗

Encode brand decisions as named tokens (CSS variables) consumed by utilities so themes change in one place.

🎨 Frontend Engineering·~35m

Open →

Set up design tokens for color, space, type (Vanilla CSS)intermediate

Encode brand decisions as named tokens (CSS variables) consumed by utilities so themes change in one place.

🎨 Frontend Engineering·~35m

Open →

Build layouts that survive real contentintermediate

Use fluid grids, container queries, and content-driven breakpoints instead of pixel-perfect mockups.

🎨 Frontend Engineering·~30m

Open →