skills

114 design skills for AI agents

A library of 114 design skills that steer an AI agent’s work on interface, motion, color, accessibility and more - 114 skills across 18 disciplines, 30 of them official. Each skill links to its SKILL.md download. Jump to a discipline below.

Contents

• Design direction (16)
• Review & audit (14)
• Motion & animation (15)
• Mobile & native (13)
• Design systems (7)
• Accessibility (6)
• Charts & data viz (6)
• Color & theming (4)
• Components (5)
• Graphics & generative art (5)
• Prototypes & artifacts (5)
• React & frameworks (4)
• Typography (4)
• 3D & shaders (4)
• Video (3)
• CSS & Tailwind (1)
• Figma & handoff (1)
• Slides & documents (1)

Design direction (16) ↑ Top

• Anti-Slop UI — Concrete slop patterns in color, gradients, glass, radius, shadows, layout and components, each with a fix. (by miqdadbadjuber) — ⬇ Download
• Auteur — Directs a website like a film: a commitment sheet before code, generated assets, a slop linter and motion checks for award-level marketing pages. (by agiwhitelist) — ⬇ Download
• Awwwards-Quality Sites — Art direction and build of motion-rich marketing and portfolio sites: honest assets, the hero, a motion system and Three.js only where it earns its place. (by Meng To) — ⬇ Download
• Baseline UI — A compact list of MUST and NEVER rules for UI code, covering components, interaction, animation, typography and layout, to clean up generic output fast. (by ibelick) — ⬇ Download
• Better Layout — Grouping, alignment, reading order and responsive structure, plus stress tests for translated and right-to-left layouts. (by Jakub Krehel) — ⬇ Download
• Better UI — Interface polish with exact values: concentric radius, optical alignment, shadows versus borders, image outlines, press scale, stagger and exit timing. (by Jakub Krehel) — ⬇ Download
• Design Engineering — Emil Kowalski's design engineering philosophy: when and how to animate, exact easing and duration values, springs, component polish and a fixed review format. (by Emil Kowalski) — ⬇ Download
• Frontend Design — Anthropic's skill for interfaces that don't look generated: pick a clear aesthetic direction for palette, type, layout and motion before writing code, then check the result against the brief. (by Anthropic · Official) — ⬇ Download
• Hallmark — A large anti-slop design system: page structures, 21 themes, nav and footer archetypes and 58 slop checks, with audit, redesign and study-a-URL modes and project memory. (by Nutlope) — ⬇ Download
• Impeccable — One design skill with many verbs: shape, craft, critique, audit, polish, harden, animate, colorize, typeset. Backed by deep reference docs on every part of interface design. (by Paul Bakaus) — ⬇ Download
• Interface Design — Craft-first design for product UI such as dashboards and admin panels: intent first, hierarchy, density, depth and type scale, with a system.md memory. (by Dammyjay93) — ⬇ Download
• No AI Design Slop — A quality gate that keeps the product's direction and catches generic AI defaults with a removal test and compact checks. (by Meng To) — ⬇ Download
• Scroll Craft — Scroll-driven landing pages for product and service brands: the visitor's journey, page structure, scrubbed media and scroll checks. (by nateherkai) — ⬇ Download
• Taste Skill — Reads the brief, sets dials for variance, motion and density, maps the page to a real design system and runs a strict pre-flight check before shipping a landing page or portfolio. (by Leonxlnx) — ⬇ Download
• UI Craft — A design engineering system with dials for craft, motion and density, stack detection, Tailwind translations and rules against generic output. (by educlopez) — ⬇ Download
• UI Design Modes — Visual direction, build and audit for React, Next.js and Tailwind UI, in direction, extract, build, audit and break modes. (by mblode) — ⬇ Download

Review & audit (14) ↑ Top

