Dev Design Library

Agent skills for AI coding assistants

63 agent skills that help AI coding assistants like Claude Code, Codex and Cursor design and build better interfaces.

  • Frontend Design by Anthropic: Gives your agent a clear aesthetic direction for new UI, from typography and color to layout, so it stops shipping generic pages. Source
  • Impeccable by Paul Bakaus: A design vocabulary for your agent. Steer with polish and bolder, review with critique and audit, and catch AI slop before it ships. Source
  • UI UX Pro Max by Next Level Builder: A searchable database of UI styles, palettes, font pairings and UX rules that your agent uses to design across platforms. Source
  • Refero Design by Refero: Research-first design: your agent studies 150K+ real app screens and flows through Refero before it designs. Source
  • Design Engineering by Emil Kowalski: Emil Kowalski's take on UI polish, component design and animation, and the invisible details that make software feel great. Source
  • Apple Design by Emil Kowalski: Apple's approach to interfaces and fluid, physical motion, translated for the web: springs, gestures, materials and type. Source
  • Frontend UI Engineering by Addy Osmani: Builds production-quality, accessible and responsive interfaces, from components and pages to state and styling. Source
  • Web Design Guidelines by Vercel: Reviews your UI code against Vercel's Web Interface Guidelines for accessibility, UX and best practices. Source
  • Better Interface by Jakub Krehel: Reviews a screen, flow or whole interface across accessibility, layout, writing, type, color and polish in one ranked report. Source
  • Interface Review by Jakub Krehel: Reviews a branch, pull request or local change for the interface problems it introduced or regressed. Source
  • Better UI by Jakub Krehel: Polishes surfaces, icons and motion with exact values for radius, optical alignment, shadows and icon states. Source
  • Better Typography by Jakub Krehel: Sets and reviews how text renders, from the type scale and spacing to font features, wrapping and punctuation. Source
  • Better Colors by Jakub Krehel: Builds and checks color systems: generates palettes, names semantic tokens, converts formats and measures contrast. Source
  • Better Layout by Jakub Krehel: Fixes grouping, alignment, reading order and responsive structure, so a layout holds up when resized or translated. Source
  • Break UI by Emil Kowalski: Tries to break your UI with worst-case data: long names, unbreakable emails, missing fields, huge counts and zero items. Source
  • Accessibility by Addy Osmani: Audits and improves web accessibility against WCAG 2.2, from screen readers and keyboard to contrast. Source
  • Better Accessibility by Jakub Krehel: Reviews and fixes keyboard and focus behavior, ARIA, accessible names, forms and announcements against WCAG 2.2. Source
  • Prototype by Emil Kowalski: Builds several genuinely different versions of a UI piece behind a live picker, so you can flip through them and keep one. Source
  • Variant by Jakub Krehel: Builds multiple variants of the component you're working on and helps you iterate and pick one. Source
  • Build Design by Jakub Krehel: Builds UI from a Figma file or a design image so it matches, using your project's existing tokens and components. Source
  • Explain Interface by Jakub Krehel: Explains how a website, a visual effect or an animation was built, from a live URL or a screenshot. Source
  • Pick UI Library by Emil Kowalski: Picks the right library for a frontend task from a curated, opinionated list: charts, OTP inputs, command menus and more. Source
  • shadcn/ui by shadcn: Manages shadcn components and projects: adding, searching, fixing, styling and composing UI with the registry. Source
  • Tailwind Design System by wshobson: Builds scalable design systems with Tailwind CSS v4: design tokens, component libraries and responsive patterns. Source
  • Stitch Skills by Google Labs: Skills for the Stitch MCP server, so your agent can generate and iterate on UI designs with Google Stitch. Source
  • Animate by Emil Kowalski: Builds an animation from scratch, deciding in the right order: should it move at all, why, how fast and with what easing. Source
  • Review Animations by Emil Kowalski: Reviews animation and motion code against a high craft bar. It flags by default and approves only what earns it. Source
  • Improve Animations by Emil Kowalski: Audits a codebase's motion like a senior advisor and writes prioritized, self-contained plans to fix it. Source
  • Find Animation Opportunities by Emil Kowalski: Finds places that don't animate but should, and rejects everything that shouldn't, with exact values. Source
  • Choreograph by Emil Kowalski: Coordinates elements that animate together: what moves, in what order, how much they overlap and what stays still. Source
  • Remove Animations by Emil Kowalski: Finds the animations your interface doesn't need and removes them, from keyboard actions to pure decoration. Source
  • Animation Vocabulary by Emil Kowalski: Turns a vague description of a motion effect into its exact name, so you can prompt for it precisely. Source
  • Animation Performance by Emil Kowalski: Keeps web animations inside the frame budget: composite-only properties, off the main thread, no jank. Source
  • GSAP Core by GreenSock: The official GSAP skill for the core API: tweens, easing, stagger, defaults and responsive, reduced-motion setups. Source
  • GSAP ScrollTrigger by GreenSock: The official GSAP skill for ScrollTrigger: scroll-linked animation, pinning, scrubbing and triggers. Source
  • React View Transitions by Vercel: Smooth, native-feeling animations with React's View Transition API and CSS view transitions. Source
  • Figma Use by Figma: Teaches your agent to work inside Figma through the Figma MCP server, the way Figma expects. Source
  • Figma Design to Code by Figma: Turns a Figma design into code that matches it, using the design context from the Figma MCP server. Source
  • Figma Generate Design by Figma: Translates an app page, view or multi-section layout into a real Figma design. Source
  • Figma Generate Library by Figma: Builds or updates a professional design system in Figma from your codebase: variables, tokens and components. Source
  • Expo Native UI by Expo: Builds native-feeling Expo screens with Apple HIG styling, semantic colors, native controls and SF Symbols. Source
  • Expo Design System by Expo: Builds and maintains a design system inside an Expo app: tokens, themes and reusable components. Source
  • Expo Animation by Expo: Builds animations in React Native and Expo, from whether to animate to which thread and API to use. Source
  • Mobile Native by Emil Kowalski: The small CSS and meta-tag fixes that make a web app feel installed on a phone instead of a website. Source
  • Canvas Design by Anthropic: Creates posters and visual art as .png and .pdf documents, starting from a written design philosophy. Source
  • Theme Factory by Anthropic: Styles slides, docs, reports and landing pages with one of 10 preset themes, or a new one made on the fly. Source
  • Algorithmic Art by Anthropic: Creates algorithmic art with p5.js, seeded randomness and interactive parameters to explore. Source
  • Banner Design by Next Level Builder: Designs banners for social media, ads, website heroes and print, with several art direction options. Source
  • Archify by tt-a1i: Turns any idea, plan or codebase into a validated, interactive diagram: architecture, flows, ERDs, timelines and more. Source
  • Remotion by Remotion: Best practices for making videos in React with Remotion, routing your agent to the right Remotion skill. Source
  • Generate Avatar by DominikScholz: Designs an animated bot avatar from a short description, one SVG silhouette plus where the eyes sit, and validates it with the Open Bot Avatar renderer. Source
  • Fun Isometric by Kelvin Adithya: Draws fun isometric stickers and animates them like Lottie, as React icons or looping video for onboarding and empty states. Source
  • Design Taste Frontend by leonxlnx: Gives your agent taste: art direction, reference images and a browser check instead of generic AI pages. Source
  • OKLCH by Jakub Krehel: OKLCH colors for the web: convert from hex, rgb and hsl, generate palettes, check contrast and theme with Tailwind v4. Source
  • Stageshow by Benji Taylor: Builds faux product UI that looks real, as a still or an animated demo with a cursor, for heroes, feature cards and docs. Source
  • React Best Practices by Vercel: Vercel's React and Next.js performance rules, so your agent writes fast components and data fetching by default. Source
  • Codebase Design by Matt Pocock: A shared vocabulary for designing deep modules, finding seams and making code more testable and AI-navigable. Source
  • React Doctor by millionco: Your agent writes bad React. React Doctor scans the code and catches it. Source
  • Caveman by juliusbrussee: Cuts your agent's tokens by making it talk like a caveman. Why use many token when few token do trick. Source
  • Grill Me by Matt Pocock: A relentless interview from your agent that sharpens a plan or design until every assumption is tested. Source
  • UI Skills by ibelick: A curated set of skills for design engineers, installed together with one command. Source
  • Modern Web Guidance by Google Chrome: Looks up current best practices for HTML, CSS and browser APIs before your agent writes UI code, so it stops shipping outdated patterns. Source
  • Unslop by heydamir: Turns an AI-looking screen into a designed one, fixing spacing, color, icons, copy, type and motion in order, around one direction that fits the product. Source