1003: Skills Skills Skills

Scott and Wes chat all things agent skills for web developers, sharing their favorites for everything from CSS animations and HTML generation to logo extraction, marketing copy, and video creation. Whether you’re just getting started with AI-powered development or looking to level up your workflow, this episode is packed with practical skills you can put to use today. Show Notes 00:00 Welcome to Syntax! 01:33 Hot Tip Skill 05:55 CSS Motion Systems 08:17 Agent Browser Skill 09:30 HTML Skill 12:01 Extract Logos Skill 13:34 Dex Task Skill 14:50 Remotion and Hyper Frames Skills Syntax Episode 550 with Remotion 16:22 Discussion on AI and Design Skills 18:50 Marketing Skills and Copywriting 23:01 Final Thoughts and Resources 24:10 Brought to you by Sentry.io Sentry Skills Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Scott Tolinski?

  Welcome to Syntax. Today, we're going to be talking about skills, skills, skills. Can they pay your telephone bills? We're going to 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 going to 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 that's what you are down with. My name is Scott Tolinski. I'm a developer from Denver. And with me as always is Wes Boss. What's up, Wes?

• 0:36Wes Bos?

  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 people just have these like magic documents of text.

• 1:01Scott Tolinski?

  Yeah. If you're paying for a skill, you're out of your mind.

• 1:04Wes Bos?

  Yeah.

• 1:05Scott Tolinski?

  Yeah.

• 1:05Wes Bos?

  Have you ever?

• 1:05Scott Tolinski?

  No.

• 1:06Wes Bos?

  Have you ever paid for a skill? I bet I could sell a skill.

• 1:10Scott Tolinski?

  I bet you could sell a lot of things. Yeah. A skill, my gosh.

• 1:14Wes Bos?

  So what? We're gonna, we're gonna go through what? Three or four each of our favorite skills, ones that we've written ourselves and ones that are existing that you can use as well.

• 1:24Scott Tolinski?

  Let's get into it. Oh, I'm ready, Wes. I brought my S stack and everything. So you tell me, you want to get your first skill out here?

• 1:33Wes Bos?

  Yeah. All right. 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.

• 1:53Wes Bos?

  And you will often have a project or 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 scripts, meaning that 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 would just be broken. So one thing is whenever I post

• 2:33Wes Bos?

  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 it had the exact URL or just the ID of the post copied.

• 3:16Wes Bos?

  And then it would go off and fetch them all and then bring them into a single document and format them. And in this new case, I have what's called like a hot tip skill. And what that does is basically it just describes that whole process and workflow in a single markdown file. So what it does is, all right, here, here, when to use the skill, when a user asks to create a new tip or edit an existing one, tips are short form hot tips originally posted on social media. And then it goes through all the steps. So I 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

• 3:58Wes Bos?

  be like, run this NPX 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 texts might not be exactly the same and LM is very good at at looking at them be like, oh, that's the same one. So I'll grab the URL for that, right? So gather the content, then it goes through, create the file. So I have this that 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,

• 4:41Wes Bos?

  finding the social media links, and then quickly writing some body content. I I do have another skill, which is like, write in my voice, and I have tried, and it always always is awful. Yeah, 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. 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 paragraphs,

• 5:25Wes Bos?

  I'll have a couple of things in there. I'll say like, don't, don't do, but then but the real thing here is, you know, like all those like, chat GPT things.

• 5:36Scott Tolinski?

  Yeah, right. Yeah, I know. I hate that stuff. Because it's so you can sniff it out. Yeah.

• 5:40Wes Bos?

  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.

• 5:55Scott Tolinski?

  Yeah, I'm 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 uh motion in CSS correctly. So the motion system skill has uh 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.

• 6:40Scott Tolinski?

  Uh, there's a motion review checklist. So like, um, does the motion explain the state change? Uh, you know, it it even like getting into the technical things like, does it need to use prefer reduce motion? Um, is it animating the properties that uh are performant to animate? Like, we're not animating with or something like that or background color. Um, or is it background color fine? I think background color might be fine. Background color might be fine.

• 7:08Wes Bos?

  I think so. I do it.

• 7:09Scott Tolinski?

  Yeah. Some of them, they're not. Uh, it depends to a degree. But then it also, I another thing I was like really annoyed with was like AI using view transitions incorrectly. So um, this explains view transitions and what I want to see out of view transitions. But not only that, uh, transitioning only meaningfully shared elements of avoid transitions of things that shouldn't be transitioned and things like that.

