Skills
Instructions your agent can follow for layout, type, motion, forms and more.
257 skills
Results
12 Principles of Animationby raphaelsalaja
Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.
MotionExternalGitHub stars: 42
Accessibilityby addyosmani
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".
AccessibilityExternalGitHub stars: 3K
Accessible Focus Statesby UI Skillbook
Keep a visible, high-contrast focus indicator on every interactive element, without a generic browser outline or none at all.
Accessibility
Adaptby pbakaus
Adapt designs across breakpoints, device contexts, and platform constraints with responsive interaction quality.
InteractionExternalGitHub stars: 95.1K
Animateby emilkowalski
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.
MotionExternalGitHub stars: 51.4K
Animateby pbakaus
Enhance UX with purposeful animation and micro-interactions that support usability and delight.
MotionExternalGitHub stars: 95.1K
Animate Expoby emilkowalski
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.
MotionExternalGitHub stars: 51.4K
Animation on Scrollby MengTo
Use when you need scroll-driven motion that feels intentional instead of noisy or overdone.
MotionExternalGitHub stars: 7.1K
Animation Vocabularyby emilkowalski
Sharpen motion language so animation choices feel deliberate and consistent.
MotionExternalGitHub stars: 51.4K
Antfu Designby antfu
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.
LayoutExternalGitHub stars: 6K
Anti Ai Slop Writingby jalaalrd
Produce human-sounding text that avoids detectable AI patterns with banned vocabulary, structural variety, and voice calibration.
TasteExternalGitHub stars: 577
Anti Slopby elithrar
Detect and remove AI writing tells from prose while preserving the author's voice in blogs, docs, emails, and reports.
TasteExternalGitHub stars: 221
Apple Designby emilkowalski
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.
MotionExternalGitHub stars: 51.4K
Apply Design Systemby edenspiekermann
Reconnect an existing Figma design to published design system components instead of detached layers, local wrappers, or one-off assets.
Design SystemsExternalGitHub stars: 66
Ask Sonnerby emilkowalski
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.
LayoutExternalGitHub stars: 51.4K
Audit Design Systemby edenspiekermann
Audit a Figma screen or component for design-system drift, including missing shared components, local overrides, and unbound tokens.
Design SystemsExternalGitHub stars: 66
Balise Ux Writingby mrstev3n
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.
TasteExternalGitHub stars: 12
Banner Designby nextlevelbuilder
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.
VisualExternalGitHub stars: 142.5K
Baseline Uiby ibelick
Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.
Design SystemsExternalGitHub stars: 10.4K
Beautiful Shadowsby MengTo
Use when a UI needs better depth, elevation, and shadow treatment without looking muddy.
VisualExternalGitHub stars: 7.1K
Bencium Innovative Ux Designerby bencium
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.
VisualExternalGitHub stars: 470
Best Practicesby addyosmani
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".
PerformanceExternalGitHub stars: 3K
Better Accessibilityby jakubkrehel
Review and improve focus states, keyboard support, ARIA, forms, screen readers, hit areas, and motion accessibility.
AccessibilityExternalGitHub stars: 9.2K
Better Colorsby jakubkrehel
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.
VisualExternalGitHub stars: 9.2K
Better Interfaceby jakubkrehel
Run a holistic interface review across accessibility, layout, writing, typography, color, and visual polish.
VisualExternalGitHub stars: 9.2K
Better Layoutby jakubkrehel
Improve interface structure through grouping, alignment, reading order, progressive disclosure, and adaptive responsive layouts.
Design SystemsExternalGitHub stars: 9.2K
Better Typographyby jakubkrehel
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.
TypographyExternalGitHub stars: 9.2K
Better Uiby jakubkrehel
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.
VisualExternalGitHub stars: 9.2K
Better Writingby jakubkrehel
Improve UX writing for interface labels, errors, empty states, settings, notifications, and product voice consistency.
LayoutExternalGitHub stars: 9.2K
Bolderby pbakaus
Increase visual impact and personality for interfaces that feel too safe, bland, or generic.
VisualExternalGitHub stars: 95.1K
Brandby nextlevelbuilder
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
VisualExternalGitHub stars: 142.5K
Brandkitby Leonxlnx
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.
VisualExternalGitHub stars: 105.4K
Breakby jakubkrehel
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.
LayoutExternalGitHub stars: 9.2K
Broby luchasarie
Re-explain the previous assistant message in a much simpler, plain-language version when the last answer was too dense.
TasteExternalGitHub stars: 424
Budgeby millionco
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.
VisualExternalGitHub stars: 34
Build Primitiveby PrototyperAI
Build foundational UI primitives from scratch with strong ARIA, keyboard, focus, and state handling.
AccessibilityExternalGitHub stars: 7
Canvas Designby anthropics
Create original visual designs and art on digital canvases using design philosophy, focusing on form, space, and color.
VisualExternalGitHub stars: 184.8K
Cc Figma Tokensby nvillapiano
Build or update Figma Primitive and Semantic variable collections from component-contracts token files.
Design SystemsExternalGitHub stars: 34
Clarifyby pbakaus
Improve labels, microcopy, and UX messaging so interface text is clearer and easier to act on.
InteractionExternalGitHub stars: 95.1K
Cobejsby MengTo
Use when building lightweight animated globe or orb visuals with Cobe.
VisualExternalGitHub stars: 7.1K
Color Contrast for Taste, Not Just Complianceby UI Skillbook
Use accessible contrast ratios as a floor, then build restrained hierarchy on top of them rather than treating them as the whole job.
Visual
Colorizeby pbakaus
Introduce strategic color systems to interfaces that feel dull, monochrome, or visually flat.
VisualExternalGitHub stars: 95.1K
Compact Landingby Danilaa1
Build compact premium landing pages with clear CTA hierarchy, quiet typography, and minimal visual noise.
VisualExternalGitHub stars: 37
Company Logosby MengTo
Use when laying out logos, trust rows, or brand collections in a clean and balanced way.
Design SystemsExternalGitHub stars: 7.1K
Container Linesby MengTo
Use when using borders and container structure as part of the visual system.
Design SystemsExternalGitHub stars: 7.1K
Contrast Checkerby AccessLint
Compatibility listing for contrast-checker installs from AccessLint's marketplace skill set.
AccessibilityExternalGitHub stars: 114
Core Web Vitalsby addyosmani
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".
PerformanceExternalGitHub stars: 3K
Create Design Mdby ibelick
Create or update a DESIGN.md from an existing product repository or public website, with evidence-based design tokens and guidance.
Design SystemsExternalGitHub stars: 10.4K
Critiqueby pbakaus
Evaluate design quality with structured UX scoring, persona checks, and actionable remediation guidance.
VisualExternalGitHub stars: 95.1K
Daisyuiby saadeghi
Official daisyUI component library skill, providing docs, class names, examples and code examples to generate better daisyUI code.
VisualExternalGitHub stars: 42.7K
Data Table Scannabilityby UI Skillbook
Structure table rows and columns so the eye can scan down and across without losing its place.
Layout
Delightby pbakaus
Add personality and memorable moments through thoughtful interaction details and emotional UX touches.
InteractionExternalGitHub stars: 95.1K
Designby nextlevelbuilder
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.
VisualExternalGitHub stars: 142.5K
Design First Ui Promptingby MengTo
Use when you want to turn a product goal into a design-first UI prompt with clear layout, type, color, and constraint choices.
VisualExternalGitHub stars: 7.1K
Design Labby 0xdesign
Interactive design exploration workflow: conduct interviews, generate variants, and refine UI designs through feedback.
VisualExternalGitHub stars: 782
Design Reviewby Superfuture
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.
VisualExternalGitHub stars: 24
Design Systemby nextlevelbuilder
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.
VisualExternalGitHub stars: 142.5K
Design Taste Frontendby Leonxlnx
Senior UI/UX frontend skill that enforces anti-slop design decisions, motion quality, and architecture discipline.
TasteExternalGitHub stars: 105.4K
Deslopby stephenturner
Remove AI writing patterns from prose so drafts, edits, and reviews sound like a specific human wrote them.
TasteExternalGitHub stars: 16
Distillby pbakaus
Simplify noisy interfaces by removing non-essential complexity and restoring clear visual focus.
Design SystemsExternalGitHub stars: 95.1K