Design Agent Skills

Excalidraw diagram generation optimized for coding agents. Produces clean, structured diagrams for system architecture, flow charts, and technical documentation from natural language.

Audits and fixes ARIA labels, keyboard navigation, focus management, color contrast, and form error handling. Surfaces issues systematically and applies targeted remediations to bring components up to accessibility standards.

Six dedicated Framer Motion skills: core animation, React/Next.js integration, variants and orchestration, scroll animations, gestures (drag/tap/hover), and layout/shared transitions.

6 official Google Stitch skills for the complete design-to-code pipeline: DESIGN.md management, prompt enhancement, React component generation, shadcn/ui components, and iterative Stitch feedback loops.

An emotional-resonance lens for UI that is technically correct but flat. Translates a user’s felt state into specific copy, motion, and interaction changes.

Professional mobile app UI design skill focused on creating intentional, smooth, personal, and alive interfaces modeled on patterns from top-tier apps.

De-risk product decisions with rigorous UX research. Deep reference guides for survey design, research repository/ops, and usability testing (ISO 9241-grounded), plus JTBD.

SwiftUI visual design skill for distinctive iOS/macOS interfaces that avoid generic AI-slop patterns. Covers design direction, layout systems, typography, color, spacing, brand integration, and design review.

End-to-end user research assistant — qualitative and quantitative. Covers the full research lifecycle: study planning, discussion guide creation, AI-moderated interviews (real or synthetic via Cookiy), survey design and distribution, transcript synthesis, thematic analysis, and research report generation. 141 ★.

Registry of 67 visual aesthetic and style skills for Claude Code, Cursor, Codex, and other agents. Each skill ships as SKILL.md + DESIGN.md covering tokens, components, accessibility, tone, and quality gates for a specific design aesthetic — glassmorphism, brutalism, claymorphism, neumorphism, editorial, bento, retro, riso, and 59 more. Distributed via the TypeUI CLI.

3 CRO (conversion rate optimization) skills by Corey Haines: optimize post-signup onboarding and activation, improve conversion rates on marketing pages, and optimize signup and trial activation flows.

Reverse-engineers design tokens (colors, typography, spacing, border radius, shadows) from any public website and generates tokens.json and tokens.css for local projects. Available as agent skill and standalone CLI. Different from extract-design-md (which is Stitch/DESIGN.md focused).

7 official Figma skills for design-to-code and code-to-design workflows. Covers Figma Plugin API scripting, design implementation, library generation, Code Connect component mapping, and design system rules creation.

AI-swarm verified SwiftUI skills for iOS 26 Liquid Glass, animations, and UI patterns. Verified against WWDC 2025 docs and Xcode 26.3, current through iOS 26.4 RC. Different from swiftui-patterns which focuses on general SwiftUI best practices.

16 focused product-management skills spanning the full lifecycle: discovery (user interviews, problem validation, JTBD, research synthesis), strategy (competitor analysis, positioning, strategy docs), prioritization (RICE, Shape Up scope-cutting and bet-sizing), evidence-first PRDs, plus launch plans, North Star metrics frameworks, A/B experiment design, and Now/Next/Later roadmaps.

Official Callstack React Native skills covering best practices (profiling, FPS, re-renders, Turbo Modules), GitHub PR workflows, GitHub Actions build artifacts, React Native upgrading templates, and brownfield migration strategy.

Generates 5 UX design approaches as interactive prototypes — 1 safe design-system extension and 4 exploratory variants — starting as B&W wireframes then producing color variants via parallel agents. Scans codebase on first run to build persistent design context.

Designer Who Codes: visual audit followed by atomic commits fixing each issue. Garry Tan's design review skill — treats UI like code, identifies and fixes design debt systematically.

Design engineering principles for making interfaces feel polished and alive. Covers micro-interactions, typography details, visual refinement, and the small decisions that separate "it works" from "it feels right". By Jakub Krehel (Interfere, Interfaces magazine, oklch.fyi).

14 visualization skills across 5 rendering engines: Vega-Lite, PlantUML, JSON Canvas, HTML/CSS, and Infographic templates. The most complete data visualization and diagram collection — charts, UML, cloud architecture, network diagrams, mind maps, and 70+ infographic templates.

300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 for cross-platform apps. Covers iOS, Android, macOS, and web accessibility platform conventions in one unified skill package.

Domain navigator for accessibility, WCAG compliance, performance auditing, and code quality skills. Routes to the right skill for a11y remediation, WCAG 2.2 audits, Core Web Vitals, React quality, and motion performance.

Maps 15 AI tools to design scenarios — Midjourney for ideation, Stable Diffusion for production, ControlNet for composition control, vectorization pipelines, and mockup generation. Includes a 2025-2026 AI Creative Director competency roadmap.

Communicate design’s contribution to user and business outcomes in stakeholder terms. Metrics framework, scorecard / before-after / A-B / portfolio report formats.

41 workflow recipes for AI media generation covering Midjourney v7, Flux Kontext, Kling 3.0, Veo3, Seedance 2.0, and 100+ models. Covers image generation, video creation, audio (Suno), and social media content. Requires a muapi account and muapi-cli.

Official Software Mansion React Native production patterns: animations, gestures, SVG/charts/illustrations, on-device AI, rich text, multithreading, audio, and JSI. Fine-tuned for Opus 4.6+. The authoritative source for React Native best practices from the team behind Reanimated and Gesture Handler.

Motion and interaction design expert with two modes — build interactive components with purposeful motion, or audit existing animations for AI-slop patterns. Audit emits a branded HTML report with looping CSS demos per finding. Based on Emil Kowalski (restraint), Jakub Krehel (production polish), and Jhey Tompkins (creative experimentation) — lenses weighted to project context. Works with React, Framer Motion, CSS, and HTML.

Define how a design system evolves: ownership models, contribution lifecycle, semantic versioning as a contract, deprecation policy, and quality gates.

AI-powered mobile app design integrated with the Sleek platform — design screens, create projects, and manage assets via natural language. Requires a Sleek Pro account and API key.

40+ agent skills in one package: mermaid-diagrams, excalidraw, draw-io, c4-architecture, design-system-starter, marp-slide, database-schema-designer, and more. The most comprehensive multi-skill toolkit available.

Two-mode Figma design system skill — Inspect mode (read-only WCAG audit, component scoring, handoff docs) and Build mode (six-phase creation with variable bindings, slots, descriptions), with optional sync to tokens.css + AI rules.

Audits and fixes animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Guides developers to smooth, GPU-accelerated animations that avoid jank.

Specialised for dashboards, admin panels, and SaaS applications where information density is high. Applies craft and consistency principles to produce interfaces that are both functional and visually coherent.

Domain navigator for UI craft, visual design, brand, color, typography, mobile design, and interactive design engineering skills. Routes to skills for taste-driven UI, platform design (iOS/Android), components, color science, and the full visual design stack.

24 deterministic Three.js skills covering WebGL, WebGPU, React Three Fiber, Drei, physics, and IFC (architecture/BIM workflows). Built by the Open AEC Foundation for architecture and engineering workflows on top of 3D web rendering.

Guides creation of a W3C-compliant token system via questionnaire, generates a structured ZIP of JSON token files organized by collection tier (Primitives, Semantic, Component), plus a Figma plugin that imports them maintaining dependency order.

Reference-grade information architecture and navigation: organization/labeling/navigation/ search systems, taxonomy depth-vs-breadth, every nav pattern per device, wayfinding, findability.