Welcome to Syntax. Today, we're gonna be talking about skills, skills, skills. Can they pay your telephone bills? We're gonna be talking about skills.

All of these things in our repos that are just markdown files that the AI can use to go off and do stuff correctly. So Wes and I have each brought four skills to the table. These are skills that we really like to use in our setups, and we're gonna be talking a little bit about what they are and why we'll be linking to them so you can go ahead and install them if what you are down with. My name is Scott Tolinski. I'm a developer from Denver. And with me JS always is Wes Bos. What's up, Wes?

Hey. Got some skills. I'm excited to talk about this because it's crazy to see that the landscape has moved so quickly into this, like, markdown documents that describe capabilities for an agent.

And then I got a cool name called Skills, and everyone is, like, sharing them around. You know? Like, I think there's a little bit of grifting going on where where people just have these, like, magic documents of text. Yeah. If you're paying for a skill, you're out of your mind. Yeah. Yeah. Have you ever No. Have you ever paid for a skill? I bet I could sell a skill.

I bet you could sell a lot of things. Yeah. A skill? Oh my gosh. Yeah. We're gonna we're gonna go through, what, three or four each of our our favorite skills, ones that we've written ourselves and ones that are are existing that you can use as well. Let's do it. Oh, I'm ready, Wes. I brought my s stack and everything. So you tell me, you wanna get your first skill out here? Yeah. Alright. So I'm gonna start with a skill that I've I've built myself, and I call this my hot tip skill. And I find that and, like, maybe we should describe this. A skill is a way for you to extend the capability of an agent and describe how something should be done.

And you will often have a project or you'll you'll have global skills, you'll have project local skills that describe how to specifically do something. And I find that a huge use case for my skills is actually just simply replacing, what I call, like like, NPM scripts or pipeline TypeScript. Meaning that Mhmm. I often would have these scripts that would be very rigid and do things in a specific manner, and I would spend a lot of time working on these scripts making them very rigid.

And then something would change, something wouldn't be perfect, or I need to restart in the middle of this thing, and it it would just be broken. So one thing is whenever I post a little short form video to TikTok, Instagram, Twitter, whatever, I also put them on my website at westboss.com/tips.

And the process of turning that into a markdown document and listing the links, because I also like to list the links to each of the platforms on there so I can sort of have a home base for that tip and then say, like, this is where I've posted it in other places. Here's the stats on on all of the likes and stuff across all the different social networks.

So I used to have a very rigid Npm script that would collect them all. It would figure them all out, you know, and I had to make sure that I had the exact URL or just the ID of the post copied, and then it would go off and fetch them all and then bring them into a single document and format them. And in in this new case, I have what's called, like, a hot TypeScript.

And what that does JS, basically, it just describes that whole process and workflow in a single markdown file. So what it does is alright. Here here when to use the skill? When a user asked to create a new tip or add an existing one, tips are Scott form, hot tips originally posted on social media, and then it goes through all the steps. Like, gather the content.

Here is how to gather the content. Right? There is a script in the in the website folder that you can run, or often it'll be like, run this n p x command, and that will go off and fetch the the skill for you. Or often, I if I don't have the link to every social network, I will ask it to go grab the last it it will know to just go grab the last five posts from each network and try to match it up. Even if the text might not be exactly the same, Npm is very good at at looking at them and be like, oh, that's the same Node, so I'll grab the URL for that. Right? So gather the content, then it goes through, create the file. So I have this, like, kind of rigid markdown file that has front matter.

It has different ways to to format it all, so I have a structure of how that should be created, formatting all the front matter, finding the social media links, and then, quickly writing some body content. I I do have another skill, which is, like, right in my voice, and I have tried, and it always always is awful.

Yeah. It it I also don't think you should be programmatically generating a whole bunch of content for your blog. Nobody wants to read that. Nobody cares about that. You know, nobody is is feeling so blessed that they can read your programmatically generated slop.

Oh, yeah. But I do have some tips in there of, like like, if I just, like, will type a whole bunch of my random thoughts in there, post a whole bunch of links, and then say, like, format this as, like, a couple of paragraphs. I'll have a couple things in there that say, like, don't don't do, but the but the real thing here is you know, like, all those, like, chat GPT things.

Yeah. Right? Yeah. I know. I hate that stuff. And because it's so you can sniff it out. Yeah. Yes. That one's my favorite. I absolutely love having

very flexible skills that can be picked up at any point in the process rather than a very rigid Npm script that will almost definitely break.

Yep. See, I'm flexible with skills. One of my skills here is the CSS motion systems. I I made this, and, basically, I was tired of AI not necessarily understanding how to use, motion and CSS correctly.

