anton-abyzovanton-abyzov/vskill/.claude/skills/lottie/SKILL.md

lottie

Skill48 starsChanged 6 months agoMITView on GitHub

Lottie and dotLottie adapter patterns for HyperFrames. Use when embedding lottie-web JSON animations, .lottie files, @lottiefiles/dotlottie-web players, registering instances on window.__hfLottie, or making After Effects exports deterministic in HyperFrames.

We split this skill into the rules it gives an agent

4 rules. 3 are common, 0 are distinctive, and 1 is very specific to this project.

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

Common
Distinctive
Very specific

Very specific:
Prefer loop: false unless the user explicitly wants a loop.
line 15
Common:
Keep the Lottie container dimensions stable with CSS.
line 17
Common:
After Effects exports that are already known to render correctly in lottie-web.
line 88
Common:
After editing a Lottie composition:
line 101

“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

Lottie for HyperFrames

HyperFrames can seek both lottie-web and dotLottie players through its lottie runtime adapter. Lottie is a strong fit because the animation timeline is already encoded in the asset; HyperFrames only needs a player object it can seek.

Contract

Load assets from local project files, usually under assets/.
Set autoplay: false.
Prefer loop: false unless the user explicitly wants a loop.
Register every returned animation or player on window.__hfLottie.
Keep the Lottie container dimensions stable with CSS.

The adapter seeks lottie-web with goToAndStop(timeMs, false) and dotLottie with frame or percentage APIs depending on player shape.

lottie-web Pattern

<div id="logo-lottie" class="lottie-layer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
  const anim = lottie.loadAnimation({
    container: document.getElementById("logo-lottie"),
    renderer: "svg",
    loop: false,
    autoplay: false,
    path: "assets/logo-reveal.json",
  });

  window.__hfLottie = window.__hfLottie || [];
  window.__hfLottie.push(anim);
</script>

.lottie-layer {
  width: 100%;
  height: 100%;
}

dotLottie Pattern

<canvas id="product-lottie" class="lottie-canvas"></canvas>
<script src="https://unpkg.com/@lottiefiles/dotlottie-web"></script>
<script>
  const player = new DotLottie({
    canvas: document.getElementById("product-lottie"),
    src: "assets/product-flow.lottie",
    autoplay: false,
    loop: false,
  });

  window.__hfLottie = window.__hfLottie || [];
  window.__hfLottie.push(player);
</script>

.lottie-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

Multiple Animations

Push each player into the same registry:

window.__hfLottie = window.__hfLottie || [];
window.__hfLottie.push(backgroundAnim);
window.__hfLottie.push(iconAnim);
window.__hfLottie.push(confettiAnim);

HyperFrames seeks them all to the same composition time.

Good Uses

After Effects exports that are already known to render correctly in lottie-web.
Logo reveals, icon loops, decorative accents, and product UI motion.
Translating Remotion Lottie usage into plain HyperFrames HTML.

Avoid

Relying on remote path URLs at render time.
Starting playback with play().
Assuming unsupported After Effects effects will survive export. Test the JSON or .lottie file in a browser first.
Loading a player asynchronously and registering it after HyperFrames validation has already inspected the page.

Validation

After editing a Lottie composition:

npx hyperframes lint
npx hyperframes validate

Credits And References

HyperFrames adapter source: packages/core/src/runtime/adapters/lottie.ts.
lottie-web by Airbnb: https://github.com/airbnb/lottie-web
lottie-web loadAnimation options: https://github.com/airbnb/lottie-web/wiki/loadAnimation-options
dotLottie web player methods by LottieFiles: https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/methods

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
Mindrally/skills★ 275same 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 5 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
- nicolas-webdevSkill
  landing-page
  Architecture and copywriting framework for high-converting landing pages. Use when building landing pages, sales pages, product pages, or lead capture pages. Follows a proven 8-section structure optimized for conversions.
  Also in 3 projects that use this
- silvainfmSkill
  copy-editing
  When the user wants to edit, review, or improve existing marketing copy. Also use when the user mentions 'edit this copy,' 'review my copy,' 'copy feedback,' 'proofread,' 'polish this,' 'make this better,' or 'copy sweep.' This skill provides a systematic approach to editing marketing copy through multiple focused passes.
  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
- 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
In this repository30 other files it gives its agents.
- obsidian-brainSkill
- animejsSkill
- css-animationsSkill
- greet-anton-abyzovSkill
- gsapSkill
- higgsfield-seedanceSkill
- hyperframes-cliSkill
- hyperframes-mediaSkill
- hyperframes-registrySkill
- hyperframesSkill
- 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.

Reviews can't be read right now.

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

4 rules. 3 are common, 0 are distinctive, and 1 is very specific to this project.

Lottie for HyperFrames

Contract

lottie-web Pattern

dotLottie Pattern

Multiple Animations

Good Uses

Avoid

Validation

Credits And References

Word for word · 0

Edited · 7

Wrote their own version · 1

contribute-catalog

typegpu

landing-page

copy-editing

apple-design

impeccable

Does it work?

Your trail

Now do this for your own.