CSS Animation

Genererar självförsörjande HTML/CSS funktionsdemo och karusell-genomgångsanimationer.

av neonwatty · neonwatty/css-animation-skill

Testad · Fungerar ★ 9.2/10

CSS Animation — Genererar självförsörjande HTML/CSS funktionsdemo och karusell-genomgångsanimationer.

Vad den gör

Undersöker en live-app via Claude-in-Chrome för att extrahera dess designspråk och layoutgeometri, intervjuar användaren, och genererar sedan en strukturerad brief plus en självförsörjande HTML/CSS-animation (funktionsdemo eller karusell med flera scener), och itererar genom en frys-inspektera-återkopplings-granskningsloop tills den godkänts. Triggers på 'css-animation', 'animera denna funktion', 'skapa en css-genomgång', eller en förfrågan om en CSS-baserad visuell demo av en app-funktion.

Testrapport

Byggde samma 'markera uppgift som slutförd'-animation två gånger och renderade båda live i en webbläsare: färdighetens obligatoriska regler (endast klass-växlande JS, dold-element opacitet+synlighet-parning, spring-easing, en design-språk token-pass) producerade ett checkmärkes-/märke-/markör-poleringslager som baslinjen (inline-stil JS, inga tokens, linjär fade) helt saknade — en konkret, skärmdumpad skillnad, inte bara ett påstående.

Testad: 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

Kommandon och exempelprompter

/css-animationGenererar självförsörjande HTML/CSS funktionsdemo och karusell-genomgångsanimationer.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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 hela rapporten →