How I Made Claude Code WAY Better With Vercel Agent Skills

BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00This is Skills By The Cell, a directory of agent skills that you can add to any agent
00:00:04to extend its capabilities, like making it amazing at React, turning it into a front-end designer,
00:00:10or even making it a motion graphics editor. The whole thing works by cloning and scanning a repo
00:00:15to see if it has a skills.md file before installing the skill. But will Cloudflare's new proposal
00:00:22make this amazing resource obsolete? Hit subscribe and let's get into it.
00:00:27Agent skills were introduced by Anthropic last year to improve Cloud's capabilities on specific
00:00:32tasks, and works by adding a skills directory to the .cloud one and then adding another
00:00:37directory with the name of the skill, followed by a skills.md file.
00:00:42Now this file needs to contain a few key things for the skill to work. First, the top section,
00:00:47which is front matter in YAML, that should contain at least the name of the skill and the description.
00:00:52Then, below that, outside of the front matter, this is where the instructions for the skill should go.
00:00:58The instructions get loaded into the model's context so that it can be used for the specific task.
00:01:03And the beauty of skills lies in a technique called progressive disclosure, where only the essential
00:01:08information is shown at first, and the model can dig in to find even more if necessary.
00:01:13So when an agent loads up, only the information in the front matter of each skill is loaded into
00:01:19the context, and after it reads a prompt, it checks the description of each skill to find out if a
00:01:24skill can be used to enhance the prompt, and if it finds one, it then adds everything outside of the
00:01:31front matter into the model's active context. You can even link other files to skills,
00:01:36like references, for a model to grab those if it thinks it's necessary.
00:01:40Since then, other companies like Microsoft, OpenAI, and OpenCode have adopted agent skills.
00:01:46But there hasn't really been an easy way to install a skill for multiple agents without manually going
00:01:52into the relevant directory and cloning the repo. This became especially apparent when Vassal wanted
00:01:58to share skills for their tools for people to put in their specific agent. So they made a project
00:02:03called Add Skill, which makes it easy to add a skill to 16 different agents. Simply NPX Add Skill,
00:02:11followed by the name of the skill or the location of the repo.
00:02:14Now I know what you're thinking, what's stopping people from using Add Skill to add any repo?
00:02:19Well, the way it works is after it passes the command, it then clones the repo, then looks
00:02:25for a skill.md file. If it can't find it, it cleans up by removing the repo. But if it can find it,
00:02:32it auto-detects a user's installed agent by looking through the configs, then creates a
00:02:37sim link from .agents/skills to wherever the skills need to be located for that agent. So .cursor for
00:02:44cursor and .clause for Claude code. It also has some telemetry for tracking, which I'll talk about
00:02:49later. But at this point, Vassal had a way for people to easily install skills to any agent.
00:02:55But what about discovering a skill? This is where skills.sh comes in, showing currently a long list
00:03:01of uncategorised and unpaginated skills. And the list gets populated, I think, by someone first
00:03:08installing a skill using Add Skills or Skills, which kicks off the telemetry that's inside the package
00:03:14to add things like name, agents and other information. The telemetry is completely anonymous
00:03:20and is not only used to populate the list, but also the amount of times a skill has been downloaded
00:03:26and by the specific agent, which can also be used to track the trending skills in the last 24 hours.
00:03:32And also, if you're worried about being tracked, you can totally disable the telemetry.
00:03:37It's amazing how much work Vassal Labs have put into Skill Discovery and it's being used
00:03:42by loads of people to discover awesome skills like React Native skills for your agents,
00:03:48best practices for better auth and even the super popular ReMotion skill which people are
00:03:53using to create all kinds of crazy videos just from a single prompt. But has Cloudflare's new proposal
00:03:59made this all for nothing? Because it introduces an alternative way for agents to discover skills
00:04:05by first fetching a lightweight JSON file from a well-known location that lists out all the available
00:04:12skills a place has to offer. So you could essentially write a prompt saying "Build me a Cloudflare project
00:04:18using Wrangler" and the agent will first read the prompt then check the well-known location
00:04:24like cloudflare.com/well-known. Of course it won't actually be well-known it'll be something else
00:04:30/skills and then retrieve the index.json from that location which includes mandatory information per
00:04:38skill like name description and number of files related to that skill. After that it passes this
00:04:44information to the agent and then based on the prompt the agent will realise that the Wrangler
00:04:49skill is needed from this well-known location based on the index.json file. So it will make a call
00:04:55to that location to get all the files related to that skill and cache them in case they're used
00:05:01again in a follow-up prompt but use that skill for its response that it gives back to the user.
00:05:08So while Cloudflare's proposal does sound really cool it does add a few extra steps to making a
00:05:14skill discoverable like adding that index.json file with the relevant information and also adding it to
00:05:20a well-known URL which I'm not exactly sure what that means but compared to putting a skill on GitHub
00:05:27and having it found by Vercel versus this way I think Cloudflare's approach does harm smaller
00:05:33developers because of all these extra steps but if it does get accepted and I'm not also sure who's
00:05:40reviewing this and who has to accept it then it means goodbye to Vercel's skills.sh project.
00:05:46However I'm sure there is a way they could work together because you could use skill.sh to find
00:05:52skills from indie and lesser known developers and you could use Cloudflare's approach for an
00:05:57agent to discover a skill automatically from big companies like Cloudflare and Vercel. Either way
00:06:03with developers using these skills to create amazing new projects you're going to need some
00:06:07error tracking in case they explode without you knowing and this is where better stack comes in
00:06:12because not only does it ingest logs from your back end it can also keep track of front-end errors
00:06:18using its AI native error tracking and to top everything off better stack can also create
00:06:23beautiful status pages so go ahead and check out better stack today.