• 7:34Wes Bos?

  Oh, yeah. Cause one thing Opus loves to do is they just add a little hover you 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 can go a long way making your stuff feel and look a lot better.

• 8:10Scott Tolinski?

  Yeah, yeah, I think that stuff needs to be tuned. So I tuned it to my sensibilities with my CSS motion systems.

• 8:17Wes Bos?

  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 headless browser that exists on your system, or if you want to communicate with an existing browser on your system. So if you want 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

• 9:03Wes Bos?

  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 use it all the time for, for debugging, for scraping, you know, firing up a browser and grabbing all the HTML for testing things out. Big fan of that one.

• 9:29Scott Tolinski?

  Yeah, sick. 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 ul, li, and then an article in there? Like brother, that's what the article's for. You don't need a ul and li around a bunch of articles. You just don't. So AI loves to add a lot of extraneous HTML.

• 10:16Scott Tolinski?

  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, non-interactive 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 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, that's something that I definitely like, really need to lean on for to write HTML. 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.

• 11:00Scott Tolinski?

  But I say, no, this sucks.

• 11:04Scott Tolinski?

  So, yeah.

• 11:05Wes Bos?

  You know what's 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 no opener, no refer to the rel.

• 11:22Scott Tolinski?

  Yeah.

• 11:23Wes Bos?

  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's still as it every single time.

• 11:58Scott Tolinski?

  Yeah, yeah, that's just how it goes. Yeah.

• 12:01Wes Bos?

  I have one that I built called Extract Logos. And this is so often I find myself needing to.

• 12:11Wes Bos?

  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 needed 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 SVG website, which has all the like

• 12:41Scott Tolinski?

  Yeah.

• 12:41Wes Bos?

  Tech 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, et cetera, et cetera. And now every time I, I want to say, get me a logo for something, then it, it can just go off and grab it rather than like, put like a stupid, like I asked it for a YouTube logo the other day and it literally just gave me like the triangle Unicode character. I was like, that's not it at all. You know, give me the actual YouTube logo.

• 13:20Scott Tolinski?

  Oh, man, yeah, that bugs me too. That's nice. I don't have this. I do use that SVG, but I could, I need logos all the time for stuff.

• 13:28Wes Bos?

  Yeah, I'll publish this one. This one's just in, in a couple of projects that I have, but I'll, I'll publish it.

• 13:34Scott Tolinski?

  Sick. My next one is my Dex task. I use Dex 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 Dex is it's just a JSON file and a CLI and it's easy, easy for this thing to use. So I have this Dex skill that basically just says, all right, here are all of the things you do in Dex. 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.

• 14:19Scott Tolinski?

  And this is the, I believe The official Dex skill, but for me, using to do's 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 Dex and I like this Dex skill to make sure that my agents are planning correctly and using tasks and to do's.

• 14:50Wes Bos?

  Next one, I'm gonna do like a general category and that is the remotion. And then recently, another one released was called hyperframes. 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 had Johnny on the podcast years ago, talking about remotion. It's 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 way faster to just use an actual editor. But now, when they rolled out the remotion skill of like, here are the best practices.

• 15:35Wes Bos?

  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, uh, motion designers are dead type of thing.

• 16:12Scott Tolinski?

  Yeah, yeah, yeah.

• 16:13Wes Bos?

  That's not what these things are. And people just think that it's just, 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 like actually, I hate when people say that. It's a meme now, but like, they're not a replacement for like, when we get into a lot of this design stuff. 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 really good. Some of the highest skills on skills that SH are. Anthropics, front end design and like best practices for design.

• 16:56Wes Bos?

  That will kick out like decent looking things. But it's not going to magically make something that is absolutely amazing. And then when you get a little bit further into like motion design. Yeah, I can. It has a couple of templates of like flipping around or whatever, but it's not going to 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. And what I'm saying is that like, if you know what you want and you have like a bit of a design eye and or you're just making some slide video, then these are fantastic to technically make videos very quickly.

• 17:32Scott Tolinski?

  Yeah, I find the technical stuff to be a much better use case for installing someone else's skill. Because 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 million downloads and you run it, you're just getting the same stuff that everybody else is getting.

• 17:55Wes Bos?

  Same stuff that everybody else gets, yeah.

• 17:56Scott Tolinski?

  Yeah, yeah. So again.

