Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →athevon/css-native
Zero-dependency animations and visual techniques - scroll-driven, View Transitions, @starting-style, modern CSS.
Passed 20 of 22 test cases with the skill, and 18 of 22 without it.
2 fixed18 passed either way2 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
A newer attempt on gemini-3.6-flash on 10/4/2026 did not produce a publishable comparison (not comparable). The snapshot above is the previously measured run.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
In a single-page app using document.startViewTransition(), I have 10 card components that all need identical view transition group timing functions and durations. Instead of writing separate ::view-transition-group selectors for 10 individual IDs, what modern CSS selector features can group them together?
| Checked | Without skill | With skill |
|---|---|---|
| Assigns a view-transition-class property to transition elements. | Passed | Passed |
| Targets grouped transition elements using ::view-transition-group(*.class) syntax. | Missed | Passed |
The instructions your model reads when the skill loads.
Version-sensitive. Every API name, SDK gate and browser-support claim below was verified on 2026-09-08 against primary sources. What against, and when, is in
_jutsu/VERSIONS.md. If that date is old, re-verify before acting on a version number.
| Situation | Decision |
|---|---|
| < 3 animations on the page | CSS native |
| Scroll-driven reveal/parallax | CSS native (animation-timeline), always inside @supports (animation-timeline: scroll()) with the content visible by default - no Firefox release support |
Enter/exit from display: none | CSS native (@starting-style + transition-behavior: allow-discrete) |
| Tooltip/popover positioning | CSS native (anchor positioning) |
| Page transitions (MPA or SPA) | CSS native (View Transitions API) |
| Complex multi-step timeline (5+ tweens) | GSAP |
| Stagger across dynamic list (unknown count) | CSS native (animation-delay: calc(sibling-index() * 60ms)), Baseline since Aug 2026. Reach for a library only if the stagger has to be interrupted or re-sequenced at runtime |
| Physics-based spring with interruption | Framer Motion |
| Morph between SVG shapes | GSAP MorphSVG |
Rule of thumb: if you can express it in a @keyframes + one animation-timeline, stay in CSS. The moment you need imperative control, sequence coordination, or runtime values - reach for a library.
Animate based on scroll position of a container.
.progress-bar {
animation: grow-width linear both;
animation-timeline: scroll(root block);
}
@keyframes grow-width {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
test cases passed, vs 18 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.