Design & UI/UX Skills

Skills for visual design, UI/UX patterns, accessibility, and design systems. These skills help Claude Code produce polished, accessible interfaces that follow design best practices.

650 skills

frontend-design

anthropics/skills+8 more

299.9k

118.1k

When you need to build web interfaces that don't look like every other AI-generated site, this skill pushes Claude to make bold aesthetic choices and implement them with precision. It guides creation of production-ready HTML/CSS/JS or React components with distinctive typography, creative layouts, and thoughtful animations. Instead of defaulting to Inter fonts and purple gradients, it forces commitment to a specific design direction, whether that's brutalist minimalism or maximalist chaos. The code output includes working implementations with CSS variables, animation delays, and contextual visual effects that actually match the chosen aesthetic rather than falling back on generic patterns.

web-design-guidelines

vercel-labs/agent-skills+3 more

256.2k

25.2k

A solid UI audit tool that pulls the latest Web Interface Guidelines from Vercel's GitHub repo and checks your code against them. Point it at your HTML, CSS, or component files and it'll flag accessibility issues, design inconsistencies, and UX problems in a clean file:line format. The guidelines stay current since it fetches fresh rules on each run rather than using stale built-in checks. Handy for catching common web standards violations before they ship, especially if you're working fast and might miss obvious accessibility or usability issues.

remotion-best-practices

remotion-dev/skills

243.3k

2.8k

This is a comprehensive reference for building videos programmatically with Remotion and React. It covers the practical stuff you'll actually need: project setup commands, audio visualization patterns, subtitle handling, FFmpeg integration for silence detection, and 3D animations with Three.js. The skill breaks down complex video workflows into specific rules files, from basic sequencing and transitions to advanced features like transparent video rendering and AI voiceover integration. It's particularly solid for developers who want to automate video creation or build data-driven animations without wrestling with Remotion's documentation every time.

AppSignal

Monitor with ease. Code with confidence.

monitoringapmdevtools

Start Free Trial

Sponsored

agent-browser

vercel-labs/agent-browser+3 more

186.7k

29.3k

A comprehensive browser automation CLI that handles the full spectrum of web interaction tasks through Chrome DevTools Protocol. What impressed me most is the thoughtful authentication handling with six different approaches, from importing existing browser sessions to encrypted credential vaults. The element reference system (@e1, @e2) makes DOM interaction reliable across page changes, and command chaining keeps workflows efficient. The network inspection and download management features push it beyond basic scraping into serious testing territory. If you're doing any programmatic web work beyond simple HTTP requests, this covers the gap between lightweight scraping libraries and heavyweight testing frameworks like Selenium.

microsoft-foundry

microsoft/azure-skills+3 more

182.7k

633

A comprehensive toolkit for Microsoft Foundry's AI agent lifecycle, from containerized deployment through production optimization. Handles the complete workflow: builds Docker images, pushes to ACR, creates hosted agents, runs batch evaluations, and optimizes prompts based on performance data. The skill enforces a `.foundry/agent-metadata.yaml` workspace standard and includes specialized sub-skills for deployment, evaluation, troubleshooting, and RBAC management. It's designed for teams running production AI agents who need repeatable deployment pipelines and data-driven prompt optimization. The evaluation workflows are particularly robust, harvesting production traces into datasets and tracking performance regressions across agent versions.

soultrace

soultrace-ai/soultrace-skill

129k

A straightforward personality assessment tool that runs users through a 24-question adaptive test via the SoulTrace API. The system uses Bayesian question selection to classify people into one of 25 archetypes based on a 5-color psychological model (white=structure, blue=understanding, black=agency, red=intensity, green=connection). Each API call is stateless, so you accumulate all previous answers and send them with each new question request. Users answer on a 1-7 Likert scale, and after 24 questions they get their archetype, color distribution percentages, and a shareable results page. Rate limited to about 4 complete assessments per hour.

ui-ux-pro-max

nextlevelbuilder/ui-ux-pro-max-skill+6 more

118k

65.7k

This is essentially a design system and UI audit tool rolled into one skill. It runs accessibility checks (contrast ratios, focus states, ARIA labels), validates touch targets and spacing, and suggests specific color palettes and font pairings from its database of 161 palettes and 57 combinations. The real value is in the priority-based rule system that catches common UX problems like missing loading states, poor responsive breakpoints, and platform-specific interaction patterns. It covers 10 tech stacks so you get relevant code whether you're building in React, SwiftUI, or Flutter. Use it when designing new interfaces or when your UI feels off but you can't pinpoint why.

