pinkpixel-dev/antigravity-design-expert
SKILLS/antigravity-design-expert/SKILL.md
Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.
$ install --global
skillsauthnpx skillsauth add pinkpixel-dev/skills-collection-1 antigravity-design-expertInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 4, 2026, 6:59 PM4.5s1 file scanned
SKILL.md
name: antigravity-design-expert description: Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS. risk: safe source: community date_added: "2026-03-07"
Antigravity UI & Motion Design Expert
🎯 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.1sso 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: transformfor animated elements to offload rendering to the GPU. Do not animate expensive properties likebox-shadoworfiltercontinuously.
Related Skills
pinkpixel-dev/building-threat-hunt-hypothesis-framework
development
VerifiedTrustedCommunity
Build a systematic threat hunt hypothesis framework that transforms threat intelligence, attack patterns, and environmental data into testable hunting hypotheses.
7SKILL.mdUpdated Jul 15, 2026
pinkpixel-dev/building-threat-feed-aggregation-with-misp
development
VerifiedTrustedCommunity
Deploy MISP (Malware Information Sharing Platform) to aggregate, correlate, and distribute threat intelligence feeds from multiple sources for centralized IOC management and automated SIEM integration.
7SKILL.mdUpdated Jul 15, 2026
pinkpixel-dev/building-threat-actor-profile-from-osint
development
VerifiedTrustedCommunity
Build comprehensive threat actor profiles using open-source intelligence (OSINT) techniques to document adversary motivations, capabilities, infrastructure, and TTPs for proactive defense.
7SKILL.mdUpdated Jul 15, 2026
pinkpixel-dev/building-soc-playbook-for-ransomware
development
VerifiedTrustedCommunity
Builds a structured SOC incident response playbook for ransomware attacks covering detection, containment, eradication, and recovery phases with specific SIEM queries, isolation procedures, and decision trees. Use when SOC teams need formalized response procedures for ransomware incidents aligned to NIST SP 800-61 and MITRE ATT&CK ransomware techniques.
7SKILL.mdUpdated Jul 15, 2026