Guides
Original, stat-dense how-to guides on AI-coding skills, MCP servers and design - which to install, ranked by real adoption from the live catalog.
Looking for the raw numbers instead? Read The State of AI Agent Skills 2026 - the catalog data report - or the live Top 100 leaderboard.
Skillselion publishes 84 original, stat-dense how-to guides on AI-coding skills, MCP servers and design for developers - each names the top skill to install by real install counts from the live catalog. Updated Jul 2026.
Where to Launch Your AI Tool in 2026: 341 Directories, Tested
Skillselion's launch campaign researched 341 directories first-hand (July 19, 2026): only 44 allowed a verified free submission, 154 require an account, and 55 failed eligibility entirely. This guide turns that dataset into a launch-week sequence, including seven Ellelion-operated venues, disclosed as such.
Best micro-interaction skills for Claude Code
The best micro-interaction skill is ui-animation by mblode (7,245 installs, skills.sh registry), which produces hardware-accelerated UI animations beyond basic opacity and transform. framer-motion-animator (8,041 installs) covers React entrances and gestures, and transitions-dev (5,752 installs, 2,094 stars) standardizes timing curves so every state change feels consistent.
Best SVG animation skills for Claude Code
The best SVG animation skill is svg-animations by supermemoryai (1,418 installs, skills.sh registry), which generates handcrafted, performant SVG animations directly in your coding agent. For icon assembly effects use svg-assembly-animator (893 installs, 913 stars), and for timeline control gsap-core (1,657 installs, 79,022 stars) covers GSAP's SVG tweening.
Best academic research skills for Claude Code and Codex
The best academic research skill is academic-paper by imbad0202 (6,505 installs, skills.sh registry), a 12-agent paper-writing pipeline with 10 modes and 5 citation formats. Pair it with academic-paper-reviewer (5,973 installs) for simulated peer review and literature-review (2,981 installs) for source synthesis. The same skills run in both Claude Code and Codex.
How to Use OpenAI Codex Skills with Claude Code
Install `codex` (3,824 installs, skills.sh registry) to let Claude Code call the OpenAI Codex CLI for refactoring, then `chatgpt-codex-onboarding` (2,260 installs) to connect a Codex subscription over OAuth. These skills bridge the two agents in one workflow.
How to Generate Color Palettes with Claude Code
Install `color-palette` (2,524 installs, skills.sh registry) for accessible Tailwind v4 color systems, or `color-expert` (1,646 installs) for OKLCH color science. Both stop Claude Code inventing arbitrary hex values and enforce contrast ratios instead.
How to Build HTML Email Templates with Claude Code
Install `react-email` (7,085 installs, skills.sh registry) to write emails as React components, then `email-best-practices` (6,312 installs) for cross-client rendering. Together they replace hand-written table layouts and cover dark mode, screen readers, and Outlook quirks.
How to Build Three.js 3D Web Scenes with Claude Code
Install `threejs-fundamentals` (6,911 installs, skills.sh registry) for scene-graph setup, then `threejs-shaders` (5,994 installs), `threejs-geometry` (5,625 installs), and `threejs-animation` (9,088 installs). This stack teaches Claude Code the WebGL patterns it otherwise guesses at.
Vercel Labs Skills for Claude Code: find-skills, agent-browser, React Best Practices, and Web Design Guidelines
Vercel Labs ships four widely used Claude Code skills: find-skills for discovering skills mid-task (2,438,642 installs, skills.sh registry, July 2026, the most-installed skill in the catalog), vercel-react-best-practices for performance rules, web-design-guidelines for UI audits, and agent-browser for real-browser verification. This guide covers what each does, when to use which, and how they compose.
Claude Skills vs MCP: Which One Do You Need? (2026)
Use a Claude skill to teach Claude a workflow or convention; use MCP to give Claude live access to an external system like a database or browser. Skills load instructions on demand, MCP holds a running connection. Developers often combine both: the find-skills skill alone has 2,438,642 installs (skills.sh registry, July 2026).
Claude Skills Marketplace: What It Is, How It Works, and Which One to Use (2026)
A Claude skills marketplace is a repo or feed that `claude plugin marketplace add` consumes; directory sites rank skills across all sources. The catalog tracks 10,264 marketplaces (skills.sh registry, July 2026). Choose in a directory, install from a marketplace or registry; this guide covers how to add and evaluate one.
Claude Code Skills Examples: 7 Real Skills and What Their SKILL.md Files Actually Do
Claude Code skills are markdown instruction files that teach the agent one job. This guide walks through 7 real examples spanning discovery, UI generation, plan review, TDD, framework rules, browser automation, and Postgres tuning - led by find-skills at 2,438,642 installs (skills.sh registry, July 2026) - plus the SKILL.md anatomy and a minimal skeleton.
Claude Code Plugins: What They Are, How They Differ From Skills and MCP, and Which to Install
A Claude Code plugin is an installable bundle of slash commands, subagents, skills, hooks, and MCP servers, distributed through marketplaces and installed with /plugin install. Skillselion tracks 2,385 plugins alongside 60,665 skills, whose most-installed entry tops 2,438,642 installs (skills.sh registry, July 2026). This guide explains plugins vs skills vs MCP and which plugins earn a slot.
Azure Skills for Claude Code: The Complete Guide to microsoft/azure-skills
microsoft/azure-skills is Microsoft's official repo of 27 Azure skills for Claude Code, covering deploy, AKS, diagnostics, compliance, cost, and Azure AI Foundry. Combined they have 9,775,059 installs, with microsoft-foundry alone at 446,557 installs (skills.sh registry, July 2026). This guide maps every skill to the Azure job it does.
Anthropic Skills: A Tour of the anthropics/skills Repo and Which Ones to Install
Anthropic skills are the agent skills Anthropic publishes in the github.com/anthropics/skills repo: frontend-design leads with 649,620 installs (skills.sh registry, July 2026), followed by skill-creator, a full document suite (pptx, pdf, docx, xlsx), webapp-testing, and mcp-builder. This guide tours every skill in the repo, explains how they differ from community skills, and picks 2-3 starters by role.
What are the best Storybook skills for Claude Code?
The storybook skill from dalestudy/skills leads at 808 installs (skills.sh registry), with thebushidocollective's han suite covering story writing (602 installs), component documentation, and play functions. Install a story-writing skill plus storybook-testing and Claude Code generates CSF3 stories that match how your team actually documents components.
What are the best data visualization skills for Claude Code?
data-visualization from anthropics/knowledge-work-plugins leads at 9,375 installs (skills.sh registry), teaching chart-type selection, color theory, and accessibility. antvis chart-visualization (4,884 installs) is the strongest web-charting alternative. Install one theory skill plus one renderer skill and Claude Code stops producing default matplotlib output.
What are the best dashboard skills for Claude Code?
firecrawl-dashboard-reporting leads dashboard skills at 28,490 installs (skills.sh registry), with kpi-dashboard-design (11,237 installs) the top pick for designing the dashboard itself and grafana-dashboards (9,770 installs) for observability. Pick by layer: design the KPIs, build the UI, then wire monitoring.
Matt Pocock's skills, mapped: the intended flow, every deprecation, and what replaced what (v1.1)
The intended flow for mattpocock/skills v1.1 is /grill-with-docs, /to-spec, /to-tickets, /implement, /code-review, with /wayfinder above it for multi-session work. /to-prd and /to-issues were replaced by /to-spec and /to-tickets in July 2026. Every change below links to Matt Pocock's own post, changelog, or commit.
How to Install a Claude Code Skill (2026 Guide)
Install a Claude Code skill with one command: npx skills add <owner/repo> --skill <name> (add -g for global). Skills land as plain files in .claude/skills/ and load on the next session; plugin-bundled skills use /plugin marketplace add instead.
What are the best code review skills for Claude Code?
requesting-code-review from obra/superpowers is the most-installed at 159,110 installs with 249,358 GitHub stars (skills.sh registry, GitHub), paired with receiving-code-review at 131,069 installs. For a standalone reviewer, code-review by mattpocock (43,778 installs) covers the direct case, and security-review (11,295 installs) adds the security pass.
How do you give Claude Code persistent memory across sessions?
Use a memory skill: memory-merger from github/awesome-copilot leads with 12,568 installs and 36,327 GitHub stars (skills.sh registry, GitHub), followed by deep-agents-memory (11,965 installs) and obra's remembering-conversations (8,882 installs). Each persists context to files or stores that survive the session, so Claude Code stops re-learning your project every morning.
How do you make a website ADA compliant with Claude Code?
Install the accessibility skill by addyosmani - 34,823 installs, 2,470 GitHub stars (skills.sh registry, GitHub) - and audit against WCAG 2.2 AA, the standard US courts and the DOJ reference for ADA web compliance. Then fix regressions with fixing-accessibility (14,306 installs) and gate releases with accessibility-compliance (10,923 installs).
How do you redesign an existing app UI with Claude Code?
Install redesign-existing-projects by leonxlnx - 182,490 installs, 60,436 GitHub stars (skills.sh registry, GitHub) - then work screen by screen: audit the current UI, fix accessibility with fixing-accessibility (14,306 installs), and apply a taste baseline. The skill applies metric-driven design rules to code that already exists instead of greenfield scaffolds.
What is the design taste skill for Claude Code?
The design taste skill (design-taste-frontend by leonxlnx) fixes generic AI frontend output by enforcing metric-driven design rules. With 235,019 installs and 60,436 GitHub stars (skills.sh registry, GitHub), it is the most-installed design skill in its family, ahead of high-end-visual-design at 185,533 installs.
The brainstorming Skill for Claude Code: Design Before Any Code Gets Written
brainstorming from obra's Superpowers turns vague ideas into approved designs through one-question-at-a-time dialogue, then hard-gates implementation until you approve. 261,134 installs and a 220,998-star repo (skills.sh, GitHub, 2026-07-06) make it the most adopted design-first workflow skill.
The web-design-guidelines Skill: Audit Your UI Against Vercel's Interface Guidelines
web-design-guidelines audits frontend code against Vercel's Web Interface Guidelines, fetching the latest rules at run time and reporting terse file:line findings. 440,517 developers have installed it (skills.sh, 2026-07-06), making it the standard automated UI review step.
The grill-me Skill for Claude Code: Pressure-Test a Plan Before You Build It
grill-me interviews you one question at a time until every branch of a plan is resolved, offering a recommended answer with each question. 460,658 installs and 121,024 GitHub stars, plus 188 installs in the last day, make it the most adopted planning skill (skills.sh, GitHub, 2026-07-06).
The caveman Skill for Claude Code: Cut Output Tokens Without Losing Substance
caveman makes Claude Code answer in terse caveman-speak while keeping code, commands, and error strings byte-exact. Its SKILL.md targets roughly 75 percent output-token reduction; 319,221 developers have installed it and it added 92 installs in the last day (skills.sh, 2026-07-06).
The find-skills Skill for Claude Code: What It Does and How to Install It
find-skills is the most installed agent skill in the ecosystem: 2,357,672 installs and 21,669 GitHub stars (skills.sh, GitHub). It teaches Claude Code to search the open skills registry mid-task and recommend installable packages ranked by install counts and source reputation. One command installs it.
Best AI UI Generator Skills for Claude Code (2026)
The best AI UI generator skill for Claude Code is high-end-visual-design by leonxlnx with 121,468 installs and 37,894 GitHub stars (skills.sh registry, GitHub). For React/shadcn generation use react:components by Google Labs (48,634 installs); for shareable artifact demos use web-artifacts-builder by Anthropic (65,015 installs). All run locally with no SaaS subscription.
How to use the ui-ux-pro-max skill in Claude Code
The ui-ux-pro-max skill turns Claude Code into a senior product designer. The most-installed version, by nextlevelbuilder, has 216,641 installs and 88,741 GitHub stars (skills.sh registry, GitHub): the top design skill in the catalog. Install it, brief it with your product context, and it ships consistent, accessible, on-brand UI.
The frontend-design Skill for Claude Code: Complete Guide (2026)
The `frontend-design` skill is the most-installed design skill in the Skillselion catalog with 563,791 installs (skills.sh registry) - more than any other design skill. It gives Claude Code the polish rules, layout heuristics, and component-composition patterns that turn functional output into production-quality UI.
How to Build Native Mobile UI with Expo and Claude Code (2026)
The Skillselion catalog holds 7 Expo skills with 277,000+ combined installs (skills.sh registry), led by building-native-ui (52,835 installs). Together they give Claude Code the full Expo mobile workflow: native components, Tailwind styling via NativeWind, data fetching, deployment, and CI/CD - all wired to the Expo SDK.
How to Build Brand Identity Guidelines with Claude Code Skills (2026)
The Skillselion catalog tracks a brand design cluster with 330,000+ combined installs led by brandkit (91,369 installs), colorize (81,820 installs), and brand-guidelines (57,427 installs, skills.sh registry). Together they give Claude Code the rules to produce consistent visual identity - color systems, typography, logo usage, and brand voice - without a dedicated designer.
How to Add Lottie Animations to Your App with Claude Code (2026)
The `lottie` skill has 69,141 installs and 25,570 GitHub stars (skills.sh registry) - the top dedicated animation skill for vector and JSON-based motion in the Skillselion catalog. It teaches Claude Code the Lottie animation API, JSON format, and React/web integration patterns, letting you add production-quality motion without a motion designer.
How to Build and Preview UI Artifacts with Claude Code (2026)
The `web-artifacts-builder` skill has 67,753 installs (skills.sh registry) and is the primary skill for generating self-contained HTML/CSS/JS UI artifacts in Claude Code - interactive components you can preview instantly in the browser. Claude Code Artifacts debuted as the #1 Product Hunt product on June 19, 2026, with 160 upvotes, marking a breakout moment for artifact-first UI workflows.
How to Build Custom Claude Code Skills with skill-creator (2026)
The `skill-creator` skill has 276,759 installs (skills.sh registry), making it the #1 most-installed skill in the entire Skillselion catalog across 82,301 listings. It teaches Claude Code to write, test, and publish new skills - so you can codify any recurring agent workflow as a reusable skill that anyone on your team (or the community) can install.
How to Turn Any REST API into an MCP Server (2026 Guide)
The Skillselion catalog tracks 7,730 MCP server listings across 82,301 total listings - the largest and fastest-growing segment. "API to MCP" reached #2 on Product Hunt on June 19, 2026 (114 upvotes), signaling that converting existing REST APIs into MCP servers is the dominant MCP use pattern. This guide covers the conversion workflow, the key decisions, and the skills that help Claude Code do it.
Best Remotion Skills for Claude Code: Programmatic Video with React (2026)
The `remotion-best-practices` skill leads with 382,543 installs and 3,530 stars-the highest install count of any design skill in the Skillselion catalog. Stack it with `remotion-render` (299,330 installs) and `remotion-to-hyperframes` (81,821 installs) to build, render, and export React-driven video entirely inside Claude Code.
Best React Native + Expo Skills for Claude Code: Mobile Design Guide (2026)
The `vercel-react-native-skills` package leads mobile on skills.sh with 147,033 installs and 27,714 stars. Stack it with `building-native-ui` (53,379 installs) and `react-native-design` (10,977 installs, 36,507 stars) to cover cross-platform layout, gesture systems, and Expo Router navigation-all generated by Claude Code.
Best Vue 3 + Nuxt Skills for Claude Code (2026)
The `vue` skill leads Vue 3 on skills.sh with 26,819 installs and 5,218 stars. Pair it with `vue-best-practices` (23,535 installs) for Pinia-first patterns, `vueuse-functions` (17,247 installs) for 200+ composables, and `nuxt-ui` (13,571 installs, 6,662 stars) for Tailwind v4-integrated Nuxt 4 components.
Best Svelte 5 + SvelteKit Skills for Claude Code (2026)
The `gsap-frameworks` skill covers Svelte with 21,977 installs and 8,497 stars across the multi-framework bundle. For Svelte-specific generation, `svelte-code-writer` (5,796 installs, 266 stars) and `svelte5-best-practices` (3,717 installs) teach runes syntax, SvelteKit routing, and the new signal-based reactivity model Claude Code needs to generate correct Svelte 5.
Best TypeScript Skills for Claude Code: Advanced Types + Frontend Patterns (2026)
The `typescript-advanced-types` skill leads with 48,556 installs and 36,505 GitHub stars. Stack it with `migrate-to-shoehorn` (52,085 installs, 121,026 stars) for migration tooling and `better-auth-best-practices` (63,625 installs) for typed auth patterns-giving Claude Code the type-level intelligence needed for large frontend codebases.
Best Astro Skills for Claude Code: Content-First Sites + Islands Architecture (2026)
The `astro` skill leads Astro framework coverage with 8,772 installs on skills.sh. Stack it with `clerk-astro-patterns` (4,417 installs, 46 stars) for auth-gated content and `astro-framework` (1,565 installs) for component island patterns-giving Claude Code everything needed to ship zero-JS-by-default content sites in 2026.
Chrome DevTools MCP + Claude Code: Browser Debugging Without Leaving Your Terminal (2026)
The `browser-cdp` skill (4,823 installs, 2,096 stars) gives Claude Code direct access to the Chrome DevTools Protocol-network inspection, DOM queries, performance profiling, and screenshot capture. Stack it with `debug-optimize-lcp` (1,169 installs, 43,118 stars) for Core Web Vitals work and `full-page-screenshot` (1,147 installs) for visual regression.
Gemini CLI Skills for AI Coding: What Claude Code Users Need to Know (2026)
Google's Gemini CLI enters the AI coding space as Claude Code's closest competitor. The Skillselion catalog has 83,206 listings including `google-agents-cli-publish` (27,779 installs, 2,729 stars) and `gemini-api-dev` (14,410 installs, 3,606 stars)-covering Gemini API integration, agent publishing, and Firebase AI Logic. Here's how the ecosystems compare and where skills bridge them.
Best Dark Mode & Theming Skills for Claude Code (2026)
visual-design-foundations (9,572 installs, skills.sh registry) leads dark-mode tooling for Claude Code, generating perceptually uniform light/dark color systems; pair it with color-palette (2,422 installs) and dark-mode-design (879 installs) for a full theming stack.
Best Responsive Design Skills for Claude Code: CSS Grid & Flexbox (2026)
tailwind-design-system (52,111 installs, skills.sh registry) leads responsive-layout tooling for Claude Code; pair it with responsive-design (14,113 installs) for breakpoint strategy and tailwindcss-advanced-layouts (7,427 installs) for CSS Grid patterns.
Best Icon, Logo & Favicon Generator Skills for Claude Code (2026)
icon-set-generator (1,415 installs, skills.sh registry) leads icon-generation tooling for Claude Code; pair it with logo-generator (1,402 installs) and favicon-generator (773 installs) to cover a project's full visual-asset set.
Best Typography Skills for Claude Code (2026)
typeset (65,535 installs, skills.sh registry) leads typography tooling for Claude Code, turning default-looking text into intentional type systems; pair it with web-typography (4,555 installs) for production CSS rules and variable-font setups.
Claude Code Superpowers: What It Is and How to Install It (2026)
using-superpowers (167,308 installs, 220,998 GitHub stars, skills.sh registry, obra/superpowers) is Skillselion's highest-starred agent-workflow skill, bundling brainstorming, systematic debugging, TDD and code-review sub-skills into one install.
OpenClaw for Claude Code: What It Is and How to Install It (2026)
openclaw-secure-linux-cloud (259,493 installs, skills.sh registry, xixu-me/skills) is Skillselion's single most-installed cloud-infrastructure skill, securing Linux cloud environments for AI-agent workflows - here's the full OpenClaw skill family.
How to Build a Landing Page with Claude Code
The best landing-page skill is brand-landingpage (27,096 installs), which structures the page around a brand system instead of a default hero. Pair it with a copywriting skill and Anthropic's frontend-design (624,710 installs) for on-brand, non-generic pages.
How to Do UX Design with Claude Code
The best UX skill is the ui-ux-pro-max design engine (88,743 GitHub stars, 32,795 installs), which loads 99 UX guidelines into context before any layout. Pair it with Anthropic's frontend-design (624,710 installs) so flow and polish are both deliberate.
How to Convert a Design to Code with Claude Code
The best design-to-code skill is extract-design-system (124,640 installs), which pulls reusable tokens from a screenshot or Figma frame before generating markup. Rebuild on shadcn (219,787 installs) so the extracted system becomes your owned theme.
Google Stitch + Claude Code: The Design-to-Code Workflow That Stops the Slop (2026)
Google Stitch turns prompts into UI, but raw output is generic. Pair it with the stitch-design-taste skill (146,856 installs, 37,894 GitHub stars) to enforce a DESIGN.md style guide, then close the loop with stitch-loop. That combination is the fastest premium-grade design-to-code path in Claude Code.
What Are Claude Code Skills? How Agent Skills Work (2026)
A Claude Code skill is a packaged set of instructions, scripts and context that teaches the agent a specific workflow on install. The Skillselion catalog tracks 65,854 skills across 85,302 total listings and 120,148,840 installs (skills.sh registry, June 2026).
What Is MCP (Model Context Protocol)? A Plain-English Guide (2026)
MCP is the open protocol Anthropic released so AI agents like Claude Code can connect to external tools and data through one standard interface instead of a custom integration per tool. The Skillselion catalog carries 7,867 MCP listings (skills.sh registry) built on it.
shadcn/ui Custom Registries: How Claude Code Installs Third-Party Components (2026)
shadcn itself leads the catalog at 213,704 installs and 116,941 GitHub stars (skills.sh registry), but a growing set of skills - like magic-ui (383 installs, 21,394 stars) - extend it to install components from third-party shadcn registries, not just the default one.
UX Research & Usability Testing Skills for Claude Code (2026)
The top pick is ux-designer by shubhamsaboo (3,560 installs, 113,803 GitHub stars - skills.sh registry), which embeds UX research, persona creation and accessibility rules directly into Claude Code. Pair it with a dedicated usability-testing skill (1,683 installs) to catch friction before you ship.
CSS Scroll-Driven Animations vs GSAP with Claude Code: The 2026 Decision Guide
The #1 skill is `gsap-plugins` (22,512 installs, skills.sh registry) - the top animation skill in the Claude Code catalog. But native CSS scroll-driven animations now achieve GSAP-tier scroll effects with zero JavaScript overhead. The Skillselion catalog tracks 6+ animation skills across 66,520 total listings and 94.6M total installs.
React 19 Server Components with shadcn/ui: The 2026 Production Guide for Claude Code
The #1 skill is `shadcn` (193,352 installs, skills.sh registry) - the most-installed component skill in the Claude Code catalog. React 19's Server Components and React Compiler pair naturally with shadcn/ui's copy-owned architecture. The Skillselion catalog tracks 20+ React and shadcn skills across 66,520 total listings and 94.6M installs.
Modern CSS in 2026: Container Queries, :has(), and Scroll Animations with Claude Code
The #1 pick is `tailwind` (70,626 installs, 25,570 stars, skills.sh registry) - the most-installed CSS skill in the Claude Code catalog. Container queries hit full browser support in 2026, making viewport-based media queries obsolete for component styling. The Skillselion catalog tracks 3,762 build/frontend skills across 66,520 total listings and 94.6M total installs.
Design Tokens with Claude Code: Building a Single Source of Truth in 2026
The #1 skill is `design-system` (210,334 GitHub stars, skills.sh registry) - the most-starred design system skill in the Claude Code catalog. Design tokens are named key-value pairs that connect Figma, code, and AI generation through one source of truth. The Skillselion catalog tracks 20+ design-system skills across 66,520 listings and 94.6M total installs.
Next.js 15 App Router with Claude Code: The 2026 Full-Stack Frontend Guide
The #1 skill is `nextjs-best-practices` (40,062 GitHub stars, skills.sh registry) - the most-referenced Next.js skill for Claude Code. Next.js 15's App Router unlocks React Server Components, Turbopack's dramatically faster builds, and streaming UI by default. The Skillselion catalog tracks 20+ Next.js skills across 66,520 total listings and 94.6M installs.
Stop Building Generic UIs: Design Identity Skills for Claude Code (2026)
The #1 design-identity skill is industrial-brutalist-ui by leonxlnx (108,255 installs, 37,894 GitHub stars - skills.sh registry) - raw borders, monospace type, offset shadows, zero rounded corners. Pair it with high-end-visual-design (127,031 installs) from the same author for the quality layer. Both override Claude Code's default Inter-font blue-button generic aesthetic at the CSS variable layer.
How to Build Your First MCP Server with Claude Code (2026 Guide)
The #1 skill is mcp-builder by anthropics (75,898 installs, 147,832 GitHub stars - skills.sh registry): it scaffolds a complete MCP server - tool definitions, Zod schemas, error handling, transport setup - in a single prompt. The MCP ecosystem hit 97M monthly SDK downloads and 5,800+ servers by mid-2026. Build with stdio for local use; HTTP/SSE for team-shared remote servers.
Automated WCAG Accessibility Audits with Claude Code: The 2026 Guide
The #1 accessibility skill is web-design-guidelines by vercel-labs (396,443 installs, skills.sh registry) - load it before generating any UI to prevent WCAG violations rather than fix them. Follow with audit by pbakaus (82,768 installs) for a full compliance scan, and playwright-best-practices by currents-dev (51,025 installs) for axe-core CI automation. Four skills, 559,286 combined installs.
Framer Motion vs GSAP with Claude Code: The 2026 Web Animation Playbook
The #1 animation skill is css-animations by heygen-com (72,386 installs, skills.sh registry), ahead of animejs (70,083) and waapi (68,770). For React, framer-motion-animator (6,502 installs) covers enter/exit and layout; for zero-bundle page transitions, vercel-react-view-transitions (58,957 installs) uses the browser-native View Transitions API. Load optimize by pbakaus (81,972 installs) to catch GPU compositing issues.
Figma MCP + Claude Code: The Design-to-Code Workflow for 2026
The #1 pick is implement-design by figma (5,942 installs, skills.sh registry): load it with the Figma MCP server connected and Claude Code reads exact design properties - gaps, fills, typography - from your live Figma frames. Auto-layout frames yield 90%+ accurate React + Tailwind output. Figma's March 2026 AI update makes this the most significant design-to-dev workflow shift since component libraries.
shadcn/ui in 2026: Why Component Ownership Beats Library Lock-in
The #1 skill is shadcn by shadcn (193,352 installs, skills.sh registry) - the most-installed component skill in the Claude Code catalog. shadcn/ui copies source into your project rather than installing a locked package, making every component directly editable by AI. In 2026 it is the canonical companion to Tailwind v4 CSS variables and Radix UI accessibility primitives.
How to Build a Design System with Tailwind v4 in Claude Code (2026)
The #1 design system skill is tailwind-design-system by wshobson (48,951 installs, skills.sh registry), which loads a full Tailwind v4 @theme token block into Claude Code context. Pair it with high-end-visual-design (127,031 installs) for aesthetic guardrails. Tailwind CSS v4's CSS-first @theme - released January 2025 - is the fastest path from design tokens to production in 2026.
Best Visual Design Skills for Claude Code (2026)
The #1 pick is web-design-guidelines by vercel-labs (390,792 installs, skills.sh registry) - it loads Vercel's UI guidelines live into Claude Code and audits your frontend for accessibility and UX violations. For visual polish, high-end-visual-design (121,468 installs) enforces premium aesthetics; industrial-brutalist-ui (103,576 installs) delivers distinctive identity. The catalog tracks 1,883 build/frontend skills.
Best MCP Server Skills for Claude Code (2026)
The mcp-builder skill (74,505 installs, skills.sh registry) is the fastest way to scaffold a Model Context Protocol server inside Claude Code. For TypeScript projects, typescript-mcp-server-generator (10,636 installs, 34,620 stars) produces fully typed MCP handlers in a single command. Over 10,000 MCP servers are now indexed in public registries.
Best Security Skills for Claude Code (2026)
The best security skill for Claude Code is firebase-security-rules-auditor (45,920 installs, 345 GitHub stars), which red-teams data-access rules before production. For other stacks, security-review (210,332 stars) and skill-vetter (19,443 installs) lead.
Best Testing Skills for Claude Code (2026)
The best testing skill for Claude Code is webapp-testing by anthropics, with 95,361 installs and 147,832 GitHub stars (skills.sh registry, GitHub). The catalog tracks 531 testing skills; pair webapp-testing with language and e2e skills for full coverage.
Best Figma-to-Code Skills for Claude Code (2026)
The #1 pick is implement-design by figma (5,940 installs, skills.sh registry) - it reads Figma frames live via MCP and generates pixel-accurate production UI code with design tokens. For rule-based consistency, figma-create-design-system-rules (1,650 installs) generates agent constraints from your Figma library. The catalog indexes 18+ dedicated Figma skills from official sources including Figma and OpenAI.
Best Accessibility Skills for Claude Code (2026)
The web-design-guidelines skill (390,792 installs, skills.sh registry) is Claude Code number-one accessibility resource - a WCAG 2.2-aligned design reference loaded into the agent context. For automated auditing, the audit skill (82,732 installs, 35,911 stars) catches contrast failures, ARIA violations, and keyboard-navigation gaps on every code generation pass.
Best Web Animation Skills for Claude Code (2026)
The #1 pick is gsap by heygen-com (92,165 installs, skills.sh registry), loading the full GreenSock API with ScrollTrigger and prefers-reduced-motion guards. New entry: remotion-to-hyperframes (73,589 installs) converts React animations to shareable video clips. The catalog indexes 100+ animation skills across 81.9M total installs, led by a heygen-com cluster dominating the leaderboard.
Best Tailwind CSS Skills for Claude Code (2026)
The #1 pick by installs is high-end-visual-design by leonxlnx (121,468 installs, skills.sh registry), the top Tailwind-based skill in the catalog - it enforces premium layout aesthetics over default Tailwind patterns. The foundational utility skill is tailwind by heygen-com (70,606 installs). Tailwind-based skills cover 87+ entries in the catalog's 25,053 listings across 81.9M total installs.
Best Design System Skills for Claude Code (2026)
The industrial-brutalist-ui skill (103,576 installs, skills.sh registry) is Claude Code's top design-system skill - it enforces a visual token layer with every component the agent generates. For browser-baseline resets, normalize (54,984 installs, 35,911 stars) is the required first step before any design token system is applied.
Best shadcn/ui Skills for Claude Code (2026)
The #1 dedicated skill is shadcn-ui by google-labs-code (40,113 installs, skills.sh registry) - it uses MCP component discovery to guide Claude Code through shadcn installation and customization without version lock-in. For full scaffold, web-artifacts-builder by Anthropic (65,015 installs) bundles React 18 + Tailwind + 40+ shadcn components into a single ready-to-run artifact environment.
How to Design a UI with Claude Code Skills (2026)
Install web-design-guidelines first (390,792 installs, skills.sh registry) for WCAG baseline rules, then shadcn-ui (40,113 installs) for components, tailwind (70,606 installs) for styling, and gsap (92,165 installs) for motion. This four-skill stack covers 95% of UI design work in Claude Code.