brainstorming

obra/superpowers+1 more

106.4k

154.2k

Forces Claude to actually think before coding, which frankly should be the default but isn't. Blocks all implementation until you've walked through context exploration, clarifying questions, approach options, and design approval. Generates proper spec docs with self-review checks for placeholders and contradictions. The hard gate against "this is too simple to design" saves you from those deceptively basic requests that turn into scope creep nightmares. Most useful when you're tired of Claude jumping straight into half-baked solutions that miss obvious requirements or architectural decisions.

azure-deploy

microsoft/github-copilot-for-azure+2 more

103.2k

160

The azure-deploy skill executes deployment operations for applications that have already been prepared with infrastructure files and a deployment plan, running commands like `azd up`, `azd deploy`, and `terraform apply` with built-in error recovery. It is designed for developers who need to push prepared applications to Azure production environments, but requires that the azure-prepare and azure-validate skills have been completed first to ensure infrastructure readiness. This skill solves the problem of safely deploying pre-validated Azure applications while preventing users from skipping critical validation steps that would cause deployment failures.

ai-image-generation

inferen-sh/skills+30 more

99.7k

173

Generates images through 50+ AI models via the inference.sh CLI, including FLUX, Gemini, Grok, and Seedream variants. Covers text-to-image, image editing, upscaling, and LoRA fine-tuning with models ranging from ultra-cheap FLUX Klein at $0.0001 per image to 4K Seedream for cinematic quality. Good for prototyping visual content, creating marketing assets, or testing different model capabilities without switching between platforms. The skill essentially wraps the inference.sh command line interface, so you're getting direct access to their model catalog rather than a simplified abstraction. Most useful when you need specific model control or want to compare outputs across different generators quickly.

supabase-postgres-best-practices

supabase/agent-skills

99.3k

A solid reference for anyone working with Postgres, especially on Supabase. Contains 8 categories of performance rules prioritized by impact, from critical query optimization to advanced features. Each rule includes wrong vs. right SQL examples, query plan analysis, and specific performance metrics. The prioritization system is smart - it focuses on the stuff that actually breaks production first (missing indexes, connection pooling) before getting into nice-to-haves. Worth having loaded when reviewing database code or designing schemas, since it catches common Postgres pitfalls that can tank performance.

shadcn

shadcn/ui

88.3k

112.4k

This automates shadcn/ui component management with opinionated guardrails that actually matter. It enforces critical patterns like using FieldGroup for forms instead of raw divs, proper data-invalid validation states, and semantic color tokens over hardcoded values. The skill prevents common mistakes like manual space-y classes (uses gap instead) and missing accessibility requirements like DialogTitle. It handles CLI operations, searches component registries, and provides project context from components.json. Best for teams who want shadcn/ui consistency without memorizing every composition rule and styling convention.

ai-elements

vercel/ai-elements

83.5k

1.9k

Builds AI chat interfaces using the ai-elements component library, which is basically shadcn/ui components specifically designed for AI apps. It'll help you install components like conversations, messages, and tool displays through their CLI, then show you how to wire them up with the AI SDK's useChat hook. The components get added to your codebase (not hidden in node_modules) so you can customize them directly. Most useful when you're building any kind of chatbot or AI assistant interface and want to skip the tedious UI work. The setup assumes you already have Next.js, shadcn/ui, and the AI SDK installed.

simple

roin-orca/skills+1 more

74k

A lightweight brainstorming framework that forces you to pause and think before coding. It runs a three-step discovery process: clarifies requirements with batched questions, presents two implementation approaches with trade-offs, and gets explicit user approval before any code gets written. The process scales from simple bug fixes to complex feature design, with built-in limits to prevent endless iteration cycles. It captures decisions as inline comments in your first implementation file. Honestly, it's overkill for trivial changes but genuinely helpful for preventing those "wait, this isn't what I wanted" moments on medium-sized features.

polish

pbakaus/impeccable+19 more

68.7k

19.4k

