What Are AI Agent Skills? A Practical Guide to SKILL.md, skills.sh, and Reusable AI Automation

Did you know that most of what people call “AI agents” today are still just one‑off prompts with nice UIs?

You get a clever result once, paste it into your editor, and then... the agent forgets everything. Your standards, your stack, your workflows. Gone.

Over the last months, Agent Skills and Vercel’s skills.sh directory quietly changed that. They turned “prompts” into reusable packages that any compatible AI tool can load, share, and improve.

This article is a 5–7 minute tour of that new ecosystem, written for builders who actually ship things.


1. From one‑off prompts to reusable skills

If you’ve played with Claude Code, Cursor, OpenCode, Gemini CLI, GitHub Copilot or similar tools, you’ve probably done some version of this:

“Review this React file for performance issues and suggest improvements.”

It works once. Then you ask the same thing tomorrow. Then you paste the same explanation into a teammate’s chat. Then you try to copy that style into another tool.

It’s painful. It doesn’t scale. And it’s exactly the kind of repetition that computers are supposed to kill.

Agent Skills are a simple answer:

  • Instead of burying your process inside chat history, you package it in a folder, with a single entrypoint file called SKILL.md.
  • Your AI tools know how to load that folder, understand when it’s relevant, and reuse it across projects.

Vercel took that open format and did something very pragmatic: they built skills.sh, “The Agent Skills Directory”, a public leaderboard for skills that anyone can install with a single command.

Check the Directory: https://skills.sh
Spec: https://agentskills.io/


2. What skills.sh actually is

Think of skills.sh as GitHub Trending, but for AI capabilities instead of repos.

  • Every entry is a skill: a folder in a public repo that follows the Agent Skills spec (with SKILL.md at the root).
  • The site exposes:
    • All Time ranking (total installs).
    • Trending (24h) and Hot tabs (recent momentum).
  • Under the hood, it ties into npx skills, Vercel’s open‑source CLI that knows how to:
    • Discover skills on GitHub.
    • Install them into many different agents in one shot.

Vercel’s announcement sums it up as “the open agent skills ecosystem” and lists a long set of supported tools, from Claude Code and OpenCode, to Cursor, GitHub Copilot, Gemini CLI and more.

CLI repo:
https://github.com/vercel-labs/skills

The signal to noise is already impressive. A Reddit thread from launch week mentioned more than 20K installs right out of the gate.


3. The skills developers install the most

Let’s look at what builders actually choose when nobody’s watching.

On the All Time leaderboard of https://skills.sh, the top spots are dominated by a few themes:

  1. find-skills (vercel-labs/skills)
    This is the meta skill. It lets your agent explore the skills ecosystem itself and propose what to install, showing you ready‑made npx skills add … commands.
    Link: https://skills.sh/vercel-labs/skills/find-skills
  2. vercel-react-best-practices (vercel-labs/agent-skills)
    A dense pack of React and Next.js rules: performance, data fetching, server components, patterns, lint‑style checks. Each rule is documented with “bad” and “good” examples so your agent can run opinionated reviews instead of vibe‑based ones.
    Link: https://skills.sh/vercel-labs/agent-skills/vercel-react-best-practices
  3. web-design-guidelines (vercel-labs/agent-skills)
    This one connects your agent to Vercel’s own web interface guidelines. It pulls an external markdown document with layout, typography, accessibility, and UX rules, then reports violations per file and line.
    Link: https://skills.sh/vercel-labs/agent-skills/web-design-guidelines
  4. remotion-best-practices (remotion-dev/skills)
    Best practices for Remotion video projects: compositions, audio sync, 3D, Tailwind usage, rendering performance. Each rule is a separate markdown file under rules/.
    Link: https://skills.sh/remotion-dev/skills/remotion-best-practices
  5. frontend-design (anthropics/skills)
    Aesthetic taste, but codified. This is Anthropic’s own “don’t let the AI ship ugly UI” kit — color, spacing, motion, visual hierarchy, with concrete dos and don’ts.
    Link: https://skills.sh/anthropics/skills/frontend-design
  6. vercel-composition-patterns (vercel-labs/agent-skills)
    Composable React: compound components, prop design, state sharing, React 19 patterns, all documented as a set of small rules.
    Link: https://skills.sh/vercel-labs/agent-skills/vercel-composition-patterns
  7. agent-browser (vercel-labs/agent-browser)
    A browser automation skill built around a CLI. Your agent can open URLs, snapshot elements as @e1, @e2, click, fill, take screenshots, and work in real sessions instead of static HTML.
    Link: https://skills.sh/vercel-labs/agent-browser/agent-browser
  8. skill-creator (anthropics/skills)
    This is the “how to write good skills” skill. It contains longform guidance on progressive loading, folder layout, packaging and testing, written by Anthropic’s own team.
    Link: https://skills.sh/anthropics/skills/skill-creator
  9. vercel-react-native-skills (vercel-labs/agent-skills)
    React Native / Expo best practices: list performance, gestures, navigation, theming, config. Again, split into many small rule files.
    Link: https://skills.sh/vercel-labs/agent-skills/vercel-react-native-skills
  10. browser-use (browser-use/browser-use)
    Integrates with the browser-use library and CLI: persistent Chromium sessions, remote browsers, interaction, extraction, cookies, profiles.
    Link: https://skills.sh/browser-use/browser-use/browser-use

