[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6C5C09G4WWRTD49FDY0FKYQ":3,"skill-same:01M6C5C09G4WWRTD49FDY0FKYQ":94},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":31,"publishedAt":46,"linkOnly":47,"markdownContent":48,"markdownBody":49,"frontMatter":50,"refName":51,"commitSha":52,"skillDirectory":53,"forksCount":14,"repositoryHtmlUrl":54,"repositoryHomepageUrl":6,"ownerHtmlUrl":55,"ownerBlogUrl":56,"ownerDescription":6,"updatedAt":57,"install":58,"resources":71},"01M6C5C09G4WWRTD49FDY0FKYQ","design-taste-frontend",null,"Senior UI\u002FUX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.","CoralShades\u002Facm-ai","CoralShades","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F220297585?v=4","01M6C5211QSJHZ8HXSDDWCR507","Coral Shades AI Agency","01M6C52161FNQDRQ0FRR8DAA9D",0,"MIT","https:\u002F\u002Fgithub.com\u002FCoralShades\u002Facm-ai\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftaste-skill\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[32,33,34,35,36,37,38,39,40,41,42,43,44,45],"frontend","design","design taste frontend","css","component","architecture","hardware acceleration","component architecture","ux","ui","engineering","architect","Rules","engineer","2026-11-10 10:12:30",false,"---\nname: design-taste-frontend\ndescription: Senior UI\u002FUX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.\n---\n\n# High-Agency Frontend Skill\n\n## 1. ACTIVE BASELINE CONFIGURATION\n* DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)\n* MOTION_INTENSITY: 6 (1=Static\u002FNo movement, 10=Cinematic\u002FMagic Physics)\n* VISUAL_DENSITY: 4 (1=Art Gallery\u002FAiry, 10=Pilot Cockpit\u002FPacked 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\u002FLiquid 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`\u002F`useReducer` for isolated UI. Use global state strictly for deep prop-drilling avoidance.\n* **Styling Policy:** Use Tailwind CSS (v3\u002Fv4) 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\u002Fpostcss` 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\u002Freact` or `@radix-ui\u002Freact-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\u002FHeadlines:** 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\u002FSoftware UIs. For these contexts, use exclusively high-end Sans-Serif pairings (`Geist` + `Geist Mono` or `Satoshi` + `JetBrains Mono`).\n* **Body\u002FParagraphs:** 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 \u003C 80%.\n* **THE LILA BAN:** The \"AI Purple\u002FBlue\" aesthetic is strictly BANNED. No purple button glows, no neon gradients. Use absolute neutral bases (Zinc\u002FSlate) 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\u002FH1 sections are strictly BANNED when `LAYOUT_VARIANCE > 4`. Force \"Split Screen\" (50\u002F50), \"Left Aligned content\u002FRight 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\u002Faction.\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\u002F10`) 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\u002Fnoise 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 `\u003C 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. THE 100 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\u002FOuter 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\u002Faccessibility.\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\u002Feditorial 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:\u002F\u002Fpicsum.photos\u002Fseed\u002F{random_string}\u002F800\u002F600` or SVG UI Avatars.\n* **shadcn\u002Fui Customization:** You may use `shadcn\u002Fui`, 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\u002FParallax)** for complex scrolltelling or **ThreeJS\u002FWebGL** for 3D\u002FCanvas animations, rather than basic CSS motion. **CRITICAL:** Never mix GSAP\u002FThreeJS with Framer Motion in the same component tree. Default to Framer Motion for UI\u002FBento interactions. Use GSAP\u002FThreeJS 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\u002Falerts.\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\u002F3D sequences where framerate is tied directly to the scrollbar.\n* **Zoom Parallax:** A central background image zooming in\u002Fout 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\u002Fhorizontal image strips that expand fully on hover.\n* **Hover Image Trail:** The mouse leaves a trail of popping\u002Ffading 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\u002F50`.\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 `\u003CAnimatePresence>` 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\u002F30):\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\u002FAI 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?\n","# High-Agency Frontend Skill\n\n## 1. ACTIVE BASELINE CONFIGURATION\n* DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)\n* MOTION_INTENSITY: 6 (1=Static\u002FNo movement, 10=Cinematic\u002FMagic Physics)\n* VISUAL_DENSITY: 4 (1=Art Gallery\u002FAiry, 10=Pilot Cockpit\u002FPacked 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\u002FLiquid 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`\u002F`useReducer` for isolated UI. Use global state strictly for deep prop-drilling avoidance.\n* **Styling Policy:** Use Tailwind CSS (v3\u002Fv4) 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\u002Fpostcss` 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\u002Freact` or `@radix-ui\u002Freact-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\u002FHeadlines:** 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\u002FSoftware UIs. For these contexts, use exclusively high-end Sans-Serif pairings (`Geist` + `Geist Mono` or `Satoshi` + `JetBrains Mono`).\n* **Body\u002FParagraphs:** 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 \u003C 80%.\n* **THE LILA BAN:** The \"AI Purple\u002FBlue\" aesthetic is strictly BANNED. No purple button glows, no neon gradients. Use absolute neutral bases (Zinc\u002FSlate) 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\u002FH1 sections are strictly BANNED when `LAYOUT_VARIANCE > 4`. Force \"Split Screen\" (50\u002F50), \"Left Aligned content\u002FRight 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\u002Faction.\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\u002F10`) 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\u002Fnoise 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 `\u003C 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. THE 100 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\u002FOuter 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\u002Faccessibility.\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\u002Feditorial 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:\u002F\u002Fpicsum.photos\u002Fseed\u002F{random_string}\u002F800\u002F600` or SVG UI Avatars.\n* **shadcn\u002Fui Customization:** You may use `shadcn\u002Fui`, 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\u002FParallax)** for complex scrolltelling or **ThreeJS\u002FWebGL** for 3D\u002FCanvas animations, rather than basic CSS motion. **CRITICAL:** Never mix GSAP\u002FThreeJS with Framer Motion in the same component tree. Default to Framer Motion for UI\u002FBento interactions. Use GSAP\u002FThreeJS 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\u002Falerts.\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\u002F3D sequences where framerate is tied directly to the scrollbar.\n* **Zoom Parallax:** A central background image zooming in\u002Fout 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\u002Fhorizontal image strips that expand fully on hover.\n* **Hover Image Trail:** The mouse leaves a trail of popping\u002Ffading 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\u002F50`.\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 `\u003CAnimatePresence>` 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\u002F30):\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\u002FAI 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?\n",{"name":5,"description":7},"main","1ca81b0a7de199942400f965edd4d7544077ac5d",".agents\u002Fskills\u002Ftaste-skill","https:\u002F\u002Fgithub.com\u002FCoralShades\u002Facm-ai","https:\u002F\u002Fgithub.com\u002FCoralShades","coralshades.com.au","2026-04-18 00:45:07",{"source":8,"skillName":5,"commands":59,"prompt":69,"zipAvailable":70},[60,63,66],{"tool":61,"command":62},"npx","npx skills add CoralShades\u002Facm-ai --skill design-taste-frontend",{"tool":64,"command":65},"bunx","bunx skills add CoralShades\u002Facm-ai --skill design-taste-frontend",{"tool":67,"command":68},"pnpm","pnpm dlx skills add CoralShades\u002Facm-ai --skill design-taste-frontend","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FCoralShades\u002Facm-ai\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftaste-skill\u002FSKILL.md",true,[72,78,82,86,90],{"path":73,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":76,"sourceHtmlUrl":77},"agents\u002Fopenai.yaml","REFERENCE","参考文档",290,"https:\u002F\u002Fgithub.com\u002FTimothyMeadows\u002FHephaera\u002Fblob\u002Fmain\u002Fskills\u002Funity-build-2d-content\u002Fagents\u002Fopenai.yaml",{"path":79,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":80,"sourceHtmlUrl":81},"README.md",2896,"https:\u002F\u002Fgithub.com\u002FCoralShades\u002Facm-ai\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftaste-skill\u002FREADME.md",{"path":83,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":84,"sourceHtmlUrl":85},"references\u002Fatlas-lifetime.md",3694,"https:\u002F\u002Fgithub.com\u002FTimothyMeadows\u002FHephaera\u002Fblob\u002Fmain\u002Fskills\u002Funity-build-2d-content\u002Freferences\u002Fatlas-lifetime.md",{"path":87,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":88,"sourceHtmlUrl":89},"references\u002Fsprite-identity.md",3123,"https:\u002F\u002Fgithub.com\u002FTimothyMeadows\u002FHephaera\u002Fblob\u002Fmain\u002Fskills\u002Funity-build-2d-content\u002Freferences\u002Fsprite-identity.md",{"path":91,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":92,"sourceHtmlUrl":93},"references\u002Ftilemap-presentation.md",2834,"https:\u002F\u002Fgithub.com\u002FTimothyMeadows\u002FHephaera\u002Fblob\u002Fmain\u002Fskills\u002Funity-build-2d-content\u002Freferences\u002Ftilemap-presentation.md",[95,112,125,141,161,171],{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":102,"publishedAt":46},"01M6C63HKXA890HHV47WBAX0TB","uncodixfy","Prevents generic AI\u002FCodex UI patterns when generating frontend code. Use this skill whenever generating HTML, CSS, React, Vue, Svelte, or any frontend UI code to enforce clean, human-designed aesthetics inspired by Linear, Raycast, Stripe, and GitHub instead of typical AI-generated UI.","https:\u002F\u002Fgithub.com\u002FCoralShades\u002Facm-ai\u002Fblob\u002Fmain\u002F.qwen\u002Fskills\u002Funcodixfy\u002FSKILL.md",[101],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[97,103,32,35,104,105,106,107,41,108,109,110,111],"github","codex","react","code","linear","vue","generated","use","html",{"skillNo":113,"name":114,"nameZh":6,"description":115,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":116,"licenseFileUrl":6,"sourceHtmlUrl":117,"categories":118,"keywords":119,"publishedAt":46},"01M6C63FJ2GEBBGZ5XSMV40KXB","runpodctl","Runpod CLI to manage your GPU workloads.","Apache-2.0","https:\u002F\u002Fgithub.com\u002FCoralShades\u002Facm-ai\u002Fblob\u002Fmain\u002F.qwen\u002Fskills\u002Frunpodctl\u002FSKILL.md",[],[114,120,121,122,123,124],"macos","cli","linux","gpu","Bash",{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":131,"publishedAt":46},"01M6C63DPAV46TFVQ01SFYPJ7X","langgraph-persistence","INVOKE THIS SKILL when your LangGraph needs to persist state, remember conversations, travel through history, or configure subgraph checkpointer scoping. Covers checkpointers, thread_id, time travel, Store, and subgraph persistence modes.","https:\u002F\u002Fgithub.com\u002FCoralShades\u002Facm-ai\u002Fblob\u002Fmain\u002F.qwen\u002Fskills\u002Flanggraph-persistence\u002FSKILL.md",[],[132,133,134,135,136,137,138,139,140],"langgraph persistence","langgraph","persistence","travel","history","scoping","remember","state","configure",{"skillNo":142,"name":143,"nameZh":6,"description":144,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":145,"categories":146,"keywords":150,"publishedAt":46},"01M6C63BNS9CQEBTB8RNSSBFPA","langgraph-human-in-the-loop","INVOKE THIS SKILL when implementing human-in-the-loop patterns, pausing for approval, or handling errors in LangGraph. Covers interrupt(), Command(resume=...), approval\u002Fvalidation workflows, and the 4-tier error handling strategy.","https:\u002F\u002Fgithub.com\u002FCoralShades\u002Facm-ai\u002Fblob\u002Fmain\u002F.qwen\u002Fskills\u002Flanggraph-human-in-the-loop\u002FSKILL.md",[147],{"categoryNo":148,"categoryName":149,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000038","人力资源",[151,152,133,153,154,155,156,157,158,159,160],"langgraph human in the loop","loop","workflows","error handling","validation","human-in-the-loop","command","strategy","approval","resume",{"skillNo":162,"name":163,"nameZh":6,"description":164,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":165,"categories":166,"keywords":167,"publishedAt":46},"01M6C639GVYZFX3NFPV5FBDR4F","langgraph-fundamentals","INVOKE THIS SKILL when writing ANY LangGraph code. Covers StateGraph, state schemas, nodes, edges, Command, Send, invoke, streaming, and error handling.","https:\u002F\u002Fgithub.com\u002FCoralShades\u002Facm-ai\u002Fblob\u002Fmain\u002F.qwen\u002Fskills\u002Flanggraph-fundamentals\u002FSKILL.md",[],[168,133,154,139,169,170,157,106],"langgraph fundamentals","streaming","writing",{"skillNo":172,"name":173,"nameZh":6,"description":174,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":175,"categories":176,"keywords":177,"publishedAt":46},"01M6C6375N34YX2GZ3SD3R7XR2","langchain-rag","INVOKE THIS SKILL when building ANY retrieval-augmented generation (RAG) system. Covers document loaders, RecursiveCharacterTextSplitter, embeddings (OpenAI), and vector stores (Chroma, FAISS, Pinecone).","https:\u002F\u002Fgithub.com\u002FCoralShades\u002Facm-ai\u002Fblob\u002Fmain\u002F.qwen\u002Fskills\u002Flangchain-rag\u002FSKILL.md",[],[178,179,180,181,182,183,184,185,186,187],"rag","langchain rag","langchain","embeddings","vector","openai","chroma","faiss","vector stores","system"]