SkillProof tested Claude skills

CSS Animation

Genereert zelfstandige HTML/CSS feature-demo en carrousel walkthrough animaties.

Door neonwatty · neonwatty/css-animation-skill

Getest · Werkt ★ 9.2/10

CSS Animation — Genereert zelfstandige HTML/CSS feature-demo en carrousel walkthrough animaties.

Wat het doet

Onderzoekt een live app via Claude-in-Chrome om de design language en layout geometrie te extraheren, interviewt de gebruiker, genereert vervolgens een gestructureerd brief plus een zelfstandige HTML/CSS animatie (feature-demo of multi-scene carrousel), itererend door een freeze-inspect-feedback review loop totdat goedgekeurd. Triggers op 'css animatie', 'animeer deze feature', 'maak een css walkthrough', of een verzoek voor een CSS-gebaseerde visuele demo van een app feature.

Testrapport

Dezelfde 'markeer taak voltooid' animatie twee keer gebouwd en beide live in een browser gerenderd: de verplichte regels van de skill (alleen class-toggling JS, hidden-element opacity+visibility pairing, spring easing, een design-language token pass) produceerden een checkmark/badge/cursor polish laag die de baseline (inline-style JS, geen tokens, lineaire fade) duidelijk miste — een concreet, gescreenshoteerd verschil, niet alleen een claim.

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

Installatie

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

Commando's en voorbeeldprompts

  • /css-animationGenereert zelfstandige HTML/CSS feature-demo en carrousel walkthrough animaties.

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

  • 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

Volledig rapport (Engels) →