So the motion system skill has, basically a skill that gives some baseline rules, and then it also includes some references in here. So referencing things like how to use linear the linear function in CSS correctly. So that way you can get more spring style, really nice animations out of CSS instead of the default easing and BS or even, like, bezier curve stuff it gives you. There's a motion review checklist. So, like, does the motion explain the state change? You know, it it even, like, getting into the technical things, like, does it need to use prefer reduced motion? Is it animating the properties that, are performant to animate? Like, we're not animating with or something like that or background color.

Or is the background color fine? I think background color might be fine.

Background color might be fine. I think so. I do it. Yeah.

Some of them, they're not. It depends to a a degree. But then it also another thing I was, like, really annoyed with was, like, AI using view transitions incorrectly. So, this explains view transitions and what I wanna see out of view transitions. But not only that, transitioning only meaningfully shared elements.

Avoid

transitions of things that shouldn't be transitioned and things like that. Yeah. Because Yeah. One thing Opus loves to do is they just add a little hover, you know, on everything. You know? Everything has a little hover scale up effect.

And, like, those are the types of things that make your website feel like shit and, like, look like the same crap everybody else is pumping out. So if you can actually use your brain for a few seconds and write some things that you find to make a good website, whether it's, like, animations, transitions, or just, like, design principles that you may have, right, then

you you can go a long way making your stuff feel and look a lot better. Yeah. Yeah. I I think that stuff needs to be tuned. So I I tuned it to my sensibilities with my CSS motion systems.

Yeah. Next one I have here is the agent browser. This is probably one of the more popular, skills out there, and it essentially describes how to use a programmatic headless browser to an agent. So I know a lot of these tools have built in browsers, but if you are in a spot where you just need to simply fire up a a headless browser that exists on your system or if you want to communicate with an existing browser on your system. So if you wanted it to use, like, your existing Chrome or if you want it to connect to your, like, Slack, because this agent browser will connect to any electron application via the Chrome debugging protocol, and it can I messaged Scott on it the other day, which was which was really funny? It can take screenshots. It can go into your Slack. It can do all kinds of kind of neat stuff. So the agent browser is I I use it all the time for for debugging, for scraping, you know, firing up a a browser and and grabbing all the HTML for testing things out.

Big fan of that one. Yeah. Sick. I I I use agent browser as well, and I have that skill, set up for myself. I use it all the time.

Next one I have here is my HTML skill. HTML, bro. There are so many anti patterns that AI loves to do with HTML, so I made my own skill that leaned into the things that, I reference of agents doing poorly in HTML. Like, for instance, use lists only when things are actually a list. Like, how many times is it a u l l I and then an article in there? Like, brother, that's what the article's for. You don't need a u l and l I around a bunch of articles. You just don't.

So AI loves to add a lot of extraneous HTML.

So just having, like, here are my rules for adding this or that or whatever, buttons are not links, those types of things, bad, div soup, clickable noninteractive elements, those types of things. And this one might be a little overcooked in terms of just how much text is in it, but you know what? I I have so many annoyances with how, agents tend to write HTML. So to have, like, an HTML skill that can, clean up some of this, for me, I that's something that I I definitely, like, really need to lean lean on for to write HTML. I I'm not the type of person who's gonna let a stupid agent write a bunch of HTML for me, and I'm just gonna look at it and be like, yeah. That's fine. I'm gonna say, no. This sucks.

So yeah. You know what's the one that drives me mad? This is probably more the use case for a linter than a skill, but every time you have a link that opens in a new, like, underscore blank, it adds the dang Node opener, no referrer to, the, like, rel.

Yeah. And, like, that hasn't been necessary for, like, five or six years. It was a best practice previously because what would happen is if you open, like, a link in a new tab, then the the website that you open in the new tab would be able to, in some cases, know about the refer, like, where did you come from? But also in some cases, it would have access to, like, the parent document.

And people are always like, that's a security issue, and, like, it's been fixed. The browsers have all been patched. You haven't needed that in a long, long time, and it still adds it every single time.

Yeah. Yeah. That's just how it does.

Yep. I have one that I built called extract logos.

And this is so often, I find myself needing to put a logo for either a software project or for a company.

I was doing a bunch of Remotion the other day, and then I needed to programmatically download the logos. I have, I'm working on my users.tech website. I Node to grab the logos for, like, LG and, like, all these different tech that people have, and it's annoying to have to find the logos in it. So I have all of these different resources. You know? Like, there's a really good, SVGL website, which has all the, like Yeah. Really good. Logos.

There's a couple of really good icon packs out there, which will have a bunch of logos in it. There's, like, I don't know, three or four different ways that I will use to find good SVG logos, and I've just written those all into a single thing, how to search for them, how to download them, etcetera, etcetera. And now every time I I wanna say get me a logo for something, then it it can it just go off and grab it rather than, like, put, like, a stupid like, I asked Scott for a YouTube logo the other day, and it literally just gave me, like, triangle Unicode character. I was like, that's not it at all. You know? Give me the actual YouTube logo.

