SkillProof tested Claude skills

CSS Animation

Generuje samostatné HTML/CSS demo funkcí a animace karuselového průvodce.

od neonwatty · neonwatty/css-animation-skill

Otestováno · Funguje ★ 9.2/10

CSS Animation — Generuje samostatné HTML/CSS demo funkcí a animace karuselového průvodce.

Co umí

Prozkoumá živou aplikaci přes Claude-in-Chrome, aby extrahovala její designový jazyk a geometrii rozložení, vyslechne uživatele, poté vygeneruje strukturovaný brief plus samostatnou HTML/CSS animaci (demo funkce nebo vícescenový karusel), iteruje přes smyčku kontroly-inspekce-zpětné vazby, dokud není schválena. Spouští se na 'css animation', 'animate this feature', 'create a css walkthrough' nebo požadavek na vizuální demo funkce aplikace založené na CSS.

Testovací report

Vytvořil jsem dvakrát stejnou animaci 'označit úkol jako dokončený' a obě vykreslil naživo v prohlížeči: povinná pravidla dovednosti (pouze JS přepínající třídy, párování opacity+viditelnosti skrytých prvků, pružinové zmírnění, průchod designovým jazykem) vytvořila vrstvu vylepšení zaškrtnutí/odznaku/kurzoru, kterou základní verze (inline JS, žádné tokeny, lineární fade) zjevně postrádala — konkrétní, screenshottem doložený rozdíl, nikoli jen tvrzení.

Testováno: 2026-07-16 · Claude Code 2.x (agent harness)

Instalace

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

Příkazy a ukázkové prompty

  • /css-animationGeneruje samostatné HTML/CSS demo funkcí a animace karuselového průvodce.

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

  • 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

Kompletní testovací report (anglicky) →