• Anti-Slop Guards — A deterministic design critique: a CLI runs 73 checks with exact thresholds on HTML and CSS, and the skill explains severity, exceptions and CI setup. (by Gesso) — ⬇ Download
• Anti-Slop Rulebook — Craft standards, a catalog of warning signs, and purpose and delivery gates that keep UI, text and code from reading as generated. (by miqdadbadjuber) — ⬇ Download
• Audit AI Design Slop — Finds AI design clichés such as stacked decoration, repeated templates, motion for show and fake proof, and ranks what to remove. (by Meng To) — ⬇ Download
• Better Interface — Runs all of Jakub Krehel's better-* skills as one review across accessibility, layout, writing, typography, color and polish, ranked by impact. (by Jakub Krehel) — ⬇ Download
• Better Writing — Writes and reviews interface copy: labels, errors, empty states and confirmations in the product's own voice. (by Jakub Krehel) — ⬇ Download
• Break UI — Stress-tests a UI with worst-case data, such as long names, missing fields and huge counts, behind a toggle, and reports what broke. (by Emil Kowalski) — ⬇ Download
• Design Review — A structured design review of UI code by category, from hierarchy and spacing to states and motion, in a fixed output format. (by pproenca) — ⬇ Download
• Improve UI — An evidence-based audit of one product screen against its own design system, with a self-contained change spec for each finding you pick. (by ibelick) — ⬇ Download
• Interface Review — Reviews a branch or pull request for interface regressions it introduced and classifies each finding. (by Jakub Krehel) — ⬇ Download
• Refactoring UI — Audits and fixes hierarchy, spacing, color, depth and typography with the Refactoring UI principles, with a score and a quick diagnostic. (by wondelai) — ⬇ Download
• UX Audit — Walks a live web app as a persona and reports usability problems with hard gates, verdicts and evidence. (by Jezweb) — ⬇ Download
• UX Heuristics — Usability review with Krug's principles and Nielsen's ten heuristics, scored by severity. (by wondelai) — ⬇ Download
• User Interface Wiki — 152 prioritized UI rules across animation principles, timing functions, exit animations, sound, the laws of UX and prefetching. (by Raphael Salaja) — ⬇ Download
• Web Interface Guidelines — Reviews UI code against Vercel's Web Interface Guidelines, always pulling the latest rule list, and reports short findings with file and line. (by Vercel · Official) — ⬇ Download

Motion & animation (15) ↑ Top

• Animate — Builds an animation in the right order: whether it should animate at all, its purpose, the cheapest tool, properties, easing, interruption and reduced motion. (by Emil Kowalski) — ⬇ Download
• Animation Performance — Keeps web animation within the frame budget: compositor-only properties, motion off the main thread, React state traps, will-change and a symptom table. (by Emil Kowalski) — ⬇ Download
• Animation Vocabulary — Turns a vague description of a motion effect into its exact name, with hints on how to build it. (by Emil Kowalski) — ⬇ Download
• Apple Design — Apple's fluid interface principles for the web: instant response, direct manipulation, interruptible springs, momentum and rubber-banding. (by Emil Kowalski) — ⬇ Download
• Cinematic GSAP + Lenis — A complete cinematic motion language on GSAP, ScrollTrigger and Lenis: tokens, text and clip reveals, parallax, pinned sections and hover. (by Meng To) — ⬇ Download
• Find Animation Opportunities — A read-only sweep for places that deserve motion, filtered by how often they are seen and why, with a list of what was rejected. (by Emil Kowalski) — ⬇ Download
• Fixing Motion Performance — Prioritized rules for slow animations: patterns to avoid, choosing the mechanism, measuring, scroll, paint, layers and blur. (by ibelick) — ⬇ Download
• GSAP Core — The official GSAP skill for the core API: tweens, easing, stagger, defaults, matchMedia and reduced motion, used the right way. (by GSAP · Official) — ⬇ Download
• GSAP Plugins — Official guide to GSAP plugins: Flip, Draggable, SplitText, ScrollSmoother, MorphSVG and Observer. (by GSAP · Official) — ⬇ Download
• GSAP ScrollTrigger — Official ScrollTrigger guidance: scroll-linked animation, pinning, scrub, triggers, refresh and the cleanup mistakes to avoid. (by GSAP · Official) — ⬇ Download
• GSAP in React — Official guidance for GSAP in React and Next.js: useGSAP, refs, scoping with gsap.context() and cleanup. (by GSAP · Official) — ⬇ Download
• Improve Animations — Audits every animation in a codebase and writes a prioritized plan with a self-contained fix for each. (by Emil Kowalski) — ⬇ Download
• Motion Design — LottieFiles' motion principles: an eight-step checklist, duration and easing tables, motion personalities and ready patterns for presses, entrances and success states. (by LottieFiles · Official) — ⬇ Download
• React View Transitions — How to animate state and route changes with React's ViewTransition, transition types and view-transition CSS, including Next.js specifics. (by Vercel · Official) — ⬇ Download
• Review Animations — Checks motion code against ten firm standards and returns a findings table with a verdict. (by Emil Kowalski) — ⬇ Download