The pattern is clear:

The most‑installed skills don’t try to be “AGI in a folder”. They encode concrete standards and workflows that developers care about every day.


The Trending (24h) - tab tells a slightly different story. Currently for the first week of February 2026. A lot of the top spots are taken by the inference.sh ecosystem:

While the all‑time list is heavy on frontend and browser work, trending skills show where attention is moving:

  • Media generation and editing (podcasts, social video, product shots).
  • Agentic workflows that span multiple tools, files, and steps.
  • Orchestration: using CLIs and APIs, not just asking models to “do everything”.

You can browse the full trending board here:
https://skills.sh/trending


5. Inside a skill: what is SKILL.md?

Now for the core idea.

Every skill is just a folder. The one file that really matters is SKILL.md.

A minimal example looks like this:

---
name: git-release-notes
description: >
  Generate conventional release notes from git history.
  Use when the user asks for a changelog or release notes.
---

# Git Release Notes

When invoked:

1. Ask the user which range to summarize (e.g. last tag to HEAD).
2. Run `git log --oneline <range>` and read the output.
3. Group commits by type (feat, fix, docs, chore, etc.).
4. Produce markdown release notes under headings:
   - Features
   - Fixes
   - Documentation
   - Chores
5. Keep the tone concise and neutral.

The YAML frontmatter (between the --- lines) is where the magic starts:

  • name – a unique identifier. In many tools it also becomes a slash command (for example /git-release-notes in Claude Code).
  • description - when the skill should be used and what it does, described in natural language.

The markdown body is just instructions. No special syntax, no model‑specific DSL.

Anthropic’s own skills go further and recommend a full folder layout:

my-skill/
├── SKILL.md              # required
├── scripts/              # optional helpers
├── references/           # long docs, schemas
└── assets/               # templates, images, etc.

Inside SKILL.md, you tell the agent when to read those extra files:

For detailed workflows, see `references/workflows.md`.

When rotating PDFs, prefer using `scripts/rotate_pdf.py` and verify the output before returning it.

Claude’s loader, and other implementations that follow the Agent Skills spec, use progressive loading:

  1. Scan the filesystem for SKILL.md files (in known directories).
  2. Read just the frontmatter (name, description) to decide which skills are relevant.
  3. Only when needed, open the full markdown and any referenced resources.

That’s how you avoid blowing your context window while still having dozens of deep skills installed.


6. How Claude helped this format go mainstream

You can trace a lot of this back to Claude.

  • Claude Code docs explicitly define Skills as folders with a SKILL.md that contains YAML frontmatter and natural-language instructions.
  • The anthropics/skills repo on GitHub includes official skills like frontend-design, document conversion (DOCX, PPTX, PDF) and, importantly, skill-creator, which is an entire meta‑skill about designing good skills.
  • The Claude API documentation has a dedicated “Agent Skills” section that treats skills as a first‑class way to extend agents across web, desktop and API usage.

Once Claude shipped this pattern, community tooling followed quickly:

  • OpenSkills: a “universal skills loader” that reads SKILL.md and syncs it into AGENTS.md, so any AGENTS.md‑aware agent can use Claude‑style skills.
    https://github.com/numman-ali/openskills
  • add-skill: an npx add-skill CLI focused on installing skills into OpenCode, Claude Code, Codex and Cursor.
    https://add-skill.org
  • Trigger.dev’s skills and others: promoting Agent Skills as a cross‑assistant standard, calling out Claude Code, Cursor, Windsurf, GitHub Copilot, Cline, Gemini CLI, and OpenCode as compatible.

