CSS Animation

Generuje samodzielne animacje demonstracyjne funkcji HTML/CSS i karuzele.

Autor: neonwatty · neonwatty/css-animation-skill

Testowano · Działa ★ 9.2/10

CSS Animation — Generuje samodzielne animacje demonstracyjne funkcji HTML/CSS i karuzele.

Co robi ten skill

Bada działającą aplikację za pomocą Claude-in-Chrome, aby wyodrębnić jej język projektowania i geometrię układu, przeprowadza wywiad z użytkownikiem, a następnie generuje ustrukturyzowany brief plus samodzielną animację HTML/CSS (demonstracja funkcji lub karuzela wieloscenowa), iterując przez pętlę recenzji freeze-inspect-feedback do zatwierdzenia. Wyzwalana przez 'css animation', 'animate this feature', 'create a css walkthrough' lub prośbę o wizualną demonstrację funkcji aplikacji opartą na CSS.

Raport z testu

Zbudowano tę samą animację 'oznacz zadanie jako ukończone' dwukrotnie i obie wyrenderowano na żywo w przeglądarce: obowiązkowe zasady umiejętności (JS tylko przełączający klasy, ukryty element opacity+visibility, sprężyste wygładzanie, przejście tokenów języka projektowania) wygenerowały warstwę dopracowania z zaznaczeniem/odznaką/kursorem, której brakowało w modelu bazowym (inline JS, brak tokenów, liniowe zanikanie) — konkretna, zrzutowana różnica, a nie tylko twierdzenie.

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

Instalacja

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

Komendy i przykładowe prompty

/css-animationGeneruje samodzielne animacje demonstracyjne funkcji HTML/CSS i karuzele.

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

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

Pełny raport →