Mobile & native (13) ↑ Top

• Compose Adaptive — Android's official workflow for adaptive Compose apps on phones, foldables and tablets: navigation, list-detail panes and lazy lists. (by Android · Official) — ⬇ Download
• Animate Expo — Animation decisions for React Native and Expo: Reanimated or Animated, springs, keeping motion off the JS thread, press states and haptics. (by Emil Kowalski) — ⬇ Download
• App Design — Expo and React Native screens at the level of good real apps: study references first, keep native fidelity, follow motion rules and check in the simulator. (by Appllama) — ⬇ Download
• Compose Animations — Chris Banes on Jetpack Compose motion: pick the smallest animation API that does the job. (by Chris Banes) — ⬇ Download
• Expo Native UI — Expo's official guide to native-feeling screens: Apple HIG styling, semantic colors, native controls, SF Symbols and sheets. (by Expo · Official) — ⬇ Download
• Liquid Glass — Apple's Liquid Glass design language across SwiftUI, AppKit, UIKit and WidgetKit, with the WWDC25 rules and code. (by rshankras) — ⬇ Download
• Native-Feeling Mobile Web — Concrete CSS and meta fixes that make a web app feel native on phones: stuck hover, tap flash, dvh, input zoom, safe areas and overscroll. (by Emil Kowalski) — ⬇ Download
• React Native Best Practices — Callstack's React Native performance guide: frame rate, startup time, bundle size, memory, re-renders, lists and animation. (by Callstack) — ⬇ Download
• React Native Skills — Vercel's React Native and Expo rules for list performance, animation, navigation and UI patterns, one reference per rule. (by Vercel · Official) — ⬇ Download
• SwiftUI Expert — SwiftUI best practices for state, view composition, performance and modern APIs including Liquid Glass, with about fifty references. (by Antoine van der Lee) — ⬇ Download
• SwiftUI Pro — Paul Hudson's SwiftUI review: modern APIs, maintainability, accessibility and performance. (by Paul Hudson) — ⬇ Download
• SwiftUI UI Patterns — Example-driven SwiftUI patterns for navigation, sheets, lists and state ownership. (by Thomas Ricouard) — ⬇ Download
• iOS Design Guidelines — Apple's Human Interface Guidelines for iPhone as numbered rules: touch targets, safe areas, navigation, type, color and accessibility, with code. (by ehmo) — ⬇ Download

Design systems (7) ↑ Top

• Create DESIGN.md — Writes or updates a DESIGN.md from a repository or a public URL by tracing the evidence for its design language. (by ibelick) — ⬇ Download
• Expo Design System — Expo's official guide to a token-based design system of color, spacing and type inside an Expo app. (by Expo · Official) — ⬇ Download
• Extract DESIGN.md — Google Stitch's skill that pulls a DESIGN.md with tokens, components and patterns out of any frontend codebase. Works without Stitch. (by Google Stitch · Official) — ⬇ Download
• Hue — Studies a brand from its name, URL, code or screenshots and generates a design-language skill for it, with components, icons and hero analysis. (by dominikmartn) — ⬇ Download
• Material UI Theming — MUI's official guidance on theming: createTheme, palette, color schemes, CSS variables and dark mode. (by MUI · Official) — ⬇ Download
• Theme Factory — Ten ready font and color themes for slides, documents and HTML pages, or a custom theme generated on the spot. (by Anthropic · Official) — ⬇ Download
• UI UX Pro Max — A searchable design database the agent queries from the command line: UI styles, 192 palettes, font pairings, 119 UX rules and chart types, saved as a design system per project. (by NextLevelBuilder) — ⬇ Download

Accessibility (6) ↑ Top

