Design Claude Skills
2 394 design skills from 450 authors. They decide how things look — layout, type and interface behaviour. Half of them fit into 1 928 tokens or less — that is what one costs your context window when the agent loads it. 316 ship runnable scripts rather than instructions alone. 2 of them cannot work without an MCP server, most often rube. We also found 422 copies of these same skills sitting in other people's repositories — counted once here, not 422 times.
2 394 unique 450 authors 8 updated this month 195 from vendors
>- @font-face setup, sizing and measure, punctuation, spacing and rhythm, hierarchy, alignment and layout, OpenType features, brand identity, typeface fixes ordered by impact. Use when writing or reviewing CSS/HTML for text, selecting or pairing typefaces, configuring font-feature-settings or @font-face, building a type scale, or asking "audit my typography", "fix the fonts", "review my type system", "why does this text look off". Triggers on font-family, font-size, line-height, letter-spacing, smart quotes, em dashes, faux bold or italic, variable fonts, widows and orphans. For whole-UI audits beyond type (accessibility, forms, navigation), use ui-audit; for choosing a visual direction or designing a new type system, use ui-design.
>- browser-comparable variants, screenshot-to-markup scaffolds, dark-mode and responsive retrofits, component extraction, and Tailwind cleanup. Use when asked to "build a landing page", "create a dashboard", "make this look premium", "pick a visual style", "design the UI", "show me 3 options", "create a brand kit", "turn this screenshot into markup", "add dark mode", "make this responsive", or "clean up the Tailwind". For product behavior use product-design; for UI audits use ui-audit; for motion use ui-animation; for copy use copywriting.
>- Audits built React and Next.js frontends for user-facing defects in code and failures, rollback gaps, stale async, accessibility markup, layout resilience, performance setup, typography, motion hazards, and microcopy. PR for UX bugs", "audit this component", "check my UI", "is this accessible", "design QA this page", or "is this ready to ship". For product decisions use product-design; for agentic apps use ax-audit; for deep type or motion use typography-audit or ui-animation; for the wording of a string rather than whether it is missing or leaky, use copywriting.
| Senior-level Android engineering expertise for Jetpack Compose, Material 3, shared element transitions, navigation, performance, security, background work, notifications, adaptive layouts, Coil image loading, WorkManager, FCM, Baseline Profiles, R8 optimization, accessibility, coroutines and Flow, and extraordinary UI quality. Load this skill for ANY Android or Kotlin task — building a screen, animating a transition, designing a data layer, scaffolding a multi-module project, optimising startup, adding biometric auth, writing WorkManager jobs, wiring FCM, handling foldables, writing Roborazzi screenshot tests, debugging on device with ADB or MCP. If it touches Android, this skill covers it. design award showcase. Default grey scaffolds, missing animations, hardcoded colors, and spinners as sole loading states are bugs, not style choices. Navigation, WorkManager, FCM, Coil, Roborazzi, Macrobenchmark, Baseline Profiles, R8, WindowSizeClass, foldables, shared element transitions, animation, ADB, MCP.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatt...
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing ac...
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatt...
Applies OpenCode's official brand colors and typography to any sort of artifact that may benefit from having OpenCode's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.
Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.
Apple Human Interface Guidelines for layout and navigation components.
Apple HIG guidance for menu and button components including menus, context menus, dock menus, edit menus, the menu bar, toolbars, action buttons, pop-up buttons, pull-down buttons, disclosure...
Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings.
Apple HIG guidance for system experience components: widgets, live activities, notifications, complications, home screen quick actions, top shelf, watch faces, app clips, and app shortcuts.
Design native iOS interfaces following Apple Human Interface Guidelines. Use when the user mentions "iPhone app", "iPad layout", "SwiftUI", "UIKit", "Dynamic Island", "safe areas", or "HIG compliance". Covers navigation patterns, accessibility, SF Symbols, and platform conventions. For general UI polish, see refactoring-ui. For affordance design, see design-everyday-things.
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".
Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off", "fix the design", "Tailwind styling", "color palette", or "visual hierarchy". Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics.
Expert guide for creating effective prompts for Google Stitch AI UI design tool. Use when user wants to design UI/UX in Stitch, create app interfaces, generate mobile/web designs, or needs help cra...
Create award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "premium website", "portfolio site", "scroll animations", "Awwwards quality", or "brand experience". Covers dramatic typography, purposeful motion, scroll-based composition, and performance-optimized animation. For foundational UI, see refactoring-ui. For type selection, see web-typography.
Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools.
Rigorous visual validation expert specializing in UI testing, design system compliance, and accessibility verification.
Packages generated wiki Markdown into a VitePress static site with dark theme, dark-mode Mermaid diagrams with click-to-zoom, and production build output. Use when the user wants to create a browsa...
WordPress theme development workflow covering theme architecture, template hierarchy, custom post types, block editor support, and responsive design.
Expert C4 Component-level documentation specialist. Synthesizes C4 Code-level documentation into Component-level architecture, defining component boundaries, interfaces, and relationships.
Apple HIG guidance for navigation-related components including search fields, page controls, and path controls.
Create Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram types and styling.
Apple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views.
Complete WordPress development workflow covering theme development, plugin creation, WooCommerce integration, performance optimization, and security hardening.
Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.
Create robust, accessible web forms with best practices for HTML structure, CSS styling, JavaScript interactivity, form validation, and server-side processing. Use when asked to "create a form", "build a web form", "add a contact form", "make a signup form", or when building any HTML form with data handling. Covers PHP and Python backends, MySQL database integration, REST APIs, XML data exchange, accessibility (ARIA), and progressive web apps.
Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboard...
Opinionated frontend development standards for modern React + TypeScript applications. Covers Suspense-first data fetching, lazy loading, feature-based architecture, MUI v7 styling, TanStack Router...
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture.
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces...
Optimize web performance through network protocols, resource loading, and browser rendering internals. Use when the user mentions "page load speed", "Core Web Vitals", "HTTP/2", "resource hints", "network latency", or "render blocking". Covers TCP/TLS optimization, caching strategies, WebSocket/SSE, and protocol selection. For UI visual performance, see refactoring-ui. For font loading, see web-typography.
Expert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integration. Use when Claude needs to create or...
Build Shopify apps, extensions, themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid.
> Tailwind CSS 4 patterns and best practices.
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI...
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifac...
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state ma...
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". Focuses on visual design and interaction patterns. Do NOT use for performance audits (use core-web-vitals), SEO (use seo), or comprehensive site audits (use web-quality-audit).