{"registry":[{"slug":"12-principles-of-animation","name":"12-principles-of-animation","description":"Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.","categories":["motion","interaction","visual"],"agents":["universal"],"author":"raphaelsalaja","external":true,"url":"https://www.uiskillbook.com/skills/12-principles-of-animation","content":"https://www.uiskillbook.com/skills/12-principles-of-animation/llms.txt"},{"slug":"60fps-animation","name":"60fps-animation","description":"Web animation performance guidance for avoiding layout thrashing and reaching smooth 60/120fps motion with compositor-friendly techniques.","categories":["motion","performance","layout"],"agents":["universal"],"author":"iart-ai","external":true,"url":"https://www.uiskillbook.com/skills/60fps-animation","content":"https://www.uiskillbook.com/skills/60fps-animation/llms.txt"},{"slug":"accessibility","name":"accessibility","description":"Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to \"improve accessibility\", \"a11y audit\", \"WCAG compliance\", \"screen reader support\", \"keyboard navigation\", or \"make accessible\".","categories":["accessibility","layout","taste"],"agents":["universal"],"author":"addyosmani","external":true,"url":"https://www.uiskillbook.com/skills/accessibility","content":"https://www.uiskillbook.com/skills/accessibility/llms.txt"},{"slug":"accessibility-diff","name":"accessibility-diff","description":"Regression check that diffs a live page's accessibility violations against a baseline from uncommitted changes or a branch.","categories":["accessibility","layout"],"agents":["universal"],"author":"AccessLint","external":true,"url":"https://www.uiskillbook.com/skills/accessibility-diff","content":"https://www.uiskillbook.com/skills/accessibility-diff/llms.txt"},{"slug":"accessibility-scan","name":"accessibility-scan","description":"Run the AccessLint rule engine against a live page and return a worklist of WCAG 2.2 violations grounded to DOM selectors and source locations.","categories":["accessibility","layout"],"agents":["universal"],"author":"AccessLint","external":true,"url":"https://www.uiskillbook.com/skills/accessibility-scan","content":"https://www.uiskillbook.com/skills/accessibility-scan/llms.txt"},{"slug":"accessible-focus-states","name":"Accessible Focus States","description":"Keep a visible, high-contrast focus indicator on every interactive element, without a generic browser outline or none at all.","categories":["accessibility","interaction"],"agents":["claude-code","codex","cursor","opencode","universal"],"author":"UI Skillbook","external":false,"url":"https://www.uiskillbook.com/skills/accessible-focus-states","content":"https://www.uiskillbook.com/skills/accessible-focus-states/llms.txt"},{"slug":"accessible-animation","name":"accessible-animation","description":"Tiered reduced-motion patterns for CSS, GSAP, Framer Motion, Lenis, and other web animation systems.","categories":["accessibility","motion","layout"],"agents":["universal"],"author":"iart-ai","external":true,"url":"https://www.uiskillbook.com/skills/accessible-animation","content":"https://www.uiskillbook.com/skills/accessible-animation/llms.txt"},{"slug":"adapt","name":"adapt","description":"Adapt designs across breakpoints, device contexts, and platform constraints with responsive interaction quality.","categories":["interaction","design-systems","layout"],"agents":["universal"],"author":"pbakaus","external":true,"url":"https://www.uiskillbook.com/skills/adapt","content":"https://www.uiskillbook.com/skills/adapt/llms.txt"},{"slug":"agent-browser","name":"agent-browser","description":"Browser automation CLI for AI agents for navigation, form actions, extraction, screenshots, QA, and app testing.","categories":["layout"],"agents":["universal"],"author":"vercel-labs","external":true,"url":"https://www.uiskillbook.com/skills/agent-browser","content":"https://www.uiskillbook.com/skills/agent-browser/llms.txt"},{"slug":"emilkowalski-animate","name":"animate","description":"Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.","categories":["motion","interaction","taste"],"agents":["universal"],"author":"emilkowalski","external":true,"url":"https://www.uiskillbook.com/skills/emilkowalski-animate","content":"https://www.uiskillbook.com/skills/emilkowalski-animate/llms.txt"},{"slug":"pbakaus-animate","name":"animate","description":"Enhance UX with purposeful animation and micro-interactions that support usability and delight.","categories":["motion","interaction","layout"],"agents":["universal"],"author":"pbakaus","external":true,"url":"https://www.uiskillbook.com/skills/pbakaus-animate","content":"https://www.uiskillbook.com/skills/pbakaus-animate/llms.txt"},{"slug":"animate-expo","name":"animate-expo","description":"Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.","categories":["motion","interaction","layout"],"agents":["universal"],"author":"emilkowalski","external":true,"url":"https://www.uiskillbook.com/skills/animate-expo","content":"https://www.uiskillbook.com/skills/animate-expo/llms.txt"},{"slug":"animation-on-scroll","name":"animation-on-scroll","description":"Use when you need scroll-driven motion that feels intentional instead of noisy or overdone.","categories":["motion","interaction","layout"],"agents":["universal"],"author":"MengTo","external":true,"url":"https://www.uiskillbook.com/skills/animation-on-scroll","content":"https://www.uiskillbook.com/skills/animation-on-scroll/llms.txt"},{"slug":"animation-systems","name":"animation-systems","description":"Use when building a coherent animation system instead of one-off motion tweaks.","categories":["motion","design-systems","layout"],"agents":["universal"],"author":"MengTo","external":true,"url":"https://www.uiskillbook.com/skills/animation-systems","content":"https://www.uiskillbook.com/skills/animation-systems/llms.txt"},{"slug":"animation-vocabulary","name":"animation-vocabulary","description":"Sharpen motion language so animation choices feel deliberate and consistent.","categories":["motion","visual","taste"],"agents":["universal"],"author":"emilkowalski","external":true,"url":"https://www.uiskillbook.com/skills/animation-vocabulary","content":"https://www.uiskillbook.com/skills/animation-vocabulary/llms.txt"},{"slug":"antfu","name":"antfu","description":"Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects.","categories":["layout","performance"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/antfu","content":"https://www.uiskillbook.com/skills/antfu/llms.txt"},{"slug":"antfu-design","name":"antfu-design","description":"antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.","categories":["layout","taste","visual"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/antfu-design","content":"https://www.uiskillbook.com/skills/antfu-design/llms.txt"},{"slug":"anti-ai-slop-writing","name":"anti-ai-slop-writing","description":"Produce human-sounding text that avoids detectable AI patterns with banned vocabulary, structural variety, and voice calibration.","categories":["taste"],"agents":["universal"],"author":"jalaalrd","external":true,"url":"https://www.uiskillbook.com/skills/anti-ai-slop-writing","content":"https://www.uiskillbook.com/skills/anti-ai-slop-writing/llms.txt"},{"slug":"anti-slop","name":"anti-slop","description":"Detect and remove AI writing tells from prose while preserving the author's voice in blogs, docs, emails, and reports.","categories":["taste"],"agents":["universal"],"author":"elithrar","external":true,"url":"https://www.uiskillbook.com/skills/anti-slop","content":"https://www.uiskillbook.com/skills/anti-slop/llms.txt"},{"slug":"apple-design","name":"apple-design","description":"Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.","categories":["motion","interaction","visual"],"agents":["universal"],"author":"emilkowalski","external":true,"url":"https://www.uiskillbook.com/skills/apple-design","content":"https://www.uiskillbook.com/skills/apple-design/llms.txt"},{"slug":"apply-design-system","name":"apply-design-system","description":"Reconnect an existing Figma design to published design system components instead of detached layers, local wrappers, or one-off assets.","categories":["design-systems","taste","layout"],"agents":["universal"],"author":"edenspiekermann","external":true,"url":"https://www.uiskillbook.com/skills/apply-design-system","content":"https://www.uiskillbook.com/skills/apply-design-system/llms.txt"},{"slug":"ascii-animation","name":"ascii-animation","description":"This skill should be used when the user asks to \"make an ASCII animation\", \"build a terminal/CLI intro or loader\", \"convert an image or video to ASCII art\", \"add an ASCII shader/post-effect to a canvas or Three.js scene\", \"create retro/hacker text-character motion\", or \"animate text characters with a brightness ramp\". Covers generative ASCII fields, image/video/3D-to-ASCII, and animated character art for both web and terminal.","categories":["motion","layout"],"agents":["universal"],"author":"iart-ai","external":true,"url":"https://www.uiskillbook.com/skills/ascii-animation","content":"https://www.uiskillbook.com/skills/ascii-animation/llms.txt"},{"slug":"ask-matt","name":"ask-matt","description":"Router that picks the right Matt Pocock engineering flow for the current task.","categories":["design-systems","layout"],"agents":["universal"],"author":"mattpocock","external":true,"url":"https://www.uiskillbook.com/skills/ask-matt","content":"https://www.uiskillbook.com/skills/ask-matt/llms.txt"},{"slug":"ask-sonner","name":"ask-sonner","description":"Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and icons, positioning and multiple toasters. Use when working with Sonner or troubleshooting it — toasts that don't appear, appear twice, lose their styles, ignore Tailwind classes, sit behind a modal, or don't follow dark mode.","categories":["layout","interaction"],"agents":["universal"],"author":"emilkowalski","external":true,"url":"https://www.uiskillbook.com/skills/ask-sonner","content":"https://www.uiskillbook.com/skills/ask-sonner/llms.txt"},{"slug":"audit","name":"audit","description":"Run technical UI quality audits across accessibility, performance, theming, responsive behavior, and anti-patterns.","categories":["accessibility","performance"],"agents":["universal"],"author":"pbakaus","external":true,"url":"https://www.uiskillbook.com/skills/audit","content":"https://www.uiskillbook.com/skills/audit/llms.txt"},{"slug":"audit-and-fix","name":"audit-and-fix","description":"Accessibility auditing and remediation workflow that combines detection, prioritization, and practical fixes for WCAG issues.","categories":["accessibility","layout"],"agents":["universal"],"author":"AccessLint","external":true,"url":"https://www.uiskillbook.com/skills/audit-and-fix","content":"https://www.uiskillbook.com/skills/audit-and-fix/llms.txt"},{"slug":"audit-design-system","name":"audit-design-system","description":"Audit a Figma screen or component for design-system drift, including missing shared components, local overrides, and unbound tokens.","categories":["design-systems","taste","layout"],"agents":["universal"],"author":"edenspiekermann","external":true,"url":"https://www.uiskillbook.com/skills/audit-design-system","content":"https://www.uiskillbook.com/skills/audit-design-system/llms.txt"},{"slug":"balise-ux-writing","name":"balise-ux-writing","description":"Reviews, rewrites, creates, harmonizes, and implements user-centered interface copy across design files, screenshots, product specifications, source code, localization catalogs, prototypes, and rendered applications. Use for buttons, navigation, forms, errors, empty states, onboarding, confirmations, settings, consent, notifications, help, and system feedback while preserving product behavior, terminology, voice, accessibility, localization, legal meaning, component structure, and implementation constraints.","categories":["taste","layout","accessibility"],"agents":["universal"],"author":"mrstev3n","external":true,"url":"https://www.uiskillbook.com/skills/balise-ux-writing","content":"https://www.uiskillbook.com/skills/balise-ux-writing/llms.txt"},{"slug":"banner-design","name":"banner-design","description":"Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"nextlevelbuilder","external":true,"url":"https://www.uiskillbook.com/skills/banner-design","content":"https://www.uiskillbook.com/skills/banner-design/llms.txt"},{"slug":"baseline-ui","name":"baseline-ui","description":"Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.","categories":["design-systems","visual","taste"],"agents":["universal"],"author":"ibelick","external":true,"url":"https://www.uiskillbook.com/skills/baseline-ui","content":"https://www.uiskillbook.com/skills/baseline-ui/llms.txt"},{"slug":"beautiful-shadows","name":"beautiful-shadows","description":"Use when a UI needs better depth, elevation, and shadow treatment without looking muddy.","categories":["visual","taste","layout"],"agents":["universal"],"author":"MengTo","external":true,"url":"https://www.uiskillbook.com/skills/beautiful-shadows","content":"https://www.uiskillbook.com/skills/beautiful-shadows/llms.txt"},{"slug":"bencium-innovative-ux-designer","name":"bencium-innovative-ux-designer","description":"Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"bencium","external":true,"url":"https://www.uiskillbook.com/skills/bencium-innovative-ux-designer","content":"https://www.uiskillbook.com/skills/bencium-innovative-ux-designer/llms.txt"},{"slug":"best-practices","name":"best-practices","description":"Apply modern web development best practices for security, compatibility, and code quality. Use when asked to \"apply best practices\", \"security audit\", \"modernize code\", \"code quality review\", or \"check for vulnerabilities\".","categories":["performance","layout","taste"],"agents":["universal"],"author":"addyosmani","external":true,"url":"https://www.uiskillbook.com/skills/best-practices","content":"https://www.uiskillbook.com/skills/best-practices/llms.txt"},{"slug":"better-accessibility","name":"better-accessibility","description":"Review and improve focus states, keyboard support, ARIA, forms, screen readers, hit areas, and motion accessibility.","categories":["accessibility","interaction"],"agents":["universal"],"author":"jakubkrehel","external":true,"url":"https://www.uiskillbook.com/skills/better-accessibility","content":"https://www.uiskillbook.com/skills/better-accessibility/llms.txt"},{"slug":"better-colors","name":"better-colors","description":"OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.","categories":["visual","accessibility","design-systems"],"agents":["universal"],"author":"jakubkrehel","external":true,"url":"https://www.uiskillbook.com/skills/better-colors","content":"https://www.uiskillbook.com/skills/better-colors/llms.txt"},{"slug":"better-interface","name":"better-interface","description":"Run a holistic interface review across accessibility, layout, writing, typography, color, and visual polish.","categories":["visual","accessibility","design-systems","taste"],"agents":["universal"],"author":"jakubkrehel","external":true,"url":"https://www.uiskillbook.com/skills/better-interface","content":"https://www.uiskillbook.com/skills/better-interface/llms.txt"},{"slug":"better-layout","name":"better-layout","description":"Improve interface structure through grouping, alignment, reading order, progressive disclosure, and adaptive responsive layouts.","categories":["design-systems","visual","layout"],"agents":["universal"],"author":"jakubkrehel","external":true,"url":"https://www.uiskillbook.com/skills/better-layout","content":"https://www.uiskillbook.com/skills/better-layout/llms.txt"},{"slug":"better-typography","name":"better-typography","description":"Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.","categories":["typography","visual","accessibility"],"agents":["universal"],"author":"jakubkrehel","external":true,"url":"https://www.uiskillbook.com/skills/better-typography","content":"https://www.uiskillbook.com/skills/better-typography/llms.txt"},{"slug":"better-ui","name":"better-ui","description":"Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, \"make it feel better\", \"feels off\", stagger animations, border radius, optical alignment, image outlines, box shadows.","categories":["visual","interaction","motion"],"agents":["universal"],"author":"jakubkrehel","external":true,"url":"https://www.uiskillbook.com/skills/better-ui","content":"https://www.uiskillbook.com/skills/better-ui/llms.txt"},{"slug":"better-writing","name":"better-writing","description":"Improve UX writing for interface labels, errors, empty states, settings, notifications, and product voice consistency.","categories":["layout","accessibility","taste"],"agents":["universal"],"author":"jakubkrehel","external":true,"url":"https://www.uiskillbook.com/skills/better-writing","content":"https://www.uiskillbook.com/skills/better-writing/llms.txt"},{"slug":"bolder","name":"bolder","description":"Increase visual impact and personality for interfaces that feel too safe, bland, or generic.","categories":["visual","interaction","taste"],"agents":["universal"],"author":"pbakaus","external":true,"url":"https://www.uiskillbook.com/skills/bolder","content":"https://www.uiskillbook.com/skills/bolder/llms.txt"},{"slug":"brag","name":"brag","description":"Turn a finished project into a short shareable launch video with motion, music, and copy.","categories":["motion","layout"],"agents":["universal"],"author":"latent-spaces","external":true,"url":"https://www.uiskillbook.com/skills/brag","content":"https://www.uiskillbook.com/skills/brag/llms.txt"},{"slug":"brand","name":"brand","description":"Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"nextlevelbuilder","external":true,"url":"https://www.uiskillbook.com/skills/brand","content":"https://www.uiskillbook.com/skills/brand/llms.txt"},{"slug":"brandkit","name":"brandkit","description":"Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"Leonxlnx","external":true,"url":"https://www.uiskillbook.com/skills/brandkit","content":"https://www.uiskillbook.com/skills/brandkit/llms.txt"},{"slug":"break","name":"break","description":"Answers \"does this survive?\" for one component. Renders it on a page in every state real use can put it in, and hands that page over as a visual report of what broke.","categories":["layout","taste","visual"],"agents":["universal"],"author":"jakubkrehel","external":true,"url":"https://www.uiskillbook.com/skills/break","content":"https://www.uiskillbook.com/skills/break/llms.txt"},{"slug":"bro","name":"bro","description":"Re-explain the previous assistant message in a much simpler, plain-language version when the last answer was too dense.","categories":["taste","interaction"],"agents":["universal"],"author":"luchasarie","external":true,"url":"https://www.uiskillbook.com/skills/bro","content":"https://www.uiskillbook.com/skills/bro/llms.txt"},{"slug":"budge","name":"budge","description":"Use when making single-property CSS or Tailwind visual changes in Next.js App Router projects. Presents a floating control widget for live tuning before persisting.","categories":["visual","layout"],"agents":["universal"],"author":"millionco","external":true,"url":"https://www.uiskillbook.com/skills/budge","content":"https://www.uiskillbook.com/skills/budge/llms.txt"},{"slug":"build-primitive","name":"build-primitive","description":"Build foundational UI primitives from scratch with strong ARIA, keyboard, focus, and state handling.","categories":["accessibility","interaction","design-systems","layout"],"agents":["universal"],"author":"PrototyperAI","external":true,"url":"https://www.uiskillbook.com/skills/build-primitive","content":"https://www.uiskillbook.com/skills/build-primitive/llms.txt"},{"slug":"canvas-design","name":"canvas-design","description":"Create original visual designs and art on digital canvases using design philosophy, focusing on form, space, and color.","categories":["visual","interaction","layout"],"agents":["universal"],"author":"anthropics","external":true,"url":"https://www.uiskillbook.com/skills/canvas-design","content":"https://www.uiskillbook.com/skills/canvas-design/llms.txt"},{"slug":"cc-figma-component","name":"cc-figma-component","description":"Generate variable-bound Figma component sets from component-contract definitions after the token collections exist.","categories":["design-systems","layout"],"agents":["universal"],"author":"nvillapiano","external":true,"url":"https://www.uiskillbook.com/skills/cc-figma-component","content":"https://www.uiskillbook.com/skills/cc-figma-component/llms.txt"},{"slug":"cc-figma-tokens","name":"cc-figma-tokens","description":"Build or update Figma Primitive and Semantic variable collections from component-contracts token files.","categories":["design-systems","visual","layout"],"agents":["universal"],"author":"nvillapiano","external":true,"url":"https://www.uiskillbook.com/skills/cc-figma-tokens","content":"https://www.uiskillbook.com/skills/cc-figma-tokens/llms.txt"},{"slug":"clarify","name":"clarify","description":"Improve labels, microcopy, and UX messaging so interface text is clearer and easier to act on.","categories":["interaction","design-systems","layout"],"agents":["universal"],"author":"pbakaus","external":true,"url":"https://www.uiskillbook.com/skills/clarify","content":"https://www.uiskillbook.com/skills/clarify/llms.txt"},{"slug":"cobejs","name":"cobejs","description":"Use when building lightweight animated globe or orb visuals with Cobe.","categories":["visual","layout"],"agents":["universal"],"author":"MengTo","external":true,"url":"https://www.uiskillbook.com/skills/cobejs","content":"https://www.uiskillbook.com/skills/cobejs/llms.txt"},{"slug":"codebase-design","name":"codebase-design","description":"Guidance for designing deep modules with small interfaces and clean seams.","categories":["design-systems"],"agents":["universal"],"author":"mattpocock","external":true,"url":"https://www.uiskillbook.com/skills/codebase-design","content":"https://www.uiskillbook.com/skills/codebase-design/llms.txt"},{"slug":"color-contrast-for-taste","name":"Color Contrast for Taste, Not Just Compliance","description":"Use accessible contrast ratios as a floor, then build restrained hierarchy on top of them rather than treating them as the whole job.","categories":["visual","accessibility","taste"],"agents":["claude-code","codex","cursor","opencode","universal"],"author":"UI Skillbook","external":false,"url":"https://www.uiskillbook.com/skills/color-contrast-for-taste","content":"https://www.uiskillbook.com/skills/color-contrast-for-taste/llms.txt"},{"slug":"colorize","name":"colorize","description":"Introduce strategic color systems to interfaces that feel dull, monochrome, or visually flat.","categories":["visual","design-systems"],"agents":["universal"],"author":"pbakaus","external":true,"url":"https://www.uiskillbook.com/skills/colorize","content":"https://www.uiskillbook.com/skills/colorize/llms.txt"},{"slug":"compact-landing","name":"compact-landing","description":"Build compact premium landing pages with clear CTA hierarchy, quiet typography, and minimal visual noise.","categories":["visual","taste","typography","layout"],"agents":["universal"],"author":"Danilaa1","external":true,"url":"https://www.uiskillbook.com/skills/compact-landing","content":"https://www.uiskillbook.com/skills/compact-landing/llms.txt"},{"slug":"company-logos","name":"company-logos","description":"Use when laying out logos, trust rows, or brand collections in a clean and balanced way.","categories":["design-systems","visual","layout"],"agents":["universal"],"author":"MengTo","external":true,"url":"https://www.uiskillbook.com/skills/company-logos","content":"https://www.uiskillbook.com/skills/company-logos/llms.txt"},{"slug":"container-lines","name":"container-lines","description":"Use when using borders and container structure as part of the visual system.","categories":["design-systems","visual","layout"],"agents":["universal"],"author":"MengTo","external":true,"url":"https://www.uiskillbook.com/skills/container-lines","content":"https://www.uiskillbook.com/skills/container-lines/llms.txt"},{"slug":"contrast-checker","name":"contrast-checker","description":"Compatibility listing for contrast-checker installs from AccessLint's marketplace skill set.","categories":["accessibility","visual"],"agents":["universal"],"author":"AccessLint","external":true,"url":"https://www.uiskillbook.com/skills/contrast-checker","content":"https://www.uiskillbook.com/skills/contrast-checker/llms.txt"},{"slug":"core-web-vitals","name":"core-web-vitals","description":"Optimize Core Web Vitals (LCP, INP, CLS) for better page experience using field and lab evidence. Use when asked to \"improve Core Web Vitals\", \"fix LCP\", \"reduce CLS\", \"optimize INP\", \"page experience optimization\", or \"fix layout shifts\".","categories":["performance","layout","taste"],"agents":["universal"],"author":"addyosmani","external":true,"url":"https://www.uiskillbook.com/skills/core-web-vitals","content":"https://www.uiskillbook.com/skills/core-web-vitals/llms.txt"},{"slug":"create-adaptable-composable","name":"create-adaptable-composable","description":"Create library-grade Vue composables that support plain values, refs, and getters with predictable reactivity.","categories":["layout"],"agents":["universal"],"author":"vuejs-ai","external":true,"url":"https://www.uiskillbook.com/skills/create-adaptable-composable","content":"https://www.uiskillbook.com/skills/create-adaptable-composable/llms.txt"},{"slug":"create-anatomy","name":"create-anatomy","description":"Generate a visual anatomy annotation in Figma showing numbered markers on a component instance with an attribute table. Use when the user mentions anatomy, anatomy annotation, component anatomy, create anatomy, or wants to annotate a component's structural elements.","categories":["design-systems","layout","accessibility"],"agents":["universal"],"author":"redongreen","external":true,"url":"https://www.uiskillbook.com/skills/create-anatomy","content":"https://www.uiskillbook.com/skills/create-anatomy/llms.txt"},{"slug":"create-design-md","name":"create-design-md","description":"Create or update a DESIGN.md from an existing product repository or public website, with evidence-based design tokens and guidance.","categories":["design-systems","visual"],"agents":["universal"],"author":"ibelick","external":true,"url":"https://www.uiskillbook.com/skills/create-design-md","content":"https://www.uiskillbook.com/skills/create-design-md/llms.txt"},{"slug":"create-voice","name":"create-voice","description":"Generate VoiceOver, TalkBack, and ARIA screen reader specs in Figma with focus order, property tables, and announcements by component state.","categories":["accessibility","design-systems","layout"],"agents":["universal"],"author":"redongreen","external":true,"url":"https://www.uiskillbook.com/skills/create-voice","content":"https://www.uiskillbook.com/skills/create-voice/llms.txt"},{"slug":"critique","name":"critique","description":"Evaluate design quality with structured UX scoring, persona checks, and actionable remediation guidance.","categories":["visual","taste"],"agents":["universal"],"author":"pbakaus","external":true,"url":"https://www.uiskillbook.com/skills/critique","content":"https://www.uiskillbook.com/skills/critique/llms.txt"},{"slug":"daisyui","name":"daisyui","description":"Official daisyUI component library skill, providing docs, class names, examples and code examples to generate better daisyUI code.","categories":["visual","layout"],"agents":["universal"],"author":"saadeghi","external":true,"url":"https://www.uiskillbook.com/skills/daisyui","content":"https://www.uiskillbook.com/skills/daisyui/llms.txt"},{"slug":"dashboard-information-density","name":"Dashboard Information Density","description":"Fit more real information on screen without it reading as cluttered, by controlling hierarchy instead of shrinking everything uniformly.","categories":["layout","design-systems"],"agents":["claude-code","codex","cursor","opencode","universal"],"author":"UI Skillbook","external":false,"url":"https://www.uiskillbook.com/skills/dashboard-information-density","content":"https://www.uiskillbook.com/skills/dashboard-information-density/llms.txt"},{"slug":"data-table-scannability","name":"Data Table Scannability","description":"Structure table rows and columns so the eye can scan down and across without losing its place.","categories":["layout","visual"],"agents":["claude-code","codex","cursor","opencode","universal"],"author":"UI Skillbook","external":false,"url":"https://www.uiskillbook.com/skills/data-table-scannability","content":"https://www.uiskillbook.com/skills/data-table-scannability/llms.txt"},{"slug":"define-goal","name":"define-goal","description":"Help the user define a concrete, measurable goal before starting work, especially when they ask to use the goal tool, create a goal, set an objective, clarify success criteria, or turn a fuzzy intention into a quantitative outcome. Use this skill for goal creation and goal refinement only; it does not manage durable snapshots, decision logs, or long-running execution artifacts.","categories":["design-systems"],"agents":["universal"],"author":"openai","external":true,"url":"https://www.uiskillbook.com/skills/define-goal","content":"https://www.uiskillbook.com/skills/define-goal/llms.txt"},{"slug":"delight","name":"delight","description":"Add personality and memorable moments through thoughtful interaction details and emotional UX touches.","categories":["interaction","motion","taste"],"agents":["universal"],"author":"pbakaus","external":true,"url":"https://www.uiskillbook.com/skills/delight","content":"https://www.uiskillbook.com/skills/delight/llms.txt"},{"slug":"design","name":"design","description":"Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"nextlevelbuilder","external":true,"url":"https://www.uiskillbook.com/skills/design","content":"https://www.uiskillbook.com/skills/design/llms.txt"},{"slug":"design-first-ui-prompting","name":"design-first-ui-prompting","description":"Use when you want to turn a product goal into a design-first UI prompt with clear layout, type, color, and constraint choices.","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"MengTo","external":true,"url":"https://www.uiskillbook.com/skills/design-first-ui-prompting","content":"https://www.uiskillbook.com/skills/design-first-ui-prompting/llms.txt"},{"slug":"design-lab","name":"design-lab","description":"Interactive design exploration workflow: conduct interviews, generate variants, and refine UI designs through feedback.","categories":["visual","interaction","design-systems"],"agents":["universal"],"author":"0xdesign","external":true,"url":"https://www.uiskillbook.com/skills/design-lab","content":"https://www.uiskillbook.com/skills/design-lab/llms.txt"},{"slug":"design-review","name":"design-review","description":"Run a sharp, prioritized design critique of a UI — a URL, a screenshot/image, or a component file — covering visual hierarchy, typography, spacing, color & contrast, motion, component states, responsiveness, accessibility, and brand consistency. Returns findings ranked from blocking to polish, each with a specific fix; can optionally apply the fixes to code. Use when the user asks to review/critique a design, page, screen, component, or screenshot, or to check craft/accessibility before shipping.","categories":["visual","taste","accessibility"],"agents":["universal"],"author":"Superfuture","external":true,"url":"https://www.uiskillbook.com/skills/design-review","content":"https://www.uiskillbook.com/skills/design-review/llms.txt"},{"slug":"design-system","name":"design-system","description":"Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"nextlevelbuilder","external":true,"url":"https://www.uiskillbook.com/skills/design-system","content":"https://www.uiskillbook.com/skills/design-system/llms.txt"},{"slug":"taste-skill","name":"design-taste-frontend","description":"Senior UI/UX frontend skill that enforces anti-slop design decisions, motion quality, and architecture discipline.","categories":["taste","visual","layout"],"agents":["universal"],"author":"Leonxlnx","external":true,"url":"https://www.uiskillbook.com/skills/taste-skill","content":"https://www.uiskillbook.com/skills/taste-skill/llms.txt"},{"slug":"deslop","name":"deslop","description":"Remove AI writing patterns from prose so drafts, edits, and reviews sound like a specific human wrote them.","categories":["taste"],"agents":["universal"],"author":"stephenturner","external":true,"url":"https://www.uiskillbook.com/skills/deslop","content":"https://www.uiskillbook.com/skills/deslop/llms.txt"},{"slug":"diagnosing-bugs","name":"diagnosing-bugs","description":"Systematic bug diagnosis through reproduce, minimize, hypothesize, instrument, and fix.","categories":["layout"],"agents":["universal"],"author":"mattpocock","external":true,"url":"https://www.uiskillbook.com/skills/diagnosing-bugs","content":"https://www.uiskillbook.com/skills/diagnosing-bugs/llms.txt"},{"slug":"distill","name":"distill","description":"Simplify noisy interfaces by removing non-essential complexity and restoring clear visual focus.","categories":["design-systems","interaction","taste"],"agents":["universal"],"author":"pbakaus","external":true,"url":"https://www.uiskillbook.com/skills/distill","content":"https://www.uiskillbook.com/skills/distill/llms.txt"},{"slug":"domain-modeling","name":"domain-modeling","description":"Builds and sharpens project domain models and terminology.","categories":["design-systems","layout"],"agents":["universal"],"author":"mattpocock","external":true,"url":"https://www.uiskillbook.com/skills/domain-modeling","content":"https://www.uiskillbook.com/skills/domain-modeling/llms.txt"},{"slug":"effect","name":"effect","description":"Opinionated guidance for building production TypeScript applications with Effect v4, including workflows, services, layers, schemas, configuration, scheduling, caching, streams, HTTP clients, and tests.","categories":["design-systems"],"agents":["universal"],"author":"kitlangton","external":true,"url":"https://www.uiskillbook.com/skills/effect","content":"https://www.uiskillbook.com/skills/effect/llms.txt"},{"slug":"emil-design-eng","name":"emil-design-eng","description":"Emil Kowalski's design-engineering philosophy for UI polish, components, animation, and production-ready frontend craft.","categories":["taste","visual"],"agents":["universal"],"author":"emilkowalski","external":true,"url":"https://www.uiskillbook.com/skills/emil-design-eng","content":"https://www.uiskillbook.com/skills/emil-design-eng/llms.txt"},{"slug":"empty-state-design","name":"Empty States That Do Something","description":"Treat empty states as an onboarding opportunity, not a placeholder to fill later.","categories":["visual","taste"],"agents":["claude-code","codex","cursor","opencode","universal"],"author":"UI Skillbook","external":false,"url":"https://www.uiskillbook.com/skills/empty-state-design","content":"https://www.uiskillbook.com/skills/empty-state-design/llms.txt"},{"slug":"engineering","name":"engineering","description":"Routing bundle for code work covering planning, debugging, TDD, architecture, and execution flows.","categories":["design-systems"],"agents":["universal"],"author":"mattpocock","external":true,"url":"https://www.uiskillbook.com/skills/engineering","content":"https://www.uiskillbook.com/skills/engineering/llms.txt"},{"slug":"explain-interface","name":"explain-interface","description":"Answers how was this built about an interface. Give it a URL and name the thing you're curious about, and it reads the layers that produce the effect. Reads the whole frontend instead when you don't name a thing. From a screenshot it reconstructs rather than reads and says so.","categories":["taste","layout","visual","design-systems"],"agents":["universal"],"author":"jakubkrehel","external":true,"url":"https://www.uiskillbook.com/skills/explain-interface","content":"https://www.uiskillbook.com/skills/explain-interface/llms.txt"},{"slug":"figma-code-connect","name":"figma-code-connect","description":"Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"figma","external":true,"url":"https://www.uiskillbook.com/skills/figma-code-connect","content":"https://www.uiskillbook.com/skills/figma-code-connect/llms.txt"},{"slug":"figma-create-new-file","name":"figma-create-new-file","description":"**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this skill first. Trigger whenever the user wants a new blank Figma file — a new design, FigJam, or Slides file — or when you need a fresh file before calling `use_figma`. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard, /figma-create-new-file slides Q3 Review)","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"figma","external":true,"url":"https://www.uiskillbook.com/skills/figma-create-new-file","content":"https://www.uiskillbook.com/skills/figma-create-new-file/llms.txt"},{"slug":"figma-design-to-code","name":"figma-design-to-code","description":"**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"figma","external":true,"url":"https://www.uiskillbook.com/skills/figma-design-to-code","content":"https://www.uiskillbook.com/skills/figma-design-to-code/llms.txt"},{"slug":"figma-generate-design","name":"figma-generate-design","description":"Translate pages and multi-section layouts into Figma by discovering design system components, variables, and assembling screens section by section.","categories":["design-systems","visual","layout"],"agents":["universal"],"author":"figma","external":true,"url":"https://www.uiskillbook.com/skills/figma-generate-design","content":"https://www.uiskillbook.com/skills/figma-generate-design/llms.txt"},{"slug":"figma-generate-diagram","name":"figma-generate-diagram","description":"MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"figma","external":true,"url":"https://www.uiskillbook.com/skills/figma-generate-diagram","content":"https://www.uiskillbook.com/skills/figma-generate-diagram/llms.txt"},{"slug":"figma-generate-library","name":"figma-generate-library","description":"Build or update a professional design system in Figma from a codebase, including tokens, variant sets, theming, and component libraries.","categories":["design-systems","taste","layout"],"agents":["universal"],"author":"figma","external":true,"url":"https://www.uiskillbook.com/skills/figma-generate-library","content":"https://www.uiskillbook.com/skills/figma-generate-library/llms.txt"},{"slug":"figma-implement-motion","name":"figma-implement-motion","description":"Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions \"implement this motion\", \"add animation from Figma\", \"animate this component\", provides a Figma URL whose node is animated, or when `get_design_context` returns motion data or instructs you to call `get_motion_context`.","categories":["motion","layout"],"agents":["universal"],"author":"figma","external":true,"url":"https://www.uiskillbook.com/skills/figma-implement-motion","content":"https://www.uiskillbook.com/skills/figma-implement-motion/llms.txt"},{"slug":"figma-swiftui","name":"figma-swiftui","description":"SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code → design). Triggers on phrases like 'implement this Figma design in SwiftUI', 'build this screen in Swift', 'push this SwiftUI view to Figma', 'mirror my Swift code in a Figma file', or whenever a Figma URL appears alongside `.swift` files / an `.xcodeproj`. Routes to a direction-specific reference doc; loads alongside `figma-use` for the code → design path.","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"figma","external":true,"url":"https://www.uiskillbook.com/skills/figma-swiftui","content":"https://www.uiskillbook.com/skills/figma-swiftui/llms.txt"},{"slug":"figma-use","name":"figma-use","description":"Mandatory prerequisite before every use_figma call — plugin API rules for creating, editing, and inspecting Figma files through MCP.","categories":["design-systems","layout"],"agents":["universal"],"author":"figma","external":true,"url":"https://www.uiskillbook.com/skills/figma-use","content":"https://www.uiskillbook.com/skills/figma-use/llms.txt"},{"slug":"figma-use-figjam","name":"figma-use-figjam","description":"This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool.","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"figma","external":true,"url":"https://www.uiskillbook.com/skills/figma-use-figjam","content":"https://www.uiskillbook.com/skills/figma-use-figjam/llms.txt"},{"slug":"figma-use-motion","name":"figma-use-motion","description":"Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a node.","categories":["motion","layout"],"agents":["universal"],"author":"figma","external":true,"url":"https://www.uiskillbook.com/skills/figma-use-motion","content":"https://www.uiskillbook.com/skills/figma-use-motion/llms.txt"},{"slug":"figma-use-slides","name":"figma-use-slides","description":"This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the use_figma tool.","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"figma","external":true,"url":"https://www.uiskillbook.com/skills/figma-use-slides","content":"https://www.uiskillbook.com/skills/figma-use-slides/llms.txt"},{"slug":"find-animation-opportunities","name":"find-animation-opportunities","description":"Find high-conviction opportunities for useful interface motion while rejecting animation that adds noise or slows users down.","categories":["motion","interaction","taste"],"agents":["universal"],"author":"emilkowalski","external":true,"url":"https://www.uiskillbook.com/skills/find-animation-opportunities","content":"https://www.uiskillbook.com/skills/find-animation-opportunities/llms.txt"},{"slug":"fixing-accessibility","name":"fixing-accessibility","description":"Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.","categories":["accessibility","layout"],"agents":["universal"],"author":"ibelick","external":true,"url":"https://www.uiskillbook.com/skills/fixing-accessibility","content":"https://www.uiskillbook.com/skills/fixing-accessibility/llms.txt"},{"slug":"fixing-metadata","name":"fixing-metadata","description":"Audit and fix page metadata including titles, meta descriptions, Open Graph, Twitter cards, canonical URLs, and JSON-LD structured data. Use when shipping new pages or fixing SEO and social preview issues.","categories":["design-systems","layout"],"agents":["universal"],"author":"ibelick","external":true,"url":"https://www.uiskillbook.com/skills/fixing-metadata","content":"https://www.uiskillbook.com/skills/fixing-metadata/llms.txt"},{"slug":"fixing-motion-performance","name":"fixing-motion-performance","description":"Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.","categories":["motion","performance","layout"],"agents":["universal"],"author":"ibelick","external":true,"url":"https://www.uiskillbook.com/skills/fixing-motion-performance","content":"https://www.uiskillbook.com/skills/fixing-motion-performance/llms.txt"},{"slug":"form-field-validation-timing","name":"Form Field Validation Timing","description":"Validate at the right moment — not on every keystroke, not only on submit.","categories":["forms","interaction"],"agents":["claude-code","codex","cursor","opencode","universal"],"author":"UI Skillbook","external":false,"url":"https://www.uiskillbook.com/skills/form-field-validation-timing","content":"https://www.uiskillbook.com/skills/form-field-validation-timing/llms.txt"},{"slug":"frontend-design","name":"frontend-design","description":"Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code and UI design that avoids generic AI aesthetics.","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"anthropics","external":true,"url":"https://www.uiskillbook.com/skills/frontend-design","content":"https://www.uiskillbook.com/skills/frontend-design/llms.txt"},{"slug":"frontend-slides","name":"frontend-slides","description":"Create animation-rich HTML presentations from scratch or convert PPT/PPTX files into polished web slides.","categories":["motion","visual","layout"],"agents":["universal"],"author":"zarazhangrui","external":true,"url":"https://www.uiskillbook.com/skills/frontend-slides","content":"https://www.uiskillbook.com/skills/frontend-slides/llms.txt"},{"slug":"frontend-ui-engineering","name":"frontend-ui-engineering","description":"Frontend UI engineering guidance covering component architecture, responsive design, accessibility, and maintainable implementation patterns.","categories":["layout","design-systems","accessibility"],"agents":["universal"],"author":"addyosmani","external":true,"url":"https://www.uiskillbook.com/skills/frontend-ui-engineering","content":"https://www.uiskillbook.com/skills/frontend-ui-engineering/llms.txt"},{"slug":"output-skill","name":"full-output-enforcement","description":"Enforces complete, non-truncated code output and blocks placeholder or half-finished responses.","categories":["layout"],"agents":["universal"],"author":"Leonxlnx","external":true,"url":"https://www.uiskillbook.com/skills/output-skill","content":"https://www.uiskillbook.com/skills/output-skill/llms.txt"},{"slug":"gc-minimal-zine-poster-v0-1","name":"gc-minimal-zine-poster-v0-1","description":"Generate quiet minimal zine-style editorial poster prompts and matching raster images from themes, moods, objects, photos, or content briefs.","categories":["visual","typography"],"agents":["universal"],"author":"LiamGvchi","external":true,"url":"https://www.uiskillbook.com/skills/gc-minimal-zine-poster-v0-1","content":"https://www.uiskillbook.com/skills/gc-minimal-zine-poster-v0-1/llms.txt"},{"slug":"generate-project-plan","name":"generate-project-plan","description":"Generate a FigJam project plan board from a PRD plus codebase context. Interactive flow: research → propose sections → per-section deep research → per-section content + block-shape proposal → create FigJam → skeleton → fill → diagrams → wrap. Each content block (section, nested section, intro callout, table, multi-column text, sticky column, diagram section, metadata strip) has its own subskill reference file. Use when the user asks for 'project plan in FigJam', 'interactive project plan', '/generate-project-plan', or provides a PRD and wants per-section confirmation on content + rendering.","categories":["layout","taste","visual"],"agents":["universal"],"author":"figma","external":true,"url":"https://www.uiskillbook.com/skills/generate-project-plan","content":"https://www.uiskillbook.com/skills/generate-project-plan/llms.txt"},{"slug":"generating-sounds-with-ai","name":"generating-sounds-with-ai","description":"Audit Web Audio API code for procedural sound synthesis quality, UX decisions, and parameter best practices.","categories":["interaction","layout"],"agents":["universal"],"author":"raphaelsalaja","external":true,"url":"https://www.uiskillbook.com/skills/generating-sounds-with-ai","content":"https://www.uiskillbook.com/skills/generating-sounds-with-ai/llms.txt"},{"slug":"gh-stack","name":"gh-stack","description":"Manage stacked branches and dependent pull requests with the gh stack GitHub CLI extension.","categories":["design-systems"],"agents":["universal"],"author":"github","external":true,"url":"https://www.uiskillbook.com/skills/gh-stack","content":"https://www.uiskillbook.com/skills/gh-stack/llms.txt"},{"slug":"glassmorphism","name":"glassmorphism","description":"This skill should be used when the user asks to \"add a glassmorphism effect\", \"frosted glass UI\", \"Apple liquid glass style\", \"frosted blur card\", \"translucent glass panel animation\", \"make a frosted nav bar\", \"build a glass modal/dialog\", \"animate a glass card on hover\", or \"add a refracting liquid-glass hero\". Covers frosted translucent panels with backdrop-filter blur, edge/specular highlights, SVG liquid-glass refraction, motion on hover/scroll/enter, and accessible reduced-transparency fallbacks.","categories":["motion","layout"],"agents":["universal"],"author":"iart-ai","external":true,"url":"https://www.uiskillbook.com/skills/glassmorphism","content":"https://www.uiskillbook.com/skills/glassmorphism/llms.txt"},{"slug":"gpt-tasteskill","name":"gpt-taste","description":"High-agency UX/UI skill with strict layout variance, typography, and GSAP motion engineering constraints.","categories":["taste","design-systems","layout"],"agents":["universal"],"author":"Leonxlnx","external":true,"url":"https://www.uiskillbook.com/skills/gpt-tasteskill","content":"https://www.uiskillbook.com/skills/gpt-tasteskill/llms.txt"},{"slug":"grill-with-docs","name":"grill-with-docs","description":"Sharpens the domain model and updates supporting docs while grilling through design choices.","categories":["design-systems"],"agents":["universal"],"author":"mattpocock","external":true,"url":"https://www.uiskillbook.com/skills/grill-with-docs","content":"https://www.uiskillbook.com/skills/grill-with-docs/llms.txt"},{"slug":"gsap","name":"gsap","description":"Use when implementing motion with GSAP and you want practical animation structure and sequencing guidance.","categories":["motion","layout","interaction"],"agents":["universal"],"author":"MengTo","external":true,"url":"https://www.uiskillbook.com/skills/gsap","content":"https://www.uiskillbook.com/skills/gsap/llms.txt"},{"slug":"gsap-core","name":"gsap-core","description":"Official GSAP core API guidance for gsap.to(), from(), easing, stagger, matchMedia, and responsive or reduced-motion animation patterns.","categories":["motion","interaction","layout"],"agents":["universal"],"author":"greensock","external":true,"url":"https://www.uiskillbook.com/skills/gsap-core","content":"https://www.uiskillbook.com/skills/gsap-core/llms.txt"},{"slug":"gsap-frameworks","name":"gsap-frameworks","description":"Official GSAP guidance for Vue, Nuxt, Svelte, and SvelteKit lifecycle setup, scoped selectors, and cleanup on unmount.","categories":["motion","layout"],"agents":["universal"],"author":"greensock","external":true,"url":"https://www.uiskillbook.com/skills/gsap-frameworks","content":"https://www.uiskillbook.com/skills/gsap-frameworks/llms.txt"},{"slug":"gsap-performance","name":"gsap-performance","description":"Official GSAP performance guidance for compositor-friendly transforms, quickTo, stagger batching, and smooth 60fps animation.","categories":["motion","performance","layout"],"agents":["universal"],"author":"greensock","external":true,"url":"https://www.uiskillbook.com/skills/gsap-performance","content":"https://www.uiskillbook.com/skills/gsap-performance/llms.txt"},{"slug":"gsap-plugins","name":"gsap-plugins","description":"Official GSAP plugin guidance for Flip, Draggable, ScrollSmoother, SplitText, SVG tools, CustomEase, and gsap.registerPlugin() usage.","categories":["motion","interaction","layout"],"agents":["universal"],"author":"greensock","external":true,"url":"https://www.uiskillbook.com/skills/gsap-plugins","content":"https://www.uiskillbook.com/skills/gsap-plugins/llms.txt"},{"slug":"gsap-react","name":"gsap-react","description":"Official GSAP guidance for React and Next.js with useGSAP, refs, gsap.context(), contextSafe callbacks, and SSR-safe cleanup.","categories":["motion","layout"],"agents":["universal"],"author":"greensock","external":true,"url":"https://www.uiskillbook.com/skills/gsap-react","content":"https://www.uiskillbook.com/skills/gsap-react/llms.txt"},{"slug":"gsap-scrolltrigger","name":"gsap-scrolltrigger","description":"Official ScrollTrigger guidance for scroll-linked animation, pinning, scrub, batch triggers, and horizontal containerAnimation patterns.","categories":["motion","interaction","layout"],"agents":["universal"],"author":"greensock","external":true,"url":"https://www.uiskillbook.com/skills/gsap-scrolltrigger","content":"https://www.uiskillbook.com/skills/gsap-scrolltrigger/llms.txt"},{"slug":"gsap-scrolltrigger-storytelling","name":"gsap-scrolltrigger-storytelling","description":"Use when building scroll-based storytelling sections with GSAP ScrollTrigger.","categories":["motion","interaction","layout"],"agents":["universal"],"author":"MengTo","external":true,"url":"https://www.uiskillbook.com/skills/gsap-scrolltrigger-storytelling","content":"https://www.uiskillbook.com/skills/gsap-scrolltrigger-storytelling/llms.txt"},{"slug":"gsap-timeline","name":"gsap-timeline","description":"Official GSAP timeline guidance for sequencing, position parameters, labels, nesting, and playback control with gsap.timeline().","categories":["motion","taste","layout"],"agents":["universal"],"author":"greensock","external":true,"url":"https://www.uiskillbook.com/skills/gsap-timeline","content":"https://www.uiskillbook.com/skills/gsap-timeline/llms.txt"},{"slug":"gsap-utils","name":"gsap-utils","description":"Official gsap.utils guidance for clamp, mapRange, snap, distribute, selector scoping, and other animation math helpers.","categories":["motion","layout"],"agents":["universal"],"author":"greensock","external":true,"url":"https://www.uiskillbook.com/skills/gsap-utils","content":"https://www.uiskillbook.com/skills/gsap-utils/llms.txt"},{"slug":"gsap-web","name":"gsap-web","description":"GSAP guidance for code-driven web motion, including timelines, ScrollTrigger, SplitText, Flip, and smooth-scroll synchronization.","categories":["motion","interaction","layout"],"agents":["universal"],"author":"iart-ai","external":true,"url":"https://www.uiskillbook.com/skills/gsap-web","content":"https://www.uiskillbook.com/skills/gsap-web/llms.txt"},{"slug":"harden","name":"harden","description":"Make interfaces production-ready with robust empty states, edge cases, errors, onboarding, and i18n resilience.","categories":["design-systems","layout"],"agents":["universal"],"author":"pbakaus","external":true,"url":"https://www.uiskillbook.com/skills/harden","content":"https://www.uiskillbook.com/skills/harden/llms.txt"},{"slug":"soft-skill","name":"high-end-visual-design","description":"High-end visual design guidance for premium typography, spacing, depth, and animation systems.","categories":["taste","visual"],"agents":["universal"],"author":"Leonxlnx","external":true,"url":"https://www.uiskillbook.com/skills/soft-skill","content":"https://www.uiskillbook.com/skills/soft-skill/llms.txt"},{"slug":"human-review","name":"human-review","description":"Open HTML, Markdown, or localhost pages in the browser so the user can edit text directly, leave anchored comments, and send all feedback back in one batch.","categories":["taste","layout"],"agents":["universal"],"author":"petergyang","external":true,"url":"https://www.uiskillbook.com/skills/human-review","content":"https://www.uiskillbook.com/skills/human-review/llms.txt"},{"slug":"humanize","name":"humanize","description":"Remove signs of AI-generated writing from prose and audit docs folders for slop across content, language, style, and rhetoric.","categories":["taste"],"agents":["universal"],"author":"aashaexo","external":true,"url":"https://www.uiskillbook.com/skills/humanize","content":"https://www.uiskillbook.com/skills/humanize/llms.txt"},{"slug":"blader-humanizer","name":"humanizer","description":"Rewrite AI-sounding text so it reads naturally without changing meaning, based on Wikipedia's signs of AI writing.","categories":["taste"],"agents":["universal"],"author":"blader","external":true,"url":"https://www.uiskillbook.com/skills/blader-humanizer","content":"https://www.uiskillbook.com/skills/blader-humanizer/llms.txt"},{"slug":"aboudjem-humanizer","name":"humanizer","description":"Detect 53 AI writing patterns and rewrite text in five voice profiles, with optional scoring and in-place Markdown editing.","categories":["taste"],"agents":["universal"],"author":"Aboudjem","external":true,"url":"https://www.uiskillbook.com/skills/aboudjem-humanizer","content":"https://www.uiskillbook.com/skills/aboudjem-humanizer/llms.txt"},{"slug":"i-have-adhd","name":"i-have-adhd","description":"Shape output for a reader with ADHD by leading with the next action, numbering steps, suppressing tangents, and making progress visible.","categories":["visual"],"agents":["universal"],"author":"ayghri","external":true,"url":"https://www.uiskillbook.com/skills/i-have-adhd","content":"https://www.uiskillbook.com/skills/i-have-adhd/llms.txt"},{"slug":"image-to-code-skill","name":"image-to-code-skill","description":"Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.","categories":["visual","taste","layout"],"agents":["universal"],"author":"Leonxlnx","external":true,"url":"https://www.uiskillbook.com/skills/image-to-code-skill","content":"https://www.uiskillbook.com/skills/image-to-code-skill/llms.txt"},{"slug":"imagegen-frontend-mobile","name":"imagegen-frontend-mobile","description":"Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.","categories":["visual","taste","layout"],"agents":["universal"],"author":"Leonxlnx","external":true,"url":"https://www.uiskillbook.com/skills/imagegen-frontend-mobile","content":"https://www.uiskillbook.com/skills/imagegen-frontend-mobile/llms.txt"},{"slug":"imagegen-frontend-web","name":"imagegen-frontend-web","description":"Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.","categories":["visual","taste","layout"],"agents":["universal"],"author":"Leonxlnx","external":true,"url":"https://www.uiskillbook.com/skills/imagegen-frontend-web","content":"https://www.uiskillbook.com/skills/imagegen-frontend-web/llms.txt"},{"slug":"impeccable","name":"impeccable","description":"Flagship design skill for production-grade, anti-generic frontend interfaces with strong craft and consistency.","categories":["taste","visual","design-systems"],"agents":["universal"],"author":"pbakaus","external":true,"url":"https://www.uiskillbook.com/skills/impeccable","content":"https://www.uiskillbook.com/skills/impeccable/llms.txt"},{"slug":"improve","name":"improve","description":"Survey any codebase as a senior advisor and produce prioritized, self-contained implementation plans for OTHER models/agents to execute. Strictly read-only on source code — never implements, fixes, or refactors anything itself. Use when asked to audit a codebase, find improvement opportunities (bugs, security, performance, test coverage, tech debt, migrations, DX), suggest features or take the project next, or generate handoff plans for another agent to implement.","categories":["design-systems"],"agents":["universal"],"author":"shadcn","external":true,"url":"https://www.uiskillbook.com/skills/improve","content":"https://www.uiskillbook.com/skills/improve/llms.txt"},{"slug":"improve-animations","name":"improve-animations","description":"Survey a codebase's animation and motion code as a senior motion advisor, then produce prioritized audit and self-contained implementation plans. Read-only on source code - it plans improvements, it does not apply them. Use when the user asks to improve animations, audit motion, make an app feel better, or wants a roadmap of animation fixes rather than a review of a single diff.","categories":["motion","performance"],"agents":["universal"],"author":"emilkowalski","external":true,"url":"https://www.uiskillbook.com/skills/improve-animations","content":"https://www.uiskillbook.com/skills/improve-animations/llms.txt"},{"slug":"improve-codebase-architecture","name":"improve-codebase-architecture","description":"Scans a codebase for deepening opportunities and turns them into a prioritized visual report.","categories":["design-systems"],"agents":["universal"],"author":"mattpocock","external":true,"url":"https://www.uiskillbook.com/skills/improve-codebase-architecture","content":"https://www.uiskillbook.com/skills/improve-codebase-architecture/llms.txt"},{"slug":"improve-react","name":"improve-react","description":"Survey a React codebase using React Doctor's findings, then produce prioritized audits and self-contained implementation plans without modifying source code.","categories":["performance","design-systems","layout"],"agents":["universal"],"author":"millionco","external":true,"url":"https://www.uiskillbook.com/skills/improve-react","content":"https://www.uiskillbook.com/skills/improve-react/llms.txt"},{"slug":"improve-ui","name":"improve-ui","description":"Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent without modifying product source.","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"ibelick","external":true,"url":"https://www.uiskillbook.com/skills/improve-ui","content":"https://www.uiskillbook.com/skills/improve-ui/llms.txt"},{"slug":"brutalist-skill","name":"industrial-brutalist-ui","description":"Raw, mechanical interface direction mixing Swiss print structure with terminal-inspired brutalist aesthetics.","categories":["taste","visual","interaction"],"agents":["universal"],"author":"Leonxlnx","external":true,"url":"https://www.uiskillbook.com/skills/brutalist-skill","content":"https://www.uiskillbook.com/skills/brutalist-skill/llms.txt"},{"slug":"interaction-design","name":"interaction-design","description":"Design and implement microinteractions, motion design, transitions, and user feedback patterns for delightful user experiences.","categories":["interaction","motion","visual"],"agents":["universal"],"author":"wshobson","external":true,"url":"https://www.uiskillbook.com/skills/interaction-design","content":"https://www.uiskillbook.com/skills/interaction-design/llms.txt"},{"slug":"interface-design","name":"interface-design","description":"Specialized skill for interface design: dashboards, admin panels, and SaaS apps. Focused on craft and consistency.","categories":["visual","design-systems","interaction"],"agents":["universal"],"author":"Dammyjay93","external":true,"url":"https://www.uiskillbook.com/skills/interface-design","content":"https://www.uiskillbook.com/skills/interface-design/llms.txt"},{"slug":"interface-review","name":"interface-review","description":"Interface review of a change rather than a screen: uncommitted work, the current branch, or a pull request. Covers interface quality, not correctness, tests, or security.","categories":["taste","visual"],"agents":["universal"],"author":"jakubkrehel","external":true,"url":"https://www.uiskillbook.com/skills/interface-review","content":"https://www.uiskillbook.com/skills/interface-review/llms.txt"},{"slug":"landing-page","name":"landing-page","description":"Use when designing or implementing a landing page with strong hierarchy, conversion flow, and visual pacing.","categories":["visual","layout","interaction"],"agents":["universal"],"author":"MengTo","external":true,"url":"https://www.uiskillbook.com/skills/landing-page","content":"https://www.uiskillbook.com/skills/landing-page/llms.txt"},{"slug":"landing-page-design","name":"landing-page-design","description":"Build high-converting landing pages with intake questions, page structure, conversion copy, SEO, and a disciplined visual system.","categories":["visual","layout","taste","interaction"],"agents":["universal"],"author":"elayadesign","external":true,"url":"https://www.uiskillbook.com/skills/landing-page-design","content":"https://www.uiskillbook.com/skills/landing-page-design/llms.txt"},{"slug":"layout","name":"layout","description":"Fix spacing, composition, and hierarchy rhythm when UI layout feels crowded, flat, or misaligned.","categories":["taste","design-systems","visual"],"agents":["universal"],"author":"pbakaus","external":true,"url":"https://www.uiskillbook.com/skills/layout","content":"https://www.uiskillbook.com/skills/layout/llms.txt"},{"slug":"linear-discipline","name":"linear-discipline","description":"Keep Linear tracking honest during development with search-before-create, lifecycle updates, and close-the-loop discipline.","categories":["visual"],"agents":["universal"],"author":"tjcages","external":true,"url":"https://www.uiskillbook.com/skills/linear-discipline","content":"https://www.uiskillbook.com/skills/linear-discipline/llms.txt"},{"slug":"linear-finish-install","name":"linear-finish-install","description":"Complete Linear tracking installation by writing always-on rules and verifying Linear MCP authentication.","categories":["design-systems"],"agents":["universal"],"author":"tjcages","external":true,"url":"https://www.uiskillbook.com/skills/linear-finish-install","content":"https://www.uiskillbook.com/skills/linear-finish-install/llms.txt"},{"slug":"linear-methodology","name":"linear-methodology","description":"Route Linear tracking work through a methodology for setting up, syncing, monitoring, and maintaining honest project data.","categories":["design-systems"],"agents":["universal"],"author":"tjcages","external":true,"url":"https://www.uiskillbook.com/skills/linear-methodology","content":"https://www.uiskillbook.com/skills/linear-methodology/llms.txt"},{"slug":"linear-monitor","name":"linear-monitor","description":"Health-check Linear projects for slipping dates, stale in-progress work, orphan issues, and tracking anti-patterns.","categories":["design-systems"],"agents":["universal"],"author":"tjcages","external":true,"url":"https://www.uiskillbook.com/skills/linear-monitor","content":"https://www.uiskillbook.com/skills/linear-monitor/llms.txt"},{"slug":"linear-setup","name":"linear-setup","description":"Bootstrap or extend Linear project tracking with evidence-based backfill, milestones, dependencies, and repository discipline.","categories":["design-systems"],"agents":["universal"],"author":"tjcages","external":true,"url":"https://www.uiskillbook.com/skills/linear-setup","content":"https://www.uiskillbook.com/skills/linear-setup/llms.txt"},{"slug":"linear-sync","name":"linear-sync","description":"Audit and rescue an existing Linear project by reconciling its issues, milestones, dependencies, and tracking protocol with repository reality.","categories":["design-systems"],"agents":["universal"],"author":"tjcages","external":true,"url":"https://www.uiskillbook.com/skills/linear-sync","content":"https://www.uiskillbook.com/skills/linear-sync/llms.txt"},{"slug":"link-purpose","name":"link-purpose","description":"Compatibility listing for link-purpose installs from AccessLint's marketplace skill set.","categories":["accessibility","interaction"],"agents":["universal"],"author":"AccessLint","external":true,"url":"https://www.uiskillbook.com/skills/link-purpose","content":"https://www.uiskillbook.com/skills/link-purpose/llms.txt"},{"slug":"lottie-animation","name":"lottie-animation","description":"Lottie and dotLottie integration guidance for playback control, interactivity, runtime theming, and cross-platform export workflows.","categories":["motion","layout"],"agents":["universal"],"author":"iart-ai","external":true,"url":"https://www.uiskillbook.com/skills/lottie-animation","content":"https://www.uiskillbook.com/skills/lottie-animation/llms.txt"},{"slug":"make-interfaces-feel-better","name":"make-interfaces-feel-better","description":"Design engineering principles for making interfaces feel polished, with focus on micro-interactions, typography, and visual details.","categories":["taste","interaction","visual"],"agents":["universal"],"author":"jakubkrehel","external":true,"url":"https://www.uiskillbook.com/skills/make-interfaces-feel-better","content":"https://www.uiskillbook.com/skills/make-interfaces-feel-better/llms.txt"},{"slug":"marquee-loop","name":"marquee-loop","description":"Use when building looping marquees that need steady rhythm, spacing, and performance awareness.","categories":["motion","interaction","layout"],"agents":["universal"],"author":"MengTo","external":true,"url":"https://www.uiskillbook.com/skills/marquee-loop","content":"https://www.uiskillbook.com/skills/marquee-loop/llms.txt"},{"slug":"masked-reveal","name":"masked-reveal","description":"Use when revealing content with masked motion, clipped transitions, or layered entrances.","categories":["motion","visual","layout"],"agents":["universal"],"author":"MengTo","external":true,"url":"https://www.uiskillbook.com/skills/masked-reveal","content":"https://www.uiskillbook.com/skills/masked-reveal/llms.txt"},{"slug":"mastering-animate-presence","name":"mastering-animate-presence","description":"Audit Motion and Framer Motion exit/presence patterns with practical fixes for AnimatePresence usage.","categories":["motion","interaction","layout"],"agents":["universal"],"author":"raphaelsalaja","external":true,"url":"https://www.uiskillbook.com/skills/mastering-animate-presence","content":"https://www.uiskillbook.com/skills/mastering-animate-presence/llms.txt"},{"slug":"matterjs","name":"matterjs","description":"Use when building physics-driven interactions and layout behaviors with Matter.js.","categories":["motion","interaction","layout"],"agents":["universal"],"author":"MengTo","external":true,"url":"https://www.uiskillbook.com/skills/matterjs","content":"https://www.uiskillbook.com/skills/matterjs/llms.txt"},{"slug":"micro-interaction","name":"micro-interaction","description":"UI motion guidance for hover and press feedback, toggles, toasts, drawers, modals, list transitions, and shared-element interactions.","categories":["interaction","motion","layout"],"agents":["universal"],"author":"iart-ai","external":true,"url":"https://www.uiskillbook.com/skills/micro-interaction","content":"https://www.uiskillbook.com/skills/micro-interaction/llms.txt"},{"slug":"minimalist-skill","name":"minimalist-ui","description":"Editorial minimal interfaces with monochrome palettes, typographic contrast, and restrained visuals.","categories":["taste","visual","design-systems"],"agents":["universal"],"author":"Leonxlnx","external":true,"url":"https://www.uiskillbook.com/skills/minimalist-skill","content":"https://www.uiskillbook.com/skills/minimalist-skill/llms.txt"},{"slug":"morphing-icons","name":"morphing-icons","description":"Build icon components that morph between SVG shapes with smooth, line-based transformation.","categories":["motion","visual","layout"],"agents":["universal"],"author":"raphaelsalaja","external":true,"url":"https://www.uiskillbook.com/skills/morphing-icons","content":"https://www.uiskillbook.com/skills/morphing-icons/llms.txt"},{"slug":"motion-easing-basics","name":"Motion Without Annoying People","description":"Use short, purposeful easing curves that clarify state changes instead of decorating them.","categories":["motion"],"agents":["claude-code","codex","cursor","opencode","universal"],"author":"UI Skillbook","external":false,"url":"https://www.uiskillbook.com/skills/motion-easing-basics","content":"https://www.uiskillbook.com/skills/motion-easing-basics/llms.txt"},{"slug":"navigation-active-states","name":"Navigation Active States","description":"Make it unambiguous where the user is, at every level of nested navigation.","categories":["navigation","visual"],"agents":["claude-code","codex","cursor","opencode","universal"],"author":"UI Skillbook","external":false,"url":"https://www.uiskillbook.com/skills/navigation-active-states","content":"https://www.uiskillbook.com/skills/navigation-active-states/llms.txt"},{"slug":"next-cache-components","name":"next-cache-components","description":"Enable Cache Components in a Next.js app and resolve blocking routes surfaced during adoption.","categories":["performance","layout"],"agents":["universal"],"author":"vercel","external":true,"url":"https://www.uiskillbook.com/skills/next-cache-components","content":"https://www.uiskillbook.com/skills/next-cache-components/llms.txt"},{"slug":"next-cache-components-optimizer","name":"next-cache-components-optimizer","description":"Drive a Next.js route to instant navigation under Cache Components using a failing Playwright test and an agentic fix loop.","categories":["performance"],"agents":["universal"],"author":"vercel","external":true,"url":"https://www.uiskillbook.com/skills/next-cache-components-optimizer","content":"https://www.uiskillbook.com/skills/next-cache-components-optimizer/llms.txt"},{"slug":"nitro","name":"nitro","description":"Nitro is the framework-agnostic server toolkit (powering Nuxt) for building and deploying web servers anywhere. Use when working with nitro.config, server routes/event handlers, route rules, caching, storage, tasks, websockets, or deploying to Node/Bun/Deno/Cloudflare/Vercel.","categories":["layout","taste","visual"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/nitro","content":"https://www.uiskillbook.com/skills/nitro/llms.txt"},{"slug":"no-ai-slop","name":"no-ai-slop","description":"Edit drafts into sharper, more human writing while preserving personal voice, or detect AI-slop patterns without rewriting.","categories":["taste"],"agents":["universal"],"author":"petergyang","external":true,"url":"https://www.uiskillbook.com/skills/no-ai-slop","content":"https://www.uiskillbook.com/skills/no-ai-slop/llms.txt"},{"slug":"nuxt","name":"nuxt","description":"Nuxt full-stack Vue framework guidance for SSR, auto-imports, file-based routing, and server routes.","categories":["layout","performance"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/nuxt","content":"https://www.uiskillbook.com/skills/nuxt/llms.txt"},{"slug":"oklch-skill","name":"oklch-skill","description":"Practical OKLCH color workflow skill for building consistent, accessible, and tunable color systems in modern UIs.","categories":["visual","accessibility","design-systems"],"agents":["universal"],"author":"jakubkrehel","external":true,"url":"https://www.uiskillbook.com/skills/oklch-skill","content":"https://www.uiskillbook.com/skills/oklch-skill/llms.txt"},{"slug":"optical-alignment","name":"Optical Alignment","description":"Align interface elements by perceived visual weight, not just mathematical geometry.","categories":["visual","typography"],"agents":["claude-code","codex","cursor","opencode","universal"],"author":"UI Skillbook","external":false,"url":"https://www.uiskillbook.com/skills/optical-alignment","content":"https://www.uiskillbook.com/skills/optical-alignment/llms.txt"},{"slug":"optimize","name":"optimize","description":"Diagnose and improve interface performance across rendering, motion smoothness, assets, and load speed.","categories":["performance","layout"],"agents":["universal"],"author":"pbakaus","external":true,"url":"https://www.uiskillbook.com/skills/optimize","content":"https://www.uiskillbook.com/skills/optimize/llms.txt"},{"slug":"overdrive","name":"overdrive","description":"Push interfaces into high-impact territory with advanced animation, shaders, and ambitious interaction systems.","categories":["motion","visual","taste"],"agents":["universal"],"author":"pbakaus","external":true,"url":"https://www.uiskillbook.com/skills/overdrive","content":"https://www.uiskillbook.com/skills/overdrive/llms.txt"},{"slug":"page-transition-animation","name":"page-transition-animation","description":"Page and route transition patterns using the View Transitions API and Framer Motion, including reliable Next.js App Router exits.","categories":["motion","interaction","layout"],"agents":["universal"],"author":"iart-ai","external":true,"url":"https://www.uiskillbook.com/skills/page-transition-animation","content":"https://www.uiskillbook.com/skills/page-transition-animation/llms.txt"},{"slug":"performance","name":"performance","description":"Optimize web performance for faster loading and better user experience. Use when asked to \"speed up my site\", \"optimize performance\", \"reduce load time\", \"fix slow loading\", \"improve page speed\", or \"performance audit\".","categories":["performance","layout","taste"],"agents":["universal"],"author":"addyosmani","external":true,"url":"https://www.uiskillbook.com/skills/performance","content":"https://www.uiskillbook.com/skills/performance/llms.txt"},{"slug":"pick-ui-library","name":"pick-ui-library","description":"Choose an opinionated, trusted library for common frontend tasks including components, motion, charts, interaction, state, and styling.","categories":["layout","design-systems"],"agents":["universal"],"author":"emilkowalski","external":true,"url":"https://www.uiskillbook.com/skills/pick-ui-library","content":"https://www.uiskillbook.com/skills/pick-ui-library/llms.txt"},{"slug":"pinia","name":"pinia","description":"Pinia state management best practices for type-safe Vue stores, getters, and actions.","categories":["design-systems","layout"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/pinia","content":"https://www.uiskillbook.com/skills/pinia/llms.txt"},{"slug":"playwright-cli","name":"playwright-cli","description":"Official Playwright CLI skill for browser automation, test generation, tracing, and session-driven end-to-end testing workflows.","categories":["layout"],"agents":["universal"],"author":"microsoft","external":true,"url":"https://www.uiskillbook.com/skills/playwright-cli","content":"https://www.uiskillbook.com/skills/playwright-cli/llms.txt"},{"slug":"pnpm","name":"pnpm","description":"pnpm package manager guidance for strict dependency resolution, workspaces, catalogs, patches, and overrides.","categories":["layout","performance"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/pnpm","content":"https://www.uiskillbook.com/skills/pnpm/llms.txt"},{"slug":"polish","name":"polish","description":"Final quality pass for spacing, alignment, and consistency to prepare UI for launch.","categories":["taste","visual","design-systems"],"agents":["universal"],"author":"pbakaus","external":true,"url":"https://www.uiskillbook.com/skills/polish","content":"https://www.uiskillbook.com/skills/polish/llms.txt"},{"slug":"prefer-container-queries","name":"prefer-container-queries","description":"Enforce Tailwind container queries over viewport breakpoints for responsive components. Use when writing or reviewing responsive Tailwind code, when a component needs to adapt to its available space (cards, sidebars, lists, panels, anything reused in different layouts), or when migrating sm:/md:/lg: classes to @container variants.","categories":["layout","design-systems","visual"],"agents":["universal"],"author":"flornkm","external":true,"url":"https://www.uiskillbook.com/skills/prefer-container-queries","content":"https://www.uiskillbook.com/skills/prefer-container-queries/llms.txt"},{"slug":"pressed-button-feedback","name":"Pressed Button Feedback","description":"Give every interactive control an immediate, physical-feeling response to a press.","categories":["interaction","motion"],"agents":["claude-code","codex","cursor","opencode","universal"],"author":"UI Skillbook","external":false,"url":"https://www.uiskillbook.com/skills/pressed-button-feedback","content":"https://www.uiskillbook.com/skills/pressed-button-feedback/llms.txt"},{"slug":"pricing-page","name":"pricing-page","description":"Use when building a pricing page with clear plan comparison, emphasis, and conversion-oriented layout.","categories":["visual","layout","interaction"],"agents":["universal"],"author":"MengTo","external":true,"url":"https://www.uiskillbook.com/skills/pricing-page","content":"https://www.uiskillbook.com/skills/pricing-page/llms.txt"},{"slug":"progressive-blur","name":"progressive-blur","description":"Use when applying blur transitions or layered depth effects that need to feel smooth and controlled.","categories":["visual","motion","layout"],"agents":["universal"],"author":"MengTo","external":true,"url":"https://www.uiskillbook.com/skills/progressive-blur","content":"https://www.uiskillbook.com/skills/progressive-blur/llms.txt"},{"slug":"mattpocock-prototype","name":"prototype","description":"Builds throwaway prototypes to answer design or logic questions quickly.","categories":["layout","interaction","design-systems"],"agents":["universal"],"author":"mattpocock","external":true,"url":"https://www.uiskillbook.com/skills/mattpocock-prototype","content":"https://www.uiskillbook.com/skills/mattpocock-prototype/llms.txt"},{"slug":"emilkowalski-prototype","name":"prototype","description":"Build multiple genuinely different UI variants behind a visual picker so the strongest direction can be evaluated and promoted.","categories":["layout","interaction","visual","design-systems"],"agents":["universal"],"author":"emilkowalski","external":true,"url":"https://www.uiskillbook.com/skills/emilkowalski-prototype","content":"https://www.uiskillbook.com/skills/emilkowalski-prototype/llms.txt"},{"slug":"pseudo-elements","name":"pseudo-elements","description":"Audit CSS pseudo-elements and View Transitions usage for hover effects, decorative layers, and transitions.","categories":["motion","visual","layout"],"agents":["universal"],"author":"raphaelsalaja","external":true,"url":"https://www.uiskillbook.com/skills/pseudo-elements","content":"https://www.uiskillbook.com/skills/pseudo-elements/llms.txt"},{"slug":"quieter","name":"quieter","description":"Tone down overly intense designs while keeping quality high and preserving hierarchy.","categories":["visual","design-systems","taste"],"agents":["universal"],"author":"pbakaus","external":true,"url":"https://www.uiskillbook.com/skills/quieter","content":"https://www.uiskillbook.com/skills/quieter/llms.txt"},{"slug":"rad-spacing","name":"rad-spacing","description":"Apply hierarchical spacing variables across Figma layouts using proximity-based 4px and 8px increments from the file's library.","categories":["design-systems","taste","visual"],"agents":["universal"],"author":"nolanperk","external":true,"url":"https://www.uiskillbook.com/skills/rad-spacing","content":"https://www.uiskillbook.com/skills/rad-spacing/llms.txt"},{"slug":"rams","name":"rams","description":"Real-time design feedback skill focused on accessibility, spacing, typography, contrast, and component quality.","categories":["visual","accessibility","interaction"],"agents":["universal"],"author":"rams","external":true,"url":"https://www.uiskillbook.com/skills/rams","content":"https://www.uiskillbook.com/skills/rams/llms.txt"},{"slug":"react-doctor","name":"react-doctor","description":"Run React Doctor to detect regressions in security, performance, correctness, and architecture, with score-based quality checks.","categories":["performance","layout"],"agents":["universal"],"author":"millionco","external":true,"url":"https://www.uiskillbook.com/skills/react-doctor","content":"https://www.uiskillbook.com/skills/react-doctor/llms.txt"},{"slug":"react-native-best-practices","name":"react-native-best-practices","description":"React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations.","categories":["responsive","performance","layout"],"agents":["universal"],"author":"callstackincubator","external":true,"url":"https://www.uiskillbook.com/skills/react-native-best-practices","content":"https://www.uiskillbook.com/skills/react-native-best-practices/llms.txt"},{"slug":"react-router-framework-mode","name":"react-router-framework-mode","description":"React Router framework-mode patterns for loaders, actions, middleware, route modules, and full-stack rendering flows.","categories":["layout","design-systems","interaction"],"agents":["universal"],"author":"remix-run","external":true,"url":"https://www.uiskillbook.com/skills/react-router-framework-mode","content":"https://www.uiskillbook.com/skills/react-router-framework-mode/llms.txt"},{"slug":"redesign-skill","name":"redesign-existing-projects","description":"Audit and upgrade existing interfaces to premium visual quality while preserving product functionality.","categories":["taste","visual","interaction"],"agents":["universal"],"author":"Leonxlnx","external":true,"url":"https://www.uiskillbook.com/skills/redesign-skill","content":"https://www.uiskillbook.com/skills/redesign-skill/llms.txt"},{"slug":"refactor","name":"refactor","description":"Compatibility listing for refactor installs from AccessLint's marketplace skill set.","categories":["accessibility","layout"],"agents":["universal"],"author":"AccessLint","external":true,"url":"https://www.uiskillbook.com/skills/refactor","content":"https://www.uiskillbook.com/skills/refactor/llms.txt"},{"slug":"refine-live","name":"refine-live","description":"Iteratively refine UI in live sessions with a focus on motion, polish, and interaction detail.","categories":["motion","visual","interaction","layout"],"agents":["universal"],"author":"Jakubantalik","external":true,"url":"https://www.uiskillbook.com/skills/refine-live","content":"https://www.uiskillbook.com/skills/refine-live/llms.txt"},{"slug":"remotion-best-practices","name":"remotion-best-practices","description":"Domain-specific knowledge base for building videos with Remotion and React.","categories":["motion"],"agents":["universal"],"author":"remotion-dev","external":true,"url":"https://www.uiskillbook.com/skills/remotion-best-practices","content":"https://www.uiskillbook.com/skills/remotion-best-practices/llms.txt"},{"slug":"responsive-breakpoint-strategy","name":"Responsive Breakpoint Strategy","description":"Choose breakpoints based on where your content actually breaks, not a fixed device-width list.","categories":["responsive","layout"],"agents":["claude-code","codex","cursor","opencode","universal"],"author":"UI Skillbook","external":false,"url":"https://www.uiskillbook.com/skills/responsive-breakpoint-strategy","content":"https://www.uiskillbook.com/skills/responsive-breakpoint-strategy/llms.txt"},{"slug":"review-animations","name":"review-animations","description":"Review animation quality, timing, and motion consistency with a production-critical eye.","categories":["motion","performance","interaction"],"agents":["universal"],"author":"emilkowalski","external":true,"url":"https://www.uiskillbook.com/skills/review-animations","content":"https://www.uiskillbook.com/skills/review-animations/llms.txt"},{"slug":"scandinavian-design","name":"scandinavian-design","description":"Apply a refined Scandinavian visual system with a neutral black-and-white foundation, restrained sans-serif typography, purposeful product imagery, generous spacing, clear page chapters, and minimal decoration. Use when the user invokes /scandinavian-design or requests a Nordic, monochrome, calm, spacious, restrained, or minimalist interface.","categories":["visual","taste","typography"],"agents":["universal"],"author":"ericzakariasson","external":true,"url":"https://www.uiskillbook.com/skills/scandinavian-design","content":"https://www.uiskillbook.com/skills/scandinavian-design/llms.txt"},{"slug":"scroll-world","name":"scroll-world","description":"Build an immersive scroll-scrubbed 3D world landing page for any brand with Higgsfield-generated scenes, seamless camera clips, and a portable scroll-scrub engine.","categories":["visual","motion","interaction","layout"],"agents":["universal"],"author":"oso95","external":true,"url":"https://www.uiskillbook.com/skills/scroll-world","content":"https://www.uiskillbook.com/skills/scroll-world/llms.txt"},{"slug":"iannuttall-seo","name":"seo","description":"Use for SEO audits, rankings, keyword research, indexing, metadata, Search Console, GA4, and AI search visibility. Routes to evidence-backed reports through the local SEO CLI and MCP server.","categories":["layout","performance"],"agents":["universal"],"author":"iannuttall","external":true,"url":"https://www.uiskillbook.com/skills/iannuttall-seo","content":"https://www.uiskillbook.com/skills/iannuttall-seo/llms.txt"},{"slug":"addyosmani-seo","name":"seo","description":"Optimize for search engine visibility and ranking. Use when asked to \"improve SEO\", \"optimize for search\", \"fix meta tags\", \"add structured data\", \"sitemap optimization\", or \"search engine optimization\".","categories":["performance","layout","taste"],"agents":["universal"],"author":"addyosmani","external":true,"url":"https://www.uiskillbook.com/skills/addyosmani-seo","content":"https://www.uiskillbook.com/skills/addyosmani-seo/llms.txt"},{"slug":"setup-matt-pocock-skills","name":"setup-matt-pocock-skills","description":"One-time repo setup for the engineering skill workflow and related conventions.","categories":["design-systems"],"agents":["universal"],"author":"mattpocock","external":true,"url":"https://www.uiskillbook.com/skills/setup-matt-pocock-skills","content":"https://www.uiskillbook.com/skills/setup-matt-pocock-skills/llms.txt"},{"slug":"shadcn","name":"shadcn","description":"Project-aware shadcn/ui workflow for searching, adding, composing, and fixing components with correct patterns.","categories":["design-systems","layout"],"agents":["universal"],"author":"shadcn-ui","external":true,"url":"https://www.uiskillbook.com/skills/shadcn","content":"https://www.uiskillbook.com/skills/shadcn/llms.txt"},{"slug":"shape","name":"shape","description":"Plan feature UX before coding via a structured design interview that produces an actionable design brief.","categories":["interaction","design-systems"],"agents":["universal"],"author":"pbakaus","external":true,"url":"https://www.uiskillbook.com/skills/shape","content":"https://www.uiskillbook.com/skills/shape/llms.txt"},{"slug":"signal-geometry","name":"signal-geometry","description":"Create sparse geometric illustrations and posters from concepts or briefs, using precise spatial systems, restrained contrast, and matte paper texture.","categories":["visual","taste"],"agents":["universal"],"author":"CaliCastle","external":true,"url":"https://www.uiskillbook.com/skills/signal-geometry","content":"https://www.uiskillbook.com/skills/signal-geometry/llms.txt"},{"slug":"simple-english","name":"simple-english","description":"Write or rewrite technical text with ASD-STE100 Simplified Technical English for clear, unambiguous, translation-friendly documentation and interface copy.","categories":["taste"],"agents":["universal"],"author":"AminBlg","external":true,"url":"https://www.uiskillbook.com/skills/simple-english","content":"https://www.uiskillbook.com/skills/simple-english/llms.txt"},{"slug":"slide-wright","name":"slide-wright","description":"Create beautiful, animated web presentations from a topic, rough notes, or an outline. Generates a custom theme and a short two-slide preview, then builds the full deck only once the user confirms the direction. Use when the user wants to make slides, a presentation, a talk deck, or a pitch deck.","categories":["motion","visual","taste"],"agents":["universal"],"author":"arifszn","external":true,"url":"https://www.uiskillbook.com/skills/slide-wright","content":"https://www.uiskillbook.com/skills/slide-wright/llms.txt"},{"slug":"slides","name":"slides","description":"Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"nextlevelbuilder","external":true,"url":"https://www.uiskillbook.com/skills/slides","content":"https://www.uiskillbook.com/skills/slides/llms.txt"},{"slug":"slidev","name":"slidev","description":"Create developer slide decks with Slidev using Markdown, Vue components, code highlighting, and animations.","categories":["motion","visual","layout"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/slidev","content":"https://www.uiskillbook.com/skills/slidev/llms.txt"},{"slug":"slopbeth","name":"slopbeth","description":"Remove AI-writing tells from prose while preserving meaning, voice, and density during drafting, editing, or review.","categories":["taste"],"agents":["universal"],"author":"ehmo","external":true,"url":"https://www.uiskillbook.com/skills/slopbeth","content":"https://www.uiskillbook.com/skills/slopbeth/llms.txt"},{"slug":"smooth-shadow-ring","name":"smooth-shadow-ring","description":"Style elevated surfaces with smooth shadow ring utilities instead of combining borders or rings with shadows and creating double edges.","categories":["visual","taste","design-systems","layout"],"agents":["universal"],"author":"flornkm","external":true,"url":"https://www.uiskillbook.com/skills/smooth-shadow-ring","content":"https://www.uiskillbook.com/skills/smooth-shadow-ring/llms.txt"},{"slug":"sounds-on-the-web","name":"sounds-on-the-web","description":"Audit interface sound feedback for UX quality, accessibility, and practical implementation patterns.","categories":["interaction","accessibility","layout"],"agents":["universal"],"author":"raphaelsalaja","external":true,"url":"https://www.uiskillbook.com/skills/sounds-on-the-web","content":"https://www.uiskillbook.com/skills/sounds-on-the-web/llms.txt"},{"slug":"spacing-rhythm","name":"Spacing That Doesn't Look AI-Generated","description":"Use a consistent spacing scale and grouping logic instead of arbitrary padding values.","categories":["layout","visual"],"agents":["claude-code","codex","cursor","opencode","universal"],"author":"UI Skillbook","external":false,"url":"https://www.uiskillbook.com/skills/spacing-rhythm","content":"https://www.uiskillbook.com/skills/spacing-rhythm/llms.txt"},{"slug":"stitch-skill","name":"stitch-design-taste","description":"Semantic design-system skill for Google Stitch with strict anti-generic UI generation rules.","categories":["design-systems","taste"],"agents":["universal"],"author":"Leonxlnx","external":true,"url":"https://www.uiskillbook.com/skills/stitch-skill","content":"https://www.uiskillbook.com/skills/stitch-skill/llms.txt"},{"slug":"stop-slop","name":"stop-slop","description":"Remove AI writing patterns from prose when drafting, editing, or reviewing text to eliminate predictable AI tells.","categories":["taste"],"agents":["universal"],"author":"hardikpandya","external":true,"url":"https://www.uiskillbook.com/skills/stop-slop","content":"https://www.uiskillbook.com/skills/stop-slop/llms.txt"},{"slug":"svelte-code-writer","name":"svelte-code-writer","description":"Official Svelte code-writing skill focused on modern Svelte patterns, component composition, and production-ready implementations.","categories":["layout"],"agents":["universal"],"author":"sveltejs","external":true,"url":"https://www.uiskillbook.com/skills/svelte-code-writer","content":"https://www.uiskillbook.com/skills/svelte-code-writer/llms.txt"},{"slug":"svg-animation","name":"svg-animation","description":"SVG animation techniques for stroke draw-on effects, path morphing, motion paths, animated icons, gradients, and filters.","categories":["motion","visual","layout"],"agents":["universal"],"author":"iart-ai","external":true,"url":"https://www.uiskillbook.com/skills/svg-animation","content":"https://www.uiskillbook.com/skills/svg-animation/llms.txt"},{"slug":"swiftui-ui-patterns","name":"swiftui-ui-patterns","description":"Best practices and example-driven guidance for building SwiftUI views and components. Includes tab architecture and screen composition.","categories":["responsive","interaction","design-systems"],"agents":["universal"],"author":"dimillian","external":true,"url":"https://www.uiskillbook.com/skills/swiftui-ui-patterns","content":"https://www.uiskillbook.com/skills/swiftui-ui-patterns/llms.txt"},{"slug":"swiss-design","name":"swiss-design","description":"Swiss design system skill focused on grid discipline, typography hierarchy, and clean editorial interface composition.","categories":["visual","typography","design-systems"],"agents":["universal"],"author":"zeke","external":true,"url":"https://www.uiskillbook.com/skills/swiss-design","content":"https://www.uiskillbook.com/skills/swiss-design/llms.txt"},{"slug":"sync-figma-token","name":"sync-figma-token","description":"Sync design tokens between code and Figma variables with drift reporting, approval gates, safe delta apply, and persisted reports.","categories":["design-systems","visual","layout"],"agents":["universal"],"author":"firebenders","external":true,"url":"https://www.uiskillbook.com/skills/sync-figma-token","content":"https://www.uiskillbook.com/skills/sync-figma-token/llms.txt"},{"slug":"tailwindcss","name":"tailwindcss","description":"Use when you are implementing UI with Tailwind and want reusable, practical utility-first patterns.","categories":["layout","design-systems"],"agents":["universal"],"author":"MengTo","external":true,"url":"https://www.uiskillbook.com/skills/tailwindcss","content":"https://www.uiskillbook.com/skills/tailwindcss/llms.txt"},{"slug":"taste-skill-v1","name":"taste-skill-v1","description":"The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.","categories":["visual","taste","layout"],"agents":["universal"],"author":"Leonxlnx","external":true,"url":"https://www.uiskillbook.com/skills/taste-skill-v1","content":"https://www.uiskillbook.com/skills/taste-skill-v1/llms.txt"},{"slug":"tdd","name":"tdd","description":"Red-green-refactor workflow for building features and fixes one slice at a time.","categories":["layout"],"agents":["universal"],"author":"mattpocock","external":true,"url":"https://www.uiskillbook.com/skills/tdd","content":"https://www.uiskillbook.com/skills/tdd/llms.txt"},{"slug":"text-to-lottie","name":"text-to-lottie","description":"Turn text prompts into polished Lottie animations for motion-heavy UI work.","categories":["motion","visual","layout"],"agents":["universal"],"author":"diffusionstudio","external":true,"url":"https://www.uiskillbook.com/skills/text-to-lottie","content":"https://www.uiskillbook.com/skills/text-to-lottie/llms.txt"},{"slug":"thermo-nuclear-code-quality-review","name":"thermo-nuclear-code-quality-review","description":"Run an extremely strict maintainability review for abstraction quality, giant files, and spaghetti-condition growth.","categories":["design-systems"],"agents":["universal"],"author":"cursor","external":true,"url":"https://www.uiskillbook.com/skills/thermo-nuclear-code-quality-review","content":"https://www.uiskillbook.com/skills/thermo-nuclear-code-quality-review/llms.txt"},{"slug":"threejs","name":"threejs","description":"Use when building 3D scenes, interactions, or WebGL-backed interface moments in Three.js.","categories":["visual","motion","layout"],"agents":["universal"],"author":"MengTo","external":true,"url":"https://www.uiskillbook.com/skills/threejs","content":"https://www.uiskillbook.com/skills/threejs/llms.txt"},{"slug":"threejs-animation","name":"threejs-animation","description":"Three.js animation guidance for keyframes, skeletal animation, morph targets, and animation blending.","categories":["visual","motion","layout"],"agents":["universal"],"author":"cloudai-x","external":true,"url":"https://www.uiskillbook.com/skills/threejs-animation","content":"https://www.uiskillbook.com/skills/threejs-animation/llms.txt"},{"slug":"threejs-fundamentals","name":"threejs-fundamentals","description":"Three.js scene setup guidance for cameras, renderer configuration, object hierarchy, and transforms.","categories":["visual","interaction","layout"],"agents":["universal"],"author":"cloudai-x","external":true,"url":"https://www.uiskillbook.com/skills/threejs-fundamentals","content":"https://www.uiskillbook.com/skills/threejs-fundamentals/llms.txt"},{"slug":"threejs-geometry","name":"threejs-geometry","description":"Three.js geometry patterns for built-in shapes, BufferGeometry, custom meshes, and instancing.","categories":["visual","performance","layout"],"agents":["universal"],"author":"cloudai-x","external":true,"url":"https://www.uiskillbook.com/skills/threejs-geometry","content":"https://www.uiskillbook.com/skills/threejs-geometry/llms.txt"},{"slug":"threejs-interaction","name":"threejs-interaction","description":"Three.js interaction patterns for raycasting, controls, pointer input, and object selection.","categories":["visual","interaction","layout"],"agents":["universal"],"author":"cloudai-x","external":true,"url":"https://www.uiskillbook.com/skills/threejs-interaction","content":"https://www.uiskillbook.com/skills/threejs-interaction/llms.txt"},{"slug":"threejs-lighting","name":"threejs-lighting","description":"Three.js lighting guidance for light types, shadows, environment lighting, and performance tuning.","categories":["visual","layout"],"agents":["universal"],"author":"cloudai-x","external":true,"url":"https://www.uiskillbook.com/skills/threejs-lighting","content":"https://www.uiskillbook.com/skills/threejs-lighting/llms.txt"},{"slug":"threejs-loaders","name":"threejs-loaders","description":"Three.js asset loading patterns for GLTF, textures, HDR assets, async loading, and progress handling.","categories":["visual","performance"],"agents":["universal"],"author":"cloudai-x","external":true,"url":"https://www.uiskillbook.com/skills/threejs-loaders","content":"https://www.uiskillbook.com/skills/threejs-loaders/llms.txt"},{"slug":"threejs-materials","name":"threejs-materials","description":"Three.js material guidance for PBR, classic materials, shader materials, and material optimization.","categories":["visual","layout"],"agents":["universal"],"author":"cloudai-x","external":true,"url":"https://www.uiskillbook.com/skills/threejs-materials","content":"https://www.uiskillbook.com/skills/threejs-materials/llms.txt"},{"slug":"threejs-postprocessing","name":"threejs-postprocessing","description":"Three.js post-processing techniques with EffectComposer, bloom, depth of field, and screen-space effects.","categories":["visual","performance"],"agents":["universal"],"author":"cloudai-x","external":true,"url":"https://www.uiskillbook.com/skills/threejs-postprocessing","content":"https://www.uiskillbook.com/skills/threejs-postprocessing/llms.txt"},{"slug":"threejs-shaders","name":"threejs-shaders","description":"Three.js shader guidance for GLSL, ShaderMaterial, uniforms, and custom vertex and fragment effects.","categories":["visual","layout"],"agents":["universal"],"author":"cloudai-x","external":true,"url":"https://www.uiskillbook.com/skills/threejs-shaders","content":"https://www.uiskillbook.com/skills/threejs-shaders/llms.txt"},{"slug":"threejs-textures","name":"threejs-textures","description":"Three.js texture workflows for maps, UV mapping, environment maps, and texture configuration.","categories":["visual","layout"],"agents":["universal"],"author":"cloudai-x","external":true,"url":"https://www.uiskillbook.com/skills/threejs-textures","content":"https://www.uiskillbook.com/skills/threejs-textures/llms.txt"},{"slug":"to-issues","name":"to-issues","description":"Breaks a plan or PRD into independently actionable issues.","categories":["design-systems"],"agents":["universal"],"author":"mattpocock","external":true,"url":"https://www.uiskillbook.com/skills/to-issues","content":"https://www.uiskillbook.com/skills/to-issues/llms.txt"},{"slug":"to-prd","name":"to-prd","description":"Turns a conversation into a PRD and publishes it to the issue tracker.","categories":["design-systems","layout"],"agents":["universal"],"author":"mattpocock","external":true,"url":"https://www.uiskillbook.com/skills/to-prd","content":"https://www.uiskillbook.com/skills/to-prd/llms.txt"},{"slug":"to-spring-or-not-to-spring","name":"to-spring-or-not-to-spring","description":"Audit animation timing choices to decide when springs versus easing curves produce better motion.","categories":["motion","performance","layout"],"agents":["universal"],"author":"raphaelsalaja","external":true,"url":"https://www.uiskillbook.com/skills/to-spring-or-not-to-spring","content":"https://www.uiskillbook.com/skills/to-spring-or-not-to-spring/llms.txt"},{"slug":"transitions-dev","name":"transitions-dev","description":"Production-ready CSS transition patterns for web apps, with drop-in snippets for cards, modals, dropdowns, panels, and page transitions.","categories":["motion","interaction","layout"],"agents":["universal"],"author":"Jakubantalik","external":true,"url":"https://www.uiskillbook.com/skills/transitions-dev","content":"https://www.uiskillbook.com/skills/transitions-dev/llms.txt"},{"slug":"triage","name":"triage","description":"Moves issues through a structured triage state machine.","categories":["design-systems"],"agents":["universal"],"author":"mattpocock","external":true,"url":"https://www.uiskillbook.com/skills/triage","content":"https://www.uiskillbook.com/skills/triage/llms.txt"},{"slug":"tsdown","name":"tsdown","description":"Bundle TypeScript and JavaScript libraries with tsdown, including declarations and multi-format builds.","categories":["performance","layout"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/tsdown","content":"https://www.uiskillbook.com/skills/tsdown/llms.txt"},{"slug":"turborepo","name":"turborepo","description":"Turborepo monorepo build system guidance for pipelines, caching, filtering, CI, and package boundaries.","categories":["performance","layout"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/turborepo","content":"https://www.uiskillbook.com/skills/turborepo/llms.txt"},{"slug":"typeset","name":"typeset","description":"Improve typography systems, hierarchy, readability, and text cadence for more intentional interfaces.","categories":["typography","taste","visual"],"agents":["universal"],"author":"pbakaus","external":true,"url":"https://www.uiskillbook.com/skills/typeset","content":"https://www.uiskillbook.com/skills/typeset/llms.txt"},{"slug":"uiskillbook-start","name":"UI Skillbook — Start Here","description":"Routing skill for agents. Explains how to search, filter, and fetch skills from UI Skillbook instead of loading the whole catalog.","categories":["design-systems"],"agents":["claude-code","codex","cursor","opencode","copilot","command-code","universal"],"author":"UI Skillbook","external":false,"url":"https://www.uiskillbook.com/skills/uiskillbook-start","content":"https://www.uiskillbook.com/skills/uiskillbook-start/llms.txt"},{"slug":"ui-skills-root","name":"ui-skills-root","description":"Use when the user needs UI help and you must route by topic, stack, and intent to the smallest useful set of UI skills.","categories":["design-systems"],"agents":["universal"],"author":"ibelick","external":true,"url":"https://www.uiskillbook.com/skills/ui-skills-root","content":"https://www.uiskillbook.com/skills/ui-skills-root/llms.txt"},{"slug":"ui-styling","name":"ui-styling","description":"Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"nextlevelbuilder","external":true,"url":"https://www.uiskillbook.com/skills/ui-styling","content":"https://www.uiskillbook.com/skills/ui-styling/llms.txt"},{"slug":"ui-ux-pro-max","name":"ui-ux-pro-max","description":"Comprehensive UI/UX design intelligence with 50+ styles, 97 palettes, and 9 technology stacks for building professional interfaces.","categories":["visual","design-systems","layout"],"agents":["universal"],"author":"nextlevelbuilder","external":true,"url":"https://www.uiskillbook.com/skills/ui-ux-pro-max","content":"https://www.uiskillbook.com/skills/ui-ux-pro-max/llms.txt"},{"slug":"unlazy","name":"unlazy","description":"Anti-laziness execution discipline that finishes substantial tasks through gate files and runnable checks instead of premature done reports.","categories":["taste"],"agents":["universal"],"author":"Leonxlnx","external":true,"url":"https://www.uiskillbook.com/skills/unlazy","content":"https://www.uiskillbook.com/skills/unlazy/llms.txt"},{"slug":"unocss","name":"unocss","description":"UnoCSS atomic CSS engine guidance for rules, shortcuts, and presets like Wind, Icons, and Attributify.","categories":["visual","layout"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/unocss","content":"https://www.uiskillbook.com/skills/unocss/llms.txt"},{"slug":"unslop","name":"unslop","description":"Cut AI tells from any writing by editing text to remove machine patterns and restore a more human voice.","categories":["taste"],"agents":["universal"],"author":"cursor","external":true,"url":"https://www.uiskillbook.com/skills/unslop","content":"https://www.uiskillbook.com/skills/unslop/llms.txt"},{"slug":"use-of-color","name":"use-of-color","description":"Compatibility listing for use-of-color installs from AccessLint's marketplace skill set.","categories":["accessibility","visual"],"agents":["universal"],"author":"AccessLint","external":true,"url":"https://www.uiskillbook.com/skills/use-of-color","content":"https://www.uiskillbook.com/skills/use-of-color/llms.txt"},{"slug":"variant","name":"variant","description":"Answers which of these rather than is this right. Builds several genuinely different versions of one piece of UI behind a picker in the real page, so you can flip between them and promote the one that wins.","categories":["visual","interaction","taste","layout"],"agents":["universal"],"author":"jakubkrehel","external":true,"url":"https://www.uiskillbook.com/skills/variant","content":"https://www.uiskillbook.com/skills/variant/llms.txt"},{"slug":"react-best-practices","name":"vercel-react-best-practices","description":"Vercel React best practices for rendering performance, bundle efficiency, and scalable component architecture.","categories":["layout","performance","design-systems"],"agents":["universal"],"author":"vercel-labs","external":true,"url":"https://www.uiskillbook.com/skills/react-best-practices","content":"https://www.uiskillbook.com/skills/react-best-practices/llms.txt"},{"slug":"video-interaction-mapper","name":"video-interaction-mapper","description":"Analyze a UI screen recording and map interaction states into an annotated Figma Design storyboard with extracted before/after frames.","categories":["motion","layout"],"agents":["universal"],"author":"figma","external":true,"url":"https://www.uiskillbook.com/skills/video-interaction-mapper","content":"https://www.uiskillbook.com/skills/video-interaction-mapper/llms.txt"},{"slug":"vite","name":"vite","description":"Vite configuration and plugin guidance, including SSR and Vite 8 Rolldown migration patterns.","categories":["performance","layout"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/vite","content":"https://www.uiskillbook.com/skills/vite/llms.txt"},{"slug":"vitepress","name":"vitepress","description":"VitePress documentation site guidance for configuration, theming, and Markdown plus Vue content.","categories":["layout"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/vitepress","content":"https://www.uiskillbook.com/skills/vitepress/llms.txt"},{"slug":"vitest","name":"vitest","description":"Vitest testing best practices for unit tests, mocking, coverage, fixtures, and test filtering.","categories":["layout"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/vitest","content":"https://www.uiskillbook.com/skills/vitest/llms.txt"},{"slug":"vue","name":"vue","description":"Vue 3 Composition API and reactivity guidance for SFCs, script setup macros, and built-in components.","categories":["interaction","layout"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/vue","content":"https://www.uiskillbook.com/skills/vue/llms.txt"},{"slug":"vuejs-ai-vue-best-practices","name":"vue-best-practices","description":"Core Vue development best practices for component architecture, reactivity, and maintainable code.","categories":["layout","performance"],"agents":["universal"],"author":"vuejs-ai","external":true,"url":"https://www.uiskillbook.com/skills/vuejs-ai-vue-best-practices","content":"https://www.uiskillbook.com/skills/vuejs-ai-vue-best-practices/llms.txt"},{"slug":"antfu-vue-best-practices","name":"vue-best-practices","description":"Vue.js best practices emphasizing Composition API with script setup and TypeScript.","categories":["layout","performance"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/antfu-vue-best-practices","content":"https://www.uiskillbook.com/skills/antfu-vue-best-practices/llms.txt"},{"slug":"vue-debug-guides","name":"vue-debug-guides","description":"Practical debugging workflows for diagnosing and fixing Vue reactivity, rendering, and state issues.","categories":["visual"],"agents":["universal"],"author":"vuejs-ai","external":true,"url":"https://www.uiskillbook.com/skills/vue-debug-guides","content":"https://www.uiskillbook.com/skills/vue-debug-guides/llms.txt"},{"slug":"vue-jsx-best-practices","name":"vue-jsx-best-practices","description":"Guidance for writing robust, type-safe, and readable Vue components using JSX.","categories":["layout"],"agents":["universal"],"author":"vuejs-ai","external":true,"url":"https://www.uiskillbook.com/skills/vue-jsx-best-practices","content":"https://www.uiskillbook.com/skills/vue-jsx-best-practices/llms.txt"},{"slug":"vue-options-api-best-practices","name":"vue-options-api-best-practices","description":"Best practices for structuring and scaling Vue applications built with the Options API.","categories":["layout"],"agents":["universal"],"author":"vuejs-ai","external":true,"url":"https://www.uiskillbook.com/skills/vue-options-api-best-practices","content":"https://www.uiskillbook.com/skills/vue-options-api-best-practices/llms.txt"},{"slug":"vue-pinia-best-practices","name":"vue-pinia-best-practices","description":"Patterns for clean, scalable state management in Vue apps using Pinia stores.","categories":["design-systems","layout"],"agents":["universal"],"author":"vuejs-ai","external":true,"url":"https://www.uiskillbook.com/skills/vue-pinia-best-practices","content":"https://www.uiskillbook.com/skills/vue-pinia-best-practices/llms.txt"},{"slug":"vuejs-ai-vue-router-best-practices","name":"vue-router-best-practices","description":"Routing architecture and navigation patterns for maintainable Vue Router applications.","categories":["interaction","layout"],"agents":["universal"],"author":"vuejs-ai","external":true,"url":"https://www.uiskillbook.com/skills/vuejs-ai-vue-router-best-practices","content":"https://www.uiskillbook.com/skills/vuejs-ai-vue-router-best-practices/llms.txt"},{"slug":"antfu-vue-router-best-practices","name":"vue-router-best-practices","description":"Vue Router 4 patterns covering navigation guards, route params, and route lifecycle interactions.","categories":["interaction","layout"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/antfu-vue-router-best-practices","content":"https://www.uiskillbook.com/skills/antfu-vue-router-best-practices/llms.txt"},{"slug":"vuejs-ai-vue-testing-best-practices","name":"vue-testing-best-practices","description":"Testing strategies for Vue applications, including component tests, integration tests, and reliability patterns.","categories":["layout"],"agents":["universal"],"author":"vuejs-ai","external":true,"url":"https://www.uiskillbook.com/skills/vuejs-ai-vue-testing-best-practices","content":"https://www.uiskillbook.com/skills/vuejs-ai-vue-testing-best-practices/llms.txt"},{"slug":"antfu-vue-testing-best-practices","name":"vue-testing-best-practices","description":"Vue testing guidance using Vitest, Vue Test Utils, component testing, mocking, and Playwright E2E.","categories":["layout"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/antfu-vue-testing-best-practices","content":"https://www.uiskillbook.com/skills/antfu-vue-testing-best-practices/llms.txt"},{"slug":"vueuse-functions","name":"vueuse-functions","description":"Apply VueUse composables to build concise, maintainable Vue and Nuxt features.","categories":["layout"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/vueuse-functions","content":"https://www.uiskillbook.com/skills/vueuse-functions/llms.txt"},{"slug":"wcag-audit-patterns","name":"wcag-audit-patterns","description":"Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.","categories":["accessibility","layout"],"agents":["universal"],"author":"wshobson","external":true,"url":"https://www.uiskillbook.com/skills/wcag-audit-patterns","content":"https://www.uiskillbook.com/skills/wcag-audit-patterns/llms.txt"},{"slug":"web-clone","name":"web-clone","description":"网站复刻 / 克隆方法论。Use when the user says to clone, reproduce, or recreate a website or WebGL/Canvas/Three.js effect. Covers source-first reconstruction, repo scaffolding, reverse engineering, implementation paths, and verification for static sites, content sites, and heavy front-end experiences.","categories":["layout","design-systems"],"agents":["universal"],"author":"Jane-xiaoer","external":true,"url":"https://www.uiskillbook.com/skills/web-clone","content":"https://www.uiskillbook.com/skills/web-clone/llms.txt"},{"slug":"vercel-labs-web-design-guidelines","name":"web-design-guidelines","description":"Review UI code for Web Interface Guidelines compliance. Audit design, accessibility, and UX against Vercel's best practices.","categories":["visual","accessibility","layout"],"agents":["universal"],"author":"vercel-labs","external":true,"url":"https://www.uiskillbook.com/skills/vercel-labs-web-design-guidelines","content":"https://www.uiskillbook.com/skills/vercel-labs-web-design-guidelines/llms.txt"},{"slug":"antfu-web-design-guidelines","name":"web-design-guidelines","description":"Review UI code for web interface guideline compliance, including accessibility and UX best practices.","categories":["visual","accessibility","layout"],"agents":["universal"],"author":"antfu","external":true,"url":"https://www.uiskillbook.com/skills/antfu-web-design-guidelines","content":"https://www.uiskillbook.com/skills/antfu-web-design-guidelines/llms.txt"},{"slug":"web-quality-audit","name":"web-quality-audit","description":"Web quality auditing skill for Lighthouse-style analysis across performance, accessibility, best practices, and SEO signals.","categories":["performance","accessibility"],"agents":["universal"],"author":"addyosmani","external":true,"url":"https://www.uiskillbook.com/skills/web-quality-audit","content":"https://www.uiskillbook.com/skills/web-quality-audit/llms.txt"},{"slug":"webgl-components","name":"webgl-components","description":"Build small, always-on WebGL visuals (identity avatars, ambient orbs, glass and iridescent surfaces, animated textures) that ship inside a normal web app UI without wrecking performance, accessibility, SSR, or layout. Use whenever a shader-, GLSL-, or canvas-driven decorative element is added to a product UI, especially one rendered many times per page or per list; when reviewing or optimizing one; or when debugging one that renders blurry, aliased, all-black, or paints over the surrounding UI on machines without hardware acceleration.","categories":["visual","performance","layout"],"agents":["universal"],"author":"flornkm","external":true,"url":"https://www.uiskillbook.com/skills/webgl-components","content":"https://www.uiskillbook.com/skills/webgl-components/llms.txt"},{"slug":"webgl-landing-steering","name":"webgl-landing-steering","description":"Use when steering a landing page around a WebGL centerpiece or hero experience.","categories":["visual","layout"],"agents":["universal"],"author":"MengTo","external":true,"url":"https://www.uiskillbook.com/skills/webgl-landing-steering","content":"https://www.uiskillbook.com/skills/webgl-landing-steering/llms.txt"},{"slug":"write-swift","name":"write-swift","description":"How to write modern Swift well — modeling with value types, Swift 6 data-race safety and approachable concurrency (@concurrent, main-actor-by-default, actors, task groups), protocols and generics (some vs any), API design, performance and ARC, Swift Testing, macros, and the modern language features agents don't know about yet. Use when writing, reviewing, or migrating Swift, or when a concurrency error, a hang, a data race, a retain cycle, or a performance problem needs fixing.","categories":["layout","design-systems"],"agents":["universal"],"author":"emilkowalski","external":true,"url":"https://www.uiskillbook.com/skills/write-swift","content":"https://www.uiskillbook.com/skills/write-swift/llms.txt"}],"categories":[{"slug":"layout","label":"Layout"},{"slug":"typography","label":"Typography"},{"slug":"motion","label":"Motion"},{"slug":"interaction","label":"Interaction"},{"slug":"accessibility","label":"Accessibility"},{"slug":"responsive","label":"Responsive"},{"slug":"forms","label":"Forms"},{"slug":"navigation","label":"Navigation"},{"slug":"visual","label":"Visual"},{"slug":"performance","label":"Performance"},{"slug":"design-systems","label":"Design Systems"},{"slug":"taste","label":"Taste"}],"count":282}