Tired of Typing @ Every Time? Work Like True Teammates with 'Agent Skills'

Hi there! I'm Dante from Quokka Labs! 🐾

Are you using AI coding assistants like Cursor or Claude these days? I'm practically living in them. But recently, a thought kept bugging me: "Man, it's so annoying to keep repeating the same rules. Can't it just figure it out on its own?"

Manually tagging files with @ one by one and saying "Follow this rule," "Use that convention"—sometimes it feels like I'm micromanaging. Then, Vercel dropped an interesting update: the 'React Best Practices Agent Skill.'

Seeing that gave me a "Eureka!" moment. So today, I wanted to have a casual chat about the difference between Prompt Mentions (@files) and Agent Skills, and why we should really care about the latter.

🔗 Curious? Check out the official Vercel blog post here!

The Way We Work with AI Today (The "@ Struggle")

Usually, we give AI tasks like this:

"Build a React component. Oh, and make sure to follow the rules in @react-conventions.md!"

This is the Prompt Mention method. It's intuitive, but it gets old fast. It feels like telling a new hire, "Open page 3 of the manual and follow it," every single time you ask them to do anything.

Agent Skills, on the other hand, are different.

npx add-skill react-best-practices

You plant it once, and that's it. From then on, the AI looks at the situation and thinks, "Oh, working on React? Let me pull out those React Best Practices from my toolkit!"

Prompt Mentions: The "Listen to Me" Assistant

Prompt mentions are about directly handing rules to the AI.

Pros & Cons

• Pros: Super easy. Just type @ and pick a file. You feel safe because you see exactly what rules are being used.
• Cons:
  1. Short Memory: When conversations get long, the AI goes, "Wait, what were those rules again?" because the context window gets crowded.
  2. Reactive, Not Proactive: If you don't explicitly say "optimize for performance," it might skip it even if it's in the rule file.
  3. Token Drain: You're basically uploading the same files over and over, which eats up your tokens (and money). 💸

Agent Skills: The Proactive Teammate

Agent Skills actually integrate knowledge directly into the AI's 'toolbelt.'

Why Use Skills?

1. "I Got This!" (Autonomous Judgment): You don't have to keep handing over files. The AI sees you're writing a React component and proactively decides to use its React skill. That's what makes it a vrai 'agent.'

2. Smart Resource Management: Instead of dumping whole files into every turn, it only references what it needs. This keeps your long conversations focused and saves tons of tokens.

3. True Level-Up: It doesn't just mimic the "look" of the rules; it understands the "why." It feels more like working with a Senior Developer who's actually guiding you.

At a Glance

A Real Example: Building a Modal Component

If you just use "@file," the AI will build a modal that looks okay. But an AI armed with an Agent Skill (like Vercel’s React Best Practices) is different. It will automatically handle:

• Focus Trap (keeping tab navigation inside the modal)
• ESC key to close
• Aria-labels for screen readers...

It takes care of those 'finishing touches' you'd normally have to nag about. Truly a game-changer. 🥹

For Cursor Users

You can already try this with Cursor’s Agent Skills system. Just create a SKILL.md file in the .cursor/skills/ folder, and the Cursor agent will recognize: "Ah, this project needs these specific skills!"

It’s actually pretty fun building up your own toolkit.

Wrapping Up: Let's Empower Our AI

Moving from Prompt Mentions to Agent Skills isn't just a technical change—it's about maturing how we work with AI.

Instead of an 'intern' that needs micro-managing, we're giving our 'partner' a full toolbox. If you're tired of tagging the same files over and over, why not give 'Skills' a try?

I'm excited to see more skills popping up for testing, deployment, and infra! 🚀

Got any questions or your own cool skill hacks? Let me know in the comments! Thanks for reading! :)

💡 TL;DR

• Prompt Mentions: Great for one-offs; requires manual management.
• Agent Skills: Perfect for repeating project rules; AI applies them autonomously.
• Bottom Line: If you use a rule often, turn it into a 'Skill'!

• 🔗 Vercel GitHub - agent-skills
• 🔗 Previous Post: My Oh My OpenCode Contribution Journey