Key Takeaway

Vercel has developed a streamlined ecosystem for sharing and installing AI agent skills, though a new automated discovery proposal from Cloudflare could shift how these capabilities are integrated at a protocol level.

Highlights

Introduction of Vercel Agent Skills as a way to extend AI agent capabilities for specialized tasks like React or motion graphics.

Technical structure of a skill.md file

Timeline

Introduction to Agent Skills and File Structure

The speaker introduces Skills by Vercel, a directory designed to enhance AI agents by turning them into specialized tools like front-end designers or motion graphics editors. The system relies on a specific file structure within the agent's directory, requiring a skills.md file to function correctly. This file must contain YAML front matter for the skill name and description, while the lower section holds the actual instructions. These instructions are crucial as they are loaded directly into the model's context to guide it through complex tasks. By standardizing this format, developers can ensure their agents have the exact knowledge required for niche technical workflows.

Progressive Disclosure and Multi-Agent Adoption

A core feature of these skills is a technique called progressive disclosure, which optimizes context window usage. Initially, the agent only reads the skill's description to determine if it is relevant to the user's current prompt. If a match is found, the agent then pulls the full set of instructions into its active context, potentially linking to external reference files as well. This efficient method has led to adoption by major players including Microsoft, OpenAI, and Anthropic. The speaker notes that while the technology is powerful, the manual process of cloning repositories for different agents remained a significant friction point for users.

Simplifying Installation with Add Skill

To solve the manual installation hurdle, Vercel created the Add Skill project, a command-line tool accessible via NPX. This tool automates the process by cloning a repository, verifying the presence of a skills.md file, and auto-detecting the user's installed agents. It then creates symbolic links (symlinks) to ensure the skill is available in specific agent directories like .cursor or .claude. This automation supports 16 different agents, making it significantly easier for developers to sync their custom skills across various tools. The system also includes an anonymous telemetry feature to track how skills are being utilized across the ecosystem.

Skill Discovery via skills.sh and Telemetry

The discovery phase of the ecosystem is handled by skills.sh, a website that lists available agent skills based on community usage. The list is populated using anonymous telemetry data that tracks the number of downloads and which agents are being used most frequently. Users have the option to disable this tracking if they have privacy concerns, though it currently drives the 'trending' section of the site. Popular examples of skills mentioned include React Native best practices, Better Auth configurations, and the highly sought-after ReMotion skill for video generation. This centralized hub serves as the primary marketplace for finding ways to make Claude and other models more effective.

Cloudflare's Proposal and the Future of Discovery

The video concludes by discussing a new proposal from Cloudflare that could change how agents discover skills using a well-known URL pattern. Instead of manual installation, an agent would fetch a lightweight index.json file from a specific location to identify and cache required skills automatically. While this approach offers seamless automation for large companies, the speaker warns it might create barriers for smaller, independent developers due to the extra setup steps. The speaker suggests a hybrid future where Vercel's skills.sh supports indie creators while Cloudflare's method handles enterprise-level tools. Finally, a brief mention of Better Stack is provided as a solution for tracking errors that might occur when deploying these advanced AI-driven projects.

Community Posts

View all posts