How I Made Claude Code WAY Better With Vercel Agent Skills

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

1. 00:00 - 01:02

   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.

2. 01:03 - 01:46

   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.

3. 01:47 - 02:55

   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.

4. 02:56 - 03:58

   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.

5. 03:59 - 06:27

   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.