This is the final quality pass you run before shipping anything user-facing. It systematically checks visual alignment, spacing consistency, interaction states, typography hierarchy, and micro-details that separate good work from great work. Runs through a comprehensive checklist covering everything from WCAG contrast ratios to 44px touch targets to smooth 60fps transitions. Most valuable when you've got something functionally complete but it feels rough around the edges. It's methodical about polish rather than random tweaking, focusing on systematic issues like inconsistent spacing tokens or missing hover states across components.

browser-use

browser-use/browser-use

66.5k

88k

This automates browser interactions through a persistent daemon that keeps Chrome running between commands, giving you ~50ms response times instead of the usual multi-second browser startup. You get element indices from `browser-use state`, then click, type, or extract data using those indices. It handles the annoying parts well: connects to your existing Chrome profile to preserve logins, runs headless by default, includes cloud browser fallback for zero-config setups. The command chaining works reliably since the browser stays alive. Genuinely useful for web scraping, form automation, or any task where you need to interact with actual web pages rather than just fetch HTML.

lark-doc

larksuite/cli+2 more

59.7k

7.9k

A comprehensive Lark document management tool that handles the full lifecycle of Feishu/Lark docs. Creates documents from Markdown, fetches content, performs granular updates (append/overwrite/replace/insert/delete), and manages media uploads and downloads. The standout feature is intelligent whiteboard integration that automatically suggests visual diagrams (flowcharts, architecture diagrams, org charts) based on document content semantics. Also serves as a discovery layer for finding spreadsheets and other cloud resources before switching to specialized tools. Handles the tricky wiki token resolution where wiki URLs don't directly map to file tokens. Essential for anyone building Lark-integrated workflows or documentation automation.

openclaw-secure-linux-cloud

xixu-me/skills+3 more

56.4k

Deploy OpenClaw on cloud servers with conservative security defaults rather than the typical "expose everything and lock down later" approach. Guides you through Linux hardening, rootless Podman setup, loopback-only gateway binding, and SSH tunnel access before considering Tailscale or reverse proxies. Includes distro-specific firewall commands, baseline configs with token auth and sandboxing enabled, and checklists for auditing exposure. Best for self-hosters who want private control plane access first, then deliberate exposure decisions. Skip this if you just want local OpenClaw setup.

sleek-design-mobile-apps

sleekdotdesign/agent-skills

52.4k

334

This connects Claude directly to Sleek's AI-powered mobile app design platform through their REST API. You can create projects, describe screens in plain language, and get back rendered UI components with actual HTML/CSS code. It handles the full workflow from "design a login screen" to polling the async generation process and fetching the final component code. Requires a Pro plan API key with appropriate scopes. Good for rapid prototyping when you want actual mobile UI mockups instead of just descriptions or wireframes.

programmatic-seo

coreyhaines31/marketingskills+13 more

45.9k

21.4k

This handles the full lifecycle of building SEO pages at scale, from keyword pattern research to template design to avoiding Google penalties. It covers 12 specific playbooks like location pages, comparison pages, and integration pages, with concrete implementation frameworks for each. The skill generates strategy documents, page templates with proper schema markup, and quality checklists to prevent thin content issues. What I like is how it emphasizes proprietary data over scraped content and gives you the technical architecture pieces like URL structure and internal linking patterns. It's built for anyone doing serious programmatic SEO, not just throwing up template pages and hoping they rank.

audit-website

squirrelscan/skills

45k

A comprehensive website auditing skill that runs 230+ checks across SEO, performance, security, and accessibility using the squirrelscan CLI. It crawls your site, analyzes everything from broken links to meta tags to schema markup, then generates LLM-optimized reports with actionable fixes and health scores. The tool handles both surface scans for quick overviews and deep dives for thorough analysis. What makes this genuinely useful is the iteration workflow: audit, fix issues in parallel batches, re-audit, repeat until you hit your target score. Perfect for debugging technical SEO problems or doing comprehensive site health checks before launches.

ideabrowser.com

Find trending startup ideas with real demand. Launch with a team of AI agents.

startupsai agentsideas

Get trending startup ideas →

FAQ

Can Claude Code help with UI/UX design?

Yes — design skills teach Claude visual design principles, accessibility standards, animation patterns, and how to implement design system components.

Related categories

Frontend Development562 Mobile Development347 Documentation696