Skills
Instructions your agent can follow for layout, type, motion, forms and more.
269 skills
Results
60fps Animationby iart-ai
Web animation performance guidance for avoiding layout thrashing and reaching smooth 60/120fps motion with compositor-friendly techniques.
MotionExternalGitHub stars: 64
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
Accessibility Diffby AccessLint
Regression check that diffs a live page's accessibility violations against a baseline from uncommitted changes or a branch.
AccessibilityExternalGitHub stars: 114
Accessibility Scanby AccessLint
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.
AccessibilityExternalGitHub stars: 114
Accessible Animationby iart-ai
Tiered reduced-motion patterns for CSS, GSAP, Framer Motion, Lenis, and other web animation systems.
AccessibilityExternalGitHub stars: 64
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
Agent Browserby vercel-labs
Browser automation CLI for AI agents for navigation, form actions, extraction, screenshots, QA, and app testing.
LayoutExternalGitHub stars: 44.9K
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 Systemsby MengTo
Use when building a coherent animation system instead of one-off motion tweaks.
MotionExternalGitHub stars: 7.1K
Antfuby antfu
Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects.
LayoutExternalGitHub stars: 6K
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
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
Ascii Animationby iart-ai
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.
MotionExternalGitHub stars: 64
Ask Mattby mattpocock
Router that picks the right Matt Pocock engineering flow for the current task.
Design SystemsExternalGitHub stars: 306.5K
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
Auditby pbakaus
Run technical UI quality audits across accessibility, performance, theming, responsive behavior, and anti-patterns.
AccessibilityExternalGitHub stars: 95.1K
Audit and Fixby AccessLint
Accessibility auditing and remediation workflow that combines detection, prioritization, and practical fixes for WCAG issues.
AccessibilityExternalGitHub stars: 114
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
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 Writingby jakubkrehel
Improve UX writing for interface labels, errors, empty states, settings, notifications, and product voice consistency.
LayoutExternalGitHub stars: 9.2K
Bragby latent-spaces
Turn a finished project into a short shareable launch video with motion, music, and copy.
MotionExternalGitHub stars: 19.5K
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
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 Componentby nvillapiano
Generate variable-bound Figma component sets from component-contract definitions after the token collections exist.
Design SystemsExternalGitHub stars: 34
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
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 Adaptable Composableby vuejs-ai
Create library-grade Vue composables that support plain values, refs, and getters with predictable reactivity.
LayoutExternalGitHub stars: 3.2K
Create Anatomyby redongreen
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.
Design SystemsExternalGitHub stars: 248
Create Voiceby redongreen
Generate VoiceOver, TalkBack, and ARIA screen reader specs in Figma with focus order, property tables, and announcements by component state.
AccessibilityExternalGitHub stars: 248
Daisyuiby saadeghi
Official daisyUI component library skill, providing docs, class names, examples and code examples to generate better daisyUI code.
VisualExternalGitHub stars: 42.7K
Dashboard Information Densityby UI Skillbook
Fit more real information on screen without it reading as cluttered, by controlling hierarchy instead of shrinking everything uniformly.
Layout
Data Table Scannabilityby UI Skillbook
Structure table rows and columns so the eye can scan down and across without losing its place.
Layout
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 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