Claude Code transition skill for CSS durations and easing
Review durations and easing for hover, state changes, and layout changes, then show the before and after styles.
中文Install in Claude Code
A local Claude Code project with CSS to review and the purpose of each interaction.
- Review `.claude/skills/transition/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.claude/skills/transition/` in your project and save the reviewed file as `.claude/skills/transition/SKILL.md`.
- Start Claude Code from that project's root, then select `/transition` in the slash menu.
Example task
Invoke /transition and review this fictional filter chip and static heading.
element `filter chip` | role hover
current `transition: background-color 600ms ease` | desired state=quick hover feedback
static `section title` has a color transition with no state changeWhat to check
Show the change from `transition: background-color 600ms ease` to a `200ms` hover transition with contextual `cubic-bezier` easing. Remove the unused transition on `section title`.
Original SKILL.md on GitHub · Updated
Frequently asked question
Does a static heading need the same transition as a button?
First check whether it changes state. Remove unused transitions and choose durations and easing appropriate to the interactive control.