• Accessibility Lead — Load before writing HTML, JSX, Vue, Svelte or CSS: routes to specialist accessibility checks and keeps findings in one format. (by Community Access) — ⬇ Download
• Better Accessibility — Reviews and fixes keyboard and focus, ARIA, accessible names, forms, announcements, motion and zoom, naming the WCAG criterion each failure breaks. (by Jakub Krehel) — ⬇ Download
• Fixing Accessibility — Prioritized accessibility rules for review or fixing: names, keyboard, focus and dialogs, semantics, forms, announcements and contrast. (by ibelick) — ⬇ Download
• Web Accessibility Audit — Addy Osmani's WCAG 2.2 audit-and-fix guide, organized by perceivable, operable, understandable and robust, with code examples. (by Addy Osmani) — ⬇ Download
• Web Platform Guidelines — Framework-agnostic web rules: WCAG 2.2, semantic HTML, responsive layout, forms and performance. (by ehmo) — ⬇ Download
• iOS Accessibility — iOS accessibility guidance for VoiceOver, Dynamic Type and other assistive tech, starting from the project's own settings. (by dadederk) — ⬇ Download

Charts & data viz (6) ↑ Top

• Accessible Charts — Ships accessible charts: real text alternatives, keyboard focus, stable server rendering and color-safe encodings. (by TanStack · Official) — ⬇ Download
• AntV G2 Charts — AntV's official skill for G2 v5 charts: spec rules, mark types, encode and transform conventions, and pitfalls. (by AntV · Official) — ⬇ Download
• Archify — Generates validated interactive HTML diagrams, from architecture to sequence and state, out of typed JSON, with optional motion. (by tt-a1i) — ⬇ Download
• Design a Chart — Chooses an honest visualization for a question or metric, such as comparison, trend, target or projection, before building it. (by TanStack · Official) — ⬇ Download
• Diagram Design — An editorial diagram system: 44 diagram types, from architecture to timelines, as self-contained HTML and SVG with a style guide and layout rules. (by Cathryn Lavery) — ⬇ Download
• SVG Diagram — Strict conventions for architecture and flow diagrams in SVG: no overlaps, balanced layout, clean box and arrow geometry. (by Bybit) — ⬇ Download

Color & theming (4) ↑ Top

• Algorithmic Color Palette — Derives a full UI palette from one or two brand colors: state variants, brand-tinted greys and semantic colors as roles. (by Dembrandt) — ⬇ Download
• Better Colors — Builds and audits color systems: ramps, semantic roles and token names, notation conversion, measured contrast and gradient interpolation. (by Jakub Krehel) — ⬇ Download
• Color Expert — A color science knowledge base: OKLCH and other color spaces, gamut mapping, CSS Color 4 and 5, contrast numbers, harmony and naming. (by meodai) — ⬇ Download
• Color Palette — Generates an accessible 11-shade palette and semantic tokens from one brand color, with contrast checks and Tailwind v4 output. (by Jezweb) — ⬇ Download

Components (5) ↑ Top

• Agent Elements — Builds chat, agent and tool-call interfaces in React with 21st.dev's Agent Elements components. (by 21st.dev · Official) — ⬇ Download
• Ant Design — Ant Design's skill: looks up props, demos, tokens and deprecations with the bundled CLI while writing antd code. (by Ant Design · Official) — ⬇ Download
• Component Family Consistency — Keeps buttons, inputs, badges and pills consistent in radius, border, height, shadow and color, so they speak one interaction language. (by Dembrandt) — ⬇ Download
• Composition Patterns — React component API patterns from Vercel: compound components, lifted state, no boolean prop sprawl, React 19 APIs. (by Vercel · Official) — ⬇ Download
• shadcn/ui — The official shadcn/ui skill: detects the project setup, adds and updates components with the CLI, and follows the library's styling and composition rules. (by shadcn/ui · Official) — ⬇ Download

Graphics & generative art (5) ↑ Top

• Algorithmic Art — Generative art with p5.js: define the algorithm's idea, then build a seeded piece with an interactive parameter viewer. (by Anthropic · Official) — ⬇ Download
• Anatomy — Builds detailed interactive isometric SVG figures that explain a technical idea as a physical object, with optional WebGL. (by wheresryan22) — ⬇ Download
• Canvas Design — Anthropic's poster and visual art workflow: write a short design philosophy, then express it as a PNG or PDF composition with bundled fonts. (by Anthropic · Official) — ⬇ Download
• Icon Set Generator — Generates a cohesive SVG icon set for a project from a style spec, with optical corrections and a preview page. (by Jezweb) — ⬇ Download
• Pixel2Motion — Turns a raster logo into a clean minimal SVG and choreographs it into an SVG or HTML animation. (by nolangz) — ⬇ Download

