skills.rest
efekrbas
efekrbasCOMMUNITY
Explore all skills by this author →
Website𝕏@efekrbsGitHub

antigravity-design-expert

Design immersive web interfaces with glassmorphism, spatial depth, and motion-driven presentation.

41|5|Updated Sep 30, 2025
Search Tags:#dashboard#ui design#glassmorphism#motion design#gsap#3d css
One-click install
npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill antigravity-design-expert-efekrbas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: antigravity-design-expert
Source: https://github.com/efekrbas/discord-hypesquad-manager/tree/main/.agents/skills/antigravity-design-expert
Command: npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill antigravity-design-expert-efekrbas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design interfaces that feel immersive, premium, and spatial instead of flat and generic, especially when standard layouts need stronger visual hierarchy and motion.

Core Features & Use Cases

  • Glassmorphism UI: Build translucent, layered surfaces with soft blur and subtle borders for a polished modern look.
  • Spatial Depth and Motion: Use isometric tilt, parallax, and staggered entrances to make dashboards and landing pages feel weightless and alive.
  • Use Case: A product team can turn a conventional analytics dashboard into a dramatic, interactive experience that highlights key cards, charts, and calls to action without sacrificing clarity.

Quick Start

Create a floating, glassmorphism-inspired interface with layered depth, smooth animation, and reduced-motion fallbacks.

Frequently Asked Questions about antigravity-design-expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a glassmorphism UI with spatial depth in React?▼

To build a glassmorphism UI with spatial depth in React, you design translucent layered surfaces with soft blur and subtle borders, then apply isometric tilt and parallax to make the interface feel weightless and alive.

What is the best way to add motion-driven presentation to a dashboard?▼

The best way to add motion-driven presentation to a dashboard is using GSAP ScrollTrigger with staggered entrances and transform-based animations to highlight key cards, charts, and calls to action.

Do I need Tailwind CSS and GSAP ScrollTrigger to create floating 3D cards?▼

Yes, creating floating 3D cards with this approach requires React or Next.js, Tailwind CSS, and GSAP ScrollTrigger to execute the transform-based animations and apply the 3D CSS treatment.

How do I ensure reduced-motion-safe transform-based animation on landing pages?▼

To ensure reduced-motion-safe transform-based animation on landing pages, you must implement fallbacks that disable isometric tilt and parallax effects while maintaining the glassmorphism visual hierarchy.

Can I apply isometric layouts and 3D CSS treatment to interactive product surfaces?▼

Yes, you can apply isometric layouts and 3D CSS treatment to interactive product surfaces to turn conventional flat dashboards into dramatic, premium experiences without sacrificing visual clarity.

Related Skills

Explore More Design & Creative Skills→
caobingshengcaobingsheng
1

antigravity-design-expert

Create interactive spatial UI concepts with React, Tailwind CSS, GSAP, and 3D transforms.

Community
Advanced
mberetvasmberetvas

i-overdrive

Implement shaders, spring physics, and scroll-driven reveals for high-performance UI.

Community
Advanced
williamjxjwilliamjxj

web-animations

Implement web animations with Framer Motion, GSAP, and CSS in Next.js/Tailwind projects.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-reduced-motion

Detect CSS animations and transitions lacking prefers-reduced-motion media query coverage.

Community
Intermediate