Supercharge OpenCode with Custom Skills: Livewire Full Page Components

Tony Xhepa| 00:09:58|Apr 11, 2026

Chapters7

Host explains choosing full page components over standard Livewire components and sets up an example project.

Tony Xhepa demonstrates using OpenCode AI-assisted skills to scaffold Laravel Livewire full-page components quickly and cleanly.

Summary

Tony Xhepa shows how to leverage OpenCode and a custom AI skill to generate Laravel Livewire full-page components as direct routes. He starts by noting that Livewire supports full-page components routed via route:livewire, and then demonstrates creating a demo using a prepped Laravel project. In the workflow, Tony switches to OpenCode, tweaks the model, and uses an AI-created skill folder (skills/livewire-pages-scale) to generate a full-page task flow (index, create) inside resources/views/pages and routes/web.php. He explains the difference between traditional Livewire page components and full-page components, opting for the latter to streamline page-driven UI. The video shows how the AI-generated pages wire up models like Post and Task, migrations, and blade views without needing the usual single-file or multi-file Livewire components. Throughout, Tony emphasizes that the AI skill makes it possible to create full-page routes such as /tasks with a layout that loads by default, and he demonstrates adding sidebar navigation to access the new pages. He wraps up by noting the OpenCode configuration path (skills/livewire-pages-scale) and encourages viewers to try similar AI-assisted scaffolding for faster prototyping. The practical takeaway is a repeatable method to spin up full-page Livewire routes with minimal manual wiring, using the OpenCode AI skill inside a Laravel project.

Key Takeaways

Using OpenCode AI skills, you can scaffold a full-page Livewire route with a single command, creating pages/task index and pages/task/create automatically.
The AI-generated workflow creates a complete Laravel resource-like flow (migration, model, index and create pages) under resources/views/pages, and updates routes/web.php accordingly.
Full-page Livewire components route directly via route:livewire, enabling page-based navigation without traditional single/multi-file component handling.
OpenCode's skills directory (skills/livewire-pages-scale) contains the templates used to generate the entire page-driven UI, streamlining prototyping.
Tony demonstrates adding a sidebar link to /tasks, showing how the new pages integrate with existing layout and navigation.
The approach favors page components for rapid demos and AI-assisted scaffolding over conventional Livewire component patterns for certain workflows.

Who Is This For?

Essential viewing for Laravel developers who want to accelerate their prototyping with Livewire full-page components and AI-assisted scaffolding inside OpenCode.

Notable Quotes

"components can be routed directly as a full page using route livewire"

— Tony notes the core concept of routing full-page Livewire components directly.

"I prefer this way to create a demo"

— Tony expresses his preference for the full-page components approach for demos.

"create a full grat for post using the live wire for full page components"

— Demonstrates the specific AI-generated command to scaffold a full-page Post flow.

"it's not going to work with them"

— He explains initial confusion trying to use AI with pages vs full-page components.

"read the model post and globe resources views pages to see the matches"

— He describes how the AI-generated files align with the Laravel structure.

Questions This Video Answers

How do I route a full-page Livewire component in Laravel via route:livewire?
Can OpenCode AI skills generate a complete 'posts' or 'tasks' page flow with migrations and blades?
What are the differences between Livewire single-file components and full-page components for rapid prototyping?
How do I integrate AI-generated pages into an existing Laravel app and sidebar navigation?

Laravel LivewireLivewire Full Page ComponentsOpenCode AI skillsAI-assisted developmentLaravel routingPages vs componentsOpenCode configuration

Full Transcript