Prototypes & artifacts (5) ↑ Top

• Design Artifact — Creative director principles for HTML artifacts such as pages, reports and plans: size up the brief, apply the fundamentals, edit hard. (by Plannotator) — ⬇ Download
• Prototype — Builds several genuinely different versions of a UI piece behind an in-page picker so you can flip between them. (by Emil Kowalski) — ⬇ Download
• Variant — Builds three deliberately different versions of a component behind an in-page switcher and helps you pick one. (by Jakub Krehel) — ⬇ Download
• Web Artifacts Builder — Scaffolds a React, Tailwind and shadcn/ui project and bundles it into one HTML file. (by Anthropic · Official) — ⬇ Download
• Web Design Engineer — A design engineer's workflow for pages, dashboards, prototypes and slides in the browser: check facts, declare a design system, ship an early draft, verify and critique. (by ConardLi) — ⬇ Download

React & frameworks (4) ↑ Top

• Angular Developer — Angular's official skill: generates components and services and advises on signals, forms, routing, SSR, accessibility and animation. (by Angular · Official) — ⬇ Download
• React Best Practices — 70 React and Next.js performance rules from Vercel Engineering, ranked by impact: request waterfalls, bundle size, server components, re-renders. One reference file per rule. (by Vercel · Official) — ⬇ Download
• Svelte Best Practices — Svelte's official guidance for fast, robust Svelte 5 code: runes, reactivity, events and styling. (by Svelte · Official) — ⬇ Download
• Vue Best Practices — Vue 3 best practices: Composition API, script setup, TypeScript, reactivity and SSR, with more than twenty references. (by vuejs-ai) — ⬇ Download

Typography (4) ↑ Top

• Better Typography — Sets and reviews type by role: scale, line height and tracking, measure, wrapping, tabular numbers, truncation, punctuation and font loading. (by Jakub Krehel) — ⬇ Download
• Modular Scale Typography — Ratio-based type scales with CSS and Tailwind tokens, minimum sizes, letter-spacing, caps labels and weight on dark backgrounds. (by Dembrandt) — ⬇ Download
• Typography Audit — 78 web typography rules in ten groups; every finding names the file, the rule and the fix. (by mblode) — ⬇ Download
• Web Typography — Choosing, pairing and setting web typefaces: evaluation, measurements, hierarchy, responsive type and web font performance. (by wondelai) — ⬇ Download

3D & shaders (4) ↑ Top

• Shader Dev — 36 ShaderToy-style GLSL techniques, including signed distance fields, ray marching, fluids, noise and post-processing, with a routing table. (by MiniMax · Official) — ⬇ Download
• Three.js Fundamentals — Three.js scene setup, cameras, renderer, the object hierarchy and coordinate systems, with code patterns. (by CloudAI-X) — ⬇ Download
• Three.js Scroll Worlds — Builds one persistent Three.js world driven by native scroll, planned with a world bible and a scene ledger. (by Meng To) — ⬇ Download
• Three.js Shaders — Custom GLSL in Three.js: ShaderMaterial, uniforms and common effect patterns. (by CloudAI-X) — ⬇ Download

Video (3) ↑ Top

• Motion Graphics — Short design-led motion graphics, such as kinetic type, stat count-ups and chart reveals, built as HTML and rendered to video. (by HeyGen · Official) — ⬇ Download
• Motion Showreel — Makes 5 to 60 second motion graphics, such as kinetic type, UI demos and logo reveals, from HTML pages rendered frame by frame to MP4. (by ConardLi) — ⬇ Download
• Web Video Presentation — Turns an article or a voice-over script into a click-through 16:9 web presentation that plays like a video, with optional narration. (by ConardLi) — ⬇ Download

CSS & Tailwind (1) ↑ Top

• Tailwind Theme Builder — Sets up Tailwind v4 and shadcn/ui theming with CSS variables, dark mode and a four-step CSS architecture. (by Jezweb) — ⬇ Download

Figma & handoff (1) ↑ Top

• Build Design — Builds UI from a Figma file or a design image with the project's own tokens and components, then compares the result with the design. (by Jakub Krehel) — ⬇ Download

Slides & documents (1) ↑ Top

• Frontend Slides — Animated HTML presentations with no dependencies: gathers the content, shows three style previews to choose from and can convert the deck to PPTX. (by zarazhangrui) — ⬇ Download