1003: Skills Skills Skills  🔗 **Source:** [1003: Skills Skills Skills](https://share.snipd.com/episode/5b85421f-ade0-4217-9566-b27447b7f631) ## Highlights - **Replace Rigid Scripts With Flexible Skill Workflows** - Replace rigid NPM scripts with flexible skill markdown files that describe workflows for tasks like creating and formatting blog tip posts. - Wes uses a hot tip skill to gather social URLs, match posts across networks, and generate structured front-matter markdown automatically. Transcript: Wes Bos So I'm going to start with a skill that I've built myself. And I call this my hot tip skill. And I find that, and 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 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 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 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 forward slash 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 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, 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 just describes that whole process and workflow in a single markdown file. So what it does is, all right, 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. Like gather the content. Here is how to gather the content, right? There is a script 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 skill for you. Or often 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 looking at them and 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 kind of rigid markdown file that has front matter. It has different ways 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 do have another skill, which is like right in my voice. And I have tried and it always, always is awful. Yeah. 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 um like a couple paragraphs i'll have a couple things in there i'll say like don't don't do but then but the real thing here is you know Scott Tolinski 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 Wes Bos That can be picked up at any point in the process rather than a very rigid NPM script that will almost definitely break. ([Time 0:01:34](https://share.snipd.com/snip/02a0bcd7-4ec5-4b4d-af3d-83a34da900a6)) - **Encode Motion Best Practices Into A Skill** - Create a CSS motion systems skill that codifies animation rules like prefer-reduced-motion checks and performant properties to animate. - Scott included a motion review checklist and examples (linear function tuning, view transitions) to avoid hover-everything pitfalls. Transcript: Scott Tolinski See, I'm flexible with skills. One of my skills here is the CSS motion systems. 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 Bézier curve stuff it gives you. There's a motion review checklist. So like does the motion explain the state change? You know, even like getting into the technical things, like does it need to use prefer reduce motion? Is it animating the properties that are performant to animate? Like we're not animating width or something like that or background color. 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 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, transitioning only Meaningfully shared elements. Avoid transitions of things that shouldn't be transitioned and things like that. Wes Bos Oh, yeah. Because 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 those are the types of things that make your website feel like shit and 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 animations, transitions, or like design principles that You may have, right? Then you can go a long way making your stuff feel and look a lot better. Scott Tolinski Yeah, yeah, I think that stuff needs to be tuned. So I tuned it to my sensibilities with my CSS motion systems. ([Time 0:05:55](https://share.snipd.com/snip/9a8202c1-ced1-43a6-9b4b-899f83cf4258)) - **Use Agent Browser For Live Scraping And Debugging** - Use an agent browser skill to control a headless or existing Chrome instance via the debugging protocol for scraping, screenshots, and interacting with Electron apps. - Wes uses it for debugging and to fetch live HTML or even inspect Slack programmatically. Transcript: Wes Bos 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 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 and 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. ([Time 0:08:17](https://share.snipd.com/snip/8b0eab72-c102-4b4f-9fd6-3bdb6e42be58)) - **Enforce Semantic HTML Rules With A Skill** - Build an HTML skill that enforces semantic rules: only use lists for lists, avoid div soup, and treat buttons and links correctly. - Scott wrote explicit HTML rules to stop AI from producing extraneous tags and non-interactive clickable elements. Transcript: Scott Tolinski 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 um so ai loves to add a lot of extraneous htmo 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 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 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 but i say no this sucks. ([Time 0:09:35](https://share.snipd.com/snip/e154ea3b-cbc3-4fb4-bbc0-afd4a7475a1e)) - **Automate Logo Extraction From Trusted Sources** - Create an Extract Logos skill that aggregates reliable SVG sources and rules for finding and downloading official logos. - Wes combined multiple icon packs and SVGL resources so agents fetch real SVG logos instead of incorrect substitutes. Transcript: Wes Bos 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 I needed to programmatically download the logos. I'm working on my uses.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 SVGL website, which has all the like 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 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 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 Scott Tolinski That svgl but i could logos all the time for stuff. Wes Bos Yeah, I'll publish this one. ([Time 0:12:01](https://share.snipd.com/snip/acd49b9c-e472-48d9-96d0-7fcdbb686c87)) - **Keep Agent Tasks In A Committable JSON File** - Use a plain-file task system like decks and provide a decks skill so agents can create, update, and nest JSON tasks that are easily committed. - Scott prefers decks because it's a JSON file plus CLI, letting agents plan with auditable to-dos. Transcript: Scott Tolinski 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 decks compared to something like beads beads has like get 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 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 and this is the i believe the official uh dex. 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 require when you're using any of this stuff. Because that file can be committed. Your team can use it. ([Time 0:13:34](https://share.snipd.com/snip/a6d949c2-8b51-4ffd-a232-9f958310c4d3)) - **Video Skills Speed Production But Not Design Taste** - Video-generation skills like Remotion and Hyperframes simplify the technical steps to programmatically produce video from templates and React code. - Wes warns they speed technical creation but do not replace motion design taste or manual fine-tuning. Transcript: Wes Bos 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 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, which is essentially just like creating videos programmatically in React. And kind of a frustrating part of Remotion is that 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. 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 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. Yeah. Yeah. Yeah. That's not what these things are. 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 can't even say that. It's almost, 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 those are really good. Some of the highest skills on Skills.SH are Anthropics front end design and like best practices for design 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, it has a couple templates of like flipping around and whatever, but it's not going to make something absolutely Nuts that is actually good at the end of the day. So that's not what I'm saying here. ([Time 0:14:50](https://share.snipd.com/snip/eede2de4-4b63-4578-91e7-467cf5caf1cc)) - **Widespread Skills Create An AI Aesthetic Clone** - Popular front-end design skills produce similar, cookie-cutter results that become the 'AI aesthetic' or new Bootstrap. - Wes notes wide adoption leads to identical sites and warns that agents often add unnecessary labels and controls harming UX. Transcript: Wes Bos 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 or you're just making some slide video then these are fantastic to technically make videos Scott Tolinski 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. Same stuff that everybody else gets. Wes Bos Yeah. Yeah. Yeah. So, again. It looks good until you realize that. Scott Tolinski It's the same stuff. Everybody else has it. Yeah. And. It's bootstrap. It's new bootstrap is really what it is. The AI aesthetic is new bootstrap. Wes Bos And it's not actually a good UX for a lot of the cases. The AI in many cases doesn't understand what good usability is. ([Time 0:17:16](https://share.snipd.com/snip/226b636d-c3e1-4a75-8e3e-cc12f5b632c4)) - **Use Marketing Skills To Improve Specific Copy Tasks** - Pick and choose marketing skills rather than installing everything; use copywriting skills to improve clarity, specificity, and CTAs. - Scott ran a landing page through Corey Haynes' marketing skill and got better specificity and CTAs than his own writing. Transcript: Scott Tolinski 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. 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 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. 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 specific, specific, specificity, 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. ([Time 0:18:50](https://share.snipd.com/snip/42b3e924-4097-4205-a6dc-81fc292be60f)) - **Distill Successful Chats Into Reusable Skill Files** - Whenever you refine an agent through chat, distill the final preferences into a permanent skill file so future runs follow your rules (REMs vs. ems, terse docs, etc.). - Wes converts chat decisions into skill markdown to lock in formatting and behavioral preferences. Transcript: Wes Bos 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. Scott 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. Wes Bos Sentry.io forward slash syntax. PR writer. Oh, a pull request writer. That's a good one. See? Sentry's got you covered. Sometimes I distill mine into like, don't yap. You know? 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. Don't add a whole bunch of 6,000 headings and whatnot. I feel like maybe that's my whole shtick here. It's just too much text. ([Time 0:23:33](https://share.snipd.com/snip/a1c7b2ab-827b-4398-b2ed-c0a45bced722))