Claude Code Skills are the Future of Frontend

All right, I'm going to show you the future of front-end development. This is so amazingly cool. Check this out. So, let's say you have this gallery landing page for like a photographer or something. Now, I use the front-end developer skill in Cloud Code to oneshot this. It's a little bit laggy. My computer's running a bunch of stuff right now, but nonetheless, pretty cool. Nice. Whatever. Now, it does have a slight hover effect. Now, let's say, for instance, you want to have something that's like a 3JS shader effect that's applied to this. Maybe something like this, a wobble effect. Maybe a wave effect of some sort. Maybe a chromatic RGB split effect. Now, I'm clicking this little toggle menu up here that I had Claude built to showcase the skill that I'm going to show you how to create and how I made it. So, this is really awesome because if you're working on any project, you know that there's certain things that you use throughout many different projects. maybe like some type of cool shader effect on hover, right? So, I'm going to show you how this works. So, all I did initially to actually create the skill is I didn't even create the skill myself. I told Claude Code that I wanted to create a skill for 3JSbased hover effects. And then I told it to integrate different options so I can different modes like the RGB split, a wave effect, a distortion, whatever. And it kind of just came up with four on its own essentially. And after it built it, it integrated the skill and there I told it to include code examples and use 3JS etc. And it just built the skill. So the skill in action actually looks like this. So if I type in forward slash, you can see it right there. It's the top one. Three shader hover. All right. So if I hit tab, then I can go ahead and specify the file or the div element or the image that I want this, you know, effect applied to. In this case, it lives in um uh index2. html. Apply this effect to all of the gallery images. Now, what's going to happen before it does that, it's going to prompt me because that's how the skill has been set up with a few different questions. Now, here it goes. It says, "Now, let me ask the configuration questions. " Okay, so which shader hover effect do you want? And by the way, I'm using the CLI. You can use the Cloud Code desktop app and it'll do the same thing. It'll give you a prettier UI actually. Um, we can choose from distortion, wave, chromatic, aberration. Okay. So, if we select that, then it's going to, you know, further prompt us. All right. Do we want it to be subtle, medium, or strong? Let's do strong just so we can really see it. And how should this affect animate in and out? Smooth, snappy, uh, languid, or just type something. Okay. So, let's just do languid. All right. Are you ready to submit? Submit answers. All right. So now what it's going to do is it's going to take the context of that code base and all 15 images and it's just simply going to apply it based on the settings that I specified. Now what's really cool is that you can see here it says chromatic aberration strong intensity language animation. This is a vanilla HTML project so I'll use vanillajs so it has the context of whatever code base you're working on. All right so remember index two this is the first one I showed you. There's no 3JS effects on this one. All right. And now with it finished, there we go. We got our intense aberration effect with the RGB split hover. So, what's really super cool about this is when you first build a skill, it's actually an ongoing process because depending on the development environment, the use case, there may be issues it runs into. So, what you do is when you use your skill, you start to refine it and build it, you start to make it even better. Um, you can add different code examples and reference files. And so this is just kind of the tip of the iceberg. This is what I think is really going to be the future of front of development because you're going to have basically a Swiss army knife of different skills that are connected to resources and assets where now you know in the past you had before generative AI we had to learn like we had to go to Stack Overflow code pen try to figure out how to you know adjust the shader language in order to understand this stuff learn how to use 3JS. I mean, now it's going to be a situation where it's a pointand-click situation where, you know, you have some type of UI animation perhaps or an effect like this perhaps and it will just integrate it. So, very exciting times coming up. Major industry shakeups that, you know, I'm personally trying to stay ahead of. It's so difficult because things change so much. But definitely check out the newly revamped designcourse. com where I'm going to be covering this stuff and way more along with the 30-day UI AI enabled challenge. Check out the links here. I'm going to be covering a lot more of this stuff. I will see you soon and goodbye.