SkillProof tested Claude skills

CSS Animation

Generiert eigenständige HTML/CSS Feature-Demo- und Karussell-Walkthrough-Animationen.

von neonwatty · neonwatty/css-animation-skill

Getestet · Funktioniert ★ 9.2/10

CSS Animation — Generiert eigenständige HTML/CSS Feature-Demo- und Karussell-Walkthrough-Animationen.

Was es kann

Recherchiert eine Live-App über Claude-in-Chrome, um deren Designsprache und Layoutgeometrie zu extrahieren, interviewt den Benutzer, generiert dann einen strukturierten Brief plus eine eigenständige HTML/CSS-Animation (Feature-Demo oder Multi-Szene-Karussell), die durch eine Freeze-Inspect-Feedback-Review-Schleife iteriert, bis sie genehmigt ist. Löst bei 'css animation', 'animate this feature', 'create a css walkthrough' oder einer Anfrage nach einer CSS-basierten visuellen Demo einer App-Funktion aus.

Testbericht

Die gleiche 'Mark task complete'-Animation zweimal erstellt und beide live in einem Browser gerendert: Die obligatorischen Regeln des Skills (nur Klassenwechsel-JS, versteckte Element-Opazität+Sichtbarkeits-Kopplung, Spring-Easing, ein Design-Sprach-Token-Pass) erzeugten eine Checkmark/Badge/Cursor-Polierschicht, die die Baseline (Inline-Style-JS, keine Token, linearer Fade) eindeutig vermisste – ein konkreter, per Screenshot sichtbarer Unterschied, nicht nur eine Behauptung.

Getestet am: 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

Befehle & Beispiel-Prompts

  • /css-animationGeneriert eigenständige HTML/CSS Feature-Demo- und Karussell-Walkthrough-Animationen.

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

  • 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

Vollständiger Testbericht (Englisch) →