AvagyanAren

UI Demo Animations Skill — Design skill for Claude Code

Design community

Claude skill for animated product-interface demos on landing pages: real Figma screens, a scripted cursor that hovers and clicks, scene transitions and scroll micro-animations.

How to install UI Demo Animations Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open AvagyanAren/ui-demo-animations-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What UI Demo Animations Skill does

Claude skill for animated product-interface demos on landing pages: real Figma screens, a scripted cursor that hovers and clicks, scene transitions and scroll micro-animations. Faithful to your design, gap-fills only what is missing and tells you what it added.

Alternatives in Design

Slack GIF Creator — Create animated GIFs optimized for Slack's size constraints 94.1k ★
Scroll Craft — Claude Code skill for premium scroll-driven websites 1k ★
Scroll World — Claude Code skill/plugin: immersive scroll-scrubbed 'fly through the world' landing pages generated with Higgs 537 ★

README

UI Demo Animations

**Version 1.0.0** · [Changelog](CHANGELOG.md)

**A skill for Claude that turns real app screens into short animated product demos for your website.**

A cursor moves across your interface, opens a dropdown, ticks a checkbox, presses a button, and the screen reacts. Around it, the page gets calm micro-animations: elements fade in as you scroll, numbers count up, an active menu item slides to the next one.

*Русская версия — [ниже](#по-русски).*

Who is this for

Designers and founders who have screens in Figma and want a landing page that shows the product in action, not just screenshots.
Developers who build such pages with React/CSS and want Claude to follow the same rules every time.

You do not need to know animation tools. You describe what you want, give a Figma link, and Claude does the rest following the skill.

What you get

You ask for	Claude builds
"Animate this screen on the landing" + a Figma link	The exact screen with a scripted cursor story: move, hover, press, result
"Show buyer and supplier views"	Several windows playing their own stories, then a smooth hand-over to the next scene
"Add micro-animations"	Reveal on scroll, count-up numbers, sliding indicators, cross-fades between states
"Show how a contract goes from approval to sent"	Real frames of each state, cross-fading with clickable step chips

The one rule that matters

**What you provide is reproduced exactly. Only what is missing is invented, and Claude tells you what it invented.**

You give a Figma link, a node or an exact request: the screen is built as designed. Same layout, texts, icons, colors. Nothing added, nothing reworded.
You ask for something but did not provide it: Claude fills the gap in the style of your existing screens, keeps it minimal, and lists it at the end so you can check it.
Not sure if something is wanted: Claude leaves it out and asks.

This rule exists because made-up interfac