Vollständiges Transkript anzeigen (2.445 Wörter)
You're going to get a skill that will instantly improve your agents' designs, and I'll show you what it did for mine.
You're going to get a skill that will make your agents into better developers.
And a skill that will turn your agent into your best tutor.
Today, we're going to see the top 10 most installed skills from GitHub as reported by Vercel, whose CLI is used to install skills. Let's get it into it. Presented by Zapier, the AI automation company.
The most installed skill is find-skills. What is find-skills? It's kind of like the community needed an app store as their first app, and the community created it, and that was the skill to find skills.
Yeah, totally. So what you do is you go into your agent, and you say, "Find a skill for writing tests." And then it finds it and says, "Hey look, I found two different ones. This is from Vercel themselves."
Here is what the skill looks like internally. Of course, we'll have a link to it. And, of course, this doesn't do the thing. It just finds the skills that you need. A simple way to install it, it's right there on your screen.
Let's go to the number two most installed skill, and this is from Matt Pocock. It's the grill-me skill. I want to show you what it looks like, because it's kind of funny that all it is is invoking another skill called grilling.
Even preparing for this, you know, I used the grill-me function, and and without even prompting it, it took my context, and the first question asked me is, "What are you trying to convince the podcast listeners of?"
Wow, I was like, wow, what am I, like, you know, like what am I trying to convince them? And I think that was so funny that it, it kind of went to the endgame question of like, what's the point?
You have a plan. You want it torn apart first. You type grill-me and describe the plan. It asks numbered questions, round after round, until nothing is left assumed.
Developers really love this skill, a lot of them were skeptical about it, but it's done really, really well. It is one short line, and I should also say it does point to, um, a skill that we're going to look at later on when it says, "Go to grilling." We're going to take a look at that because that is another one of the most installed skills. All right.
Easy to set up, and easy to use even beyond development. Here's what it looks like on the screen when you use it.
Number three is frontend-design. I actually want to show this one. This one is from Anthropic and what it does is, it lets you create better designs. Because look at this.
You know how a lot of times when you build using Claude, you end up with this warm, cream-colored background that is AI-generated? The whole idea behind this is to eliminate that and create better designs.
It's incredibly popular, always has been. I want to show you what this whole site, this is a website, what it looked like before and after. Here's what it looked like before I used this skill.
And you can see that cream-colored design. You can see that it gave me what I was looking for. Um, it's not terrible, but it also has this AI-ish look to it and it's not unique. Here's what it looks like after, notice how it gave me a different color background, how it actually gave me a little bit more design with like the, the links at the top.
It's more than just make this look nice. It's, it actually kind of feels like it aligns around like a purpose. It names the tells. Cream backgrounds, one accented word, all-caps labels, everywhere. The file lists the defaults and tells the agent not to reach for them.
Okay, and by the way, people are asking, or to themselves, I'm sure, who is this guy? And you are the founder of No Middle. What does No Middle have to do with skills?
I create skills for clients. So, so one skill is, uh, we call the the Golden Prospect List agents, which is a skill, and with this skill it says, it maintains a very high quality ICP list of people that you're targeting today, tomorrow, across multiple years.
Because people are always selling to the same people, but every time they put their information to a new outreach tool or wherever else, they lose their, who they're targeting, who their customers are.
And so this agent takes that list and refines it, adds to it, but with the whole idea of like, of the list quality being extremely high.
All right, next. Fourth most installed skill is the agent-browser skill. Again, this one is from Vercel and this one allows you to have basically, let your agent have access to a web browser.
Here's what it looks like, here's the browser. Can I actually see it, control my browsers? Is it controlling the browser on my computer?
So, there's two ways of these agents. This agent is headless, meaning that it does everything like under the under the covers.
So they call like a CLI agent, which is command-line interface. So if you ever open up a terminal, you know, on your on your Mac, that's that's a CLI basically, that's a command line interface.
I can just type access to it. So it has full control of your web browser. It can move things like in and and technically called your DOM or it can move things in with in within the website, but doesn't ever actually show the mouse moving, you know. Okay, and there are other things you there are other ways to do this that show the mouse moving, but this is more, even more powerful way, which is it works behind the scenes, but it's it's actually moving and, uh, controlling your browser. You just don't see it.
Okay, and the examples I've got here is log in to the dashboard and screenshot the billing page. Another example here is open the staging, sign up as a test user, and then tell me if it works.
That's what it is right there. It, it's it's a, I mean, it is a super it is a super powerful tool because even like the screenshot, you're getting a screenshot of a web browser without the web browser ever opening.
All right, the number fifth most installed skill is the setup-matt-pocock-skills. Man, Matt just shows up on this over and over again. It's a one-time setup that wires his engineering skills into your repo.
Uh-huh. If you hire Matt as a consultant to your organization, the first 60 days that he'd be setting up this, this skills basically, like, but in a manual type of way, he'd be teaching them, here's best practices, here's what you do, you know, so this is a way to set up those skills right at that, but it's also ready for AI agents.
From the skill, uh, the scaf- the scaffold the per-repo configuration that the engineering skill assume. Issue tracker, where issues live.
Triage labels, the strings used for the five canonical triage roles. Domain docs, where context.dev and ADRs live, and the consumer rules for reading them.
All right, then from Matt, we're going to see him show up again, set this up, and he's got like over a quarter million stars already on GitHub. The guy is just incredible with this.
All right, next. Vercel-react-best-practices skill. This is their 70 React and Next.js performance rules applied as agent rights. What does this mean?
If you install this skill, this is your you telling your agents, hey, we're using React. Follow these best practices because it comes from a trusted source.
You know, even if you don't know whatever everything means in it, you know, there are certain elements that become very useful for you because, you know, you just avoid mistakes that, you know, this best practices will help you avoid.
All right. All right, let's go on to the sev- oh, before we do, I should say that this is sponsored by Zapier. If you are developing software and you want your users to use the software that they love, uh, over 8,000 of them are included here, like Slack, HubSpot, Jira, Gmail. I love Notion.
Actually it's now over 9,000. Just use Zapier SDK to allow your users to connect the thing you create with the software that they need and it's available for you right now at zapier.com/sdk.
I don't have a special unique URL, just tell them Andrew sent you and I'll be happy.
Um, grilling. Again, we talked about this earlier, this is from Matt Pocock. It's another one of his skills.
This is now the actual file that the other grill-me skill refers to that shows the agent how to grill you, how to structure questions, how to look for and help you with the responses.
And he's told me when I interviewed him a while back, I did a full interview with him on these skills, he told me that the reason that he separated this out is because he wanted grilling to be used in multiple places.
So yes, there is the grill-me before I build, or before in your case before I do interview, but he has a vision for it being used in other places.
Um, and this is, this is one of the top skills ever. In fact, I think it is the second most starred skill set on GitHub and soon it will probably be the first most.
I think it's great, like I said, the, the grilling as an engine, you know, I think what he's separating is there's grilling as the engine and there's grill-me as like the first application of that engine.
All right, next. Number eighth most installed skill is one that most people watching this, almost everyone will not use. It's called lark-doc. What is this skill?
So, so Lark Doc is a, um, uh, skill built, uh, by ByteDance which is the TikTok company. And so they have, you know, there's it's open source platform, this is like the global version and they have another one called Feishu, I don't know if I'm sure if I'm pronouncing that right, but it's it's basically an app development platform, uh, primarily for the Chinese market.
So about 90% of the users here are, um, of Chinese origin because they're building on top of this platform. For what I understood, this is their their Feishu or, um, Lark.
Feishu is outside of China, Lark is in China. This is their like workplace tool, so they've got their contacts, messenger, Google sheets, equivalent, calendar, Wiki, video conferencing, etc.
Right, and this allows me to interact with those. Do I have that right? Uh, yeah.
Let's go to number nine. The ninth most installed skill is also from Matt Pocock. It's teach. This turns the agent into a tutor that builds you lessons, session after session after session.
He did a great video on this on X where he said, "I'm going to show you how I use this teach skill to learn how to solve a Rubik's cube."
And then it will create your first lesson for you and lessons are stored in the lessons folder and then numbered like this and they're all individual HTML files.
HTML is just so much richer than markdown, it allows it to be so much more expressive, so much more interactive, and this is really the core of what makes this such a good learning experience.
And here is my first lesson, and that's me, notation and the white cross. And it basically teaches you just what you need to know at that moment.
And the thing that was interesting is how it broke down how the Rubik's cube needs to be solved, but remembered where he was, so it could build on it and help him remember what he learned, uh, from last time and then also what he stumbled on, it keeps reinforcing.
The 10th most installed skill is web-design-guidelines. Reviews your UI code against Vercel's Web Interface Guidelines.
This one is also from Vercel. We've seen a lot of them here on this list. Here's what it looks like on the inside. What is this?
This is Vercel's recommendation of how to develop, you know, accessible and efficient, you know, web guidelines. Here's what the skill points to. It points to the guidelines right here.
I open them up, this is what they are. So you've got for example as you said accessibility at the top, icon-only buttons need "aria-label", form controls need "slash-label", um, I mean not slash label but this label, um, and you got focus states, forms, inputs need autocomplete and meaningful name, and you got animation, typography and these are the guidelines that it refers to.
I like skills because they're so easy to read and see what's going on with them. It's just it's English. So, I think what's interesting, especially for this website guideline ones, if you combine it with the frontend skill, there might even be a little bit of a conflict or discussion because the frontend skill might say, "Hey, this is what makes a really beautiful element."
You know, about when I click this button it does this animation, right? But the Vercel guidelines might say, "Oh looks great, but I'm at a healthcare clinic and they need accessibility, you know, that one fails."
All right, I've got this fully available for you all to get access to. You can see we've got examples of each one of them like this one, review this app check out page against the web interface guidelines and then the skill starts going and it says, "Actually the icon button has no aerial label, the autocomplete the, um, the inputs are missing autocomplete, etc." and you can see how they work.
All of it is available for you below, and if you like this then you should know that I did a deep dive with the man whose skills were most installed on this list. They kept coming up over and over again, Matt Pocock, and I'll have a link to that so you can watch a deep dive into how he thinks about creating skills and using them. I'll see you in that one.
Video