Hello friends, Tony here. Welcome. You know when I want to work with live wire and I want to create a crow using the AI in many times I want to create a craft with the livewire page components. And if you go to live wire documentation we have components here and we have this uh page components. So components can be routed directly as a full page using route livewire and I prefer this way to create a demo. And yeah also we have a section here for pages. But when we work with AI and if we say to create a full craft using pages or using a full page components it's not going to understand. So let me just come here and I have prepared application which is Laravel with live wire empty project just with a starter kit. So if I come here and I'm going to open the open code I'm going to use with open code and let's change the model for now. I'm going to choose uh big pickle which is a default one. So let's say create a full grat for post using the live wire for full page components. Okay. So create a full grat for post using the live wire for full page components. And if I say enter, we're going to see it's not going to work with them. Yeah. Skill liveware development. Because if I open the agents, we have live wire development. And if you go to skill, let's close this. And I'm going to submit this one. You can see we have a basic usage creating components. We have single file component. We have multi-file component. We have class-based component which is version three style and with namespace but just specifying here the name space and this is a class component. Now also if we scroll down we have here the component format single file. I'm going to zoom out just because it's going to look more better. We have a single file here multifile class based and view based. View paste is inside the resources views live wire and for example create post but we need another one which is a full page components and if we scroll down we don't have but we have only the the single file multifile class based and view based. So if I see here has created so created the post model with migration then created a post list live component and if I come here scroll down to resources views pages nothing. If I go up and we have models, post model. Okay, so I added the post resources live wire. We have create post, edit post, which is okay, but I don't prefer this way. I want the same we have here. So we have pages, we have the out and yeah if we want we can say refer to these pages but I like to just say use a full page components and directly to work with that. Now let's see yeah run the migration now create a default CR. So if we navigate to this one without the S. So just copy that and come here paste it. Here we have post. No post yet. Okay, we can go and the design is out. So if I open another tab and just run the composer rundev to see. Yeah, again the design is not very good. But anyway if I say create post we have validation. So post created successfully. Everything works. We have also the edit but I don't prefer to use the live wire component. I prefer to have page components inside the pages for that. And here inside the open code only for open code I have added skills directory inside the skills the lab wire-pages. And here we have a skill and this skill is created by the AI is created by the cloud AI. I'm going to uncomment because I have comment this. So let's select all and uncomment now. And this yeah this is a liveware for full page route components. I'm going to save. And now let's go back. Come here and open again the or sorry here we have the open composer and dev but let's open this one. I'm going to close and I'm going to open again the open code. Okay. So now I'm going to say create full grat for tasks and I'm going to say to use the this live wire pages scale create a full grat for tasks using the Okay. And then I'm going to say use the live wire pages scale. I'm going to hit enter. And let's see. So you can see skill live web pages. Okay. Read the model post and globe resources views pages to see the matches. Okay. So create a task migration. Oh, very good. And then it's going to create pages task index pages task create where create the task model and I'm going to open back the visual studio code and here we have pages okay so create the task model with vable title description and is completed then it's going to create the index blade php the list task Read the resources views pages settings. It's going to see how to proceed. And then we have pages task here which right now is going to create the file. First make the deer and then yeah create task index which is a full page also using here the layout layout app. Okay, but it's not necessary because it's going to load by default adding the routes in the web PHP. So let's go to routes webph and we have tasks using the pages look how good pages task index because here say live/ post and then pages post but we don't have this for that we have this underline error and done so created successfully we are going to see if we come here you have page just post index you can see we don't have but if I go to tasks yeah now what I want is to come here and just say add a link for tasks on the sidebar Okay. So added also the link. Here is the link. Right now we don't have any task. We can go to tasks. If I say save, we have validation. Let's not this one ready. We can edit and it's going to work very good. But the idea was just when I want to create a full page component, I just want to say that the AI create that and it's going to create and I achieved that by creating skill in the open code. If you go to dot let's come here open a new tab and I'm going to zoom it just see the in the config open code and here we have if I say ls we have this uh skills so ls-la we have here skills and if I see the skills we have here the livewire pages scale And if I say dash la, we have only the skill MD which is this one. Okay friends, that's it. What I wanted to show you in this video how I use this skill in open code when I want to create liveware for full page components. If you like such a videos, don't forget to subscribe to my channel, like the video and I'm going to see you in the next video. All the best and see you there.