anton-abyzovanton-abyzov/vskill/.claude/skills/css-animations/SKILL.md

css-animations

Skill48 starsChanged 6 months agoMITView on GitHub

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

We split this skill into the rules it gives an agent

6 rules. 4 are common, 0 are distinctive, and 2 are very specific to this project.

4
Common
Most of the 8 edited versions we read keep these.
0
Distinctive
This author's own choices. Worth a look.
2
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Common:
Put the animated element in the DOM before runtime initialization finishes.
line 15
Very specific:
Use finite animation-duration and animation-iteration-count because the negative-delay fallback cannot represent unbounded duration in …
line 17
Very specific:
Prefer animation-fill-mode: both so seeked states hold before and after active motion.
line 18
Common:
Avoid wall-clock JavaScript, hover-triggered state, and class toggles that depend on user events.
line 19
Common:
Use CSS custom properties to avoid duplicating keyframes:
line 65
Common:
After editing CSS animation compositions:
line 114

“Common” is measured: kept by at least 6 in 10 of the 8 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

CSS Animations for HyperFrames

HyperFrames can seek CSS keyframe animations through its css runtime adapter. Use this for simple repeated motifs, background motion, shimmer, glow, masks, and non-sequenced decoration.

For scene choreography, GSAP is usually clearer. CSS animations work best when the motion belongs to one element and has a fixed duration.

Contract

Put the animated element in the DOM before runtime initialization finishes.
Give timed elements a data-start value so local animation time matches the clip.
Use finite animation-duration and animation-iteration-count because the negative-delay fallback cannot represent unbounded duration in environments without WAAPI-backed CSS animations.
Prefer animation-fill-mode: both so seeked states hold before and after active motion.
Avoid wall-clock JavaScript, hover-triggered state, and class toggles that depend on user events.

The adapter discovers elements with computed animation-name, seeks their browser Animation handles when available, and falls back to pausing with negative animation-delay.

Basic Pattern

<div
  id="pulse-ring"
  class="clip pulse-ring"
  data-start="0"
  data-duration="4"
  data-track-index="2"
></div>

<style>
  .pulse-ring {
    width: 280px;
    height: 280px;
    border: 4px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation-name: pulse-ring;
    animation-duration: 1200ms;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
    animation-iteration-count: 3;
    animation-fill-mode: both;
  }

  @keyframes pulse-ring {
    from {
      opacity: 0;
      transform: scale(0.82);
    }
    35% {
      opacity: 1;
    }
    to {
      opacity: 0;
      transform: scale(1.18);
    }
  }
</style>

Stagger Pattern

Use CSS custom properties to avoid duplicating keyframes:

<div class="clip dots" data-start="1" data-duration="3" data-track-index="3">
  <span style="--i: 0"></span>
  <span style="--i: 1"></span>
  <span style="--i: 2"></span>
</div>