Oh, man. Yeah. That bugs me too.

That's nice. I don't have this. I do use that SVGL, but I could I I need logos all the time for stuff. Yeah. I'll publish this one. This one's just in in a couple projects that I have, but I'll I'll publish it.

Sick. My next one is my decks task. I use decks for to do tracking, amongst agents, and this skill is really just you know what I like about DEX compared to something like Beads? Beads has, like, git hooks, and it does all this crazy stuff with the database and syncing that database. And, what I like about decks is it's just a JSON file and a CLI, and it's easy easy for this thing to use. So I have this decks skill that basically just says, alright. Here are all of the things you do in decks. Here's how to get links or here's how to get to tasks. Here's how to, update them. Here's how to have one be a child of another one. Here's how to know what's next to work on, all that stuff. And this is the Mhmm. I believe, the official, decks skill. But for me, using to dos that aren't locked into the harness and that are written to an actual file, is something that I really, like, require when you're using any of this stuff because that file can be committed. Your team can use it. It's not ethereal.

So for me, I like decks, and I like this decks skill to make sure that my agents are planning correctly and using tasks and to dos. Next one, I'm gonna

do, like, a general category, and that is the Remotion. And then recently, another one released was called hyper frames. It's from HeyGen. Essentially, these are two skills that will use underlying tech, to programmatically make video.

And that was really cool. So Remotion, we we had Johnny on the Wes on the podcast years ago talking about Remotion, which is essentially just like creating videos programmatically in React.

And kind of frustrating part of Remotion is that you just you have to type a lot, and it's it's way faster to just use an actual editor.

But now when they rolled out the Remotion skill of, like, here are the best practices. Here's how to do audio. Here's how to do video. Here's how to do animation. Here's some really good examples.

Then all of a sudden, it became a lot easier to programmatically make video.

And the Remotion skill and then the other one, the hyperframe skill, are very good at basically just showing you how to technically do it. And I think a lot of people confuse these skills with, like, technically how to do it and some magic box that is gonna make a beautiful, amazing, motion designers are dead type of thing. Yeah. Yeah. Yeah. That's Scott what these things Yarn, and and people just think that it's just as they don't even, like, look at the text. It's just a magic box that makes the most beautiful things ever. These skills are not a replacement for having good taste or or, like, actually I hate people to say that. It's almost it's a meme now, but, like It's a meme. Scott a replacement for, like when we get into a lot of this design stuff, they they can be for good practices that make good design. You know? Vertical rhythm, sizing, padding, do's and don'ts, common things. Those are those are really good. Some of the the highest skills on skills.sh are, anthropics, front end design, and, like, best practices for design that will will kick out, like, decent looking things, but it's not gonna magically make something that is absolutely amazing. Then when you get a little bit further into, like, motion design, it yeah. It can it has a couple templates of, like, flipping around or whatever, but it's not gonna make something absolutely nuts. That is that is actually good at the end of the day. So that's not what I'm saying here. What I'm saying is that, like, if you know what you want and you have, like, a bit of a design eye and and or or you're just making some slide video, then these are fantastic to technically make videos Yes. Very quickly.

Yeah. I find the technical stuff to be a much better use case, for installing someone else's skill. Because Mhmm. If it's technical, there's, like, this is the but if it comes down to matters of taste, aesthetics, or whatever, if you install the good looking website skill from skills.sh that has 10,000,000 downloads and you run it, you're just getting the same stuff that everybody else gets. Stuff that everybody else gets. Yeah. Yeah. Yeah. So, again yeah. It looks good until you realize that It's Bos stuff. Has it. Yeah. And It's bootstrap. It's new bootstrap is really what it is. The the AI aesthetic is new bootstrap. Yeah.

And it's, like, not actually, like, a good UX for a lot of the cases. Like, the AI doesn't, in many cases, doesn't understand, like, what good usability is.

It can just keep adding labels and drop downs to things. Yeah. Yeah. Yeah. How many labels can we stuff into this?

Man, that label thing is rather just like it's like going like a political cartoon where everything is labeled, you know, like, because you're you're have you ever seen any of those, Wes? There's, like, some Reddits that, like, point out bad political cartoons, and they're just, like, hacky stuff where everything is labeled individually. It's all just, like, a whole bunch.

You can't get your point across well, so you you have to label everything. Your metaphors aren't good. Okay.

Enough of that. Next thing that I have here is a skill that I got from Corey Hanes.

He has an entire repo full of these things called marketing skills, and there's a whole lot in here.

There when I see stuff like this, I'm like, this is great. I would want all this stuff, but I am cautious about just YOLO adding it all to my skills because then you got all these skills to maintain or or know what they do. They might get doing something you don't want them to do. So I pick and choose what I want out of here, and the ones that I wanted to talk about is stuff that I'm bad at, which is copywriting.