• 17:58Wes Bos?

  It looks good until you realize that everybody else has it.

• 18:02Scott Tolinski?

  Yeah.

• 18:02Wes Bos?

  And.

• 18:03Scott Tolinski?

  It's bootstrap. It's new bootstrap is really what it is. The AI aesthetic is new bootstrap. Yeah.

• 18:08Wes Bos?

  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 could just keep adding labels and dropdowns to things.

• 18:21Scott Tolinski?

  Yeah, yeah, yeah. How many labels can we stuff into this? Man, that label thing is just like, it's like, 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, oh my God. You can't get your point across well, so you have. To label everything. Your metaphors aren't good. Um, okay. Enough of that. Next thing that I have here is a skill that I got from Corey Haynes. He has an entire repo full of these things called marketing skills. And there's a whole lot in here.

• 19:05Scott Tolinski?

  Um, 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. Cause 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, uh, things like speci- speci- specificity.

• 19:51Scott Tolinski?

  I just genuinely failed saying it. Specificity over vagueness. And vague, save time on your workflow. Specific, cut your weekly reporting from four hours to 15 minutes. Like, these are 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, um, that said, I'm sure marketers would look at this and be like, this sucks, you know?

• 20:21Wes Bos?

  I can tell you 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.

• 20:35Scott Tolinski?

  Works for what though?

• 20:36Wes Bos?

  It stops working.

• 20:37Scott Tolinski?

  It makes better text is what it does. Better English for me.

• 20:40Wes Bos?

  Yeah.

• 20:41Scott Tolinski?

  Better CTAs. CTAs that aren't just like click here, you know?

• 20:45Wes Bos?

  Oh, yeah. I don't know. I, I feel really weird about.

• 20:50Wes Bos?

  AI using AI to write stuff and mostly because like people send me emails that are just like expanded with AI and it's like or like like fake like they're like, oh, I love your podcast about X, Y, and Z. And they'll mention something like in the middle of it. And it's just like, it's not going to work. Like this is not not working. And you're not going to be able to like, marketing, you're not going to 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.

• 21:33Scott Tolinski?

  I think 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 smoothing out the edges like this. The CTA is bad, but I'm not going to have it write paragraphs of emails or something like that. Like, I can't. Yeah.

• 21:54Wes Bos?

  I don't know. I get it. But also, I this whole generating text with it to try to seem genuine. I don't know. I like not not what you're doing. But I just, I just

• 22:05Scott Tolinski?

  No, you can rip me to shreds. Do it. Yeah, just roll me up here.

• 22:10Wes Bos?

  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 sort of extracted all this out of me.

• 22:36Scott Tolinski?

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

• 22:45Wes Bos?

  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 going to be the path forward. But yeah, no, I'm being mean to you, but I'm more at the whole industry in general.

• 23:08Scott Tolinski?

  Oh, yeah.

• 23:09Wes Bos?

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

• 23:17Scott Tolinski?

  Yeah, I hear you.

• 23:19Wes Bos?

  Yes.

• 23:19Scott Tolinski?

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

• 23:26Wes Bos?

  That's your four. I did my four. I had the hot tips, agent browser, extract logos and re-motion. 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 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.

• 24:09Scott Tolinski?

  Yeah, I think actually Sentry has a really good skills writer. Sentry has a, speaking of Sentry, sentry.io forward slash syntax, sign up, get 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 Sentry? So check it out at sentry.io and I'll link their skills up in this episode as well.

• 24:43Wes Bos?

  Sentry.io forward slash syntax.

• 24:47Wes Bos?

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

• 24:52Scott Tolinski?

  See?

• 24:53Wes Bos?

  Because

• 24:53Scott Tolinski?

  Then she's got you covered.

• 24:54Wes Bos?

  Sometimes I just, I distill mine into like, don't yap. You know?

• 24:58Scott Tolinski?

  Yeah.

• 24:58Wes Bos?

  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 whatnot. I feel like maybe that's my whole, my whole shtick here is just too much text. Too much stuff in this world, you know? Everything needs to be a bit more terse.

• 25:23Scott Tolinski?

  Yeah, I know. I, I have all my rules files telling you to like, yeah. Keep it, keep it slim. Come on.

• 25:30Wes Bos?

  All right. We'll keep this podcast slim. Thanks for tuning in.

• 25:32Scott Tolinski?

  Peace. Peace.