Design skills

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.

Emil Kowalski's design engineering philosophy: when and how to animate, exact easing and duration values, springs, component polish and a fixed review format.

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.

Interface polish with exact values: concentric radius, optical alignment, shadows versus borders, image outlines, press scale, stagger and exit timing.

Grouping, alignment, reading order and responsive structure, plus stress tests for translated and right-to-left layouts.

A compact list of MUST and NEVER rules for UI code, covering components, interaction, animation, typography and layout, to clean up generic output fast.

Reviews UI code against Vercel's Web Interface Guidelines, always pulling the latest rule list, and reports short findings with file and line.

Runs all of Jakub Krehel's better-* skills as one review across accessibility, layout, writing, typography, color and polish, ranked by impact.

Writes and reviews interface copy: labels, errors, empty states and confirmations in the product's own voice.

Reviews a branch or pull request for interface regressions it introduced and classifies each finding.

Stress-tests a UI with worst-case data, such as long names, missing fields and huge counts, behind a toggle, and reports what broke.

An evidence-based audit of one product screen against its own design system, with a self-contained change spec for each finding you pick.

Choosing, pairing and setting web typefaces: evaluation, measurements, hierarchy, responsive type and web font performance.

78 web typography rules in ten groups; every finding names the file, the rule and the fix.

Ratio-based type scales with CSS and Tailwind tokens, minimum sizes, letter-spacing, caps labels and weight on dark backgrounds.

Builds and audits color systems: ramps, semantic roles and token names, notation conversion, measured contrast and gradient interpolation.

A color science knowledge base: OKLCH and other color spaces, gamut mapping, CSS Color 4 and 5, contrast numbers, harmony and naming.

Derives a full UI palette from one or two brand colors: state variants, brand-tinted greys and semantic colors as roles.

Generates an accessible 11-shade palette and semantic tokens from one brand color, with contrast checks and Tailwind v4 output.

Builds an animation in the right order: whether it should animate at all, its purpose, the cheapest tool, properties, easing, interruption and reduced motion.

Checks motion code against ten firm standards and returns a findings table with a verdict.

Audits every animation in a codebase and writes a prioritized plan with a self-contained fix for each.

Keeps web animation within the frame budget: compositor-only properties, motion off the main thread, React state traps, will-change and a symptom table.

Apple's fluid interface principles for the web: instant response, direct manipulation, interruptible springs, momentum and rubber-banding.

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.

Reviews and fixes keyboard and focus, ARIA, accessible names, forms, announcements, motion and zoom, naming the WCAG criterion each failure breaks.

Prioritized accessibility rules for review or fixing: names, keyboard, focus and dialogs, semantics, forms, announcements and contrast.

Addy Osmani's WCAG 2.2 audit-and-fix guide, organized by perceivable, operable, understandable and robust, with code examples.

Framework-agnostic web rules: WCAG 2.2, semantic HTML, responsive layout, forms and performance.

Load before writing HTML, JSX, Vue, Svelte or CSS: routes to specialist accessibility checks and keeps findings in one format.

iOS accessibility guidance for VoiceOver, Dynamic Type and other assistive tech, starting from the project's own settings.

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.

Writes or updates a DESIGN.md from a repository or a public URL by tracing the evidence for its design language.

Google Stitch's skill that pulls a DESIGN.md with tokens, components and patterns out of any frontend codebase. Works without Stitch.

Expo's official guide to a token-based design system of color, spacing and type inside an Expo app.

Studies a brand from its name, URL, code or screenshots and generates a design-language skill for it, with components, icons and hero analysis.

Ten ready font and color themes for slides, documents and HTML pages, or a custom theme generated on the spot.

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.

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.

Vue 3 best practices: Composition API, script setup, TypeScript, reactivity and SSR, with more than twenty references.

Angular's official skill: generates components and services and advises on signals, forms, routing, SSR, accessibility and animation.

Svelte's official guidance for fast, robust Svelte 5 code: runes, reactivity, events and styling.

Sets up Tailwind v4 and shadcn/ui theming with CSS variables, dark mode and a four-step CSS architecture.

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.

React component API patterns from Vercel: compound components, lifted state, no boolean prop sprawl, React 19 APIs.

Keeps buttons, inputs, badges and pills consistent in radius, border, height, shadow and color, so they speak one interaction language.

Ant Design's skill: looks up props, demos, tokens and deprecations with the bundled CLI while writing antd code.

Builds chat, agent and tool-call interfaces in React with 21st.dev's Agent Elements components.

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.

Creative director principles for HTML artifacts such as pages, reports and plans: size up the brief, apply the fundamentals, edit hard.

Scaffolds a React, Tailwind and shadcn/ui project and bundles it into one HTML file.

Builds three deliberately different versions of a component behind an in-page switcher and helps you pick one.

Builds several genuinely different versions of a UI piece behind an in-page picker so you can flip between them.

Animated HTML presentations with no dependencies: gathers the content, shows three style previews to choose from and can convert the deck to PPTX.

Generates validated interactive HTML diagrams, from architecture to sequence and state, out of typed JSON, with optional motion.

An editorial diagram system: 44 diagram types, from architecture to timelines, as self-contained HTML and SVG with a style guide and layout rules.

Chooses an honest visualization for a question or metric, such as comparison, trend, target or projection, before building it.

Ships accessible charts: real text alternatives, keyboard focus, stable server rendering and color-safe encodings.

Strict conventions for architecture and flow diagrams in SVG: no overlaps, balanced layout, clean box and arrow geometry.

AntV's official skill for G2 v5 charts: spec rules, mark types, encode and transform conventions, and pitfalls.

Anthropic's poster and visual art workflow: write a short design philosophy, then express it as a PNG or PDF composition with bundled fonts.

Builds detailed interactive isometric SVG figures that explain a technical idea as a physical object, with optional WebGL.

Turns a raster logo into a clean minimal SVG and choreographs it into an SVG or HTML animation.

Generates a cohesive SVG icon set for a project from a style spec, with optical corrections and a preview page.

Generative art with p5.js: define the algorithm's idea, then build a seeded piece with an interactive parameter viewer.

Builds one persistent Three.js world driven by native scroll, planned with a world bible and a scene ledger.

36 ShaderToy-style GLSL techniques, including signed distance fields, ray marching, fluids, noise and post-processing, with a routing table.

Three.js scene setup, cameras, renderer, the object hierarchy and coordinate systems, with code patterns.

Custom GLSL in Three.js: ShaderMaterial, uniforms and common effect patterns.

Turns an article or a voice-over script into a click-through 16:9 web presentation that plays like a video, with optional narration.

Short design-led motion graphics, such as kinetic type, stat count-ups and chart reveals, built as HTML and rendered to video.

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.

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.

Animation decisions for React Native and Expo: Reanimated or Animated, springs, keeping motion off the JS thread, press states and haptics.

Android's official workflow for adaptive Compose apps on phones, foldables and tablets: navigation, list-detail panes and lazy lists.

Paul Hudson's SwiftUI review: modern APIs, maintainability, accessibility and performance.

Expo's official guide to native-feeling screens: Apple HIG styling, semantic colors, native controls, SF Symbols and sheets.

Vercel's React Native and Expo rules for list performance, animation, navigation and UI patterns, one reference per rule.