So there's a copywriting skill in this marketing skills bundle that I have found to be very nice.

For me, my copywriting has never been something I'm good at. I don't I'm not good at selling my stuff.

So for me, things like

specificity.

Specificity. I just Jamie would say no. Failed saying it. Specificity

over vagueness and, vague. Save time on your workflow. Specific. Cut your weekly reporting from four hours to fifteen minutes. Like, these were things that I just straight up would not be good at. And I think this when I had this run over a landing page I made, I found the results to be definitely much better than what I wrote myself. So, that said, I'm sure marketers would look at this and be like, this

sucks. You know? But that's how this works. Right now, marketing skills may work for, like, a week.

But as soon as somebody puts this like, as soon as people figure out that something works, like, if this even works,

then Works for what, though? Scott working.

It makes better text is what it does. Better English for me. Yeah. Better CTAs. CTAs that aren't just like click here. You know? Oh, yeah. I don't know. I I feel really

weird about AI using AI to write stuff, and mostly because Mhmm. Like, people send me emails that are just, like, expanded with AI, and it's like Yeah. Or, like, like, fake.

Like, they're like, oh, I love your podcast about x, y, and z, and they'll they'll mention something, like, in the middle of it. And it's just like, it's not gonna work. Like, this is not Scott working, and you're not gonna be able to like, marketing, you're not gonna be able to have some machine that is amazing at marketing.

You're either spamming people or you're just, like, doing the same stuff that absolutely everybody else does. Like, I whenever if I see a business and the caption is clearly written with AI, like, I immediately think worse of that business.

Because for me, Wes, what it's what it's doing is it's it's it's not doing any marketing for me.

English is not my strong suit, and it's taking those things and and smoothing out the edges. Like, this the CTA is bad, but I'm not gonna have it write paragraphs of emails or something like that. Yeah. Like, I can't yeah.

I don't know. I I I get it. But, also, I this whole generating text with it to to try to seem genuine.

I don't know. I like, not not what you're doing, but I just I just feel Node Deno me to shreds to do it. Yeah. Yeah. Just blow me up here. Not not because I'm, like, on a high horse, simply because I know that it just will not work. If you're trying to, like, get something across, you have to hone that skill, and you have to get better at it. You know? And, like, maybe a better case would be, like, help me help me extract everything out of me. You know? Like, what are the pain points of this thing? What am I trying to solve here? What are these questions? And then, oh, it it it Scott extracted all this out of me.

Well, that was really, interesting from that high horse that you're on. I'm surprised I could hear you.

The horse is so giant.

I I just everybody is so fake these days, and I think that being genuine and, like, not having some little sneaky way to get around something is is gonna be the the path forward.

But Yeah. No. I I don't. So I'm I'm being mean to you, but I I No. You I'm more at the whole industry in general.

Oh, yeah. Because I I think everybody's just creating a whole bunch of garbage, and Node nobody's paying attention to anything anymore because there's just so much stuff out there.

Yeah. I hear you. Yes. Yes. Yes. Yes. Yes. I hear you. I lament I lament all of this. That's for sure.

That's your four. I did my four at the hot tips, agent browser, extract logos, and Remotion.

I think the last thing I'll say is just if you ever are going back and forth in a chat with something and you end up with something how you like it, whether that is a process for how to tackle something or whether that is how to write your CSS in a specific way because you said, no. Don't use this. Don't use this. Use use it in this way. Make sure you're always using REMS or m's or whatever your preferences is. Stop and say, hey. Like, a lot of these skills are not written by hand by people. They're simply just say, hey. Now take this chat and distill it down into a skill, and it will create a skill file for you.

Yeah. I think, actually, Sanity has a really good skills writer. Sentry has a, speaking of Sentry, sentry.io forward slash syntax. Send up good two months for free. Sentry actually has their skills published as well on their GitHub. I'll link those up. In fact, one of their skills that I found to be very good that I moved into mine was the skill writer skill. So I use their skill writer as well as their code simplifier skill because, who knows code better than Century? So check it out at, sentry.io, and I'll link their skills app in this episode as well.

Sentry.io/syntax.

PR writer find oh, a pull request writer. That's a good one.

See? Because I think we've got you covered. Sometimes I just I distill mine into, like, don't yap.

You know? Yeah. Like, whenever I have to say, can you write some documentation on this? Like, it just goes off and just makes so much text, and it's like, no. Keep it succinct.

Keep it terse.

You know? Don't add a whole bunch of, like, 6,000 headings and and whatnot. I feel like maybe that's my whole my whole shtick here JS there's just too much text, too much stuff in this world. You know? Everything needs to be a bit more terse.

Yeah. I know. I I I have all my rules files telling you to, like, yeah,

keep it keep it slim. Come on. Alright. We'll keep this podcast slim. Thanks for tuning in. Peace.

Peace.