CSS Animation

Genererer selvstendige HTML/CSS funksjonsdemo- og karusell-gjennomgangsanimasjoner.

av neonwatty · neonwatty/css-animation-skill

Bestått ★ 9.2/10

CSS Animation — Genererer selvstendige HTML/CSS funksjonsdemo- og karusell-gjennomgangsanimasjoner.

Hva den gjør

Undersøker en live app via Claude-in-Chrome for å trekke ut designspråket og layoutgeometrien, intervjuer brukeren, og genererer deretter en strukturert brief pluss en selvstendig HTML/CSS-animasjon (funksjonsdemo eller multi-scene karusell), og itererer gjennom en freeze-inspect-feedback gjennomgangsløyfe til godkjent. Utløses på 'css animation', 'animer denne funksjonen', 'opprett en css gjennomgang', eller en forespørsel om en CSS-basert visuell demo av en app-funksjon.

Testrapport

Bygget den samme 'marker oppgave fullført'-animasjonen to ganger og rendret begge live i en nettleser: ferdighetens obligatoriske regler (kun klasse-bytte JS, skjult-element opasitet+synlighet-parring, spring easing, en design-språk token pass) produserte et hake/merke/markør-poleringslag som grunnlinjen (inline-stil JS, ingen tokens, lineær fade) tydelig manglet — en konkret, skjermdump-forskjell, ikke bare en påstand.

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

Installer

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 selvstendige HTML/CSS funksjonsdemo- og karusell-gjennomgangsanimasjoner.

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen 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

Full rapport →