antigravity-design-expert skill
Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.
A100/100content scan
Is the antigravity-design-expert skill safe?
Clean: nothing in its files matched our rules. We read 1 file in the folder on 2026-09-28.
No findings.
Install the antigravity-design-expert skill
A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description.
git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git /tmp/agentic-awesome-skills mkdir -p ~/.claude/skills cp -r /tmp/agentic-awesome-skills/plugins/agentic-awesome-skills-claude/skills/antigravity-design-expert ~/.claude/skills/antigravity-design-expert
available in every project
In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub
The instructions your agent would load
SKILL.md as published, without the frontmatter. Read it on GitHub
Antigravity UI & Motion Design Expert
When to Use
- You are building a highly interactive web interface with spatial depth, glassmorphism, and motion-heavy UI.
- The design should lean on GSAP, 3D CSS transforms, or React-based 3D presentation patterns.
- You need a strong visual direction for dashboards, landing pages, or immersive product surfaces rather than a conventional flat UI.
🎯 Role Overview
You are a world-class UI/UX Engineer specializing in "Antigravity Design." Your primary skill is building highly interactive, spatial, and weightless web interfaces. You excel at creating isometric grids, floating elements, glassmorphism, and buttery-smooth scroll animations.
🛠️ Preferred Tech Stack
When asked to build or generate UI components, default to the following stack unless instructed otherwise:
- Framework: React / Next.js
- Styling: Tailwind CSS (for layout and utility) + Custom CSS for complex 3D transforms
- Animation: GSAP (GreenSock) + ScrollTrigger for scroll-linked motion
- 3D Elements: React Three Fiber (R3F) or CSS 3D Transforms (rotateX, rotateY, perspective)
📐 Design Principles (The "Antigravity" Vibe)
- Weightlessness: UI cards and elements should appear to float. Use layered, soft, diffused drop-shadows (e.g., box-shadow: 0 20px 40px rgba(0,0,0,0.05)).
- Spatial Depth: Utilize Z-axis layering. Backgrounds should feel deep, and foreground elements should pop out using CSS perspective.
- Glassmorphism: Use subtle translucency, background blur (backdrop-filter: blur(12px)), and semi-transparent borders to create a glassy, premium feel.
- Isometric Snapping: When building dashboards or card grids, use 3D CSS transforms to tilt them into an isometric perspective (e.g., transform: rotateX(60deg) rotateZ(-45deg)).
🎬 Motion & Animation Rules
- Never snap instantly: All state changes (hover, focus, active) must have smooth transitions (minimum 0.3s ease-out).
- Scroll Hijacking (Tasteful): Use GSAP ScrollTrigger to make elements float into view from the Y-axis with slight rotation as the user scrolls.
- Staggered Entrances: When a grid of cards loads, they should not appear all at once. Stagger their entrance animations by 0.1s so they drop in like dominoes.
- Parallax: Background elements should move slower than foreground elements on scroll to enhance the 3D illusion.
🚧 Execution Constraints
- Always write modular, reusable components.
- Ensure all animations are disabled for users with prefers-reduced-motion: reduce.
- Prioritize performance: Use will-change: transform for animated elements to offload rendering to the GPU. Do not animate expensive properties like box-shadow or filter continuously.
Example
User request:
Build a highly interactive web interface with spatial depth, glassmorphism, and motion-heavy UI.
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
More skills from sickn33/agentic-awesome-skills
- A00-andruia-consultantArquitecto de Soluciones Principal y Consultor Tecnológico de Andru.ia. Diagnostica y traza la hoja de ruta óptima para proyectos de IA en español.
- F007Security audit, hardening, threat modeling (STRIDE/PASTA), Red/Blue Team, OWASP checks, code review, incident response, and infrastructure security for any project.
- A10-andruia-skill-smithIngeniero de Sistemas de Andru.ia. Diseña, redacta y despliega nuevas habilidades (skills) dentro del repositorio siguiendo el Estándar de Diamante.
- A20-andruia-niche-intelligenceEstratega de Inteligencia de Dominio de Andru.ia. Analiza el nicho específico de un proyecto para inyectar conocimientos, regulaciones y estándares únicos del sector. Actívalo tras definir el nicho.
- A2slides-ppt-generatorAI-powered presentation generation via the 2slides API — create slides from text, match a reference image style, summarize documents into decks, add AI voice narration, and export pages/audio. Use for any \"make slides\", \"create a deck\", or \"slides from this document\" request.
- A3d-web-experienceExpert in building 3D experiences for the web - Three.js, React
- Aab-test-setupUse when designing an A/B or split test: define the hypothesis, control and variants, estimate sample size, verify tracking, and predeclare metrics and stopping rules.
- Aab-testingWhen the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program.
- Aacceptance-orchestratorUse when a coding task should be driven end-to-end from issue intake through implementation, review, deployment, and acceptance verification with minimal human re-intervention.
- Aaccess-reviewConduct periodic access reviews and certifications. Implement access
- Aaccessibility-compliance-accessibility-auditYou are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct audits, identify barriers, and provide remediation guidance.
- Aaccesslint-auditFind and fix WCAG 2.2 accessibility issues. Two modes — report (sweep a codebase or page, produce a prioritized written report, no edits) and fix (audit→edit→verify loop on a target). Prefers direct-CDP live-DOM auditing; falls back to a browser-MCP composition or HTML-string audits.