Skip to content
Get packs

Antigravity UI Motion Designer

Guides the agent to build floating, glassmorphism-style web UIs with GSAP and 3D CSS motion.

Source Download skill
Repository
sickn33/agentic-awesome-skills
Stars
49,023
Licence
MIT
Files
1 file

What it does

When installed, the agent adopts a specific visual and motion style for web interfaces: floating cards, layered soft shadows, frosted-glass (glassmorphism) panels, isometric tilted grids, and scroll-linked animations. It defaults to React or Next.js with Tailwind CSS, GSAP with ScrollTrigger, and either React Three Fiber or CSS 3D transforms. It also includes accessibility and performance rules, such as disabling animation for users who prefer reduced motion and avoiding continuous animation of expensive properties.

Great for

  • Front-end developers who want a spatial, motion-heavy landing page or dashboard prototype quickly
  • Designers exploring a glassmorphism or 3D-depth visual direction and needing working code for it
  • Teams building immersive product showcases rather than conventional flat interfaces

Skip it if

  • Simple, text-focused or accessibility-critical interfaces, since heavy 3D tilt and motion can harm readability and usability for some users (the skill only partly mitigates this)
  • Projects that do not use React/Next.js or GSAP, since the skill assumes that stack by default and the output would need significant rework
  • Production sites without testing, because the skill itself says its output is not a substitute for validation or expert review

Try asking

  • “Build a landing page hero with floating glassmorphism cards and scroll-triggered GSAP entrances”
  • “Create an isometric dashboard grid using CSS 3D transforms with staggered 0.1s card animations”
  • “Make a product showcase with parallax backgrounds and a React Three Fiber 3D element”
Step-by-step guide: how to use Antigravity UI Motion DesignerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    antigravity-design-expert.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip antigravity-design-expert.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip antigravity-design-expert.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name your framework and animation library up front, since the skill defaults to React, Next.js, Tailwind and GSAP.
  • Ask explicitly for reduced-motion handling and keyboard/scroll behavior checks, and test them in a real browser.
  • Specify brand colours and contrast requirements so the glassmorphism styling stays legible.

What's inside

  • SKILL.md

Redistributed unmodified from sickn33/agentic-awesome-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.