CSS Animation

Genererer selvstændige HTML/CSS feature-demo og karusel-walkthrough animationer.

Af neonwatty · neonwatty/css-animation-skill

Testet · Virker ★ 9.2/10

CSS Animation — Genererer selvstændige HTML/CSS feature-demo og karusel-walkthrough animationer.

Hvad det gør

Undersøger en live app via Claude-in-Chrome for at udtrække dens designsprog og layoutgeometri, interviewer brugeren, og genererer derefter en struktureret brief plus en selvstændig HTML/CSS animation (feature-demo eller multi-scene karusel), der itererer gennem en freeze-inspect-feedback gennemgangsloop, indtil godkendt. Triggere på 'css animation', 'animer denne funktion', 'opret en css walkthrough' eller en anmodning om en CSS-baseret visuel demo af en app-funktion.

Testrapport

Byggede den samme 'mark task complete' animation to gange og renderede begge live i en browser: skillens obligatoriske regler (kun klasse-toggling JS, skjult-element opacity+visibility parring, spring easing, en design-sprog token-pass) producerede et flueben/badge/cursor polish lag, som baseline (inline-style JS, ingen tokens, lineær fade) tydeligvis manglede — en konkret, skærmbilled-forskel, ikke bare en påstand.

Testet: 2026-07-16 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/neonwatty/css-animation-skill
cd css-animation-skill
mkdir -p ~/.claude/skills/css-animation
cp SKILL.md ~/.claude/skills/css-animation/SKILL.md

Kommandoer og eksempelprompter

/css-animationGenererer selvstændige HTML/CSS feature-demo og karusel-walkthrough animationer.

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

Show me an animated walkthrough of how marking a task complete works
Build a carousel walkthrough demo of our app's onboarding flow
Animate this feature so I can show it off on our landing page

Læs hele rapporten →