Skills Skills Skills - CourtneyR.dev's 2nd Brain

Skills Skills Skills ![rw-book-cover](https://img.youtube.com/vi/RWH4AIVRgvU/maxresdefault.jpg) 🔗 **Source:** [Skills Skills Skills](https://www.youtube.com/watch?v=RWH4AIVRgvU) > [!note]+ Document Notes > tags: #ai #development #skills #automation #workflow #agents > author: Syntax > source: YouTube > reference: https://www.youtube.com/watch?v=RWH4AIVRgvU > date created: 2024-12-19 14:30 > > # 🏷️ Title: Skills Skills Skills >  ## 🧰 Action Inbox - [H1] Create hot tip skill for converting social media posts to markdown — automate flexible content workflow #automation - [H2] Build CSS motion systems skill with performance guidelines — improve AI animation output #css - [H3] Set up agent browser skill for debugging and testing — programmatic browser control #testing ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [Syntax Podcast](https://syntax.fm) - [Skills.sh](https://skills.sh) - [SVGL](https://svgl.app) ## 📝 Summary - What happened: Scott and Wes discuss AI agent skills - markdown files that extend AI capabilities for development workflows - Why it matters: Skills replace rigid scripts with flexible, resumable workflows that can adapt to changing requirements - Key stakeholders: Web developers, content creators, anyone using AI agents for automation - Risks and tradeoffs: Skills can produce generic output if not customized; overreliance on AI for creative work - Bottom line: Custom skills beat generic ones; focus on technical processes rather than creative content ## 📖 Main Content Skills are markdown documents that describe capabilities and workflows for AI agents. They function as extensions that tell agents how to perform specific tasks correctly, from technical processes to content creation workflows. The hosts distinguish between technical skills (which work well) and creative/aesthetic skills (which often produce generic results). Technical skills excel at replacing rigid npm scripts with flexible workflows that can be resumed at any point, while creative skills tend to create the "AI aesthetic" that makes everything look the same. Key principles emerge: customize skills to your preferences rather than using generic ones, focus on technical processes over creative content, and avoid paying for skills that are essentially just text documents describing workflows. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/RWH4AIVRgvU?t=0) — [H1] Introduction to Skills - Key idea: Skills are markdown files that extend AI agent capabilities - Evidence: "These are skills that are just markdown files that the AI can use to go off and do stuff correctly" #### ⏱️ [01:30](https://youtu.be/RWH4AIVRgvU?t=90) — [H2] Warning About Paid Skills - Key idea: Skills shouldn't cost money since they're just text documents - Evidence: "If you're paying for a skill, you're out of your mind" #### ⏱️ [02:45](https://youtu.be/RWH4AIVRgvU?t=165) — [H1] Hot Tip Skill Workflow - Key idea: Skills replace rigid npm scripts with flexible, resumable workflows - Evidence: "I used to have a very rigid npm script... in this new case, I have what's called like a hot tip skill" #### ⏱️ [05:20](https://youtu.be/RWH4AIVRgvU?t=320) — [H2] Content Generation Concerns - Key idea: Avoid programmatic content generation for blogs - Evidence: "Nobody wants to read your programmatically generated slop" #### ⏱️ [06:45](https://youtu.be/RWH4AIVRgvU?t=405) — [H1] CSS Motion Systems Skill - Key idea: Custom skills prevent AI from using poor animation practices - Evidence: "I was tired of AI not necessarily understanding how to use motion and CSS correctly" #### ⏱️ [08:30](https://youtu.be/RWH4AIVRgvU?t=510) — [H3] Generic AI Design Problems - Key idea: AI defaults to adding hover effects on everything - Evidence: "One thing Opus loves to do is they just add a little hover on everything" #### ⏱️ [09:15](https://youtu.be/RWH4AIVRgvU?t=555) — [H2] Agent Browser Skill - Key idea: Programmatic browser control for debugging and testing - Evidence: "It can take screenshots. It can go into your Slack. It can do all kinds of neat stuff" #### ⏱️ [11:00](https://youtu.be/RWH4AIVRgvU?t=660) — [H1] HTML Anti-patterns Skill - Key idea: AI creates poor HTML structure that needs correction - Evidence: "Use lists only when things are actually a list... buttons are not links" #### ⏱️ [13:20](https://youtu.be/RWH4AIVRgvU?t=800) — [H3] Outdated Security Practices - Key idea: AI includes unnecessary security attributes from old best practices - Evidence: "Every time you have a link that opens in underscore blank, it adds the dang no opener, no referer" #### ⏱️ [14:45](https://youtu.be/RWH4AIVRgvU?t=885) — [H2] Logo Extraction Skill - Key idea: Automate finding and downloading company/project logos - Evidence: "I needed to grab the logos for like LG and all these different tech that people have" #### ⏱️ [16:30](https://youtu.be/RWH4AIVRgvU?t=990) — [H2] Task Management with Dex - Key idea: File-based todo tracking works better than database systems for agents - Evidence: "What I like about Dex is it's just a JSON file and a CLI" #### ⏱️ [18:00](https://youtu.be/RWH4AIVRgvU?t=1080) — [H1] Video Generation Skills - Key idea: Technical video skills work well but don't replace design taste - Evidence: "These skills are not a replacement for having good taste" #### ⏱️ [21:15](https://youtu.be/RWH4AIVRgvU?t=1275) — [H3] Bootstrap Comparison - Key idea: Generic AI aesthetics become the new Bootstrap - Evidence: "The AI aesthetic is new bootstrap" #### ⏱️ [22:45](https://youtu.be/RWH4AIVRgvU?t=1365) — [H2] Marketing Skills Controversy - Key idea: Copywriting skills can improve text quality but raise authenticity concerns - Evidence: "For me, my copywriting has never been something I'm good at" #### ⏱️ [25:30](https://youtu.be/RWH4AIVRgvU?t=1530) — [H1] Authenticity vs Automation Debate - Key idea: Balance between improving writing and maintaining genuine communication - Evidence: "Being genuine and not having some little sneaky way to get around something" ## 📚 References - [Skills.sh](https://skills.sh) - [SVGL Logo Collection](https://svgl.app) - [Dex Task Manager](https://dextask.com) - [Sentry Skills Repository](https://github.com/getsentry) ## 🗣️ Paraphrase - Skills are markdown documents that teach AI agents how to perform specific tasks and workflows correctly - Technical skills work much better than creative ones because they focus on processes rather than subjective aesthetics - Custom skills tailored to your preferences produce better results than generic popular skills that everyone uses ## 📰 Newsletter **AI Skills Transform Development Workflows** The latest Syntax podcast explores how markdown-based "skills" are revolutionizing AI agent capabilities for developers. These simple text files describe workflows and best practices, effectively replacing rigid npm scripts with flexible, resumable processes. Key takeaways include focusing on technical skills over creative ones, customizing skills to your preferences rather than using generic templates, and avoiding the "AI aesthetic" that makes everything look the same. The hosts demonstrate practical skills for content workflows, CSS animations, HTML structure, and browser automation. This represents a significant shift toward more maintainable and adaptable development automation, where workflows can be version-controlled, shared, and resumed at any point. Resources: [Syntax Podcast](https://syntax.fm/), [Skills.sh](https://skills.sh), [Agent Browser](https://github.com/agent-browser) ## ✅ Action Items #### DevRel - Developer education: Create workshop on building custom AI skills for development workflows - Developer experience: Document best practices for technical vs creative skill usage - Community management: Curate quality skill repositories and discourage paid skills #### WordPress - Core: Develop WordPress-specific skills for theme development, plugin creation, and content management - Documentation: Create skills for generating proper WordPress documentation structure - Community: Share development workflow skills for WordPress contribution processes ## 🧪 Hypotheses - Custom technical skills produce more reliable results than generic creative skills - Skills-based workflows are more maintainable than rigid script-based automation - The proliferation of generic AI skills will create aesthetic homogenization similar to Bootstrap era - File-based task management integrates better with AI agents than database systems ### 📊 Methodology - Compare output quality between custom and generic skills across multiple projects - Measure workflow flexibility by testing interruption and resumption scenarios - Analyze aesthetic diversity in sites using popular vs custom design skills ### ❓ Questions - How can developers balance AI assistance with maintaining authentic voice and creativity? - What technical skills provide the highest return on investment for development workflows? - How will the skills ecosystem evolve to prevent commoditization of development practices? ### 🔮 Future Research - Skill versioning and dependency management systems - Integration patterns between skills and existing development toolchains - Metrics for measuring skill effectiveness and appropriateness ### 💡 Implications - Practice: Developers should focus on creating custom technical skills rather than using generic templates - Policy: Organizations may need guidelines around AI-generated content authenticity - Education: Development curriculum should include skill creation and customization - Funding: Investment in generic skill marketplaces may not be sustainable long-term ### 🧠 Learning Styles Assessment Reading level estimate: 10th grade #### 👀 Visual learners - Present: None in audio format - Improve: Skill template diagrams, workflow visualizations, before/after comparisons #### 🔊 Aural learners - Present: Full podcast discussion with examples - Improve: Skill demonstration audio walkthroughs #### 🗣️ Verbal learners - Present: Clear definitions, analogies to npm scripts and Bootstrap - Improve: Glossary of skill terminology, more technical comparisons #### 🧩 Kinesthetic learners - Present: Specific skill examples and implementation steps - Improve: Hands-on skill creation workshop, interactive skill builder #### 🧠 Logical learners - Present: Clear workflow comparisons, technical decision trees - Improve: Skill selection flowchart, effectiveness metrics #### 🧑‍🤝‍🧑 Social learners - Present: Two-host discussion format, community references - Improve: Skill sharing community guidelines, collaboration patterns #### 🧘‍♀️ Solitary learners - Present: Individual skill creation focus - Improve: Self-assessment checklist for skill quality #### 🌿 Naturalistic learners - Present: Organic workflow evolution concepts - Improve: Skills ecosystem analogies, natural development patterns ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear podcast structure with topic transitions - Improve: Transcript with proper headings and landmarks #### Keyboard navigation - Present: Standard podcast player controls - Improve: Timestamped navigation for topic jumping #### Contrast and readability - Present: N/A for audio content - Improve: High contrast transcript formatting #### Text resizing and reflow - Present: N/A for audio content - Improve: Responsive transcript layout #### Media and captions - Present: Full transcript available - Improve: Time-synced captions, topic summaries #### Forms and interactions - Present: Basic podcast interface - Improve: Accessible skill example forms ### 🌍 DEIB Assessment #### Cultural breadth - Present: English-language discussion - Improve: Examples from diverse development contexts, global skill sharing #### Inclusive language - Present: Technical focus with some casual language - Improve: Define technical jargon, avoid dismissive terms #### Neurodiversity support - Present: Clear topic structure - Improve: Content warnings for strong opinions, summary sections #### Representation - Present: Two experienced developers - Improve: Include perspectives from different experience levels #### Psychological safety - Present: Open disagreement and discussion - Improve: Acknowledge different development approaches are valid ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear progression from skill concepts to practical applications - Inductive strength: Examples support broader conclusions about skill effectiveness - Causal reasoning: Links between skill customization and output quality well established - Analogical strength: Bootstrap comparison effectively illustrates aesthetic homogenization risk #### Fallacies - Appeal to tradition: Dismissing AI-generated content without considering quality variations - False dichotomy: Presenting technical vs creative skills as completely separate categories #### Tone of voice - Overall tone: Conversational and opinionated with strong technical expertise, occasional dismissive language toward AI-generated content ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: Some dismissive language toward paid skills and generic AI content - Reverse victim/offender: No reversal patterns - Emotional cues: Strong opinions expressed but within normal technical discussion bounds ## 🎯 Conclusion Skills represent a significant evolution in development automation, moving from rigid scripts to flexible, markdown-based workflows. The key insight is that technical skills vastly outperform creative ones, and customization beats generic templates every time. Developers should focus on creating custom skills for their specific workflows while being cautious about over-relying on AI for creative or communication tasks that require authentic human voice. The skills ecosystem will likely mature toward specialized technical applications rather than generic creative templates. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] Custom skills outperform generic templates > [!quote] [Skills Skills Skills](https://www.youtube.com/watch?v=RWH4AIVRgvU) by [[Syntax]] via [[YouTube]]. Published 2024. Accessed 2024-12-19. > "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." Technical skills work better when customized to specific workflows rather than using popular generic versions. [view highlight](https://youtu.be/RWH4AIVRgvU?t=1275) #xref #articleseed ID:rw_001 ### [H2] Skills replace rigid automation scripts > [!quote] [Skills Skills Skills](https://www.youtube.com/watch?v=RWH4AIVRgvU) > "I often would have these scripts that would be very rigid and do things in a specific manner and something would change and it would just be broken." Skills provide flexible workflows that can adapt to changes and be resumed at any point. [view highlight](https://youtu.be/RWH4AIVRgvU?t=165) #xref ID:rw_002 --- ### 🔖 Atomic Split Pad (Zettel Candidates) Purpose: Promote reusable claims into Atomic notes. Split level: H4 #### [Z1] AI agents need constraints for good output - Technical skills with specific rules prevent poor default behaviors - Examples: CSS animation rules, HTML structure guidelines - Links: [[AI-Assistance]] [[Development-Workflows]] #### [Z2] File-based tools integrate better with AI - JSON files and CLIs are easier for agents to manipulate than databases - Version control and team sharing work naturally - Links: [[Task-Management]] [[Automation-Tools]] --- ### --- ## Full Transcript [00:00] Oh, welcome to syntax. Today we're going [00:02] to be talking about skills, skills, [00:04] skills. Can they pay your telephone [00:06] bills? We're going to be talking about [00:08] skills. All of these things in our repos [00:10] that are just markdown files that the AI [00:13] can use to go off and do stuff [00:15] correctly. So, Wes and I have each [00:17] brought four skills to the table. These [00:20] are skills that we really like to use in [00:22] our setups, and we're going to be [00:23] talking a little bit about what they are [00:25] and why. will be linking to them so you [00:27] can go ahead and install them if that's [00:30] what you are down with. My name is Scott [00:32] Tolinsky. I'm a developer from Denver [00:33] and with me as always is Wes Boss. [00:35] What's up, Wes? Hey, got some skills. [00:38] I'm excited to talk about this because [00:40] it's crazy to see that the landscape has [00:42] moved so [00:44] quickly into this like markdown [00:47] documents that describe capabilities for [00:49] an agent. And then I got a cool name [00:52] called skills and everyone is like [00:54] sharing them around, you know, like I [00:56] think there's a little bit of grifting [00:58] going on where where people just have [00:59] these like magic documents of text. [01:01] >> Yeah. If you're paying for a skill, [01:04] you're out of your mind. [01:04] >> Yeah. Have you ever [01:05] >> No. [01:06] >> Have you ever paid for a skill? [01:08] >> I bet I could sell a skill. [01:10] >> I bet you could sell a lot of things. [01:13] Yeah. A skill. My gosh. So, what we're [01:15] going to we're going to go through what [01:16] three or four each of our our favorite [01:19] skills, ones that we've written [01:21] ourselves and ones that are are existing [01:23] that you can use as well. [01:25] >> Do it. [01:26] >> Oh, I'm ready, Wes. I brought my S stack [01:28] and everything. So, you tell me. Uh, you [01:30] want to get your first skill out here? [01:33] >> Yeah. All right. So, I'm going to start [01:34] with a skill that I've I've built [01:36] myself. And I call this my hot tip [01:39] skill. And I find that and like maybe we [01:42] should describe this. A skill is a way [01:44] for you to extend the capability of an [01:48] agent and describe how something should [01:52] be done. And you will often have a [01:56] project or you'll you'll have global [01:57] skills, you'll have project local skills [02:00] that describe how to specifically do [02:02] something. And I find that a huge use [02:05] case for my skills is actually just [02:07] simply replacing [02:09] um what I call like like npm scripts or [02:12] pipeline scripts. Meaning that [02:14] >> I often would have these scripts that [02:16] would be very rigid and do things in a [02:18] specific manner. And I would spend a lot [02:21] of time working on these scripts making [02:22] them very rigid and then something would [02:25] change, something wouldn't be perfect or [02:27] I'd need to restart in the middle of [02:29] this thing and it it would just be [02:31] broken. So, one thing is whenever I post [02:33] a little short form video to Tik Tok, [02:36] Instagram, Twitter, whatever, I also put [02:38] them on my website at westboss.com/tips. [02:42] And the process of turning that into a [02:46] markdown document and listing the links [02:49] because I also like to list the links to [02:52] each of the platforms on there so I can [02:53] sort of have a home base for that tip [02:55] and then say like this is where I've [02:57] posted it in other places. here's the [02:59] stats on on all of the likes and stuff [03:02] across all the different social [03:03] networks. So, I used to have a very [03:05] rigid npm script that would collect them [03:08] all. It would figure them all out, you [03:12] know, and I had to make sure that I had [03:13] the exact URL or just the ID of the post [03:16] copied and then it would go off and [03:18] fetch them all and then bring them into [03:21] a single document and format them. And [03:23] in in this new case, I have what's [03:25] called like a hot tip skill. And what [03:29] that does [03:30] is basically just describes that whole [03:34] process and workflow in a single [03:37] markdown file. So what it does is all [03:40] right here here when to use the skill. [03:42] When a user asks to create a new tip or [03:44] edit an existing one, tips are short [03:45] form hot tips originally posted on [03:47] social media. And then it goes through [03:49] all the steps, right? Gather the [03:50] content. here is how to gather the [03:53] content, right? There is a script in the [03:55] in the website folder that you can run [03:57] or often it'll be like run this npx [03:59] command and that will go off and fetch [04:03] the the skill for you. Or often I if I [04:05] don't have the link to every social [04:08] network, I will ask it to go grab the [04:10] last it will know to just go grab the [04:12] last five posts from each network and [04:14] try to match it up. Even if the text [04:17] might not be exactly the same, an LLM is [04:19] very good at at looking at them being [04:21] like, "Oh, that's the same one, so I'll [04:23] grab the URL for that." Right? So, [04:24] gather the content, then it goes through [04:27] create the file. So, I have this like [04:28] kind of rigid markdown file that has [04:32] front matter. Um, it has different ways [04:35] to to format it all. So I have a [04:37] structure of how that should be created. [04:40] Formatting all the front matter, finding [04:42] the social media links and then um [04:44] quickly writing some body content. I I [04:47] do have another skill which is like [04:50] right in my voice and I have tried and [04:54] it always always is awful. Um [04:56] >> yeah, [04:56] >> it it I also don't think you should be [04:59] programmatically generating a whole [05:01] bunch of content for your blog. Nobody [05:03] wants to read that. Nobody cares about [05:06] that, you know. Nobody is is feeling so [05:08] blessed that they can read your [05:10] programmatically generated slop. Um, but [05:13] I do have some tips in there of like [05:15] like if I just like will type a whole [05:17] bunch of my random thoughts in there, [05:19] post a whole bunch of links and then say [05:21] like format this as um like a couple [05:25] paragraphs, I'll have a couple things in [05:26] there that say like don't don't do but [05:29] the but the real thing here is you know [05:32] like all those like chat GPT things. [05:36] >> Yeah, right. Yeah, I know. I hate that [05:38] stuff because it's so you can sniff it [05:40] out. Yeah. [05:41] >> Yes. That one's my favorite. I [05:42] absolutely love having very flexible [05:46] skills that can be picked up at any [05:48] point in the process rather than a very [05:51] rigid npm script that will almost [05:54] definitely break. [05:55] >> Yeah, I'm see I'm flexible with skills. [05:57] One of my skills here is the CSS motion [06:01] systems. I I made this and basically I [06:04] was tired of AI not necessarily [06:07] understanding how to use [06:10] uh motion and CSS correctly. So the [06:13] motion system skill has uh basically a [06:16] skill that gives some baseline rules and [06:20] then it also includes some references in [06:23] here. So referencing things like how to [06:25] use linear, the linear function in CSS [06:29] correctly, so that way you can get more [06:31] spring style really nice animations out [06:34] of CSS instead of the default easing and [06:36] BS or even like bezier curve stuff it [06:39] gives you. Uh there's a motion review [06:41] checklist. So like um does the motion [06:44] explain the state change? uh you know it [06:48] it even like getting into the technical [06:50] things like does it need to use [06:51] preferred reduce motion um is it [06:54] animating the properties that uh are [06:57] performant to animate like we're not [06:59] animating width or something like that [07:01] or background color um or is it [07:04] background color fine I think background [07:05] color might be fine [07:07] >> background color might be fine [07:08] >> I think so I do it [07:09] >> yeah some of them they're not uh it [07:12] depends to a degree but then it also [07:14] another thing I was like really annoy [07:16] with was like AI using view transitions [07:18] incorrectly. So, um this explains view [07:21] transitions and what I want to see out [07:23] of view transitions, but not only that, [07:25] uh transitioning only meaningfully [07:28] shared elements avoid [07:31] transitions of things that shouldn't be [07:32] transitioned and things like that. [07:34] >> Yeah, cuz one thing Opus loves to do is [07:36] they just add a little hover on [07:39] everything. You know, everything has a [07:41] little hover scale up effect. And like [07:44] those are the types of things that make [07:46] your website feel like and like [07:49] look like the same crap everybody else [07:51] is pumping out. So if you can actually [07:53] use your brain for a few seconds and [07:55] write some things that you find to make [07:58] a good website, whether it's like [08:00] animations, transitions, or just like [08:03] design principles that you may have, [08:05] right? Then you you can go a long way [08:09] making your stuff feel and look a lot [08:10] better. [08:11] >> Yeah. Yeah. I think that stuff needs to [08:12] be tuned. So, I I tuned it to my [08:14] sensibilities with my CSS motion [08:16] systems. [08:17] >> Yeah. Next one I have here is the agent [08:19] browser. This is probably one of the [08:22] more popular uh skills out there, and it [08:25] essentially describes how to use a [08:29] programmatic headless browser to an [08:31] agent. So, I know a lot of these tools [08:33] have built-in browsers. Um, but if you [08:36] are in a spot where you just need to [08:38] simply fire up a a headless browser that [08:43] exists on your system or if you want to [08:46] communicate with an existing browser on [08:49] your system. So, if you want it to use [08:51] like your existing Chrome or if you want [08:53] it to connect to [08:56] your like Slack um because this agent [08:59] browser will connect to any Electron [09:02] application via the Chrome debugging [09:04] protocol and it can I messaged Scott on [09:08] it the other day which was which was [09:10] really funny. It can take screenshots. [09:12] It can go into your Slack. It can do all [09:13] kinds of kind of neat stuff. So, the [09:16] agent browser is I I use it all the time [09:18] for for debugging, for scraping, you [09:22] know, firing up a a browser and grabbing [09:25] all the HTML, for testing things out. [09:27] Um, big fan of that one. [09:29] >> Yeah, sick. I I I use agent browser as [09:32] well, and I have that skill uh set up [09:34] for myself. I use it all the time. Um, [09:36] next one I have here is my HTML skill. [09:40] HTML, bro. There are so many [09:42] anti-atterns that AI loves to do with [09:44] HTML. So, I made my own skill that [09:49] leaned into the things that I reference [09:52] of a agents doing poorly in HTML. Like [09:56] for instance, use lists only when things [09:59] are actually a list. Like how many times [10:01] is it a uli and then an article in [10:04] there? Like brother, that's what the [10:06] article's for. You don't need a ul and [10:07] li around a bunch of articles. you just [10:09] don't. Um, so AI loves to add a lot of [10:13] extraneous HTML. [10:16] >> So just having like here are my rules [10:18] for adding this or that or whatever. [10:20] Buttons are not links, those types of [10:22] things. Um, bad div soup. Uh, clickable [10:25] non-interactive elements. Uh, those [10:27] types of things. And this one might be a [10:30] little overcooked in terms of just how [10:31] much text is in it. But you know what? I [10:33] I had so many annoyances with how um [10:37] agents tend to write HTML. So, I have [10:39] like an HTML skill that can uh clean up [10:42] some of this. Uh for me, I that's [10:45] something that I I definitely like uh [10:48] really need to lean lean on for to write [10:51] HTML. I'm not the type of person who's [10:53] going to let a stupid agent write a [10:56] bunch of HTML for me and I'm just going [10:58] to look at it and be like, "Yeah, that's [11:00] fine." But I say, "No, this sucks." Uh [11:04] >> so, yeah. [11:05] >> You know what's one that drives me mad? [11:07] This is probably more [11:09] the use case for a llinter than a skill, [11:12] but every time you have a link that [11:14] opens in a new like underscore blank, it [11:16] adds the dang no opener, no referer to [11:20] uh the like re. [11:22] >> Yeah. [11:23] >> And like that hasn't been necessary for [11:26] like five or six years. Um it was a best [11:29] practice previously because what would [11:31] happen is if you open like a link in a [11:34] new tab then the the website that you [11:37] open in the new tab would be able to in [11:40] some cases know about the refer like [11:42] where did you come from? Um but also in [11:44] some cases it would have access to like [11:46] the parent document and people are [11:48] always like that's a security issue and [11:50] like it's been fixed. The browsers have [11:52] all been patched. You haven't needed [11:53] that in a long long time and it still [11:56] has it every single time. [11:58] >> Yeah. Yeah. That's just how it goes. [12:01] >> Yeah. [12:01] >> I have one that I built called extract [12:04] logos. Um and this is so often I find [12:08] myself needing to [12:11] put a logo for either a software project [12:14] or for a company. Um I was doing a bunch [12:16] of remotion the other day and I needed [12:20] to programmatically download the logos. [12:22] I have um I'm working on my users.te [12:24] website. I needed to grab the logos for [12:26] like LG and like all these different [12:29] tech that people have and it's annoying [12:32] to have to find the logos in it. So, I [12:35] have all of these different resources, [12:36] you know, like there's a really good um [12:38] SVGL website which has all the like [12:42] >> logos. Um there's a couple really good [12:45] >> icon packs out there which will have a [12:47] bunch of logos in it. There's like I [12:48] don't know three or four different ways [12:50] that I will use to find good SVG logos [12:54] and I've just written those all into a [12:56] single thing. Um how to search for them, [12:58] how to download them, etc., etc. And now [13:01] every time I I want to say get me a logo [13:04] for something, then it it can it just go [13:07] off and grab it rather than like put [13:09] like a stupid like I asked it for a [13:10] YouTube logo the other day and it [13:12] literally just gave me like the triangle [13:14] unicode character. I was like that's not [13:16] it at all, you know? Give me the actual [13:18] YouTube logo. [13:20] >> Oh man. Yeah, that bugs me, too. Uh, [13:22] that's nice. I don't have this. I do use [13:24] that SVGL, but I could I I need logos [13:27] all the time for stuff. [13:28] >> Yeah, I'll publish this one. This one's [13:29] just in in a couple projects that I [13:32] have, but I'll I'll publish it. [13:34] >> Sick. My next one is my decks task. I [13:37] use decks for to-do tracking uh amongst [13:41] agents. And this skill is really just uh [13:45] you know what I like about Dex compared [13:46] to something like beads. Beads has like [13:49] git hooks and it does all this crazy [13:52] stuff with the database and syncing that [13:54] database. And uh what I like about Dex [13:56] is it's just a JSON file and a CLI and [13:59] it's easy easy for this thing to use. [14:01] So, I have this Dex skill that basically [14:04] just says, "All right, here are all of [14:06] the things you do in Dex. Here's how to [14:09] get links or here's how to get to tasks. [14:11] Here's how to um update them. Here's how [14:14] to have one be a child of another one. [14:16] Here's how to know what's next to work [14:18] on. All that stuff." And this is the uh [14:20] I believe the official uh Dex skill. But [14:23] for me, using to-dos that aren't locked [14:27] into the harness and that are written to [14:30] an actual file um is something that I [14:32] really like require when any using any [14:35] of this stuff because that file can be [14:37] committed. Your team can use it. It's [14:39] not ethereal. So for me, I like Dex. Um [14:43] and I like this Dex skill to make sure [14:46] that my agents are planning correctly [14:48] and using tasks and to-dos. Next one I'm [14:51] going to do like a general category and [14:54] that is the remotion and then recently [14:56] another one released was called [14:57] hyperframes. It's from hey genen. [14:59] Essentially these are two skills that [15:02] will use underlying tech um to [15:07] programmatically make video. Um and that [15:09] was really cool. So Remotion, we we had [15:12] Johnny on the on the podcast years ago [15:14] talking about Remotion, which is [15:16] essentially just like creating videos [15:19] programmatically in React. Um, and kind [15:22] of a frustrating part of Remotion is [15:24] that you're just you have to type a lot [15:26] and it's it's way faster to just use an [15:28] actual editor. But now when they rolled [15:31] out the Remotion skill of like here are [15:34] the best practices, here's how to do [15:35] audio, here's how to do video, here's [15:37] how to do animation, here's some really [15:39] good examples, then all of a sudden it [15:42] became a lot easier to programmatically [15:45] make video. Um, and the Remotion skill [15:48] and then the other one, the hyperframe [15:50] skill are very good at basically just [15:53] showing you how to technically do it. [15:56] And I think a lot of people confuse [15:59] these skills with like technically how [16:03] to do it and some magic box that is [16:07] going to make a beautiful amazing uh [16:10] motion designers are dead type of thing. [16:13] That's not what these things are. And [16:15] and people just think that is just as [16:17] they don't even like look at the text. [16:19] It's just a magic box that makes the [16:21] most beautiful things ever. These skills [16:23] are not a replacement for [16:26] having good taste or or like actually I [16:29] hate when people say that. It's it's a [16:31] meme now, but likeing [16:32] >> they're not a replacement for like when [16:34] we get into a lot of this design stuff, [16:37] >> they they can be for good practices that [16:39] make good design, you know, um vertical [16:42] rhythm, sizing, padding, dos and don'ts, [16:46] common things. Those are those are [16:48] really good. Some of the the highest [16:49] skills on skills.sh SHR um anthropics [16:53] front-end design and like best practices [16:55] for design that will will kick out like [16:58] decent looking things, but it's not [17:01] going to magically make something that [17:02] is absolutely amazing. And then when you [17:04] get a little bit further into like [17:05] motion design, it yeah, it can it has a [17:09] couple templates of like flipping around [17:10] and whatever, but it's not going to make [17:11] something [17:12] >> absolutely nuts that is that is actually [17:15] good at the end of the day. So that's [17:16] not what I'm saying here. And what I'm [17:18] saying is that like if you know what you [17:20] want and you have like a bit of a design [17:23] eye and or or you're just making some [17:26] slide video, then these are fantastic to [17:29] technically make videos very quickly. [17:32] Yeah, I find the technical stuff to be a [17:34] much better use case uh for installing [17:37] someone else's skill because if it's [17:40] technical, there's like this is the but [17:42] if it comes down to matters of taste, [17:44] aesthetics, or whatever, if you install [17:47] the good-looking website skill from [17:49] skills.sh that has 10 million downloads [17:52] and you run it, you're just getting the [17:53] same stuff that everybody else gets. [17:55] >> Same stuff that everybody else gets. [17:56] Yeah. [17:56] >> Yeah. Yeah. So again, [17:58] >> it looks good until you realize that [18:01] >> everybody else has it and [18:03] >> it's bootstrap. It's new bootstrap is [18:04] really what it is. The the AI aesthetic [18:06] is new bootstrap. Yeah. [18:08] >> And it's like not actually like a good [18:10] UX for a lot of the cases. Like the AI [18:13] doesn't [18:14] >> in many cases doesn't understand like [18:16] what good usability is. [18:18] >> It can just keep adding labels and drop [18:20] downs to things. [18:21] >> Yeah. Yeah. Yeah. How many labels can we [18:24] stuff into this? Uh, man, that label [18:26] thing is really just like it's like [18:28] what? Like a political cartoon where [18:30] everything is labeled, you know, like [18:32] because you're you're Have you ever seen [18:34] any of those, Wes? [18:35] >> There's like uh some Reddits that like [18:37] point out bad political cartoons and [18:38] they're just like hacky stuff where [18:40] everything is labeled individually. It's [18:42] all just like, [18:43] >> oh, you can't get your point across [18:46] well, so you you have to label [18:47] everything. Your metaphors aren't good. [18:48] Um, okay, enough of that. Next thing [18:51] that I have here is a skill that I got [18:55] from Corey Haynes. He has an entire repo [19:00] full of these things called marketing [19:02] skills. And there's a whole lot in here. [19:05] Um there when I see stuff like this, I'm [19:07] like, "This is great. I would want all [19:08] this stuff but I am cautious about just [19:11] yolo adding it all to my skills because [19:14] then you got all these skills to [19:16] maintain or or know what they do or they [19:19] might get doing something you don't want [19:20] them to do. So I pick and choose what I [19:24] want out of here and the ones that I [19:26] wanted to talk about is stuff that I'm [19:28] bad at which is copywriting. So, there's [19:30] a copywriting skill in this marketing [19:33] skills bundle that I have found to be [19:36] very nice. For me, my copywriting has [19:40] never been something I'm good at. I [19:41] don't I'm not good at selling my stuff. [19:44] So, for me, uh things like spec spec [19:49] specificity, [19:51] I just genuinely failed saying it. [19:54] Specificity over vagueness in vague. [19:57] Save time on your workflow. Specific. [19:59] cut your weekly reporting from 4 hours [20:01] to 15 minutes. Like, these are things [20:03] that I just straight up would not be [20:05] good at. And I think this when I had [20:07] this run over a landing page I made, I [20:10] found the results to be definitely much [20:13] better than what I wrote myself. So, um, [20:16] that said, I'm sure marketers would look [20:18] at this and be like, just talks, you [20:21] know, but that's how [20:22] >> I can tell you right now, marketing [20:24] skills may work for like a week, but as [20:28] soon as somebody puts this, like as soon [20:30] as people figure out that something [20:32] works, like if this even works, then [20:35] >> works for what though? [20:36] >> It stops working. [20:37] >> It makes better text is what it does. [20:39] Better English for me, better CTAs. CTAs [20:42] that aren't just like click here, you [20:44] know? Oh yeah. I don't know. I I feel [20:47] really weird about [20:50] AI using AI to write stuff and mostly [20:54] because [20:55] >> like people send me emails that are just [20:57] like expanded with AI and it's like or [21:02] like like fake like they're like, "Oh, I [21:04] love your podcast about X, Y, and Z." [21:06] And they they'll mention something like [21:07] in the middle of it and it's just like [21:10] it's not going to work. Like this is not [21:13] not working. [21:14] And you're not going to be able to like [21:16] marketing, you're not going to be able [21:18] to have some machine that is amazing at [21:19] marketing. You're either spamming people [21:22] or you're just like doing the same stuff [21:24] that [21:25] >> absolutely everybody else does. Like I [21:26] when if I see a business and the caption [21:28] is clearly written with AI, [21:30] >> like I immediately think worse of that [21:32] business [21:33] >> because [21:34] >> I think for me, Wes, what it's [21:36] >> what it's doing is it's it's it's not [21:38] doing any marketing for me. Uh, English [21:40] is not my strong suit. And it's taking [21:43] those things and and smoothing out the [21:45] edges like this. This CTA is bad, but [21:47] I'm not going to have it write [21:50] paragraphs of emails or something like [21:52] that. Like, I can't. Yeah, [21:54] >> I don't know. I I I get it. But also, I [21:57] this whole generating text with it to to [22:01] try to seem genuine. I don't know. I [22:03] like not not what you're doing, but I [22:05] just I just feel [22:06] >> No, you couldn't. No. Rip me to shreds. [22:08] Do it. [22:08] >> Yeah. just holding up here. [22:10] >> Not not because I'm like on a high [22:12] horse, simply because I know that it [22:14] just will not work. If you're trying to [22:16] like get something across, [22:19] >> you have to hone that skill and you have [22:20] to get better at it, you know? And like [22:22] I maybe a better case would be like, [22:24] help me, help me extract everything out [22:27] of me, you know, like what are the pain [22:28] points of this thing? What am I trying [22:30] to solve here? What are these questions? [22:32] And then [22:33] >> oh, it sort of extracted all this out of [22:36] me. Well, that was really um interesting [22:39] from that high horse that you're on. I'm [22:40] surprised I could hear you. That horse [22:43] is so giant. [22:46] >> I I just Everybody is so fake these [22:48] days. And I think that [22:50] >> being genuine and like [22:53] not having some little sneaky way to get [22:56] around something is is going to be the [22:58] the path forward. But no, I I don't. So, [23:02] I'm being mean to you, but I I'm more at [23:05] the whole [23:06] >> industry in general because I think [23:10] everybody's just creating a whole bunch [23:11] of garbage and nobody nobody's paying [23:13] attention to anything anymore because [23:15] there's just so much stuff out there. [23:17] >> Yeah, I hear you. [23:19] >> Yes. [23:20] >> Yes. Yes. Yes. Yes. I hear you. I lament [23:22] I lament all of this. That's for sure. [23:26] >> That's your four. I did my four had the [23:29] hot tips agent browser extract logos and [23:31] reotion. I think the last thing I'll say [23:34] is just if you ever are going back and [23:36] forth in a chat with something and you [23:39] end up with something how you like it, [23:43] whether that is a process for how to [23:45] tackle something or whether that is how [23:48] to write your CSS in a specific way [23:50] because you said no, don't use this, [23:52] don't use this, use it in this way. Make [23:54] sure you're always using REM or M or [23:56] whatever your preferences is. Stop and [23:58] say, "Hey, like a lot of these skills [24:00] are not written by hand by people. [24:01] They're simply just say, "Hey, now take [24:03] this chat and distill it down into a [24:06] skill and it will create a skill file [24:08] for you." [24:09] >> Yeah, I think actually Century has a [24:11] really good skills writer. Century has a [24:14] uh speaking of Century, [24:14] Centry.io/sintax, [24:17] signup, get two months for free. Century [24:19] actually has their skills published as [24:21] well on their GitHub. I'll link those [24:23] up. In fact, one of their skills that I [24:25] found to be very good that I moved into [24:27] mine was the skill writer skill. So, I [24:30] use their skill writer as well as their [24:32] code simplifier skill because um who [24:34] knows code better than Sentry. So, check [24:36] it out at uh century.io and I'll link [24:39] their skills up in this episode as well. [24:47] >> PR writer find oh a poll request writer. [24:51] That's a good one. [24:53] >> See, because got you cover. [24:54] >> Sometimes I just distill mine into like [24:56] don't yap, [24:58] >> you know? Yeah. [24:58] >> Like whenever I have to say, can you [25:00] write some documentation on this? Like [25:02] it just goes off and just makes so much [25:05] text. And it's like no, [25:07] >> keep it succinct, [25:08] >> keep it tur, you know, don't add a whole [25:11] bunch of like 6,000 headings and [25:14] whatnot. I feel like maybe that's my [25:15] whole my whole shtick here is there just [25:18] too much text, too much stuff in this [25:20] world, you know? Everything needs to be [25:22] a bit more tur. [25:23] >> Yeah, I know. I I I have all my rules [25:25] files telling it to like Yeah, keep it [25:28] keep it slim. Come on. [25:30] >> All right, we'll keep this podcast slim. [25:31] Thanks for tuning in. Peace. Peace.  📄 **Full text:** ![[Full Document Contents/Articles/Skills Skills Skills.md|Skills Skills Skills by YouTube]] ## Highlights - 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. ([View Highlight](https://read.readwise.io/read/01krbq8f32spggq2y1gx7vtsv6)) - Tags: 👻 ai highlighted - 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 ([View Highlight](https://read.readwise.io/read/01krbq8f3qqfrsg6p2qyw8hykw)) - Tags: 👻 ai highlighted - 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 ([View Highlight](https://read.readwise.io/read/01krbq8f4gbg9v3h53w4x95xtd)) - Tags: 👻 ai highlighted - 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 ([View Highlight](https://read.readwise.io/read/01krbq8f5r2p0d719gbf7y77b6)) - Tags: 👻 ai highlighted - 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. Yeah. So again, >> it looks good until you realize that ([View Highlight](https://read.readwise.io/read/01krbq8f75tkqwa3w9xkvtqjn3)) - Tags: 👻 ai highlighted