跪拜 Guibai
← Back to the summary

The Top 10 Agent Skills on skills.sh, Actually Tested

Introduction: After skills.sh (Vercel's Agent Skills navigation site) went live, the numbers on the leaderboard have become absurdly competitive — first place has 2.4 million popularity, second place has 600k+, and even tenth place has 350k+.

Are these top-ranked Skills actually useful? Is there any hype? Which ones are worth installing, and which ones can you just glance at?

I went through all of the Top 10 by popularity on skills.sh and tested each one.

Foreword

First, some background.

skills.sh is an open ecosystem navigation site for Agent Skills built by Vercel — you can think of it as an "App Store for AI skills."

Every Skill listed on it is an open-source SKILL.md instruction pack. Once installed, your AI assistant (Claude Code, Cursor, Codex, GitHub Copilot, Windsurf, Gemini, Cline... 70+ agents are supported) automatically gains a specific "professional skill."

The ranking is based on a site-wide popularity score (calculated from 8-week activity + install count). The higher the number, the hotter it is.

I spent two days installing all of the Top 10 and running them one by one. Some are genuinely impressive, some... let's just say they have a strong presence.

Below are the results.

1. Top 10 Overview

First, a summary table to give you an overall sense of these 10 Skills. We'll break them down individually later (leaderboard data refreshes periodically, so what you see now might not be exactly the same as below).

Rank Skill Name Author Popularity One-Liner
🥇 #1 find-skills vercel-labs 2.4M Ecosystem gateway; everything else is pointless without this
🥈 #2 frontend-design anthropics 628K Official Anthropic product, specifically cures the "AI-generated" look
🥉 #3 vercel-react-best-practices vercel-labs 527K 70 React/Next.js performance rules, hardcore
#4 agent-browser vercel-labs 514K Lets AI open a browser and do work for you
#5 grill-me mattpocock 459K An inquisitor type, specifically targets solution loopholes
#6 web-design-guidelines vercel-labs 440K Vercel's UI design specification reviewer
#7 microsoft-foundry microsoft 432K Dedicated to Microsoft Azure AI Foundry
#8 remotion-best-practices remotion-dev 416K Create videos with React, genuinely delightful
#9 improve-codebase-architecture mattpocock 408K Architecture check-up, helps find "technical debt" in your code
#10 tdd mattpocock 390K AI-assisted TDD, the ultimate form of test-first

An interesting phenomenon: In the Top 10, Vercel occupies 4 spots, Matt Pocock (a top-tier TypeScript guru) occupies 3 spots alone, and Anthropic and Microsoft each have 1. The Vercel faction and the Matt Pocock faction have basically carved up half the landscape.

2. Installation Method

The installation command differs for each Skill, but the underlying logic is the same — one line via the skills CLI.

Install the CLI tool itself first:

npx skills add vercel-labs/skills --skill find-skills

General installation format:

npx skills add <owner>/<repo> --skill <skill-name>

Note for Cursor users: The latest version of Cursor reads the global skills directory from ~/.cursor/skills-cursor by default, but the skills add command adds to the /.cursor/skills directory for Cursor by default. Therefore, after installation, you need to create a symlink:

cd ~/.cursor && ln -s skills skills-cursor

The most hassle-free approach (and my top recommendation): Just throw the skills.sh URL to your AI assistant and say —

"Go check the leaderboard on skills.sh, pick a few Skills suitable for my work scenario, and install them"

It will choose, install, and configure them itself. You don't need to touch the command line at all.

I've marked the specific installation command for each Skill below, but if you find it troublesome, just use the "lazy method" above.

3. Top 10 Hands-On Review

Counting down from 10th place, getting more hardcore as we go.

#10 tdd — AI-Assisted TDD | mattpocock/skills

🔥 Popularity: 390K | 👤 Author: Matt Pocock (Top-tier TypeScript guru, 161.8K GitHub Stars)

One-liner: Makes AI write code following the "test-first" discipline, rather than writing implementation first and patching tests later.

What does it do?

Everyone knows TDD (Test-Driven Development) — write tests first, then implementation, then refactor. But the reality is, AI writes code by default as "implementation first, tests? What tests?".

This Skill forces AI to follow the TDD process:

Plan → Write a failing test → Write minimal implementation to pass → Refactor → Loop

Its core philosophy is "vertical slicing" — each test covers a complete behavioral path, not an isolated function. Tests only verify the behavior of the public interface, not internal implementation details.

Hands-on experience:

I asked it to write code for a login module. Without this Skill, the AI directly spat out 200 lines of implementation code; after installing it, it first asked me: "What should be returned when login fails? Where is the Token stored? How to handle timeouts?" — only after asking did it start writing tests.

The discipline is indeed strong. But honestly, if your project doesn't have a TDD culture, it will feel "too slow." It's more suitable for new projects or core modules.

Who it's for: Teams seriously practicing TDD, developers writing core business logic, people with an obsession for code quality.

Installation:

npx skills add mattpocock/skills --skill tdd

#9 improve-codebase-architecture — Architecture Check-up | mattpocock/skills

🔥 Popularity: 377K | 👤 Author: Matt Pocock

One-liner: Lets AI review your codebase like an architect, find "deep technical debt," and output a refactoring RFC.

What does it do?

It's based on the "deep module" concept from John Ousterhout's A Philosophy of Software Design — good modules should have simple interfaces but deep implementations. This Skill will:

  1. Explore your codebase like a newly onboarded engineer
  2. Discover architectural friction points (which modules have overly complex interfaces, unclear responsibilities, excessive coupling)
  3. Propose specific refactoring plans, formatted as GitHub Issue RFCs

Hands-on experience:

I pointed it at a middleware project that had been maintained for over two years. It spent about 5 minutes reading the code, then listed 7 architectural issues for me — 3 of which were the kind where "yeah, that's true, but I've been pretending not to see it."

What satisfied me most about the output quality: It wasn't generic talk like "your code has high coupling," but pinpointed specific files, specific functions, specific dependency directions. Every suggestion included "why to change" and "how to change."

Who it's for: Developers taking over legacy projects, tech leads, teams preparing for architectural refactoring.

Installation:

npx skills add mattpocock/skills --skill improve-codebase-architecture

#8 remotion-best-practices — Create Videos with React | remotion-dev/skills

🔥 Popularity: 416K | ⬇️ Installs: 312K | ⭐ GitHub Stars: 3.9K | 👤 Author: Remotion Official

One-liner: Lets AI generate videos using React code according to official best practices.

What does it do?

Remotion is a framework for "making videos by writing code" — you describe each frame using React components, and it renders them into an MP4. This Skill is an official knowledge base from Remotion, containing 30+ rule files, covering:

Hands-on experience:

I asked the AI to make a product promo video intro using Remotion (5-second animation + Logo + tagline). Without this Skill, the AI wrote code that ran but the animation was stiff; after installing it, it automatically used the correct easing functions, correct frame rate handling, correct component structure.

If you're already using Remotion, this Skill is a must-install. If you don't use Remotion... first understand a concept: in the future, making videos doesn't necessarily require opening Premiere; you can do it by writing React, and it can be parameterized for batch generation.

Who it's for: Remotion users, developers interested in "code-generated video," teams needing to batch-generate video content.

Installation:

npx skills add remotion-dev/skills --skill remotion-best-practices

#7 microsoft-foundry — Azure AI Agent Deployment | microsoft/azure-skills

🔥 Popularity: 432K | 👤 Author: Microsoft Official

One-liner: Official Microsoft product, covering the full lifecycle of Azure AI Foundry agents — build, deploy, evaluate, operate.

What does it do?

Azure AI Foundry is Microsoft's AI Agent platform. This Skill covers the complete development chain:

It also includes multiple sub-skill documents, each workflow having an independent SKILL document, forcing the AI to read the corresponding sub-skill instructions before execution.

Hands-on experience:

Frankly speaking — I don't really use Azure, so my experience is limited. But if your team uses Azure AI Foundry, the value of this Skill is obvious: it organizes the scattered deployment processes, evaluation processes, and MCP tool invocation methods from Microsoft's official documentation into instructions that AI can directly execute.

Microsoft released 16 Azure series Skills in one go in the azure-skills repository (Foundry, OpenAI, Search, Container Apps, Functions...), with a total popularity exceeding 6.8 million+. If you're an Azure full-suite user, it's recommended to install the entire repository.

Who it's for: Azure users, enterprise teams using Microsoft's AI tech stack, architects needing enterprise-grade AI Agent deployment.

Installation:

npx skills add microsoft/azure-skills --skill microsoft-foundry

#6 web-design-guidelines — UI Design Specification Review | vercel-labs/agent-skills

🔥 Popularity: 440K | ⬇️ Installs: 305K | 👤 Author: Vercel Official

One-liner: Uses Vercel's Web Interface Design Guidelines to review your UI code line by line.

What does it do?

Vercel has a set of public Web Interface Guidelines, covering spacing, typography, interaction, and accessibility. This Skill makes the AI pull the latest specification document from remote before each review, then check your code line by line.

You just need to say "help me review the UI of this page," and it will scan the specified file or directory, outputting results like this:

src/components/Header.tsx:23  - Spacing does not conform to 8px grid specification
src/components/Button.tsx:8   - Missing focus-visible style
src/pages/Login.tsx:45        - Contrast ratio insufficient for WCAG AA standard

The format is very clean — file:line number + issue, no nonsense.

Hands-on experience:

I asked it to review a dashboard page that I "thought was pretty well written." It found 11 issues, 4 of which were accessibility-related — I indeed hadn't considered color-blind users, keyboard navigation, screen readers, etc.

The biggest feeling was "the format is comfortable." Many AI review tools like to write lengthy analysis reports, but it only gives you file:line number + issue, which you can fix one by one directly in your editor.

Who it's for: Frontend developers, teams that value design specifications, projects needing accessibility reviews.

Installation:

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

#5 grill-me — Inquisitorial Architecture Review | mattpocock/skills

🔥 Popularity: 459K | ⬇️ Installs: 93K | ⭐ GitHub Stars: 63.5K | 👤 Author: Matt Pocock

One-liner: Before you start writing code, "grill" your plan with a series of interrogations.

What does it do?

"Grill" in English means "to interrogate intensely." This Skill works in a very unique way — it doesn't help you write code, but after you propose a plan/design, it systematically questions you like a strict technical interviewer:

It traverses every branch of the decision tree and automatically explores your codebase to answer the questions it poses. Designed for: design reviews, architecture validation, pre-coding solution verification.

Hands-on experience:

This Skill is my personal favorite.

I described a design plan for a "message push system" to it. It continuously questioned me with over 20 questions, a few of which made me completely rethink the entire design — "Is your push service and message storage synchronous or asynchronous? If asynchronous, what's the maximum message delay? Can the user perceive this delay?"

It doesn't make decisions for you, but it makes you discover the loopholes in your own plan. Every time I get "grilled," my plan improves significantly.

Who it's for: Tech leads, architects, developers who need to validate plans before coding, people wanting to improve system design skills.

Installation:

npx skills add mattpocock/skills --skill grill-me

#4 agent-browser — AI Browser Automation | vercel-labs/agent-browser

🔥 Popularity: 514K | ⬇️ Installs: 276K | 👤 Author: Vercel Official

One-liner: Lets AI open a browser, operate web pages, and maintain session continuity across commands.

What does it do?

This is a browser automation Skill produced by Vercel Labs. Unlike ordinary browser automation tools, it supports three browser modes:

Mode Description Use Case
Headless Chromium Headless browser, fast Automated testing, data scraping
Real Chrome Real Chrome, supports user Profile Operations requiring login state
Cloud Remote Cloud remote browser High concurrency, CI/CD scenarios

Built-in 15+ command categories, supports Python integration. Most crucially — session continuity. Ordinary browser automation starts a new session for each call, but agent-browser can maintain browser state (Cookies, LocalStorage, open tabs) across multiple AI commands.

Hands-on experience:

I asked it to do three things: open GitHub, log into my account, create an Issue. The three commands were sent separately, and it continued the browser state from the previous session each time. The whole process was very smooth.

Then I asked it to scrape a product list from an e-commerce website — in the past, this kind of operation required either writing a Puppeteer script myself or doing it manually. Now it's done in one sentence.

But note: If sensitive operations like login passwords are involved, use Cloud Remote mode with caution. Headless and Real Chrome modes keep data locally, which is safer.

Who it's for: Developers needing browser automation, engineers doing scraping/automated testing, anyone who wants AI to operate web pages for them.

Installation:

npx skills add vercel-labs/agent-browser --skill agent-browser

#3 vercel-react-best-practices — React Performance Optimization Bible | vercel-labs/agent-skills

🔥 Popularity: 527K | 👤 Author: Vercel Official

One-liner: 70 React/Next.js performance optimization rules, sorted by impact level, automatically validated while coding.

What does it do?

This is the React/Next.js performance optimization guide officially maintained by Vercel, containing 70 rules distributed across 8 categories, sorted by impact level from high to low:

Priority Category Impact Level Rule Count
1 Eliminate Request Waterfalls Critical 6 rules
2 Bundle Size Optimization Critical 6 rules
3 Server Performance High 10 rules
4 Client-side Data Fetching Medium-High 4 rules
5 Re-render Optimization Medium 15 rules
6 Rendering Performance Medium 11 rules
7 JavaScript Performance Low-Medium 14 rules
8 Advanced Patterns Low 5 rules

Each rule has incorrect and correct examples, and a unique prefix identifier (like async-parallel, bundle-barrel-imports), making it easy to reference in automated tools.

Hands-on experience:

I took an existing Next.js project and let it review. It directly found two "critical" level issues — one was a request waterfall that could be solved by changing serial await to Promise.all, the other was barrel imports causing bundle size bloat.

After fixing them, the first screen load was about 30% faster.

Difference from #6 web-design-guidelines: That one reviews "design specifications" (spacing, color, accessibility), this one reviews "performance specifications" (waterfalls, bundle size, re-renders). Both can be installed together, they don't conflict.

Who it's for: React/Next.js developers, frontend teams focused on performance, Tech Leads doing code reviews.

Installation:

npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices

#2 frontend-design — Frontend Design Aesthetics | anthropics/skills

🔥 Popularity: 628K | ⬇️ Installs: 443K | ⭐ GitHub Stars: 138.8K | 👤 Author: Anthropic Official

One-liner: Official Anthropic product, specifically cures the "cookie-cutter template feel" of AI-generated pages.

What does it do?

This is the second highest installed Skill on skills.sh (only behind find-skills), from Anthropic officially. It solves a common problem with all AI programming tools — pages written by AI all look the same.

Purple gradients, Inter font, centered cards, rounded shadows... these "AI-flavored" elements are explicitly listed as negative examples to avoid.

Its working method is: before writing code, first determine a bold aesthetic direction with you —

After determining the direction, precise design execution is used to realize it — typography, color palette, motion, spatial composition, texture details, all serving the aesthetic direction.

Hands-on experience:

I had the AI create two product landing pages, one "without installing the Skill" and one "with frontend-design installed."

Version without: Purple gradient background, centered title, three-column feature cards, bottom CTA button. Standard enough to be a template.

Version with: The AI first asked me what style I wanted. I said "vintage magazine feel." The page it generated used serif fonts, asymmetric layout, aged paper texture, horizontally scrolling content areas — honestly, if you didn't tell me, I couldn't distinguish if this was written by AI or hand-coded by a designer.

If you can only install one frontend Skill, install this one.

Who it's for: All developers who let AI write frontend interfaces, indie developers, frontend engineers, entrepreneurs who don't want to spend on design fees but want good-looking pages.

Installation:

npx skills add anthropics/skills --skill frontend-design

#1 find-skills — Skill Ecosystem Gateway | vercel-labs/skills

🔥 Popularity: 2.4M (Cliff-like first place, exceeding the sum of #2-#10) | 👤 Author: Vercel Official

One-liner: The CLI management tool for the skills.sh ecosystem; without it, you can't install anything.

What does it do?

find-skills is the "infrastructure" of the entire Agent Skills ecosystem — it is the skills CLI tool itself. All other Skill installations, searches, and management are done through it.

Core commands:

Command Function
npx skills add <owner/repo> Install Skill
npx skills use <owner/repo> Use Skill directly (no permanent install needed)
npx skills list List installed Skills
npx skills find <keyword> Search Skills
npx skills remove <name> Uninstall Skill
npx skills update Update installed Skills
npx skills init Create new Skill project skeleton

Hands-on experience:

There's not much to "test" here — it's the gateway to the entire ecosystem. Just like you need brew installed first to use Homebrew, or npm to use npm.

But what I want to mention is its find command is genuinely useful. You say npx skills find "react", and it lists all React-related Skills across the entire network, with popularity rankings and summaries. Much more convenient than browsing the website yourself.

Must be installed first. No exceptions.

Installation:

npx skills add vercel-labs/skills --skill find-skills

4. My Recommended Combinations: How to Choose for Different Roles?

Install all Top 10? Not necessary. Based on your role, I've put together a few combinations:

Combo 1: Frontend Developer (Most Practical)

find-skills + frontend-design + vercel-react-best-practices + web-design-guidelines

From "design aesthetics" to "performance optimization" to "specification review," full coverage of the frontend workflow. This is the combination I'm currently using daily, highly recommended.

Combo 2: Full-stack / Architect

find-skills + grill-me + improve-codebase-architecture + agent-browser

First grill the plan, then review the architecture, and let the AI open a browser to run verification when needed.

Combo 3: React/Next.js Power User

find-skills + vercel-react-best-practices + frontend-design + web-design-guidelines + tdd

Vercel full suite + Anthropic design aesthetics + Matt Pocock's TDD discipline.

Combo 4: Content Creator

find-skills + remotion-best-practices

Create videos with React, parameterized batch generation. Opens the door to a new world.

5. Beyond the Top 10, These Are Also Worth Attention

There are some Skills on the leaderboard that didn't make the Top 10 but are very distinctive. Picking a few highlights:

Skill Author Popularity Highlight
grill-with-docs mattpocock 380K The "documentation version" of grill-me — grills the plan while automatically updating CONTEXT.md and ADR
video-edit agentspace-so 356K Intelligently routes 3 AI video editing models (Wan / Kling / Lucy), auto-selects based on intent
skill-creator anthropics 302K Anthropic official, helps you create/optimize/evaluate custom Skills
ui-ux-pro-max nextlevelbuilder 251K 67 styles + 161 color schemes + 57 font combinations, automatic design system generation
seo-audit coreyhaines31 154K SEO review, checks meta, structured data, Core Web Vitals

Special mention for skill-creator (Anthropic official): If you want to encapsulate your team's workflow and coding standards into your own Skill, this is the starting point. I previously used this Skill to encapsulate our team's API testing standards into a complete Skill system, and the results were excellent.

6. Some Honest Talk

After discussing these 10 Skills, a few heartfelt words to end.

First, Top 10 doesn't mean suitable for everyone.

For example, microsoft-foundry ranks 7th, but if you don't use Azure, its value to you is zero. remotion-best-practices ranks 8th, but if you don't do video programming, it's also useless.

The ranking reflects "site-wide popularity," not "your popularity." Choose Skills based on your own work scenario.

Second, the Skill ecosystem is exploding.

The number of Skills in the entire ecosystem is growing rapidly, covering fields from code to design, from testing to video, from marketing to SEO...

What does this mean? Your AI assistant is transforming from a "generalist who knows a bit of everything but masters nothing" into a "specialist equipped with professional skill packs."

Third, best practice: delegate the choice to AI.

My most common method isn't researching which one to install one by one — it's directly telling Claude Code:

"This is the skills.sh URL, I'm a frontend developer, help me see which ones on the leaderboard are suitable for me, and install the most appropriate ones"

It will go check, compare, choose, and install by itself. This is the correct way to open the Skill ecosystem.

Final Words

Judging from find-skills' 2.4 million popularity, Agent Skills are no longer a niche toy.

Vercel, Anthropic, Microsoft, Matt Pocock, Remotion... these top-tier companies and developers are all investing in this ecosystem. The concept of Skill — encapsulating professional knowledge into instruction packs that AI can invoke — is becoming the "new open-source unit" of the AI programming era.

If you haven't started using Skills yet, now is the best time.

Install find-skills first, then pick 2-3 suitable for your work scenario, try them for a week. I bet you'll come back to install more.

skills.sh URL: https://skills.sh

GitHub: https://github.com/vercel-labs/skills