Skills Skills Skills

Oh, 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. will be linking to them so you can go ahead and install them if that's what you are down with. My name is Scott Tolinsky. I'm a developer from Denver and with me as always is Wes Boss. 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. 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. My gosh. So, what we're going to we're going to 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. Do it. Oh, I'm ready, Wes. I brought my S stack and everything. So, you tell me. Uh, you want to get your first skill out here? Yeah. All right. So, I'm going to 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 um 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'd 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 Tik Tok, 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 tip skill. And what that does is basically 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, right? 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 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 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, an LLM is very good at at looking at them being 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 like kind of rigid markdown file that has front matter. Um, 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 um 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. Um 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. Um, 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 um like a couple 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 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. 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 and 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. 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 preferred reduce motion um is it animating the properties that uh are performant to animate like we're not animating width 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 I think so I do it yeah some of them they're not uh it depends to a degree but then it also another thing I was like really annoy 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 avoid transitions of things that shouldn't be transitioned and things like that. Yeah, cuz one thing Opus loves to do is they just add a little hover 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 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 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 uh 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. Um, 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 want it to use like your existing Chrome or if you want it to connect to your like Slack um 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 grabbing all the HTML, for testing things out. Um, big fan of that one. Yeah, sick. I I I use agent browser as well, and I have that skill uh set up for myself. I use it all the time. Um, next one I have here is my HTML skill. HTML, bro. There are so many anti-atterns that AI loves to do with HTML. So, I made my own skill that leaned into the things that I reference of a agents doing poorly in HTML. Like for instance, use lists only when things are actually a list. Like how many times is it a uli 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. Um, 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. Um, bad div soup. Uh, clickable non-interactive elements. Uh, 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 had so many annoyances with how um agents tend to write HTML. So, I have like an HTML skill that can uh clean up some of this. Uh for me, I that's something that I I definitely like uh really need to lean lean on for to write HTML. I'm not the type of person who's going to let a stupid agent write a bunch of HTML for me and I'm just going to look at it and be like, "Yeah, that's fine." But I say, "No, this sucks." Uh so, yeah. You know what's one that drives me mad? This is probably more the use case for a llinter 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 referer to uh the like re. Yeah. And like that hasn't been necessary for like five or six years. Um 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? Um 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 has it every single time. Yeah. Yeah. That's just how it goes. I have one that I built called extract logos. Um and this is so often I find myself needing to put a logo for either a software project or for a company. Um I was doing a bunch of remotion the other day and I needed to programmatically download the logos. I have um I'm working on my users.te 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 um SVGL website which has all the like logos. Um there's a couple 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. Um how to search for them, how to download them, etc., etc. And now every time I I want to 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 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. Oh man. Yeah, that bugs me, too. Uh, 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 uh amongst agents. And this skill is really just uh 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 uh 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 um 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 uh I believe the official uh Dex skill. But for me, using to-dos that aren't locked into the harness and that are written to an actual file um is something that I really like require when any 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. Um and I like this Dex skill to make sure that my agents are planning correctly and using tasks and to-dos. Next one I'm going to do like a general category and that is the remotion and then recently another one released was called hyperframes. It's from hey genen. Essentially these are two skills that will use underlying tech um to programmatically make video. Um and that was really cool. So Remotion, we we had Johnny on the on the podcast years ago talking about Remotion, which is essentially just like creating videos programmatically in React. Um, and kind of a frustrating part of Remotion is that you're 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. Um, 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 going to make a beautiful amazing uh motion designers are dead type of thing. That's not what these things are. And and people just think that is 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 when people say that. It's it's a meme now, but likeing they're not 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, um vertical rhythm, sizing, padding, dos and don'ts, common things. Those are those are really good. Some of the the highest skills on skills.sh SHR um anthropics front-end design and like best practices for design that will 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, it yeah, it can it has a couple templates of like flipping around and 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 or you're just making some slide video, then these are fantastic to technically make videos very quickly. Yeah, I find the technical stuff to be a much better use case uh 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 gets. Same stuff that everybody else gets. Yeah. Yeah. So again, it looks good until you realize that everybody else has it 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? Uh, man, that label thing is really just like it's like what? 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 uh 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, you can't get your point across well, so you 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. 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 because then you got all these skills to maintain or or know what they do or 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 spec spec specificity, I just genuinely failed saying it. Specificity over vagueness in vague. Save time on your workflow. Specific. cut your weekly reporting from 4 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, just talks, you know, but that's how 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 works for what though? It stops working. It makes better text is what it does. Better English for me, 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 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 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 when if I see a business and the caption is clearly written with AI, like I immediately think worse of that business 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. Uh, English is not my strong suit. And it's taking those things and and smoothing out the edges like this. This CTA is bad, but I'm not going to have it write paragraphs of emails or something like that. 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 No, you couldn't. No. Rip me to shreds. Yeah. just holding 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 I 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. Well, that was really um interesting from that high horse that you're on. I'm surprised I could hear you. That 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 going to be the the path forward. But no, I I don't. So, I'm being mean to you, but I I'm more at the whole industry in general because I think everybody's just creating a whole bunch of garbage and nobody 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 had the hot tips agent browser extract logos and reotion. 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 REM or M 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 Century has a really good skills writer. Century has a uh speaking of Century, Centry.io/sintax, signup, get two months for free. Century 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 um who knows code better than Sentry. So, check it out at uh century.io and I'll link their skills up in this episode as well. PR writer find oh a poll request writer. That's a good one. See, because got you cover. Sometimes I just 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 tur, 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 there just too much text, too much stuff in this world, you know? Everything needs to be a bit more tur. Yeah, I know. I I I have all my rules files telling it to like Yeah, keep it keep it slim. Come on. All right, we'll keep this podcast slim. Thanks for tuning in. Peace. Peace.