Does it support accessibility for motion-heavy interfaces?

Yes, the skill enforces constraints to respect 'prefers-reduced-motion' settings to ensure accessibility for all users.

Can I use this for React-based projects?

Absolutely; the skill is optimized for React and Next.js, including support for React Three Fiber (R3F) for advanced 3D presentation.

Is this skill compatible with Tailwind CSS?

Yes, it uses Tailwind CSS for layout and utility foundations while layering custom CSS for advanced 3D transforms and perspective.

Which animation libraries does this skill prioritize?

The skill defaults to GSAP (GreenSock) and ScrollTrigger for high-performance, complex motion sequences and scroll-linked interactions.

What is Antigravity Design?

Antigravity Design is a visual style that emphasizes weightlessness, spatial depth, and glass-like elements using 3D CSS layering and smooth, buttery motion.

Antigravity UI & Motion Design Expert

Name: Antigravity UI & Motion Design Expert
Author: sickn33

bysickn33

•

31,722

•

디자인 도구

Builds immersive, spatial web interfaces featuring glassmorphism, 3D CSS transforms, and sophisticated GSAP motion systems.

This skill transforms Claude into a specialized UI/UX engineer focused on the 'Antigravity Design' aesthetic—a visual language characterized by weightless elements, spatial depth, and glass-like surfaces. It provides expert implementation patterns for complex motion sequences using GSAP and ScrollTrigger, 3D isometric layouts with CSS transforms, and high-performance React components. It is ideal for developers creating premium landing pages, immersive product surfaces, and modern dashboards that require more visual flair than conventional flat UI frameworks provide.

주요 기능

01Applies glassmorphism effects using advanced backdrop-filters and translucent borders.

0231,722 GitHub stars

03Generates complex 3D CSS transforms for isometric grids and tilted card layouts.

04Ensures performance optimization and accessibility for motion-heavy frontend designs.

05Provides high-performance GSAP and ScrollTrigger logic for scroll-linked animations.

06Implements spatial depth and weightless UI elements with layered, soft shadows.

사용 사례

01Implementing sophisticated scroll-linked animations for interactive storytelling websites.

02Creating a premium SaaS dashboard utilizing glassmorphism and isometric interactive cards.

03Developing an immersive product landing page with floating 3D elements and parallax effects.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sickn33/antigravity-awesome-skills antigravity-design-expert

For use in Claude.ai and ChatGPT

주요 기능

01Applies glassmorphism effects using advanced backdrop-filters and translucent borders.

0231,722 GitHub stars

03Generates complex 3D CSS transforms for isometric grids and tilted card layouts.

04Ensures performance optimization and accessibility for motion-heavy frontend designs.

05Provides high-performance GSAP and ScrollTrigger logic for scroll-linked animations.

06Implements spatial depth and weightless UI elements with layered, soft shadows.

사용 사례

01Implementing sophisticated scroll-linked animations for interactive storytelling websites.

02Creating a premium SaaS dashboard utilizing glassmorphism and isometric interactive cards.

03Developing an immersive product landing page with floating 3D elements and parallax effects.