Vercel Just Released 10+ Years Of React Best Practices…

We're encapsulating all our knowledge of ReactJS and Nex.js front end optimization. This is a 10 years of experience. This got nearly 1 million views. But what does that actually mean? I'm usually not making tons of videos about AI, but I think this is really cool because you can just use this command here, post it into your IDE like cursor or into something like Claude Code, pick the skills, set it to project. Yes. And it's done. Now you enabled 10 plus years of React experience in your project. Are you still confused? No problem. I explain to

you what these new skills are, how you can use them, why this is not just static context, and how it will make you a better React developer so that you can write reviews like this one. Users will see 50% faster image loads, 30% faster API responses. Yeah, but you know who's also making you a better developer? The sponsor of today's video, Test Sprite. We all know AI helps us build products faster, but speed is useless if your product is hallucinated and not working at all. You need a safety net, and that's exactly what Test Sprite provides. It really is the best tool out there for modern coders, ensuring your

AI generated code actually works. It seamlessly integrates with your favorite AI powered editors like cursor for example, Claude or Windsurf, allowing you to generate, execute and maintain your tests without breaking your actual flow. They even offer MCP server and the docs really guide you through the features seamlessly. I would say it's the perfect solution for solo developers or small teams lacking a dedicated QA or testing team. You can start for free with 150 credits per month with the link down into the description, tobby.dev/testprite.

Huge thanks to Testbrite for sponsoring this video and supporting this channel. So, to use this new agent functionality called skills, you probably need to activate the beta or activate the nightly version of cursor, but I'm sure this feature will actually get stable in a few weeks. So, now as I showed you, we added these skills, these 10 years of React experience into cursor here, for example. And if I look into the project overview, yes, I see there's this cursor folder with a lot of rules here set up rules about 10 years of React

experience. Just a lot of knowledge. But yeah, what can we do with all that knowledge? Of course, we prompt access this repo against React best practices. Make a prioritized list of quick wins and top fixes. We have to choose agent mode for that. And now just give it a shot. As long as this is loading, let me just show you what we just did. There's this repository called agent skills where we now have these skills inside. Now we have these react best practices inside here and there we have these rules and these are all MD files. So

markdown files and they all have this structure impact impact description and always a bad practice and a good practice. Why is that setup so strange? But somehow this works. If we go onto the agent mode and type /kill, we now have access to our skills. I can access the versel react best practices here. But even if not used for AI, it's fine because you can learn a lot. I read through some and the knowledge you can extract from them is really really handy. So there's this website agentskills.io where we can read through this

specification how a skill needs to be set up. But aren't there a lot of terminologies now? We have agents, we have skills, we have context in general, we have tools, we also have rules. Yeah, things can get pretty complex here. But these skills are really a cool step forward because as you can see here we have our process of agentic coding our chat and we have this initial prompt and we iterate over it. So we get to a nice result. So now we have static context and dynamic context. Before we just had

static context. So static context are rules like your agents.mmd file claw.md file rules that are always in the context like always use tailwind version 4, always use react 19 stuff like that. But now we have these skills and these skills are not inside of the static context. These skills are dynamic. So during your iteration you may be ask hey please implement caching here or there and then your agent looks into these skills. Do I have a skill for that? Can I know how this should be done? And if there is a skill it uses this dynamic