Frontend Animation | Claude SKill.

I created a Claude skill to generate a single composed HTML file - the animation. You can now create any mock up UI, user flows, etc..

Also, it tries to mimic user behavior and real world behaviors like: Opening a new webpage take little time as compared to a LLM Call.

So it works on a 7 step process:

1. Identify domain & narrative — what story, who's the audience, what's the key insight?
2. Choose best UI representation — what visual makes this clearest?
3. Map the flow — stages, branches, loops, parallel tracks
4. Choose layout tier — single flow / multi-snippet / simulation / mockup
5. Assign timings — paced for the viewer, not for realism
6. Build the HTML — self-contained, vanilla JS only
7. Self-review — run every checklist item before saving

Please give it a try. Star the repo if you liked it.

Github: https://github.com/aayushostwal/frontend-animation/blob/main/SKILL.md

Youtube Tutorial: https://www.youtube.com/watch?v=vqo1mt0O_wc