Frontend · Backend · Developer

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

By 狂师 · Jul 20, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Agent skills are becoming the new unit of open-source distribution in the AI coding era — encapsulated expertise that turns a generalist AI into a specialist. Knowing which ones actually work, rather than which ones are popular, saves hours of trial and error and directly affects the quality of AI-generated code, designs, and architectural decisions.

Summary

Vercel's skills.sh has become the de facto app store for AI agent capabilities, with the top-ranked skill hitting 2.4 million popularity points. A developer installed and tested all Top 10 skills across real-world scenarios — from frontend design and React performance optimization to architecture review and browser automation.

The results show a landscape dominated by Vercel (4 slots) and TypeScript expert Matt Pocock (3 slots), with Anthropic and Microsoft each claiming one spot. The #1 skill, find-skills, is the CLI gateway that makes the entire ecosystem usable; the #2, Anthropic's frontend-design, specifically cures the cookie-cutter "AI look" by enforcing bold aesthetic direction before writing any code.

Practical takeaways include recommended skill combinations for different roles — frontend developers, architects, React power users, and content creators — plus a growing list of noteworthy skills beyond the Top 10. The ecosystem is maturing fast, and the best way to use it is to let your AI agent browse skills.sh and install what fits your workflow.

Takeaways

— find-skills is the mandatory CLI gateway; without it, no other skill can be installed or managed.

— Anthropic's frontend-design skill eliminates the generic "AI look" by enforcing a bold aesthetic direction — brutalist, editorial, retro-futuristic, etc. — before generating any code.

— Vercel's vercel-react-best-practices contains 70 performance rules across 8 categories, with two "critical" tiers (request waterfalls and bundle size) that alone can cut first-screen load time by roughly 30%.

— Matt Pocock's grill-me skill acts as an adversarial design reviewer, asking 20+ probing questions about a proposed architecture before a single line of code is written.

— agent-browser supports three browser modes (headless Chromium, real Chrome with user profiles, and cloud remote) and maintains session continuity across multiple AI commands.

— web-design-guidelines outputs review results in a clean `file:line number + issue` format, catching accessibility violations like missing focus-visible styles and insufficient color contrast.

— microsoft-foundry covers the full Azure AI Foundry agent lifecycle but is worthless if you don't use Azure; popularity does not equal personal relevance.

— remotion-best-practices turns React components into parameterized video generation, with 30+ rule files covering animation, audio, 3D, and FFmpeg operations.

— tdd forces AI into a test-first discipline with vertical slicing — each test covers a complete behavioral path, not an isolated function — but feels slow without existing TDD culture.

— improve-codebase-architecture pinpoints architectural debt to specific files, functions, and dependency directions, outputting refactoring RFCs formatted as GitHub Issues.

— The ecosystem is expanding beyond code into design, video, SEO, and marketing; skill-creator from Anthropic lets teams package their own workflows into reusable skills.

— The most efficient workflow is telling your AI agent to browse skills.sh and install what fits your role, rather than manually researching each skill.

Conclusions

Popularity rankings on skills.sh conflate install base with genuine utility — microsoft-foundry ranks #7 but is useless to anyone outside the Azure ecosystem, while grill-me at #5 may be the most intellectually valuable skill in the top 10 for architects.

The dominance of Vercel and Matt Pocock in the top 10 suggests the ecosystem is still supply-constrained: a small number of prolific creators are defining what agent skills look like, rather than a broad community.

frontend-design's approach — choosing an aesthetic direction before generating code — mirrors how human designers work, suggesting that effective AI skills encode process constraints, not just knowledge.

The `file:line number + issue` output format used by web-design-guidelines is a design choice that prioritizes actionability over explanation, a pattern other developer tools could adopt.

agent-browser's session continuity across commands solves a real pain point in browser automation that traditional scripting approaches handle poorly, making it a genuine step forward for AI-driven web interaction.

Skill installation is already self-serve: an AI agent can browse skills.sh, compare options, and install skills without the user touching a command line, which changes the discovery model from 'search and evaluate' to 'delegate and verify.'

Concepts & terms

Agent Skill

An open-source SKILL.md instruction pack that, when installed, gives an AI coding assistant (Claude Code, Cursor, Copilot, etc.) a specific professional capability — like frontend design, performance auditing, or browser automation.

skills.sh

Vercel's open ecosystem navigation site for Agent Skills, functioning as an 'App Store for AI skills' where popularity is calculated from 8-week activity and install count.

TDD (Test-Driven Development) with vertical slicing

A discipline where each test covers a complete behavioral path through the system (a 'vertical slice') rather than an isolated function, verifying only public interface behavior, not internal implementation details.

Request waterfall

A performance anti-pattern where multiple async requests execute sequentially (one waiting for the previous to finish) instead of in parallel, causing cumulative latency. Listed as a 'critical' issue in vercel-react-best-practices.

Barrel imports

A JavaScript/TypeScript pattern where an index file re-exports everything from multiple modules, which can cause bundlers to include unused code, bloating bundle size. Flagged as a 'critical' performance issue.

Remotion

A framework for creating videos programmatically using React — each frame is described as a React component, enabling parameterized, batch-generated video content without traditional video editing software.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