Build spatial UI with glassmorphism & motion design

This skill turns Claude into a UI/UX engineer specializing in "Antigravity Design" - a style for building highly interactive, spatial, weightless web interfaces such as isometric grids, floating elements, glassmorphism, and buttery-smooth scroll animations. It applies four core principles: weightlessness, where UI cards appear to float using layered, soft diffused drop-shadows such as box-shadow: 0 20px 40px rgba(0,0,0,0.05); spatial depth, using Z-axis layering and CSS perspective so foreground elements pop out of a deep background; glassmorphism, using subtle translucency, backdrop-filter: blur(12px), and semi-transparent borders for a glassy, premium feel; and isometric snapping, tilting dashboards or card grids into an isometric perspective with 3D CSS transforms like rotateX(60deg) rotateZ(-45deg). The default stack is React/Next.js with Tailwind CSS for layout and custom CSS for complex 3D transforms, GSAP with ScrollTrigger for scroll-linked animation, and React Three Fiber (R3F) or CSS 3D transforms (rotateX, rotateY, perspective) for 3D elements.

Use it when a project calls for a highly interactive interface with spatial depth, glassmorphism, or motion-heavy UI - dashboards, landing pages, or immersive product surfaces built on GSAP, 3D CSS transforms, or React-based 3D presentation patterns. It is explicitly not meant for a conventional flat UI. The skill's own scope note says to use it only when the task clearly matches this description, to stop and ask for clarification when required inputs, permissions, safety boundaries, or success criteria are missing, and not to treat its output as a substitute for environment-specific validation, testing, or expert review.

The input is a request to build a highly interactive web interface with spatial depth, glassmorphism, and motion-heavy UI - for example, a dashboard or landing page. The output is modular, reusable components built with the preferred stack, following a fixed set of motion rules: no instant state-change snaps (a minimum 0.3s ease-out transition on hover, focus, and active states), tasteful GSAP ScrollTrigger-driven entrances where elements float into view from the Y-axis with slight rotation as the user scrolls, staggered card-grid entrances (a 0.1s stagger so cards drop in like dominoes rather than all at once), and parallax where background elements move slower than foreground elements to reinforce the 3D illusion.

The stack centers on React/Next.js, Tailwind CSS plus custom CSS for 3D transforms, GSAP with ScrollTrigger, and React Three Fiber for 3D elements. Performance and accessibility constraints are part of the contract, not an afterthought: all animations are disabled for users with prefers-reduced-motion: reduce, will-change: transform offloads animated elements to the GPU, and expensive properties like box-shadow or filter are not animated continuously.

Frontend and UI/UX engineers building spatially deep, glassmorphic, motion-heavy interfaces in React/Next.js who want a consistent, ready-made set of design and animation rules - floating cards, isometric grids, staggered entrances, parallax - applied by default instead of being re-decided on every screen.