agentleFS
Sign inStart free
romanveselovskiromanveselovski/agents-frontend-rules/skills/antigravity-design-expert/SKILL.md

antigravity-design-expert

Skill0 starsChanged 2 months agoMITView on GitHub

Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.

1 other project uses a version of this.

Adopted by

Most recently taken up by

  • Other versions1 project uses a version of this.

    Word for word · 1

    1. romanveselovski/ru-agents-frontend-rules★ 0100% same

    Edited · 0

    None found.

    Wrote their own version · 0

    None found.

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

  • In this repository7 other files it gives its agents.

The file

We split this skill into the rules it gives an agent

11 rules. About 0 are common, 6 are distinctive, and 5 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈6

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 5

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    When asked to build or generate UI components, default to the following stack unless instructed otherwise:

    line 24
  2. Very specific:

    Glassmorphism: Use subtle translucency, background blur (backdrop-filter: blur(12px)), and semi-transparent borders to create a glassy, …

    line 35
  3. Very specific:

    Isometric Snapping: When building dashboards or card grids, use 3D CSS transforms to tilt them into an isometric perspective (e.g., …

    line 36
  4. Very specific:

    Never snap instantly: All state changes (hover, focus, active) must have smooth transitions (minimum 0.3s ease-out).

    line 40
  5. Distinctive:

    Scroll Hijacking (Tasteful): Use GSAP ScrollTrigger to make elements float into view from the Y-axis with slight rotation as the user …

    line 41
  6. Very specific:

    Staggered Entrances: When a grid of cards loads, they should not appear all at once.

    line 42
  7. Distinctive:

    Always write modular, reusable components.

    line 47
  8. Very specific:

    Ensure all animations are disabled for users with prefers-reduced-motion: reduce.

    line 48
  9. Distinctive:

    Use this skill only when the task clearly matches the scope described above.

    line 52
  10. Distinctive:

    Do not treat the output as a substitute for environment-specific validation, testing, or expert review.

    line 53
  11. Distinctive:

    Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

    line 54

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

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.

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.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free