{"id":"6e0c5806-880e-4b5a-a999-8a28a4cd45a7","shortId":"rvbTQW","kind":"skill","title":"antigravity-design-expert","tagline":"Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.","description":"# Antigravity UI & Motion Design Expert\n\n## When to Use\n- You are building a highly interactive web interface with spatial depth, glassmorphism, and motion-heavy UI.\n- The design should lean on GSAP, 3D CSS transforms, or React-based 3D presentation patterns.\n- You need a strong visual direction for dashboards, landing pages, or immersive product surfaces rather than a conventional flat UI.\n\n## 🎯 Role Overview\n\nYou 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.\n\n## 🛠️ Preferred Tech Stack\n\nWhen asked to build or generate UI components, default to the following stack unless instructed otherwise:\n\n- **Framework:** React / Next.js\n- **Styling:** Tailwind CSS (for layout and utility) + Custom CSS for complex 3D transforms\n- **Animation:** GSAP (GreenSock) + ScrollTrigger for scroll-linked motion\n- **3D Elements:** React Three Fiber (R3F) or CSS 3D Transforms (`rotateX`, `rotateY`, `perspective`)\n\n## 📐 Design Principles (The \"Antigravity\" Vibe)\n\n- **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)`).\n- **Spatial Depth:** Utilize Z-axis layering. Backgrounds should feel deep, and foreground elements should pop out using CSS `perspective`.\n- **Glassmorphism:** Use subtle translucency, background blur (`backdrop-filter: blur(12px)`), and semi-transparent borders to create a glassy, premium feel.\n- **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)`).\n\n## 🎬 Motion & Animation Rules\n\n- **Never snap instantly:** All state changes (hover, focus, active) must have smooth transitions (minimum `0.3s ease-out`).\n- **Scroll Hijacking (Tasteful):** Use GSAP ScrollTrigger to make elements float into view from the Y-axis with slight rotation as the user scrolls.\n- **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.\n- **Parallax:** Background elements should move slower than foreground elements on scroll to enhance the 3D illusion.\n\n## 🚧 Execution Constraints\n\n- Always write modular, reusable components.\n- Ensure all animations are disabled for users with `prefers-reduced-motion: reduce`.\n- 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.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["antigravity","design","expert","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-antigravity-design-expert","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/antigravity-design-expert","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34964 github stars · SKILL.md body (3,087 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-25T00:50:26.351Z","embedding":null,"createdAt":"2026-04-18T21:31:02.711Z","updatedAt":"2026-04-25T00:50:26.351Z","lastSeenAt":"2026-04-25T00:50:26.351Z","tsv":"'-45':284 '0':210,214,215,216 '0.05':217 '0.1':352 '0.3':303 '12px':248 '20px':211 '3d':24,57,64,161,172,180,269,374 '40px':212 '60deg':282 'activ':297 'alway':378 'anim':127,163,287,350,385,404,414 'antigrav':2,26,99,188 'antigravity-design-expert':1 'appear':196,343 'ask':132,457 'axi':223,324 'backdrop':245 'backdrop-filt':244 'background':225,242,361 'base':18,63 'blur':243,247 'border':253 'boundari':465 'box':208,419 'box-shadow':207,418 'build':10,36,105,134,263 'butteri':124 'buttery-smooth':123 'card':192,266,338 'chang':294,401 'clarif':459 'class':94 'clear':432 'complex':160 'compon':138,382 'constraint':377 'continu':423 'convent':84 'core':5 'creat':116,255 'criteria':468 'css':25,58,152,158,179,236,270 'custom':157 'dashboard':74,264 'deep':228 'default':139 'deg':285 'depth':44,219 'describ':436 'design':3,29,52,100,185 'diffus':202 'direct':72 'disabl':387 'domino':359 'drop':204,356 'drop-shadow':203 'e.g':206,279 'eas':306 'ease-out':305 'element':120,173,194,231,316,362,368,405 'engin':7,96 'enhanc':372 'ensur':383 'entranc':333,349 'environ':448 'environment-specif':447 'excel':114 'execut':376 'expens':415 'expert':4,30,453 'feel':227,259 'fiber':176 'filter':246,422 'flat':85 'float':119,198,317 'focus':296 'follow':142 'foreground':230,367 'framework':147 'generat':136 'glassi':257 'glassmorph':17,45,121,238 'glassmorphism-bas':16 'gpu':411 'greensock':165 'grid':118,267,336 'gsap':22,56,164,312 'heavi':49 'high':11,38,106 'hijack':309 'hover':295 'illus':375 'immers':78 'input':462 'instant':291 'instruct':145 'interact':12,39,107 'interfac':20,41,112 'isometr':117,260,277 'land':75 'layer':200,224 'layout':154 'lean':54 'like':358,417 'limit':424 'link':170 'load':339 'make':315 'match':433 'minimum':302 'miss':470 'modular':380 'motion':28,48,171,286,394 'motion-heavi':47 'move':364 'must':298 'need':68 'never':289 'next.js':149 'offload':407 'otherwis':146 'output':442 'overview':88 'page':76 'parallax':360 'pattern':66 'perform':397 'permiss':463 'perspect':184,237,278 'pop':233 'prefer':128,392 'prefers-reduced-mot':391 'premium':258 'present':65 'primari':102 'principl':186 'priorit':396 'product':79 'properti':416 'r3f':177 'rather':81 'react':62,148,174 'react-bas':61 'reduc':393,395 'render':408 'requir':461 'reusabl':381 'review':454 'rgba':213 'role':87 'rotat':327 'rotatex':182,281 'rotatey':183 'rotatez':283 'rule':288 'safeti':464 'scope':435 'scroll':126,169,308,331,370 'scroll-link':168 'scrolltrigg':166,313 'semi':251 'semi-transpar':250 'shadow':205,209,420 'skill':8,103,427 'skill-antigravity-design-expert' 'slight':326 'slower':365 'smooth':125,300 'snap':261,290 'soft':201 'source-sickn33' 'spatial':13,43,108,218 'special':97 'specif':449 'stack':130,143 'stagger':332,347 'state':293 'stop':455 'strong':70 'style':150 'substitut':445 'subtl':240 'success':467 'surfac':80 'tailwind':151 'task':431 'tast':310 'tech':129 'test':451 'three':175 'tilt':273 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'transform':59,162,181,271,280,402 'transit':301 'transluc':241 'transpar':252 'treat':440 'ui':27,50,86,137,191 'ui/ux':6,95 'unless':144 'use':21,33,199,235,239,268,311,398,425 'user':330,389 'util':156,220 'valid':450 'vibe':189 'view':319 'visual':71 'web':19,40,111 'weightless':14,110,190 'will-chang':399 'world':93 'world-class':92 'write':379 'y':323 'y-axi':322 'z':222 'z-axi':221","prices":[{"id":"65e494f3-abf6-4833-b433-b1ab42ddac0c","listingId":"6e0c5806-880e-4b5a-a999-8a28a4cd45a7","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:31:02.711Z"}],"sources":[{"listingId":"6e0c5806-880e-4b5a-a999-8a28a4cd45a7","source":"github","sourceId":"sickn33/antigravity-awesome-skills/antigravity-design-expert","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/antigravity-design-expert","isPrimary":false,"firstSeenAt":"2026-04-18T21:31:02.711Z","lastSeenAt":"2026-04-25T00:50:26.351Z"}],"details":{"listingId":"6e0c5806-880e-4b5a-a999-8a28a4cd45a7","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"antigravity-design-expert","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34964,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-24T06:41:17Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"62572b82e5c51e1f14692e29b15d08816da19f6f","skill_md_path":"skills/antigravity-design-expert/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/antigravity-design-expert"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"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."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/antigravity-design-expert"},"updatedAt":"2026-04-25T00:50:26.351Z"}}