{"id":"7467aabe-2931-4467-8385-80cddadbe875","shortId":"zbYea3","kind":"skill","title":"design-taste-frontend","tagline":"Use when building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules.","description":"# High-Agency Frontend Skill\n\n## When to Use\n\n- Use when the user asks to create, improve, or review frontend UI with strong design taste and anti-generic constraints.\n- Use when React, Next.js, Tailwind, motion, component states, typography, spacing, color, or responsive behavior need senior-level design judgment.\n- Use when the output must override common LLM UI biases such as centered heroes, purple gradients, card overuse, poor states, and fragile layouts.\n\n## Limitations\n\n- This skill provides frontend design and implementation guidance; it does not replace project-specific product requirements, accessibility review, or user testing.\n- Verify framework versions, installed dependencies, responsive behavior, and build output in the target repository before treating generated UI as production-ready.\n- Do not force these design rules when the existing product, brand system, or platform conventions require a different visual direction.\n\n\n## 1. ACTIVE BASELINE CONFIGURATION\n* DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)\n* MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)\n* VISUAL_DENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)\n\n**AI Instruction:** The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 7.\n\n## 2. DEFAULT ARCHITECTURE & CONVENTIONS\nUnless the user explicitly specifies a different stack, adhere to these structural constraints to maintain consistency:\n\n* **DEPENDENCY VERIFICATION [MANDATORY]:** Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`. If the package is missing, you MUST output the installation command (e.g. `npm install package-name`) before providing the code. **Never** assume a library exists.\n* **Framework & Interactivity:** React or Next.js. Default to Server Components (`RSC`).\n    * **RSC SAFETY:** Global state works ONLY in Client Components. In Next.js, wrap providers in a `\"use client\"` component.\n    * **INTERACTIVITY ISOLATION:** If Sections 4 or 7 (Motion/Liquid Glass) are active, the specific interactive UI component MUST be extracted as an isolated leaf component with `'use client'` at the very top. Server Components must exclusively render static layouts.\n* **State Management:** Use local `useState`/`useReducer` for isolated UI. Use global state strictly for deep prop-drilling avoidance.\n* **Styling Policy:** Use Tailwind CSS (v3/v4) for 90% of styling.\n    * **TAILWIND VERSION LOCK:** Check `package.json` first. Do not use v4 syntax in v3 projects.\n    * **T4 CONFIG GUARD:** For v4, do NOT use `tailwindcss` plugin in `postcss.config.js`. Use `@tailwindcss/postcss` or the Vite plugin.\n* **ANTI-EMOJI POLICY [CRITICAL]:** NEVER use emojis in code, markup, text content, or alt text. Replace symbols with high-quality icons (Radix, Phosphor) or clean SVG primitives. Emojis are BANNED.\n* **Responsiveness & Spacing:**\n  * Standardize breakpoints (`sm`, `md`, `lg`, `xl`).\n  * Contain page layouts using `max-w-[1400px] mx-auto` or `max-w-7xl`.\n  * **Viewport Stability [CRITICAL]:** NEVER use `h-screen` for full-height Hero sections. ALWAYS use `min-h-[100dvh]` to prevent catastrophic layout jumping on mobile browsers (iOS Safari).\n  * **Grid over Flex-Math:** NEVER use complex flexbox percentage math (`w-[calc(33%-1rem)]`). ALWAYS use CSS Grid (`grid grid-cols-1 md:grid-cols-3 gap-6`) for reliable structures.\n* **Icons:** You MUST use exactly `@phosphor-icons/react` or `@radix-ui/react-icons` as the import paths (check installed version). Standardize `strokeWidth` globally (e.g., exclusively use `1.5` or `2.0`).\n\n\n## 3. DESIGN ENGINEERING DIRECTIVES (Bias Correction)\nLLMs have statistical biases toward specific UI cliché patterns. Proactively construct premium interfaces using these engineered rules:\n\n**Rule 1: Deterministic Typography**\n* **Display/Headlines:** Default to `text-4xl md:text-6xl tracking-tighter leading-none`.\n    * **ANTI-SLOP:** Discourage `Inter` for \"Premium\" or \"Creative\" vibes. Force unique character using `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`.\n    * **TECHNICAL UI RULE:** Serif fonts are strictly BANNED for Dashboard/Software UIs. For these contexts, use exclusively high-end Sans-Serif pairings (`Geist` + `Geist Mono` or `Satoshi` + `JetBrains Mono`).\n* **Body/Paragraphs:** Default to `text-base text-gray-600 leading-relaxed max-w-[65ch]`.\n\n**Rule 2: Color Calibration**\n* **Constraint:** Max 1 Accent Color. Saturation < 80%.\n* **THE LILA BAN:** The \"AI Purple/Blue\" aesthetic is strictly BANNED. No purple button glows, no neon gradients. Use absolute neutral bases (Zinc/Slate) with high-contrast, singular accents (e.g. Emerald, Electric Blue, or Deep Rose).\n* **COLOR CONSISTENCY:** Stick to one palette for the entire output. Do not fluctuate between warm and cool grays within the same project.\n\n**Rule 3: Layout Diversification**\n* **ANTI-CENTER BIAS:** Centered Hero/H1 sections are strictly BANNED when `LAYOUT_VARIANCE > 4`. Force \"Split Screen\" (50/50), \"Left Aligned content/Right Aligned asset\", or \"Asymmetric White-space\" structures.\n\n**Rule 4: Materiality, Shadows, and \"Anti-Card Overuse\"**\n* **DASHBOARD HARDENING:** For `VISUAL_DENSITY > 7`, generic card containers are strictly BANNED. Use logic-grouping via `border-t`, `divide-y`, or purely negative space. Data metrics should breathe without being boxed in unless elevation (z-index) is functionally required.\n* **Execution:** Use cards ONLY when elevation communicates hierarchy. When a shadow is used, tint it to the background hue.\n\n**Rule 5: Interactive UI States**\n* **Mandatory Generation:** LLMs naturally generate \"static\" successful states. You MUST implement full interaction cycles:\n  * **Loading:** Skeletal loaders matching layout sizes (avoid generic circular spinners).\n  * **Empty States:** Beautifully composed empty states indicating how to populate data.\n  * **Error States:** Clear, inline error reporting (e.g., forms).\n  * **Tactile Feedback:** On `:active`, use `-translate-y-[1px]` or `scale-[0.98]` to simulate a physical push indicating success/action.\n\n**Rule 6: Data & Form Patterns**\n* **Forms:** Label MUST sit above input. Helper text is optional but should exist in markup. Error text below input. Use a standard `gap-2` for input blocks.\n\n## 4. CREATIVE PROACTIVITY (Anti-Slop Implementation)\nTo actively combat generic AI designs, systematically implement these high-end coding concepts as your baseline:\n* **\"Liquid Glass\" Refraction:** When glassmorphism is needed, go beyond `backdrop-blur`. Add a 1px inner border (`border-white/10`) and a subtle inner shadow (`shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]`) to simulate physical edge refraction.\n* **Magnetic Micro-physics (If MOTION_INTENSITY > 5):** Implement buttons that pull slightly toward the mouse cursor. **CRITICAL:** NEVER use React `useState` for magnetic hover or continuous animations. Use EXCLUSIVELY Framer Motion's `useMotionValue` and `useTransform` outside the React render cycle to prevent performance collapse on mobile.\n* **Perpetual Micro-Interactions:** When `MOTION_INTENSITY > 5`, embed continuous, infinite micro-animations (Pulse, Typewriter, Float, Shimmer, Carousel) in standard components (avatars, status dots, backgrounds). Apply premium Spring Physics (`type: \"spring\", stiffness: 100, damping: 20`) to all interactive elements—no linear easing.\n* **Layout Transitions:** Always utilize Framer Motion's `layout` and `layoutId` props for smooth re-ordering, resizing, and shared element transitions across state changes.\n* **Staggered Orchestration:** Do not mount lists or grids instantly. Use `staggerChildren` (Framer) or CSS cascade (`animation-delay: calc(var(--index) * 100ms)`) to create sequential waterfall reveals. **CRITICAL:** For `staggerChildren`, the Parent (`variants`) and Children MUST reside in the identical Client Component tree. If data is fetched asynchronously, pass the data as props into a centralized Parent Motion wrapper.\n\n## 5. PERFORMANCE GUARDRAILS\n* **DOM Cost:** Apply grain/noise filters exclusively to fixed, pointer-event-none pseudo-elements (e.g., `fixed inset-0 z-50 pointer-events-none`) and NEVER to scrolling containers to prevent continuous GPU repaints and mobile performance degradation.\n* **Hardware Acceleration:** Never animate `top`, `left`, `width`, or `height`. Animate exclusively via `transform` and `opacity`.\n* **Z-Index Restraint:** NEVER spam arbitrary `z-50` or `z-10` unprompted. Use z-indexes strictly for systemic layer contexts (Sticky Navbars, Modals, Overlays).\n\n## 6. TECHNICAL REFERENCE (Dial Definitions)\n\n### DESIGN_VARIANCE (Level 1-10)\n* **1-3 (Predictable):** Flexbox `justify-center`, strict 12-column symmetrical grids, equal paddings.\n* **4-7 (Offset):** Use `margin-top: -2rem` overlapping, varied image aspect ratios (e.g., 4:3 next to 16:9), left-aligned headers over center-aligned data.\n* **8-10 (Asymmetric):** Masonry layouts, CSS Grid with fractional units (e.g., `grid-template-columns: 2fr 1fr 1fr`), massive empty zones (`padding-left: 20vw`).\n* **MOBILE OVERRIDE:** For levels 4-10, any asymmetric layout above `md:` MUST aggressively fall back to a strict, single-column layout (`w-full`, `px-4`, `py-8`) on viewports `< 768px` to prevent horizontal scrolling and layout breakage.\n\n### MOTION_INTENSITY (Level 1-10)\n* **1-3 (Static):** No automatic animations. CSS `:hover` and `:active` states only.\n* **4-7 (Fluid CSS):** Use `transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)`. Use `animation-delay` cascades for load-ins. Focus strictly on `transform` and `opacity`. Use `will-change: transform` sparingly.\n* **8-10 (Advanced Choreography):** Complex scroll-triggered reveals or parallax. Use Framer Motion hooks. NEVER use `window.addEventListener('scroll')`.\n\n### VISUAL_DENSITY (Level 1-10)\n* **1-3 (Art Gallery Mode):** Lots of white space. Huge section gaps. Everything feels very expensive and clean.\n* **4-7 (Daily App Mode):** Normal spacing for standard web apps.\n* **8-10 (Cockpit Mode):** Tiny paddings. No card boxes; just 1px lines to separate data. Everything is packed. **Mandatory:** Use Monospace (`font-mono`) for all numbers.\n\n## 7. AI TELLS (Forbidden Patterns)\nTo guarantee a premium, non-generic output, you MUST strictly avoid these common AI design signatures unless explicitly requested:\n\n### Visual & CSS\n* **NO Neon/Outer Glows:** Do not use default `box-shadow` glows or auto-glows. Use inner borders or subtle tinted shadows.\n* **NO Pure Black:** Never use `#000000`. Use Off-Black, Zinc-950, or Charcoal.\n* **NO Oversaturated Accents:** Desaturate accents to blend elegantly with neutrals.\n* **NO Excessive Gradient Text:** Do not use text-fill gradients for large headers.\n* **NO Custom Mouse Cursors:** They are outdated and ruin performance/accessibility.\n\n### Typography\n* **NO Inter Font:** Banned. Use `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`.\n* **NO Oversized H1s:** The first heading should not scream. Control hierarchy with weight and color, not just massive scale.\n* **Serif Constraints:** Use Serif fonts ONLY for creative/editorial designs. **NEVER** use Serif on clean Dashboards.\n\n### Layout & Spacing\n* **Align & Space Perfectly:** Ensure padding and margins are mathematically perfect. Avoid floating elements with awkward gaps.\n* **NO 3-Column Card Layouts:** The generic \"3 equal cards horizontally\" feature row is BANNED. Use a 2-column Zig-Zag, asymmetric grid, or horizontal scrolling approach instead.\n\n### Content & Data (The \"Jane Doe\" Effect)\n* **NO Generic Names:** \"John Doe\", \"Sarah Chan\", or \"Jack Su\" are banned. Use highly creative, realistic-sounding names.\n* **NO Generic Avatars:** DO NOT use standard SVG \"egg\" or Lucide user icons for avatars. Use creative, believable photo placeholders or specific styling.\n* **NO Fake Numbers:** Avoid predictable outputs like `99.99%`, `50%`, or basic phone numbers (`1234567`). Use organic, messy data (`47.2%`, `+1 (312) 847-1928`).\n* **NO Startup Slop Names:** \"Acme\", \"Nexus\", \"SmartFlow\". Invent premium, contextual brand names.\n* **NO Filler Words:** Avoid AI copywriting clichés like \"Elevate\", \"Seamless\", \"Unleash\", or \"Next-Gen\". Use concrete verbs.\n\n### External Resources & Components\n* **NO Broken Unsplash Links:** Do not use Unsplash. Use absolute, reliable placeholders like `https://picsum.photos/seed/{random_string}/800/600` or SVG UI Avatars.\n* **shadcn/ui Customization:** You may use `shadcn/ui`, but NEVER in its generic default state. You MUST customize the radii, colors, and shadows to match the high-end project aesthetic.\n* **Production-Ready Cleanliness:** Code must be extremely clean, visually striking, memorable, and meticulously refined in every detail.\n\n## 8. THE CREATIVE ARSENAL (High-End Inspiration)\nDo not default to generic UI. Pull from this library of advanced concepts to ensure the output is visually striking and memorable. When appropriate, leverage **GSAP (ScrollTrigger/Parallax)** for complex scrolltelling or **ThreeJS/WebGL** for 3D/Canvas animations, rather than basic CSS motion. **CRITICAL:** Never mix GSAP/ThreeJS with Framer Motion in the same component tree. Default to Framer Motion for UI/Bento interactions. Use GSAP/ThreeJS EXCLUSIVELY for isolated full-page scrolltelling or canvas backgrounds, wrapped in strict useEffect cleanup blocks.\n\n### The Standard Hero Paradigm\n* Stop doing centered text over a dark image. Try asymmetric Hero sections: Text cleanly aligned to the left or right. The background should feature a high-quality, relevant image with a subtle stylistic fade (darkening or lightening gracefully into the background color depending on if it is Light or Dark mode).\n\n### Navigation & Menüs\n* **Mac OS Dock Magnification:** Nav-bar at the edge; icons scale fluidly on hover.\n* **Magnetic Button:** Buttons that physically pull toward the cursor.\n* **Gooey Menu:** Sub-items detach from the main button like a viscous liquid.\n* **Dynamic Island:** A pill-shaped UI component that morphs to show status/alerts.\n* **Contextual Radial Menu:** A circular menu expanding exactly at the click coordinates.\n* **Floating Speed Dial:** A FAB that springs out into a curved line of secondary actions.\n* **Mega Menu Reveal:** Full-screen dropdowns that stagger-fade complex content.\n\n### Layout & Grids\n* **Bento Grid:** Asymmetric, tile-based grouping (e.g., Apple Control Center).\n* **Masonry Layout:** Staggered grid without fixed row heights (e.g., Pinterest).\n* **Chroma Grid:** Grid borders or tiles showing subtle, continuously animating color gradients.\n* **Split Screen Scroll:** Two screen halves sliding in opposite directions on scroll.\n* **Curtain Reveal:** A Hero section parting in the middle like a curtain on scroll.\n\n### Cards & Containers\n* **Parallax Tilt Card:** A 3D-tilting card tracking the mouse coordinates.\n* **Spotlight Border Card:** Card borders that illuminate dynamically under the cursor.\n* **Glassmorphism Panel:** True frosted glass with inner refraction borders.\n* **Holographic Foil Card:** Iridescent, rainbow light reflections shifting on hover.\n* **Tinder Swipe Stack:** A physical stack of cards the user can swipe away.\n* **Morphing Modal:** A button that seamlessly expands into its own full-screen dialog container.\n\n### Scroll-Animations\n* **Sticky Scroll Stack:** Cards that stick to the top and physically stack over each other.\n* **Horizontal Scroll Hijack:** Vertical scroll translates into a smooth horizontal gallery pan.\n* **Locomotive Scroll Sequence:** Video/3D sequences where framerate is tied directly to the scrollbar.\n* **Zoom Parallax:** A central background image zooming in/out seamlessly as you scroll.\n* **Scroll Progress Path:** SVG vector lines or routes that draw themselves as the user scrolls.\n* **Liquid Swipe Transition:** Page transitions that wipe the screen like a viscous liquid.\n\n### Galleries & Media\n* **Dome Gallery:** A 3D gallery feeling like a panoramic dome.\n* **Coverflow Carousel:** 3D carousel with the center focused and edges angled back.\n* **Drag-to-Pan Grid:** A boundless grid you can freely drag in any compass direction.\n* **Accordion Image Slider:** Narrow vertical/horizontal image strips that expand fully on hover.\n* **Hover Image Trail:** The mouse leaves a trail of popping/fading images behind it.\n* **Glitch Effect Image:** Brief RGB-channel shifting digital distortion on hover.\n\n### Typography & Text\n* **Kinetic Marquee:** Endless text bands that reverse direction or speed up on scroll.\n* **Text Mask Reveal:** Massive typography acting as a transparent window to a video background.\n* **Text Scramble Effect:** Matrix-style character decoding on load or hover.\n* **Circular Text Path:** Text curved along a spinning circular path.\n* **Gradient Stroke Animation:** Outlined text with a gradient continuously running along the stroke.\n* **Kinetic Typography Grid:** A grid of letters dodging or rotating away from the cursor.\n\n### Micro-Interactions & Effects\n* **Particle Explosion Button:** CTAs that shatter into particles upon success.\n* **Liquid Pull-to-Refresh:** Mobile reload indicators acting like detaching water droplets.\n* **Skeleton Shimmer:** Shifting light reflections moving across placeholder boxes.\n* **Directional Hover Aware Button:** Hover fill entering from the exact side the mouse entered.\n* **Ripple Click Effect:** Visual waves rippling precisely from the click coordinates.\n* **Animated SVG Line Drawing:** Vectors that draw their own contours in real-time.\n* **Mesh Gradient Background:** Organic, lava-lamp-like animated color blobs.\n* **Lens Blur Depth:** Dynamic focus blurring background UI layers to highlight a foreground action.\n\n## 9. THE \"MOTION-ENGINE\" BENTO PARADIGM\nWhen generating modern SaaS dashboards or feature sections, you MUST utilize the following \"Bento 2.0\" architecture and motion philosophy. This goes beyond static cards and enforces a \"Vercel-core meets Dribbble-clean\" aesthetic heavily reliant on perpetual physics.\n\n### A. Core Design Philosophy\n* **Aesthetic:** High-end, minimal, and functional.\n* **Palette:** Background in `#f9fafb`. Cards are pure white (`#ffffff`) with a 1px border of `border-slate-200/50`.\n* **Surfaces:** Use `rounded-[2.5rem]` for all major containers. Apply a \"diffusion shadow\" (a very light, wide-spreading shadow, e.g., `shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]`) to create depth without clutter.\n* **Typography:** Strict `Geist`, `Satoshi`, or `Cabinet Grotesk` font stack. Use subtle tracking (`tracking-tight`) for headers.\n* **Labels:** Titles and descriptions must be placed **outside and below** the cards to maintain a clean, gallery-style presentation.\n* **Pixel-Perfection:** Use generous `p-8` or `p-10` padding inside cards.\n\n### B. The Animation Engine Specs (Perpetual Motion)\nAll cards must contain **\"Perpetual Micro-Interactions.\"** Use the following Framer Motion principles:\n* **Spring Physics:** No linear easing. Use `type: \"spring\", stiffness: 100, damping: 20` for a premium, weighty feel.\n* **Layout Transitions:** Heavily utilize the `layout` and `layoutId` props to ensure smooth re-ordering, resizing, and shared element state transitions.\n* **Infinite Loops:** Every card must have an \"Active State\" that loops infinitely (Pulse, Typewriter, Float, or Carousel) to ensure the dashboard feels \"alive\".\n* **Performance:** Wrap dynamic lists in `<AnimatePresence>` and optimize for 60fps. **PERFORMANCE CRITICAL:** Any perpetual motion or infinite loop MUST be memoized (React.memo) and completely isolated in its own microscopic Client Component. Never trigger re-renders in the parent layout.\n\n### C. The 5-Card Archetypes (Micro-Animation Specs)\nImplement these specific micro-animations when constructing Bento grids (e.g., Row 1: 3 cols | Row 2: 2 cols split 70/30):\n1. **The Intelligent List:** A vertical stack of items with an infinite auto-sorting loop. Items swap positions using `layoutId`, simulating an AI prioritizing tasks in real-time.\n2. **The Command Input:** A search/AI bar with a multi-step Typewriter Effect. It cycles through complex prompts, including a blinking cursor and a \"processing\" state with a shimmering loading gradient.\n3. **The Live Status:** A scheduling interface with \"breathing\" status indicators. Include a pop-up notification badge that emerges with an \"Overshoot\" spring effect, stays for 3 seconds, and vanishes.\n4. **The Wide Data Stream:** A horizontal \"Infinite Carousel\" of data cards or metrics. Ensure the loop is seamless (using `x: [\"0%\", \"-100%\"]`) with a speed that feels effortless.\n5. **The Contextual UI (Focus Mode):** A document view that animates a staggered highlight of a text block, followed by a \"Float-in\" of a floating action toolbar with micro-icons.\n\n## 10. FINAL PRE-FLIGHT CHECK\nEvaluate your code against this matrix before outputting. This is the **last** filter you apply to your logic.\n- [ ] Is global state used appropriately to avoid deep prop-drilling rather than arbitrarily?\n- [ ] Is mobile layout collapse (`w-full`, `px-4`, `max-w-7xl mx-auto`) guaranteed for high-variance designs?\n- [ ] Do full-height sections safely use `min-h-[100dvh]` instead of the bugged `h-screen`?\n- [ ] Do `useEffect` animations contain strict cleanup functions?\n- [ ] Are empty, loading, and error states provided?\n- [ ] Are cards omitted in favor of spacing where possible?\n- [ ] Did you strictly isolate CPU-heavy perpetual animations in their own Client Components?","tags":["design","taste","frontend","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding"],"capabilities":["skill","source-sickn33","skill-design-taste-frontend","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/design-taste-frontend","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 · 34831 github stars · SKILL.md body (21,799 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-24T06:51:03.678Z","embedding":null,"createdAt":"2026-04-18T21:36:02.215Z","updatedAt":"2026-04-24T06:51:03.678Z","lastSeenAt":"2026-04-24T06:51:03.678Z","tsv":"'+1':1817 '-0':1246 '-1':555 '-10':1293,1317,1363,1392,1430,1481,1503,1534,2788 '-100':3058 '-15':2730 '-1928':1820 '-2':983,1339 '-3':1319,1432,1505 '-4':1413,3144 '-50':1248,1290 '-6':572 '-7':1333,1444,1523 '-8':1415,2785 '-950':1620 '/10':1031 '/800/600':1872 '/react':584 '/react-icons':589 '/seed/':1869 '0':1039,1041,2727,2733,2734,2735,3057 '0.05':2736 '0.1':1046 '0.16':1455 '0.3':1450,1457 '0.98':947 '000000':1614 '1':161,168,177,186,565,630,722,1316,1318,1429,1431,1456,1458,1502,1504,2934,2943 '1.5':603 '10':171,180,189,3098 '100':1132,2822 '100dvh':530,3168 '100ms':1187 '12':1326 '1234567':1811 '1400px':502 '16':1351 '1fr':1378,1379 '1px':944,1025,1040,1543,2698 '2':261,717,1738,2938,2939,2973 '2.0':605,2650 '2.5':2708 '20':1134,2824 '200/50':2704 '20px':2728 '20vw':1386 '255':1043,1044,1045 '2fr':1377 '3':258,570,606,785,1348,1722,1728,2935,3005,3032 '312':1818 '33':554 '3d':2226,2379,2388 '3d-tilting':2225 '3d/canvas':1965 '3rd':287 '4':185,209,360,801,818,987,1332,1347,1391,1443,1522,3036 '40px':2729 '47.2':1816 '4xl':638 '5':889,1059,1106,1225,2915,3065 '50':1806 '50/50':805 '6':176,208,956,1308 '600':708 '60fps':2882 '65ch':715 '6xl':642 '7':260,362,831,1560 '70/30':2942 '768px':1418 '7xl':510,3148 '8':167,207,1362,1480,1533,1924 '80':726 '847':1819 '9':1352,2629 '90':420 '99.99':1805 'absolut':745,1863 'acceler':1268 'accent':723,754,1625,1627 'access':114 'accordion':2414 'acm':1825 'across':1163,2562 'act':2471,2551 'action':2144,2628,3092 'activ':162,366,939,995,1440,2858 'adapt':225 'add':1023 'adher':273 'advanc':1482,1943 'aesthet':733,1905,2670,2680 'agenc':10,26 'aggress':1399 'ai':193,731,998,1561,1579,1837,2966 'align':807,809,1355,1360,1705,2027 'aliv':2873 'along':2497,2512 'alt':469 'alway':220,525,557,1144 'angl':2396 'anim':1079,1112,1182,1270,1276,1436,1461,1966,2190,2293,2504,2590,2612,2794,2920,2927,3075,3178,3207 'animation-delay':1181,1460 'anti':50,456,650,789,823,991 'anti-card':822 'anti-cent':788 'anti-emoji':455 'anti-gener':49 'anti-slop':649,990 'app':1525,1532 'appl':2168 'appli':1125,1230,2714,3118 'approach':1748 'appropri':1955,3126 'arbitrari':1288 'arbitrarili':3135 'archetyp':2917 'architectur':263,2651 'arsenal':1927 'art':187,1506 'artsi':172 'ask':36,212 'aspect':1344 'asset':810 'assum':324 'asymmetr':812,1364,1394,1743,2022,2162 'asynchron':1213 'auto':505,1600,2956,3151 'auto-glow':1599 'auto-sort':2955 'automat':1435 'avatar':1121,1777,1789,1876 'avoid':412,913,1576,1715,1801,1836,3128 'awar':2567 'away':2275,2525 'awkward':1719 'b':2792 'back':1401,2397 'backdrop':1021 'backdrop-blur':1020 'background':886,1124,2002,2034,2054,2338,2479,2606,2621,2688 'badg':3022 'ban':486,676,729,736,797,837,1661,1735,1767 'band':2457 'bar':2073,2979 'base':229,704,747,2165 'baselin':163,197,241,1010 'basic':1808,1969 'beauti':919 'behavior':66,125 'behind':2437 'believ':1792 'bento':2160,2634,2649,2930 'beyond':1019,2657 'bezier':1454 'bias':82,610,615,791 'black':1611,1618 'blend':1629 'blink':2994 'blob':2614 'block':986,2008,3082 'blue':758 'blur':1022,2616,2620 'body/paragraphs':699 'border':844,1027,1029,1604,2184,2234,2237,2252,2699,2702 'border-sl':2701 'border-t':843 'border-whit':1028 'boundless':2404 'box':859,1541,1595,2564 'box-shadow':1594 'brand':151,1831 'breakag':1425 'breakpoint':490 'breath':856,3013 'brief':2442 'broken':1855 'browser':538 'bug':3172 'build':7,127 'button':739,1061,2083,2084,2100,2279,2535,2568 'c':2913 'cabinet':665,1665,2747 'calc':553,1184 'calibr':17,719 'canva':2001 'card':89,824,833,871,1540,1724,1730,2219,2223,2228,2235,2236,2255,2270,2297,2659,2691,2770,2791,2800,2854,2916,3047,3191 'carousel':1117,2387,2389,2867,3044 'cascad':1180,1463 'catastroph':533 'center':85,790,792,1324,1359,2015,2170,2392 'center-align':1358 'central':1221,2337 'chan':1762 'chang':1165,1477 'channel':2445 'chao':173 'charact':661,2486 'charcoal':1622 'chat':237 'check':300,426,594,3103 'children':1200 'choreographi':1483 'chroma':2181 'cinematic/magic':181 'circular':915,2122,2492,2500 'clean':481,1521,1701,1914,2026,2669,2774 'cleanli':1909 'cleanup':2007,3181 'clear':930 'cliché':619,1839 'click':2128,2580,2588 'client':345,354,382,1206,2902,3211 'clutter':2741 'cockpit':1535 'cockpit/packed':191 'code':322,464,1006,1910,3106 'col':564,569,2936,2940 'collaps':1096,3139 'color':18,63,718,724,762,1683,1895,2055,2191,2613 'column':1327,1376,1407,1723,1739 'combat':996 'command':312,2975 'common':79,1578 'communic':875 'compass':2412 'complet':2896 'complex':548,1484,1960,2156,2990 'compon':59,336,346,355,371,379,388,1120,1207,1853,1982,2112,2903,3212 'compos':920 'concept':1007,1944 'concret':1849 'config':438 'configur':164 'consist':280,763 'constraint':52,277,720,1689 'construct':622,2929 'contain':495,834,1257,2220,2290,2713,2802,3179 'content':467,1750,2157 'content/right':808 'context':682,1303 'contextu':1830,2118,3067 'continu':1078,1108,1260,2189,2510 'contour':2599 'contrast':752 'control':1678,2169 'convent':155,264 'cool':778 'coordin':2129,2232,2589 'copywrit':1838 'core':2665,2677 'correct':611 'cost':1229 'coverflow':2386 'cpu':3204 'cpu-heavi':3203 'creat':38,1189,2738 'creativ':657,988,1770,1791,1926 'creative/editorial':1695 'critic':459,513,1069,1193,1972,2884 'css':417,559,1179,1367,1437,1446,1586,1970 'ctas':2536 'cubic':1453 'cubic-bezi':1452 'cursor':1068,1650,2090,2243,2528,2995 'curtain':2205,2216 'curv':2140,2496 'custom':1648,1878,1892 'cycl':906,1092,2988 'daili':1524 'damp':1133,2823 'dark':2019,2063 'darken':2048 'dashboard':826,1702,2640,2871 'dashboard/software':678 'data':192,853,927,957,1210,1216,1361,1547,1751,1815,3039,3046 'decod':2487 'deep':408,760,3129 'default':262,333,634,700,1593,1888,1934,1984 'definit':1312 'degrad':1266 'delay':1183,1462 'densiti':184,830,1500 'depend':123,281,2056 'depth':2617,2739 'desatur':1626 'descript':2762 'design':2,15,46,71,101,145,165,607,999,1313,1580,1696,2678,3157 'design-taste-frontend':1 'detach':2096,2553 'detail':1923 'determinist':631 'dial':1311,2132 'dialog':2289 'differ':158,271 'diffus':2716 'digit':2447 'direct':160,609,2202,2330,2413,2460,2565 'discourag':652 'display/headlines':633 'distort':2448 'diversif':787 'divid':847 'divide-i':846 'dock':2069 'document':3072 'dodg':2522 'doe':1754,1760 'dom':1228 'dome':2376,2385 'dot':1123 'drag':2399,2409 'drag-to-pan':2398 'draw':2355,2593,2596 'dribbbl':2668 'dribbble-clean':2667 'drill':411,3132 'drive':252 'dropdown':2151 'droplet':2555 'dynam':228,2105,2240,2618,2876 'e.g':290,313,600,755,934,1243,1346,1372,2167,2179,2725,2932 'eas':1141,2817 'edg':1050,2076,2395 'edit':216 'effect':1755,2440,2482,2532,2581,2986,3029 'effortless':3064 'egg':1783 'electr':757 'eleg':1630 'element':1138,1161,1242,1717,2848 'elev':862,874,1841 'emb':1107 'emerald':756 'emerg':3024 'emoji':457,462,484 'empti':917,921,1381,3184 'end':687,1005,1903,1930,2683 'endless':2455 'enforc':2661 'engin':608,627,2633,2795 'ensur':1708,1946,2840,2869,3050 'enter':2571,2578 'entir':770 'equal':1330,1729 'error':928,932,975,3187 'evalu':3104 'event':1238,1251 'everi':1922,2853 'everyth':1516,1548 'exact':580,2125,2574 'excess':1634 'exclus':390,601,684,1081,1233,1277,1993 'execut':869 'exist':149,327,972 'expand':2124,2282,2422 'expens':1519 'explicit':233,268,1583 'explos':2534 'extern':1851 'extract':374 'extrem':1913 'f9fafb':2690 'fab':2134 'fade':2047,2155 'fake':1799 'fall':1400 'favor':3194 'featur':1732,2036,2642 'feedback':937 'feel':1517,2381,2829,2872,3063 'fetch':1212 'ffffff':2695 'file':218 'fill':1642,2570 'filler':1834 'filter':1232,3116 'final':3099 'first':428,1673 'fix':1235,1244,2176 'flex':544 'flex-math':543 'flexbox':549,1321 'flight':3102 'float':1115,1716,2130,2865,3087,3091 'float-in':3086 'fluctuat':774 'fluid':1445,2079 'focus':1468,2393,2619,3069 'foil':2254 'follow':2648,2809,3083 'font':673,1555,1660,1692,2749 'font-mono':1554 'forbidden':1563 'forc':143,659,802 'foreground':2627 'form':935,958,960 'fraction':1370 'fragil':94 'framer':292,1082,1146,1177,1492,1977,1986,2327,2810 'framer-mot':291 'framework':120,328 'freeli':2408 'frontend':4,11,27,42,100 'frost':2247 'full':521,904,1411,1997,2149,2287,3142,3160 'full-height':520,3159 'full-pag':1996 'full-screen':2148,2286 'fulli':2423 'function':867,2686,3182 'galleri':1507,2319,2374,2377,2380,2776 'gallery-styl':2775 'gallery/airy':188 'gap':571,982,1515,1720 'geist':663,692,693,1663,2744 'gen':1847 'generat':135,200,894,897,2637 'generic':51,832,914,997,1571,1727,1757,1776,1887,1936 'generous':2783 'glass':364,1012,2248 'glassmorph':1015,2244 'glitch':2439 'global':249,340,404,599,3123 'glow':740,1589,1597,1601 'go':1018 'goe':2656 'gooey':2091 'gpu':1261 'grace':2051 'gradient':88,743,1635,1643,2192,2502,2509,2605,3004 'grain/noise':1231 'gray':707,779 'grid':541,560,561,563,568,1173,1329,1368,1374,1744,2159,2161,2174,2182,2183,2402,2405,2517,2519,2931 'grid-col':562,567 'grid-template-column':1373 'grotesk':666,1666,2748 'group':841,2166 'gsap':1957 'gsap/threejs':1975,1992 'guarante':1566,3152 'guard':439 'guardrail':1227 'guidanc':104 'h':517,529,3167,3174 'h-screen':516,3173 'h1s':1671 'halv':2198 'harden':827 'hardwar':1267 'head':1674 'header':1356,1646,2758 'heavi':3205 'heavili':2671,2832 'height':522,1275,2178,3161 'helper':966 'hero':86,523,2011,2023,2208 'hero/h1':793 'hierarchi':876,1679 'high':9,25,475,686,751,1004,1769,1902,1929,2039,2682,3155 'high-ag':8,24 'high-contrast':750 'high-end':685,1003,1901,1928,2681 'high-qual':474,2038 'high-vari':3154 'highlight':2625,3078 'hijack':2311 'holograph':2253 'hook':1494 'horizont':1421,1731,1746,2309,2318,3042 'hover':1076,1438,2081,2262,2425,2426,2450,2491,2566,2569 'hue':887 'huge':1513 'icon':477,576,583,1787,2077,3097 'ident':1205 'illumin':2239 'imag':1343,2020,2042,2339,2415,2419,2427,2436,2441 'implement':103,903,993,1001,1060,2922 'import':285,592 'improv':39 'in':1467 'in/out':2341 'includ':2992,3016 'index':865,1186,1284,1298 'indic':923,953,2550,3015 'infinit':1109,2851,2862,2889,2954,3043 'inlin':931 'inner':1026,1035,1603,2250 'input':965,978,985,2976 'inset':1038,1245 'insid':2790 'inspir':1931 'instal':122,311,315,595 'instant':1174 'instead':1749,3169 'instruct':194 'intellig':2945 'intens':175,1058,1105,1427 'inter':653,1659 'interact':329,356,369,890,905,1102,1137,1990,2531,2806 'interfac':12,624,3011 'invent':1828 'io':539 'iridesc':2256 'island':2106 'isol':357,377,401,1995,2897,3202 'item':2095,2951,2959 'jack':1764 'jane':1753 'jetbrain':697 'john':1759 'judgment':72 'jump':535 'justifi':1323 'justify-cent':1322 'kinet':2453,2515 'label':961,2759 'lamp':2610 'larg':1645 'last':3115 'lava':2609 'lava-lamp-lik':2608 'layer':1302,2623 'layout':20,95,393,497,534,786,799,911,1142,1149,1366,1395,1408,1424,1703,1725,2158,2172,2830,2835,2912,3138 'layoutid':1151,2837,2963 'lead':647,710 'leading-non':646 'leading-relax':709 'leaf':378 'leav':2431 'left':806,1272,1354,1385,2030 'left-align':1353 'len':2615 'letter':2521 'level':70,1315,1390,1428,1501 'leverag':1956 'lg':493 'librari':289,326,1941 'light':2061,2258,2559,2720 'lighten':2050 'like':1804,1840,1866,2101,2214,2370,2382,2552,2611 'lila':728 'limit':96 'line':1544,2141,2351,2592 'linear':1140,2816 'link':1857 'liquid':1011,2104,2361,2373,2543 'list':1171,2877,2946 'listen':221 'live':3007 'llm':80 'llms':612,895 'load':907,1466,2489,3003,3185 'load-in':1465 'loader':909 'local':397 'lock':425 'locomot':2321 'logic':255,840,3121 'logic-group':839 'loop':2852,2861,2890,2958,3052 'lot':1509 'lucid':295,1785 'lucide-react':294 'mac':2067 'magnet':1052,1075,2082 'magnif':2070 'main':2099 'maintain':279,2772 'major':2712 'manag':395 'mandatori':283,893,1551 'margin':1337,1711 'margin-top':1336 'markup':465,974 'marque':2454 'mask':2467 'masonri':1365,2171 'massiv':1380,1686,2469 'match':910,1899 'materi':819 'math':545,551 'mathemat':1713 'matrix':2484,3109 'matrix-styl':2483 'max':500,508,713,721,3146 'max-w':499,712 'max-w-7xl':507,3145 'may':1880 'md':492,566,639,1397 'media':2375 'meet':2666 'mega':2145 'memoiz':2893 'memor':1917,1953 'menu':2092,2120,2123,2146 'menü':2066 'mesh':2604 'messi':1814 'meticul':1919 'metric':854,3049 'micro':1054,1101,1111,2530,2805,2919,2926,3096 'micro-anim':1110,2918,2925 'micro-icon':3095 'micro-interact':1100,2529,2804 'micro-phys':1053 'microscop':2901 'middl':2213 'min':528,3166 'min-h':527,3165 'minim':2684 'miss':306 'mix':1974 'mobil':537,1098,1264,1387,2548,3137 'modal':1306,2277 'mode':1508,1526,1536,2064,3070 'modern':2638 'mono':694,698,1556 'monospac':1553 'morph':2114,2276 'motion':22,58,174,293,1057,1083,1104,1147,1223,1426,1493,1971,1978,1987,2632,2653,2798,2811,2887 'motion-engin':2631 'motion/liquid':363 'mount':1170 'mous':1067,1649,2231,2430,2577 'move':2561 'movement':179 'multi':2983 'multi-step':2982 'must':77,299,308,372,389,578,902,962,1201,1398,1574,1891,1911,2645,2763,2801,2855,2891 'mx':504,3150 'mx-auto':503,3149 'name':318,1758,1774,1824,1832 'narrow':2417 'natur':896 'nav':2072 'nav-bar':2071 'navbar':1305 'navig':2065 'need':67,1017 'negat':851 'neon':742 'neon/outer':1588 'neutral':746,1632 'never':323,460,514,546,1070,1254,1269,1286,1495,1612,1697,1884,1973,2904 'next':1349,1846 'next-gen':1845 'next.js':56,332,348 'nexus':1826 'non':1570 'non-gener':1569 'none':648,1239,1252 'normal':1527 'notif':3021 'npm':314 'number':1559,1800,1810 'off-black':1616 'offset':1334 'omit':3192 'one':766 'opac':1281,1473 'opposit':2201 'optim':2880 'option':969 'orchestr':1167 'order':1157,2844 'organ':1813,2607 'os':2068 'otherwis':219 'outdat':1653 'outfit':664,1664 'outlin':2505 'output':76,128,309,771,1572,1803,1948,3111 'outsid':1088,2766 'overlap':1341 'overlay':1307 'overrid':78,1388 'overridden':245 'overs':1670 'oversatur':1624 'overshoot':3027 'overus':90,825 'p':2784,2787 'pack':1550 'packag':304,317 'package-nam':316 'package.json':301,427 'pad':1331,1384,1538,1709,2789 'padding-left':1383 'page':496,1998,2364 'pair':691 'palett':767,2687 'pan':2320,2401 'panel':2245 'panoram':2384 'paradigm':2012,2635 'parallax':1490,2221,2335 'parent':1197,1222,2911 'part':2210 'parti':288 'particl':2533,2540 'pass':1214 'path':593,2348,2494,2501 'pattern':620,959,1564 'percentag':550 'perfect':169,1707,1714,2781 'perform':1095,1226,1265,2874,2883 'performance/accessibility':1656 'perpetu':1099,2674,2797,2803,2886,3206 'philosophi':2654,2679 'phone':1809 'phosphor':479,582 'phosphor-icon':581 'photo':1793 'physic':182,951,1049,1055,1128,2086,2267,2304,2675,2814 'picsum.photos':1868 'picsum.photos/seed/':1867 'pill':2109 'pill-shap':2108 'pilot':190 'pinterest':2180 'pixel':2780 'pixel-perfect':2779 'place':2765 'placehold':1794,1865,2563 'platform':154 'plugin':446,454 'pointer':1237,1250 'pointer-event-non':1236 'pointer-events-non':1249 'polici':414,458 'poor':91 'pop':3019 'pop-up':3018 'popping/fading':2435 'popul':926 'posit':2961 'possibl':3198 'postcss.config.js':448 'pre':3101 'pre-flight':3100 'precis':2585 'predict':1320,1802 'premium':623,655,1126,1568,1829,2827 'present':2778 'prevent':532,1094,1259,1420 'primit':483 'principl':2812 'priorit':2967 'proactiv':621,989 'process':2998 'product':112,139,150,1907 'production-readi':138,1906 'progress':2347 'project':110,436,783,1904 'project-specif':109 'prompt':238,2991 'prop':410,1152,1218,2838,3131 'prop-dril':409,3130 'provid':99,320,350,3189 'pseudo':1241 'pseudo-el':1240 'pull':1063,1938,2087,2545 'pull-to-refresh':2544 'puls':1113,2863 'pure':850,1610,2693 'purpl':87,738 'purple/blue':732 'push':952 'px':1412,2731,3143 'py':1414 'qualiti':476,2040 'radial':2119 'radii':1894 'radix':478,587 'radix-ui':586 'rainbow':2257 'random':1870 'rather':1967,3133 'ratio':1345 're':1156,2843,2907 're-ord':1155,2842 're-rend':2906 'react':55,296,330,1072,1090 'react.memo':2894 'readi':140,1908 'real':2602,2971 'real-tim':2601,2970 'realist':1772 'realistic-sound':1771 'refer':1310 'refin':1920 'reflect':2259,2560 'refract':1013,1051,2251 'refresh':2547 'relax':711 'relev':2041 'reliabl':574,1864 'reliant':2672 'reload':2549 'rem':556,1340,2709 'render':391,1091,2908 'repaint':1262 'replac':108,471 'report':933 'repositori':132 'request':234,1584 'requir':113,156,868 'resid':1202 'resiz':1158,2845 'resourc':1852 'respons':19,65,124,487 'restraint':1285 'reveal':1192,1488,2147,2206,2468 'revers':2459 'review':41,115 'rgb':2444 'rgb-channel':2443 'rgba':1042,2732 'right':2032 'rippl':2579,2584 'rose':761 'rotat':2524 'round':2707 'rout':2353 'row':1733,2177,2933,2937 'rsc':337,338 'ruin':1655 'rule':23,146,628,629,671,716,784,817,888,955 'run':2511 'saa':2639 'safari':540 'safe':3163 'safeti':339 'san':689 'sans-serif':688 'sarah':1761 'satoshi':668,696,1668,2745 'satur':725 'scale':946,1687,2078 'schedul':3010 'scrambl':2481 'scream':1677 'screen':518,804,2150,2194,2197,2288,2369,3175 'scroll':1256,1422,1486,1498,1747,2195,2204,2218,2292,2295,2310,2313,2322,2345,2346,2360,2465 'scroll-anim':2291 'scroll-trigg':1485 'scrollbar':2333 'scrolltel':1961,1999 'scrolltrigger/parallax':1958 'seamless':1842,2281,2342,3054 'search/ai':2978 'second':3033 'secondari':2143 'section':257,359,524,794,1514,2024,2209,2643,3162 'senior':69 'senior-level':68 'separ':1546 'sequenc':2323,2325 'sequenti':1190 'serif':672,690,1688,1691,1699 'server':335,387 'set':203 'shadcn/ui':1877,1882 'shadow':820,879,1036,1037,1596,1608,1897,2717,2724,2726 'shape':2110 'share':1160,2847 'shatter':2538 'shift':2260,2446,2558 'shimmer':1116,2557,3002 'show':2116,2187 'side':2575 'signatur':1581 'simul':949,1048,2964 'singl':1406 'single-column':1405 'singular':753 'sit':963 'size':912 'skelet':908 'skeleton':2556 'skill':28,98 'skill-design-taste-frontend' 'slate':2703 'slide':2199 'slider':2416 'slight':1064 'slop':651,992,1823 'sm':491 'smartflow':1827 'smooth':1154,2317,2841 'sort':2957 'sound':1773 'source-sickn33' 'space':62,488,815,852,1512,1528,1704,1706,3196 'spam':1287 'spare':1479 'spec':2796,2921 'specif':111,254,368,617,1796,2924 'specifi':269 'speed':2131,2462,3061 'spin':2499 'spinner':916 'split':803,2193,2941 'spotlight':2233 'spread':2723 'spring':1127,1130,2136,2813,2820,3028 'stabil':512 'stack':272,2265,2268,2296,2305,2750,2949 'stagger':1166,2154,2173,3077 'stagger-fad':2153 'staggerchildren':1176,1195 'standard':196,489,597,981,1119,1530,1781,2010 'startup':1822 'state':60,92,341,394,405,892,900,918,922,929,1164,1441,1889,2849,2859,2999,3124,3188 'static':392,898,1433,2658 'static/no':178 'statist':614 'status':1122,3008,3014 'status/alerts':2117 'stay':3030 'step':2984 'stick':764,2299 'sticki':1304,2294 'stiff':1131,2821 'stop':2013 'stream':3040 'strict':14,202,406,675,735,796,836,1299,1325,1404,1469,1575,2005,2743,3180,3201 'strike':1916,1951 'string':1871 'strip':2420 'stroke':2503,2514 'strokewidth':598 'strong':45 'structur':276,575,816 'style':413,422,1797,2485,2777 'stylist':2046 'su':1765 'sub':2094 'sub-item':2093 'subtl':1034,1606,2045,2188,2752 'success':899,2542 'success/action':954 'surfac':2705 'svg':482,1782,1874,2349,2591 'swap':2960 'swipe':2264,2274,2362 'symbol':472 'symmetr':1328 'symmetri':170 'syntax':433 'system':152,1301 'systemat':1000 't4':437 'tactil':936 'tailwind':57,416,423 'tailwindcss':445 'tailwindcss/postcss':450 'target':131 'task':2968 'tast':3,16,47 'technic':669,1309 'tell':1562 'templat':1375 'test':118 'text':466,470,637,641,703,706,967,976,1636,1641,2016,2025,2452,2456,2466,2480,2493,2495,2506,3081 'text-4xl':636 'text-6xl':640 'text-bas':702 'text-fil':1640 'text-gray':705 'threejs/webgl':1963 'tie':2329 'tight':2756 'tighter':645 'tile':2164,2186 'tile-bas':2163 'tilt':2222,2227 'time':2603,2972 'tinder':2263 'tini':1537 'tint':882,1607 'titl':2760 'toolbar':3093 'top':386,1271,1338,2302 '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' 'toward':616,1065,2088 'track':644,2229,2753,2755 'tracking-tight':643,2754 'trail':2428,2433 'transform':1279,1471,1478 'transit':1143,1162,1448,2363,2365,2831,2850 'translat':942,2314 'translate-i':941 'transpar':2474 'treat':134 'tree':1208,1983 'tri':2021 'trigger':1487,2905 'true':2246 'two':2196 'type':1129,2819 'typewrit':1114,2864,2985 'typographi':61,632,1657,2451,2470,2516,2742 'ui':43,81,136,370,402,588,618,670,679,891,1875,1937,2111,2622,3068 'ui/bento':1989 'uniqu':660 'unit':1371 'unleash':1843 'unless':265,861,1582 'unprompt':1294 'unsplash':1856,1861 'upon':2541 'use':5,31,32,53,73,239,353,381,396,403,415,431,444,449,461,498,515,526,547,558,579,602,625,662,683,744,838,870,881,940,979,1071,1080,1175,1295,1335,1447,1459,1474,1491,1496,1552,1592,1602,1613,1615,1639,1662,1690,1698,1736,1768,1780,1790,1812,1848,1860,1862,1881,1991,2706,2751,2782,2807,2818,2962,3055,3125,3164 'useeffect':2006,3177 'usemotionvalu':1085 'user':35,117,214,224,244,267,1786,2272,2359 'user-overridden':243 'usereduc':399 'usest':398,1073 'usetransform':1087 'util':1145,2646,2833 'v3':435 'v3/v4':418 'v4':432,441 'valu':206,227,246 'vanish':3035 'var':1185 'vari':1342 'variabl':250 'varianc':166,800,1314,3156 'variant':1198 'vector':2350,2594 'verb':1850 'vercel':2664 'vercel-cor':2663 'verif':282 'verifi':119 'version':121,424,596 'vertic':2312,2948 'vertical/horizontal':2418 'via':842,1278 'vibe':658 'video':2478 'video/3d':2324 'view':3073 'viewport':511,1417 'viscous':2103,2372 'visual':159,183,829,1499,1585,1915,1950,2582 'vite':453 'w':501,509,552,714,1410,3141,3147 'w-full':1409,3140 'warm':776 'water':2554 'waterfal':1191 'wave':2583 'web':1531 'weight':1681 'weighti':2828 'white':814,1030,1511,2694 'white-spac':813 'wide':2722,3038 'wide-spread':2721 'width':1273 'will-chang':1475 'window':2475 'window.addeventlistener':1497 'wipe':2367 'within':780 'without':857,2175,2740 'word':1835 'work':342 'wrap':349,2003,2875 'wrapper':1224 'x':3056 'xl':494 'y':848,943 'z':864,1247,1283,1289,1292,1297 'z-index':863,1282,1296 'zag':1742 'zig':1741 'zig-zag':1740 'zinc':1619 'zinc/slate':748 'zone':1382 'zoom':2334,2340 'zustand':297","prices":[{"id":"e6873c92-dc2c-4b8e-aa7d-b444967f1134","listingId":"7467aabe-2931-4467-8385-80cddadbe875","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:36:02.215Z"}],"sources":[{"listingId":"7467aabe-2931-4467-8385-80cddadbe875","source":"github","sourceId":"sickn33/antigravity-awesome-skills/design-taste-frontend","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/design-taste-frontend","isPrimary":false,"firstSeenAt":"2026-04-18T21:36:02.215Z","lastSeenAt":"2026-04-24T06:51:03.678Z"}],"details":{"listingId":"7467aabe-2931-4467-8385-80cddadbe875","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"design-taste-frontend","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34831,"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":"33a3684f78ba6fdaeb3cc117e98e6fde0bce88df","skill_md_path":"skills/design-taste-frontend/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/design-taste-frontend"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"design-taste-frontend","description":"Use when building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/design-taste-frontend"},"updatedAt":"2026-04-24T06:51:03.678Z"}}