Lottie motion builder
Skill markoblogo/abvx-agent-skills/skills/lottie-motion-builder
Reviewable capability layer for coding agents. Portable skills, delivery gates, workflow patterns, and verification-first engineering.
npx -y skills add markoblogo/abvx-agent-skills --skill lottie-motion-builderAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Build or refine small production-ready Lottie animations from SVGs, logos, UI states, loaders, and branded motion assets with a local preview harness, explicit inputs, and output verification. Use when the user asks for Lottie, JSON animation, SVG reveal animation, logo animation, or lightweight motion assets for product surfaces.
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
3.1 KB, as published. Nobody here has run it
Lottie Motion Builder
Use Lottie for small deployable motion assets, not for full cinematic motion-design work.
Good Fits
- SVG path reveal
- logo or wordmark animation
- loader, empty-state, success-state, and transition animation
- small branded motion element for web, mobile, or app onboarding
Do Not Use It For
- long character animation
- complex scene choreography
- vague "make it cool" requests with no asset grounding
- motion work that does not need to ship as Lottie JSON
Required Inputs
Before building, lock these down:
- source asset: SVG, screenshot, logo, icon, or concrete visual reference;
- target surface: landing page, app UI, loader, hero accent, onboarding, etc.;
- duration and loop behavior;
- target runtime: web, React Native, iOS, Android, or generic Lottie JSON;
- editable controls needed at runtime: background, color, size, stroke, speed, etc.
If the user gives only a vague motion request, ask for or derive one concrete asset first.
Harness Rule
Use the external diffusionstudio/lottie harness rather than inventing a custom player.
- Read references/external-harness.md before setup.
- Bootstrap or refresh the harness with
scripts/bootstrap_harness.sh. - Keep generated animation files inside the harness project while iterating.
- Treat the upstream harness as the rendering contract for preview and slot behavior.
Workflow
- Confirm the asset, target surface, duration, loop mode, and runtime target.
- Bootstrap the external harness if needed.
- Generate or edit
public/lottie.jsonin the harness project. - Expose at least one background-color control and any explicitly requested controls.
- Run the local preview and visually verify the result.
- Run
motion-review-gatewhen the asset is meant for a product UI surface rather than a throwaway demo. - Export the usable artifact set and summarize how to embed it.
Output Contract
Produce these artifacts when the user asks for a usable result:
animation.jsonor the finallottie.json;- one visual verification artifact: screenshot, gif, or short mp4;
- a short embed note for the target runtime;
- any runtime-editable controls used by the animation.
Verification
- The JSON parses in the harness.
- The motion is visible and not blank.
- Loop points are intentional.
- Background control exists.
- Dimensions, duration, and FPS match the request.
- The asset is small enough for the intended product surface.
- Product-surface motion has passed
motion-review-gateor the exception is stated.
Reporting
In the final report, include:
- source asset used;
- output path;
- preview path or URL;
- runtime target;
- controls exposed;
- known limitations.