Guide · Agent skill
How to use the Antigravity UI Motion Designer agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The antigravity-design-expert skill is a set of instructions that tells an AI agent to build web interfaces in a specific visual style: floating cards, frosted-glass panels, isometric tilted grids and scroll-linked motion. It is aimed at front-end developers and designers who want a spatial, motion-heavy landing page or dashboard prototype without starting from scratch. By the end of this guide you will know how to install the skill, how to phrase requests so the agent uses it, and what to check before you ship the result.
Antigravity UI Motion Designersickn33/agentic-awesome-skills · MIT Download the skill Quick start
- 1Download and unzip. Download the skill ZIP from this page and unzip it to get the antigravity-design-expert folder containing SKILL.md.
- 2Place the folder. Move the folder into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project.
- 3Or upload in the Claude apps. In the Claude apps, open Settings → Capabilities → Skills and upload the skill instead.
- 4Check your project stack. Confirm you have Node.js and a React or Next.js project with Tailwind CSS and GSAP ScrollTrigger available.
- 5Make a specific request. Describe the surface, the visual direction and any motion you want, such as isometric cards or scroll-linked entrances.
- 6Review and test. Read the generated components, check reduced-motion behaviour and keyboard navigation, and test in your environment.
What is an agent skill and what does this one make the agent do?
An agent skill is a folder containing a SKILL.md file. The file gives an AI agent extra instructions it loads when a request matches the skill's scope. This skill, named antigravity-design-expert, is the source file for the Antigravity UI & Motion Design Expert.
When it is active, the agent defaults to a particular stack and style. It uses React or Next.js, Tailwind CSS for layout, GSAP with ScrollTrigger for scroll-linked motion, and either React Three Fiber or CSS 3D transforms for depth. Its design rules call for soft layered shadows so cards appear to float, background blur with semi-transparent borders for glass panels, and isometric tilts such as rotateX and rotateZ for dashboards and card grids.
- Floating cards with layered, soft drop-shadows
- Frosted-glass (glassmorphism) panels using backdrop-filter blur
- Isometric tilted grids built with 3D CSS transforms
- Scroll-linked animations where elements float in from the Y-axis with slight rotation
- Staggered card entrances at 0.1s intervals
- Parallax, with background layers moving slower than foreground layers
Install the skill from the ZIP or the Claude apps
Download the ZIP of the skill from this page and unzip it. For Claude Code, place the resulting folder in ~/.claude/skills/ to make it available across your projects, or in a project's .claude/skills/ folder to limit it to that project.
If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills. Either way, the folder should contain SKILL.md, the only file listed for this skill.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project folder
- Claude apps: Settings → Capabilities → Skills
Trigger the skill with a natural request
The skill is meant for tasks that clearly match its scope. Describe the visual direction you want in plain terms, and mention the kind of surface you are building. The skill's own example request is a good template.
Ask for the specific parts you care about, such as a dashboard with isometric cards, a landing page with scroll-linked entrances, or a glass pricing panel. If you say nothing about a stack, the skill defaults to React or Next.js with Tailwind CSS and GSAP. If your project uses something else, say so in the request.
- Example: "Build a highly interactive web interface with spatial depth, glassmorphism, and motion-heavy UI."
- Example: "Make a dashboard where the metric cards sit in an isometric grid and drop in one after another on load."
- Example: "Create a product landing page with floating feature cards that animate in as the user scrolls, using GSAP ScrollTrigger."
Check what you need before you start
The skill assumes a Node.js and React or Next.js project. It also expects Tailwind CSS and GSAP with ScrollTrigger. React Three Fiber is only needed if you choose 3D elements built that way rather than CSS 3D transforms.
If your project does not use React, Next.js or GSAP, the output will need significant rework. The skill is not a replacement for testing, so plan time to run and review what the agent produces.
- Node.js and a React / Next.js project
- Tailwind CSS
- GSAP with ScrollTrigger
- React Three Fiber, only if you use 3D elements built with it
Safety notes: scripts and network access
This skill runs no scripts and uses no network access, according to its listing. It is a set of written instructions, so the code the agent writes still runs in your own project. Review generated code before you run it, especially any dependencies the agent asks you to add.
The skill also has limits. It says it is not a substitute for environment-specific validation, testing or expert review. It tells the agent to stop and ask for clarification when inputs or success criteria are missing.
- Runs scripts: no
- Uses network: no
- Review generated code and added packages before running them
- Test in your own environment before any production use
Tips for better results and accessible output
The skill includes accessibility and performance rules. Animations are supposed to be disabled for users with prefers-reduced-motion: reduce, and reduced-motion users should receive static states. It also says to keep focus and validation feedback visible, and to preserve native scrolling and keyboard navigation.
Heavy 3D tilt and motion can still hurt readability for some users, and the skill only partly mitigates this. Ask the agent to check the reduced-motion path and the text contrast of glass panels explicitly. Keep the performance rules in mind: will-change should be applied only around measured animations and removed afterward, and box-shadow or filter should not be animated continuously.
- Ask for reduced-motion handling explicitly in your request
- Keep text-heavy content on flat, high-contrast surfaces
- Ask the agent to build modular, reusable components, as the skill requires
- Measure performance before keeping will-change on elements
What people use it for
- A developer prototyping a motion-heavy landing page with floating feature cards that animate on scroll.
- A designer exploring a glassmorphism dashboard and wanting working React code for the direction.
- A team building an immersive product showcase with 3D tilted card grids.
- A front-end engineer adding staggered card entrances to an existing Next.js grid.
Frequently asked questions
Is the antigravity-design-expert skill free to use?
The skill is listed under the MIT licence. Check the licence file in the source repository for the full terms before reusing the code in a commercial product.
How do I install the antigravity-design-expert skill?
Download the ZIP from this page and unzip it. Place the folder in ~/.claude/skills/ or in a project's .claude/skills/ folder, or upload it in the Claude apps under Settings → Capabilities → Skills.
What do I need to run the skill's output?
You need Node.js and a React or Next.js project. The default stack also uses Tailwind CSS and GSAP with ScrollTrigger, and React Three Fiber only if you choose 3D elements built with it.
Does the skill run scripts or access the internet?
According to its listing, the skill runs no scripts and uses no network access. It consists of a SKILL.md instruction file.
Can I use this skill with Vue, Svelte or plain HTML?
The skill assumes React or Next.js with GSAP by default, so projects on other stacks would need significant rework. You can ask the agent for a different stack, but the skill's own guidance is built around the default.
Why does my output look too busy or hard to read?
Heavy 3D tilt and motion can harm readability and usability for some users, and the skill only partly mitigates this. Ask for flatter text surfaces, higher contrast and explicit reduced-motion handling in your request.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or designer who wants a spatial, glassmorphism-style landing page or dashboard prototype built on React or Next.js with GSAP. Pick something else if your interface is text-focused or accessibility-critical, if your stack is not React or GSAP, or if you need production-ready code without your own testing and expert review.
Download the skill