Vercel’s npx skills and skills.sh then pushed it from “Claude concept” to “ecosystem standard”.


7. Using skills today in your own tools

Here’s how this translates into real usage right now.

Claude Code

Claude Code loads skills from:

  • Project: .claude/skills/<name>/SKILL.md
  • Global: ~/.claude/skills/<name>/SKILL.md

Example:

mkdir -p ~/.claude/skills/explain-code
nano ~/.claude/skills/explain-code/SKILL.md
---
name: explain-code
description: >
  Explain source code files line by line and highlight bugs or complexity.
---

# Explain Code

1. Ask which files or snippets to explain.
2. Read those files.
3. Explain line by line.
4. Summarize complexity, risks and potential refactors.

Then you simply run /explain-code inside Claude Code. The tool discovers the skill from the filesystem and executes the steps.

Docs: https://code.claude.com/docs/en/skills

OpenCode

OpenCode follows the same spec and checks:

  • .opencode/skills
  • ~/.config/opencode/skills
  • Plus Claude‑style paths like .claude/skills.

Docs: https://opencode.ai/docs/skills/

So you can take the same SKILL.md above, drop it under .opencode/skills/explain-code/, and reuse it without rewriting.

GitHub Copilot & VS Code

GitHub Copilot in VS Code added support for Agent Skills so that skills are portable across Copilot Agent, the editor and CLI.

Docs:
https://code.visualstudio.com/docs/copilot/customization/agent-skills

Under the hood, it’s the same SKILL.md structure and the same kind of directories that npx skills understands.

Gemini CLI and others

Google’s Gemini CLI announced Agent Skills support, explicitly citing compatibility with Claude Code, Codex, Cursor, OpenCode and others.

Tweet: https://x.com/steren/status/2009003960485769326

Again, it’s the same format.


8. Installing skills everywhere with one command

This is where Vercel’s CLI becomes really practical.

Instead of manually copying skills into five tools, you can run:

# Install Vercel’s frontend skills into multiple agents
npx skills add vercel-labs/agent-skills \
  --skill vercel-react-best-practices \
  --skill web-design-guidelines \
  --skill frontend-design \
  -a claude-code -a cursor -a opencode

The CLI knows where each agent stores skills:

  • .claude/skills for Claude Code.
  • .opencode/skills for OpenCode.
  • .cursor/skills for Cursor.
  • .github/skills / ~/.copilot/skills for GitHub Copilot.
  • .gemini/skills for Gemini CLI.
  • And many more, listed in the “Supported Agents” table.

Table and instructions:
https://github.com/vercel-labs/skills#supported-agents

You can even let an agent use find-skills to suggest what to install next.

The moment you move your standards from “what I told the model yesterday” into a SKILL.md folder, they become team knowledge, not personal memory.


9. Where to go from here

If you want to try this in a focused way, a simple path looks like this:

  1. Install 2–3 battle‑tested skills
    • From Vercel:
      vercel-react-best-practices, web-design-guidelines, vercel-composition-patterns.
    • From Anthropic:
      frontend-design, skill-creator.
    • From inference.sh:
      inference-sh, agentic-browser, ai-podcast-creation.
  2. Create one internal skill just for your team
    • Write your own SKILL.md for:
      • How you structure PR descriptions.
      • How you want tests written.
      • How you name branches and commits.
  3. Share it across tools
    • Use npx skills or add-skill to push that same folder into Claude Code, OpenCode, Cursor, Copilot, Gemini CLI.
  4. Publish if it’s generally useful
    • Put your skill in a public GitHub repo.
    • Let the ecosystem index it so it can surface on skills.sh and in skills discovery tools.

Nobody needs another abstract “AI strategy” article.

What developers need is exactly this: small, concrete, composable skills that they can install once and reuse everywhere.

We also released the Skills.md & Stacks on Creative Tim, where you can choose stacks that have multiple skills, so you don't have to search in thousands of skills for specific jobs.

Agent Skills and skills.sh give you that. The rest is just doing the work of encoding your brain into SKILL.md files so your agents can finally behave like part of your team, not just a smart autocomplete.