<style>
  .dots span {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    border-radius: 50%;
    background: currentColor;
    animation: dot-pop 900ms ease-out both;
    animation-delay: calc(var(--i) * 120ms);
  }

  @keyframes dot-pop {
    from {
      opacity: 0;
      transform: translateY(18px) scale(0.75);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
</style>

Good Uses

Decorative loops with a known repeat count.
Mask, glow, shimmer, grain, and subtle parallax layers.
Simple one-element entrances where a full JS timeline would be excessive.

Avoid

Infinite CSS animations unless you have verified the browser exposes seekable WAAPI-backed CSS animation handles. Prefer a finite iteration count covering the visible duration.
Animating layout properties like top, left, width, or height when transforms work.
Relying on hover, focus, scroll, or media queries to trigger render-critical motion.
Changing animation classes after startup unless another deterministic timeline controls that change.

Validation

After editing CSS animation compositions:

npx hyperframes lint
npx hyperframes validate

Credits And References

HyperFrames adapter source: packages/core/src/runtime/adapters/css.ts.
MDN CSS animation documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation
MDN animation-fill-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

Download now (ZIP)

Other versions8 projects use a version of this.
Word for word · 0
None found.
Edited · 7
boraoztunc/skills★ 337100% same
delorenj/skills★ 16100% same
hoanghd218/claude-code-2-days★ 8100% same
SkotAlexsander/skills★ 1100% same
Biznomad/claude-skills★ 0100% same
Fldicoahkiin/WalDrive★ 0100% same
florattu/claude-skills★ 0100% same
Wrote their own version · 1
HamedMP/matrix-os★ 82same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
Used alongsideProjects with it also use contribute-catalog, typegpu and 4 more.
Other files people use alongside this one.
- FldicoahkiinSkill
  contribute-catalog
  Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.
  Also in 3 projects that use this
- software-mansion-labsSkill
  typegpu
  TypeGPU is type-safe WebGPU in TypeScript. Use whenever the user writes, debugs, or designs TypeGPU code: 'use gpu' shader functions, tgpu.fn, buffers, textures, bind groups, compute and render pipelines, command encoders, render passes, render bundles, vertex layouts, slots, accessors, @typegpu/react hooks (useRoot, useFrame, useUniform), React Native worklet rendering, and any TypeGPU API. Shader logic and CPU-side resources are tightly coupled - handle both sides here even if the user only mentions one (e.g. "how do I write a shader", "how do I create a buffer"). Trigger on any mention of typegpu, tgpu, "use gpu", TypedGPU, or WebGPU code written using TypeGPU's schema API (d.*, tgpu.*, std.*). Do NOT trigger for raw WebGPU (using GPUDevice/GPURenderPipeline directly without tgpu), WGSL-only questions, Three.js, Babylon.js, or WebGL.
  Also in 3 projects that use this
- ozgureyilmazSkill
  apple-design
  Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.
  Also in 3 projects that use this
- VercelSkill
  emil-design-eng
  This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
  Also in 3 projects that use this
- MicrosoftSkill
  impeccable
  Use when the user wants to design, redesign, shape, critique, audit, polish, simplify, harden, animate, or otherwise improve a frontend interface: websites, landing pages, dashboards, product UI, components, forms, settings, onboarding, empty states, and native iOS or Android screens. Handles UX review, hierarchy, layout, typography, color, motion, UX copy, accessibility, responsive behavior, edge cases, and capturing or documenting design systems (DESIGN.md, tokens). Also for making bland UI bolder, loud UI quieter, or ambitious visual effects. Not for backend-only or non-UI tasks.
  Also in 3 projects that use this
- BlockSkill
  frontend-design
  Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
  Also in 3 projects that use this
In this repository30 other files it gives its agents.
- obsidian-brainSkill
- animejsSkill
- greet-anton-abyzovSkill
- gsapSkill
- higgsfield-seedanceSkill
- hyperframes-cliSkill
- hyperframes-mediaSkill
- hyperframes-registrySkill
- hyperframesSkill
- lottieSkill
- obsidian-brainSkill
- private-skillSkill
- remotion-to-hyperframesSkill
- scoutSkill
- slack-messagingSkill
- stub-skill-76f6713eSkill
- tailwindSkill
- threeSkill
- waapiSkill
- website-to-hyperframesSkill
- excalidraw-mcpSkill
- greet-anton-abyzovSkill
- greet-elenaSkill
- handoffSkill
- hi-atlantisSkill
- html-reportSkill
- hyperframes-best-practicesSkill
- motion-graphics-promoSkill
- reaSkill
- remotion-best-practicesSkill

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free

6 rules. 4 are common, 0 are distinctive, and 2 are very specific to this project.

CSS Animations for HyperFrames

Contract

Basic Pattern

Stagger Pattern

Good Uses

Avoid

Validation

Credits And References

Word for word · 0

Edited · 7

Wrote their own version · 1

contribute-catalog

typegpu

apple-design

emil-design-eng

impeccable

frontend-design

Does it work?

No reviews yet

Your trail

Now do this for your own.