How I Automate Livewire 4 Development with Custom AI Skills

Hello friends, Tony here. Welcome. In this video, I'm going to work with Laravel and Lewire and with specifically with skills. Right now I have prepared a project which is right here and let me just open this. So see it did YouTube and I'm going to open with VS Code. Okay. First I'm going to show you if if we go to agents and we have some skills by default with Laravel. We have flax UI we have fortify Laravel best practices live wire best and so on. Let's see this live wire because here I wanted to point something. If we scroll first we see creating components and we have a single file component sfc default in version 4 creates resources views inside the resources views components and we have an example with create post-post which I don't like this create dash post and the command is make live wire create post if we search Here if we go to live wire documentation and let's see for example components here we have examples with post.create create which is going to create let's zoom it also for you it's going to create the component inside the resources views components then post directory and for example if you want a a component for create a component for edit for uh view and so on I think is more organized in this way anyway so here we have this kind of uh suggestion also the same for the full page MFC FC and class-based component. Then if you scroll down, we have here also check the config / livewire.php. But here we don't have inside the config. We don't have the livewire by default. If we want, yeah, we can open the terminal and run the PHP artisan vendor publish and search for the live wire. And yeah, we can add the live wire. And let's turn also the composer on dev. But by default we don't have here. And I think we need if we create a project with live wire kit, the labware needs to be here because the AI needs to see the configuration file for the live wire. Anyway, what I want to do in this video is to create a component. So let's come here and I'm going to open the vibe from Mai. Okay. So if I say which skills do you have? Okay. I'm going to ask which skills we have here. And I have installed some skills from the Matt PCO. I have caveman diagnosine skills. Flax UI fortify grill me. I've used this in a video uh grill with dogs improve code base level best practices lay development testing ts development tdd issues to prd vibe and write a scale and now I'm going to ask a simple prompt create an example uh page which is going to point to / example and I'm going to set a use live wire component just like this so let's say create an example page the route will be slash example and the page will be liveware component. Okay. So here create an example page. The route will be / example and the page will be liveware component. Good. I'm going to say yes. And I'm going to change this to auto approve. Loaded the skill liveware development. Very good. and also running the PHP make live wire pages example because I said we need the page will be liveware component okay let's see now okay so the example page has been created successfully at /example and created the live wire component using PHP make live wire example class has changed added the route and let's go here let's see the view inside the pages we don't have we have the live wire and here we have the example okay if I go to routes here's the web we have get example and then we have this example class which is okay is working so if I navigate the slash example hit enter yeah the hot enter is property name on node because has used the app layout and inside the sidebar is going to check for the authenticated username but the idea is not here is here that I wanted to have a full page component but we don't have a full page component for that what I'm going to do I'm going to create in the agent scales I'm going to create a new skill let's name it live warrior d component and dash creator and then here we're going to create skill.md file and I have prepare a skill using the cloud code here is the skill livewire dashcreator okay and here is the skill let me just do it like this so create a live wire larire for components with guidelines and so on and I'm not going to show you the what is inside but you can create with the cloud code or with the GPT5 if you want to do something like this and also in here we I'm going to create a references directory and in this one we have example examples MD file which I have prepared also So there some examples here. So for example, SF sfc with tailwind light. Here is going to be an example like this. Okay, I'm going to save. Let's save also this one. Let's open here. I'm going to stop and start again the vibe. And now if I ask which skills do you have? We're going to see also we have the live wire component creator. And now I'm going to use this live wire component creator to create the same almost the same prompt. Yeah, just let's leave it the same prompt. So create an example page. The route will be /ample but now not /ample. Let's change to be custom just custom here. and also create a custom page. But we are going to use that skill. So / livewire component creator and I'm going to hit enter. And it's going to ask us which component format would you like? SFC, MFC or class. I'm going to choose SFC and component full page. So will this component be used as a full page? I'm going to say yes. Which styling approach will you use? Flax UI. I'm going to choose styling CSS. Do you need dark mode support? I'm Which layout should this full page component use? Default one or use new one? I'm going to say default one. I'm going to change this to auto approve. And we have everything is done. Let's see. Let's close this. Close this. Go to roads. We have route layer wire custom pages custom. And let's go to custom here because yeah, we have the layout layouts app and title custom page which is not going to be like this needs to be in here. And because we we are using layouts up this will be protected. So the live wire will be in here. But anyway now if I go not the example we need to go to custom. Let's go and sign up. And here is the custom page. Okay. The idea was if I wanted something like this here and uh we can go further. So for example, if we use the default layouts app, the route will needs to be inside the authenticated middleware. But yeah the idea that's the idea if I want to create the live wire component we need to ask which type of components the user needs also the layout also if the component is a full page component and the design you can add more question but I think uh I just wanted to give you the idea I'm going to show you just the examples here with the scroll down slowly so you can see and take an idea of yourself what I have here. Step two, resolve file path. Step three, generate the artisan command. Generate code files styling rules. Step five, route registration and layout full page only. So here we have an example and also with route model binding example. But yeah, we need to update this to be inside here. Anyway, this is the example here also the references examples. Let's show you. So, we have bunch of them. We have the sfc tailwind light, sfc tailwind dark, sfc flaxi light dark and so on. But here is for example this sfc tit light class component and then class bg white and this is for dark class component and then use the bg white and also dark bg gray 800 as you can see. Okay friends and that's it all about this video what I wanted to show you. Now if you like such a videos don't forget to subscribe and share with your friends.