Claude Code skill guides
Original guides to AI-coding skills, MCP servers and design - what they do, how to use them, and how the available options compare.
Looking for the raw numbers instead? Read The State of AI Agent Skills 2026 - the catalog data report - or the live Top 25 leaderboard.
Skillselion publishes 146 original guides to AI-coding skills, MCP servers and design for developers. Find setup steps, use cases, and comparisons backed by source links and catalog data. Updated Oct 2026.
Best Web Scraping Skills for Claude Code: Scrape, Crawl and Extract Clean Markdown
The best web scraping skill for Claude Code is Firecrawl, with 103,619 installs (skills.sh registry). It scrapes, crawls and returns clean markdown. Defuddle suits articles, Scrapling handles anti-bot pages locally, and Bright Data, just-scrape and Apify cover hosted and structured extraction.
Marketing Skills for Claude Code: Copy, Pricing, Cold Email, Ads and Launch
The most installed marketing skill for Claude Code is copywriting by coreyhaines31/marketingskills, with 239,051 installs (skills.sh registry). The same repo covers pricing, cold email, paid ads, launch and CRO. This guide shows what each skill actually does and which stack to install.
Best SEO skills for Claude Code: audits, GEO, programmatic and keyword research
The best SEO skill for Claude Code is seo-audit, with 240,705 installs (skills.sh registry). Pair it with ai-seo (153,490 installs) for AI search, programmatic-seo (152,370) for pages at scale, and OpenSEO keyword-research for Search Console data. This guide compares nine skills by what their SKILL.md files actually do.
Deep Research Skills for Claude Code: Cited Reports Compared
The most-installed deep research skill for Claude Code is firecrawl-deep-research (35,440 installs), which sizes each run from 5 to 25+ sources. Use parallel-deep-research (15,651 installs) for long server-side runs, or 199-biotechnologies' deep-research (10,195 installs) for a claim ledger that can fall back to built-in WebSearch.
Home Assistant Skills for Claude Code: Automations Done Right
The most-installed Home Assistant skill for Claude Code is home-assistant-best-practices from homeassistant-ai/skills (8,628 installs). It makes the agent use native triggers, conditions and helpers before templates. For live device control, add aahl's mcp-hass (3,081 installs), which uses Home Assistant's built-in MCP server.
Debugging Skills for Claude Code: Find the Root Cause First
The most-installed debugging skill for Claude Code is diagnosing-bugs from mattpocock/skills (843,570 installs). It makes the agent build a command that reproduces the bug before any hypothesis. For a stricter root-cause rule, use obra's systematic-debugging (308,083 installs).
Liquid Glass and Glassmorphism Skills for Claude Code
The most-installed Liquid Glass skill is liquid-glass-design from affaan-m/ecc (12,227 installs), which covers Apple's iOS 26 material across SwiftUI, UIKit and WidgetKit. For web design rules use glassmorphism from bergside (2,995 installs). The catalog holds 14 Liquid Glass skills.
Spec-Driven Development Skills for Claude Code
The most-installed spec-driven development skill for Claude Code is spec-driven-development from addyosmani/agent-skills (67,975 installs). It makes the agent write and get approval for a spec before any code. For product and tech specs per ticket, use warpdotdev's spec-driven-implementation (28,791 installs).
Game Development Skills for Claude Code
Start with the router skill from gamedev-skills/awesome-gamedev-agent-skills (7,701 installs). It detects your engine (Godot, Unity, Unreal, Roblox, Phaser, three.js and more) and loads the matching skill. The repo's most-installed skills are game-feel (11,134) and game-ui-ux (10,959).
Design Review Skills for Claude Code
The best design review skill for Claude Code is web-design-reviewer from github/awesome-copilot (14,051 installs), which reviews a running site at 375px, 768px, 1280px and 1920px and fixes the CSS. For pre-code critique use design-critique from anthropics/knowledge-work-plugins (5,397 installs).
TDD Skill for Claude Code: the Red-Green Loop
The tdd skill from mattpocock/skills has 1,122,409 installs, the most of any TDD skill in the catalog (skills.sh registry). It requires the test seams to be written down and agreed before a test is written, and names three anti-patterns: implementation-coupled, tautological, and horizontal slicing.
After Effects Skills for Claude Code
dylantarre after-effects is the default pick, with 908 installs (skills.sh registry): it turns Disney's 12 animation principles into frame counts and expressions. Choose aedev-tools after-effects (635 installs) only for batch automation, which needs macOS and a local copy of After Effects.
Animate Skill for Claude Code: How It Works
The animate skill from emilkowalski/skills has 159,352 installs (skills.sh registry). It is a construction skill: it decides whether a thing should animate at all, then picks the tool, properties, curve and duration before writing code. Its sibling review-animations (242,880 installs) audits motion instead.
Pixel Art Skills for Claude Code (and Aseprite)
Install omer-metin pixel-art-sprites first: it is the most installed pixel art skill in the catalog, with 2,818 installs (skills.sh registry), and sets sprite sizes, frame counts and integer scaling. Add PlayableIntelligence game-assets for sprites in game code. For Aseprite, use the willibrandon pixel-plugin, which bundles an Aseprite MCP server.
API Design Skills for Claude Code: Which to Install
Install addyosmani api-and-interface-design first: it is the most installed API design skill in the catalog, with 65,553 installs (skills.sh registry), and covers contracts, errors, naming and idempotency. Add wshobson api-design-principles (30,770 installs) for GraphQL, and alirezarezvani api-design-reviewer to lint specs for breaking changes.
Everything Claude Code skills: what affaan-m/ECC ships
Everything Claude Code (affaan-m/ECC by Affaan Mustafa, 285,365 GitHub stars) bundles 311 skills plus 71 agents, hooks and rules. Its most-installed skill is security-review with 18,189 installs (skills.sh registry, 2026-10-15). Install single skills with npx skills add, or the full kit as the ecc@ecc Claude Code plugin.
Handoff skill for Claude Code: which one to install?
The most-installed handoff skill for Claude Code is handoff from mattpocock/skills, with 1,069,851 installs (skills.sh registry, 2026-10-15). It writes a handoff document so a fresh agent can continue the work. Its sibling claude-handoff (439,860 installs) also starts a background agent. softaworks session-handoff adds validation and staleness checks.
Motion design skill for Claude Code: which to install?
Install lottiefiles motion-design first: it leads the catalog for the term with 20,990 installs (skills.sh registry, 2026-10-15) and sets timing, easing and choreography for any animation library. Add kylezantos design-motion-principles (12,989 installs) to audit motion, and owl-listener motion-system for team motion tokens.
Prototype skill for Claude Code: which one to install?
The two most-installed Claude Code skills named prototype do different jobs. Matt Pocock's version in mattpocock/skills (925,297 installs) builds throwaway logic demos or UI variants. The emilkowalski/skills version (142,768 installs) builds 3 to 5 UI variants behind a visual picker (skills.sh registry, 2026-10-13). Start with mattpocock; choose emilkowalski for component-level motion work.
What is the stop-slop skill for Claude Code?
stop-slop is a Claude Code skill by hardikpandya that strips predictable AI writing patterns from prose. It has 16,862 installs and 16,840 GitHub stars in the Skillselion catalog (skills.sh registry, GitHub, 2026-10-13). It ships 8 core rules, 12 quick checks and a 50-point score. Install it with npx skills add hardikpandya/stop-slop.
What is subagent-driven development in Claude Code?
Subagent-driven development is a Superpowers skill by obra with 197,517 installs (skills.sh registry, 2026-10-11). Claude Code runs a written plan by sending each task to a fresh implementer subagent, reviews every task for spec compliance and code quality, then reviews the whole branch. Install: npx skills add obra/superpowers --skill subagent-driven-development.
HumanLayer skills for Claude Code: what each one does
HumanLayer publishes six Claude Code skills at humanlayer/skills. The top pick is show-me, with 12,502 installs (skills.sh registry), which explains code with diagrams and pseudocode. improve-claude-md (1,118 installs) restructures CLAUDE.md with conditional blocks. The other four, covering pull requests and scheduled agent loops, have no install data yet.
What is the minimalist-ui skill for Claude Code?
minimalist-ui is a Claude Code skill from the leonxlnx taste-skill repo that makes Claude Code build clean, editorial interfaces: warm monochrome color, serif headings, flat bento grids and no decorative gradients or heavy shadows. It has 306,546 installs (skills.sh registry). Install it with npx skills add leonxlnx/taste-skill --skill minimalist-ui.
diagram-design skill for Claude Code: install, diagram types, and brand setup
diagram-design is a Claude Code skill that draws branded, editorial diagrams as one HTML, SVG or PNG file. It has 4,613 installs and 31,735 GitHub stars (skills.sh registry, GitHub), covers 41 visual types, and redraws existing Mermaid, draw.io and Excalidraw sources. Install it from the author's plugin marketplace.
Image to Code Skill: Screenshot to Code in Claude Code
The best image to code skill for Claude Code is Leonxlnx's image-to-code, with 269,812 installs (skills.sh registry, GitHub). Its SKILL.md generates section images, analyzes them, then builds the page. Anthropic says Claude cannot generate images, so in Claude Code you give it a screenshot or renders from another tool, and the extraction rules still apply.
Which Apple design skill should you use with Claude Code?
For web interfaces, use Emil Kowalski's apple-design skill, with 256,021 installs and 51,689 stars (skills.sh registry, GitHub). It turns Apple's WWDC design talks into springs, gesture physics and materials for CSS and JavaScript. For native SwiftUI apps, pick a Human Interface Guidelines skill instead, such as wshobson's mobile-ios-design (23,998 installs) or wondelai's ios-hig-design (8,415).
What Is DESIGN.md and How Do You Use It With Claude Code?
DESIGN.md is a Google Labs file format that describes your visual identity to coding agents: YAML tokens for colors, typography, spacing and components, followed by markdown prose on how to apply them. Google's own Claude Code skill for writing one is Stitch's design-md, with 65,144 installs (skills.sh registry, GitHub).
Playwright CLI vs Playwright MCP for Claude Code (2026)
Use Microsoft's playwright-cli skill when Claude Code drives a browser during coding work. It has 201,209 installs and 14,774 stars (skills.sh registry, GitHub). Microsoft's README says CLI plus skills use fewer tokens than Playwright MCP, which stays the better fit for exploratory, self-healing or long-running browser loops.
Ponytail Skill for Claude Code: GitHub Repo and Install
Ponytail (DietrichGebert/ponytail on GitHub, MIT) is a Claude Code skill that makes the agent reuse existing code, the stdlib and native platform features before writing new code. The core ponytail skill has 112,161 installs and 180,682 stars (skills.sh registry, GitHub). Install it with /plugin marketplace add DietrichGebert/ponytail, then /plugin install ponytail@ponytail.
What is the task-observer skill for Claude Code?
task-observer watches a multi-step Claude Code session and captures the patterns, corrections, and methodology worth turning into a reusable skill. It has 6,070 installs on rebelytics/one-skill-to-rule-them-all, a repo with 2,392 GitHub stars (skills.sh registry, GitHub).
What is the Lavish skill for Claude Code?
Lavish is a Claude Code skill that turns agent output into an annotatable HTML page in your browser instead of a wall of chat prose. It has 16,472 installs on a repo with 3,329 GitHub stars (skills.sh registry, GitHub), and it long-polls your highlights back to the agent.
What is the HyperFrames skill for Claude Code?
HyperFrames is HeyGen's agent-skill family that turns HTML plus GSAP into rendered video. The core `hyperframes` skill has 474,927 installs on a repo with 44,184 GitHub stars (skills.sh registry, GitHub), and the family ships a CLI, an animation engine, and a Remotion importer.
Are Claude Code and Cursor replacing community skills with built-in features?
Partly. Claude Code v2.1.237 shipped a built-in Concise output style on August 20, 2026, overlapping the 13,958-install i-have-adhd skill on length but not on its numbering or state rules. Skills that wrap one behaviour are exposed; skills carrying domain content are not.
What Is the Graphify Skill for Claude Code?
Graphify is a family of knowledge-graph skills for Claude Code; the top one from graphify-labs (6,364 installs, 114,794 GitHub stars, skills.sh registry) extracts, clusters, and analyzes knowledge graphs from documents. Searches for graphify are up 130% in 90 days (Google Trends), and variants cover codebase maps and chart generation.
What Are the Best Blender Skills for Claude Code?
The top Blender skill is blender-motion-state-inspection (4,580 installs, skills.sh registry), which diagnoses rig and animation problems from structured scene facts. Pair it with blender-web-pipeline (2,397 installs) for glTF export to Three.js and blender-mcp (1,738 installs) for asset import, and Claude Code can drive a full 3D workflow.
How to Extract a Design System From an Existing Website With Claude Code
Use the extract-design-system skill (128,524 installs, skills.sh registry, September 2026) to pull live design tokens from any public website into CSS variables and JSON, then harden them with tailwind-design-system (62,538 installs). You get a working token set in minutes instead of rebuilding colors, type, and spacing by hand.
What are the best diagram skills for Claude Code?
design-doc-mermaid leads at 44,104 installs (skills.sh registry): it turns specs and existing code into Mermaid flows, sequences and deployment diagrams. excalidraw-diagram-generator has 28,737 installs for editable whiteboard output, and diagram-design has 4,313 installs from a 30,989-star repo (GitHub) for visual polish.
What is Claude Design and how does it work with Claude Code?
Claude Design is Anthropic Labs' visual canvas, released in research preview on April 17, 2026 for Claude Pro, Max, Team and Enterprise. You describe the work, Claude drafts it, and you refine with inline comments, direct edits and sliders. The /design skill brings the same artboards into Claude Code from v2.1.234.
What are Emil Kowalski's Claude Code skills?
Emil Kowalski publishes ten design-engineering skills for Claude Code. The lead skill, emil-design-eng, holds 250,523 installs (skills.sh registry) from a repo with 35,431 GitHub stars. The set covers animation review, motion vocabulary, Apple-style restraint, UI library choice and quick prototypes.
How to Make Claude Code Follow an Existing Design System (2026)
Extract the system first, then constrain the agent. extract-design-system (128,418 installs, skills.sh registry) reads tokens out of a running product, which is the route for Carbon and any system with no vendor skill. Salesforce Lightning has design-systems-slds-apply (5,138 installs); Material Design 3 has material-3 (2,097 installs).
React Best Practices Skills for Claude Code (2026)
Install vercel-react-best-practices first (685,446 installs, 30,755 stars, skills.sh registry). It loads Vercel's React rule set into Claude Code so hooks, server boundaries and keys come out right. Add react-doctor (13,918 installs) to audit an existing codebase, and nextjs-app-router-patterns (28,834 installs) for routing.
OmniRoute vs LiteLLM: which AI gateway should developers use?
OmniRoute (60,112 GitHub stars, MIT, claims 352 providers) is a free desktop-first gateway for one developer; LiteLLM (57,827 stars, MIT core plus enterprise tier, claims 100+ LLM APIs) is proxy infrastructure for teams. Both front Claude Code as an OpenAI-compatible base URL; team size decides (all figures 2026-09-02).
Book to Skill for Claude Code: Turn Any Book into an Agent Skill
book-to-skill by virgiliojr94 (3,130 installs, 27,067 GitHub stars, skills.sh registry) converts PDF, EPUB, DOCX, HTML, and Markdown sources into structured Claude Code skills with the author's exact frameworks and terminology. Pair it with Anthropic's skill-creator (366,518 installs) for skills you author from scratch.
How to Design a Mobile App UI with Claude Code
Install mobile-app-ui-design (7,873 installs, skills.sh registry) for the core screen workflow, then add mobile-ios-design (21,048 installs) and mobile-android-design (21,521 installs) for platform conventions and ui-mobile (1,109 installs) for accessibility floors. This four-skill stack turns Claude Code into a competent mobile UI designer.
What Is the shadcn improve Skill for Claude Code?
improve is a read-only advisor skill by shadcn (30,979 installs, 9,009 GitHub stars, skills.sh registry) that surveys a codebase like a senior engineer and writes prioritized implementation plans other agents can execute. It never edits source code itself. Searches for shadcn improve are up 180% on Google Trends over the last 90 days.
Impeccable Skill for Claude Code: What It Does and How to Use It
The impeccable skill by pbakaus (251,415 installs, 63,337 GitHub stars, skills.sh registry) turns Claude Code into a production-grade frontend designer. It covers the full interface lifecycle through commands like craft, audit, polish, and harden, enforces concrete anti-pattern rules, and reads project context from PRODUCT.md and DESIGN.md before touching a pixel.
What Is the karpathy-guidelines Skill for Claude Code?
karpathy-guidelines is an MIT-licensed skill that embeds Andrej Karpathy's coding principles into agent behavior: think before coding, make surgical changes, surface assumptions. The main distribution has 33,253 installs from a repo with 206,623 GitHub stars (skills.sh registry, GitHub), with sibling skills like karpathy-coder at 1,019 installs.
What Is the improve-codebase-architecture Skill for Claude Code?
improve-codebase-architecture is Matt Pocock's refactoring skill with 793,911 installs and 235,544 GitHub stars (skills.sh registry, GitHub), the most-installed architecture skill in the Skillselion catalog. It finds shallow modules with a deletion test and renders ranked refactor candidates as a visual HTML report before any code changes.
What Are the poteto Skills for Claude Code?
The poteto skills are two GitHub repositories of Claude Code skills by the developer poteto: noodle (244 GitHub stars), whose adversarial-review skill has 1,163 installs, and how (750 stars, 192 installs). noodle also ships unslop, brain, todo, ts-best-practices, and find-skills (skills.sh registry).
What Is the grill-with-docs Skill for Claude Code?
grill-with-docs is a Claude Code skill with 823,985 installs (skills.sh registry) that interviews you about a plan before you build it, testing every decision against your repo's living documentation. It is the stateful sibling of grill-me: resolved terminology lands in CONTEXT.md and hard decisions become ADRs.
Claude Skills on GitHub: Where to Find and Verify Them
Claude skills on GitHub come from official repositories, individual maintainers, community collections, and source-linked registries. Verify the owner, SKILL.md, license, commits, and bundled scripts before installing to reduce permission and maintenance surprises. The find-skills skill has 4,118,429 installs as of October 30, 2026 (skills.sh registry).
What is the i-have-adhd skill for Claude Code?
i-have-adhd is an output-style skill by ayghri, with 14,235 installs in the Skillselion catalog, that reshapes every Claude Code reply to be action-first, numbered and free of preamble. The catalog rates it quality tier A and LOW risk on 2026-09-13, and the GitHub repo carries 43,673 stars under an MIT license.
Claude skills to write like a human (2026)
For English drafts, install stop-slop (18,430 installs, 18,481 GitHub stars) or humanizer (11,250 installs, 62,586 stars). Both strip chatbot cadence. Skip humanizer-zh (55,774 installs): that listing edits Chinese. Snapshot: skills.sh via Skillselion, October 30, 2026.
Claude skills to reduce token usage (2026)
caveman is the Claude skill people install to reduce token usage: 600,704 installs and 116,238 GitHub stars (skills.sh registry, October 30, 2026). Pair it with caveman-compress on memory files and caveman-stats to read the session log. For copy that must sound human, run stop-slop or humanizer on the draft.
Which Claude Code skills are people googling that slow the agent down?
On August 17, 2026 the top rising Google query on Skillselion's Trending in search rail was Grill Me, a planning interview with 1,463,323 installs. Developers are searching for skills that pause generation: a planning interview, a finder, and taste or brevity layers.
What Are OpenAI Skills? The Agent Skills Spec for ChatGPT and Codex
OpenAI skills are Agent Skills: SKILL.md packages that ChatGPT and Codex both load. Skills are the authoring format; plugins distribute them. Codex uses .agents/skills; ChatGPT uses the Skills picker. This is a spec guide, not a third directory. Official: developers.openai.com/codex/skills and agentskills.io/specification.
What Are ChatGPT Skills? How Skills Work in ChatGPT (2026)
A ChatGPT skill is an Agent Skills SKILL.md workflow that ChatGPT loads from the Skills picker. Type @ to pick a skill, or let ChatGPT match the description. OpenAI documents Personal Skills for Business, Enterprise, Healthcare, and Edu. Official: help.openai.com/en/articles/20001066-skills-in-chatgpt.
How to Install a Codex Skill (2026 Guide)
Install a Codex skill by copying its folder into .agents/skills, or run $skill-installer inside Codex (example: $skill-installer linear). Codex scans repo, user, and system skill directories. Restart Codex if a new skill does not appear. Official: developers.openai.com/codex/skills.
What Are Codex Skills? Agent Skills in OpenAI Codex (2026)
A Codex skill is an Agent Skills folder with a SKILL.md file that OpenAI Codex loads from .agents/skills. Codex can pick it when the task matches the description, or you mention it with $name. The same SKILL.md format works in ChatGPT. Official: developers.openai.com/codex/skills.
Grok Bot vs Grok Build vs Grok 4.6 (August 2026)
Grok Bot, Grok Build, and Grok 4.6 are three SpaceXAI products that share a name. Grok Bot (beta 11 August 2026) is a persistent teammate on a shared cloud computer. Grok Build is the grok coding CLI. Grok 4.6 is the model. Skillselion /brief/grok tracks Grok Build. Grok Bot pricing as of 16 August 2026 starts at Cursor Ultra $200/month.
What Is Grok Bot? Pricing and How It Works (August 2026)
Grok Bot is SpaceXAI's always-on AI teammate product (beta 11 August 2026). Bots share one cloud computer, sign into your apps, and run skills on a schedule. As of 16 August 2026 it is bundled with Cursor Ultra ($200/month), Cursor Teams Premium ($120/seat/month), or SuperGrok Heavy (~$300/month). One-time trial; no standalone plan.
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 (10,538 installs, skills.sh registry), which produces hardware-accelerated UI animations beyond basic opacity and transform. framer-motion-animator (11,195 installs) covers React entrances and gestures, and transitions-dev (21,822 installs, 5,946 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 (2,637 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 (2,900 installs, 104,985 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 (10,996 installs, skills.sh registry), a 12-agent paper-writing pipeline with 10 modes and 5 citation formats. Pair it with academic-paper-reviewer (9,999 installs) for simulated peer review and literature-review (4,010 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` (4,080 installs, skills.sh registry) to let Claude Code call the OpenAI Codex CLI for refactoring, then `chatgpt-codex-onboarding` (2,521 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` (3,263 installs, skills.sh registry) for accessible Tailwind v4 color systems, or `color-expert` (2,995 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` (9,805 installs, skills.sh registry) to write emails as React components, then `email-best-practices` (13,850 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` (18,615 installs, skills.sh registry) for scene-graph setup, then `threejs-shaders` (16,746 installs), `threejs-geometry` (15,674 installs), and `threejs-animation` (21,618 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 (4,118,429 installs, skills.sh registry, October 30, 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 4,118,429 installs (skills.sh registry, October 30, 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,411 marketplaces (skills.sh registry). 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 4,118,429 installs (skills.sh registry, October 30, 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,075 skills, whose most-installed entry tops 4,118,429 installs (skills.sh registry, October 30, 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 583,871 installs (skills.sh registry, October 30, 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 1,050,161 installs (skills.sh registry, October 30, 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 (6,420 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 31,733 installs (skills.sh registry), with kpi-dashboard-design (16,514 installs) the top pick for designing the dashboard itself and grafana-dashboards (13,299 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 267,296 installs with 309,131 GitHub stars (skills.sh registry, GitHub), paired with receiving-code-review at 226,307 installs. For a standalone reviewer, code-review by mattpocock (821,458 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,854 installs and 40,594 GitHub stars (skills.sh registry, GitHub), followed by deep-agents-memory (19,247 installs) and obra's remembering-conversations (9,207 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 - 65,257 installs, 3,011 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 (22,428 installs) and gate releases with accessibility-compliance (14,873 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 (22,428 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 702,839 installs and 106,019 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. 411,397 installs and a 309,131-star repo (skills.sh, GitHub, October 30, 2026) 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. 803,045 developers have installed it (skills.sh, October 30, 2026), making it the standard automated UI review step.
Grill Me Skill for Claude Code: How mattpocock's Plan Interrogation Works
grill-me by mattpocock (990,482 installs, 239,217 GitHub stars, skills.sh registry) makes Claude Code interrogate a developer about a plan or design, one question at a time with a recommended answer attached, until both reach shared understanding. Search interest is up 3,250% in the Skillselion trend index. Nothing gets built until the developer confirms.
How to install and use the caveman skill (2026)
Install caveman with npx skills add https://github.com/juliusbrussee/caveman --skill caveman, then say caveman mode or /caveman. It has 600,704 installs and 116,238 GitHub stars (skills.sh registry, October 30, 2026). Intensity levels and the off-switch are below.
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: 4,118,429 installs and 37,215 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 (50,432 installs); for shareable artifact demos use web-artifacts-builder by Anthropic (114,128 installs). All run locally with no SaaS subscription.
How to Use the ui-ux-pro-max Skill in Claude Code (2026)
ui-ux-pro-max is the most-installed design skill in the Skillselion catalog at 347,395 installs and 127,216 GitHub stars. Install the nextlevelbuilder original with npx ui-ux-pro-max-cli init --ai claude, generate a design system once, persist MASTER.md, and every later screen reads from it.
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 1,050,161 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 (112,548 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 114,128 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 419,121 installs (skills.sh registry), making it the #1 most-installed skill in the entire Skillselion catalog across 82,762 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 9,891 MCP server listings across 82,762 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 711,687 installs and 5,906 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` (538,985 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 260,776 installs and 33,242 stars. Stack it with `building-native-ui` (53,379 installs) and `react-native-design` (15,748 installs, 42,001 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 36,055 installs and 6,026 stars. Pair it with `vue-best-practices` (43,740 installs) for Pinia-first patterns, `vueuse-functions` (17,247 installs) for 200+ composables, and `nuxt-ui` (19,965 installs, 7,042 stars) for Tailwind v4-integrated Nuxt 4 components.
Best Svelte 5 + SvelteKit Skills for Claude Code (2026)
The `gsap-frameworks` skill covers Svelte with 65,061 installs and 17,551 stars across the multi-framework bundle. For Svelte-specific generation, `svelte-code-writer` (13,287 installs, 266 stars) and `svelte5-best-practices` (17,451 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 95,030 installs and 42,001 GitHub stars. Stack it with `migrate-to-shoehorn` (494,068 installs, 307,068 stars) for migration tooling and `better-auth-best-practices` (128,379 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 18,470 installs on skills.sh. Stack it with `clerk-astro-patterns` (14,450 installs, 46 stars) for auth-gated content and `astro-framework` (2,177 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 (0 installs, 8,153 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` (3,652 installs, 54,482 stars) for Core Web Vitals work and `full-page-screenshot` (2,799 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 82,762 listings including `google-agents-cli-publish` (525,523 installs, 6,230 stars) and `gemini-api-dev` (25,566 installs, 4,356 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 (13,803 installs, skills.sh registry) leads dark-mode tooling for Claude Code, generating perceptually uniform light/dark color systems; pair it with color-palette (3,263 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 (71,177 installs, skills.sh registry) leads responsive-layout tooling for Claude Code; pair it with responsive-design (21,398 installs) for breakpoint strategy and tailwindcss-advanced-layouts (8,143 installs) for CSS Grid patterns.
Best Icon, Logo & Favicon Generator Skills for Claude Code (2026)
icon-set-generator (1,903 installs, skills.sh registry) leads icon-generation tooling for Claude Code; pair it with logo-generator (3,973 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 (9,336 installs) for production CSS rules and variable-font setups.
Claude Code Superpowers: What It Is and How to Install It (2026)
using-superpowers (275,062 installs, 309,131 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 (39,649 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 (1,050,161 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 (142,850 GitHub stars, 423,920 installs), which loads 99 UX guidelines into context before any layout. Pair it with Anthropic's frontend-design (1,050,161 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 (130,807 installs), which pulls reusable tokens from a screenshot or Figma frame before generating markup. Rebuild on shadcn (271,099 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 Is the Superpowers Skill Collection for Claude Code? (2026 Guide)
Superpowers is obra's open-source skill collection that installs a disciplined agent workflow into Claude Code - brainstorming (351,699 installs), systematic-debugging (248,314), and TDD (217,398) from one repo with 281,811 GitHub stars. Install it with npx skills add https://github.com/obra/superpowers to give your agent a repeatable plan-build-verify loop.
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 60,075 skills across 82,762 total listings and 216,168,933 installs (skills.sh registry).
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 9,891 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 271,099 installs and 126,956 GitHub stars (skills.sh registry), but a growing set of skills - like magic-ui (383 installs, 22,971 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 (1,678 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,782 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` (70,018 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 82,762 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` (271,099 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 82,762 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 6,281 build/frontend skills across 82,762 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 82,762 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` (48,803 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 82,762 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 (134,197 installs, 184,999 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 (803,045 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 (100,352 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 (11,195 installs) covers enter/exit and layout; for zero-bundle page transitions, vercel-react-view-transitions (174,113 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 (271,099 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 (71,177 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 (803,045 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 6,281 build/frontend skills.
Best MCP Server Skills for Claude Code (2026)
The mcp-builder skill (134,197 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 (12,064 installs, 40,594 stars) produces fully typed MCP handlers in a single command. Over 9,891 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 (140,758 installs, 345 GitHub stars), which red-teams data-access rules before production. For other stacks, security-review (293,074 stars) and skill-vetter (21,086 installs) lead.
Best Testing Skills for Claude Code (2026)
The best testing skill for Claude Code is webapp-testing by anthropics, with 192,484 installs and 184,999 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 (2,786 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 (803,045 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 (538,985 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 82,762 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 (53,699 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 (114,128 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 (803,045 installs, skills.sh registry) for WCAG baseline rules, then shadcn-ui (53,699 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.