skills.rest
jonaaix
jonaaixCOMMUNITY
Explore all skills by this author →
GitHub

livewire-development

Create and optimize Livewire components in Laravel projects.

1|Updated Apr 30, 2026
Search Tags:#debugging#php#component#laravel#livewire#islands#wire-model
One-click install
npx skills add https://github.com/jonaaix/laravel-livewire-base --skill livewire-development-jonaaix
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: livewire-development
Source: https://github.com/jonaaix/laravel-livewire-base/tree/main/.claude/skills/livewire-development
Command: npx skills add https://github.com/jonaaix/laravel-livewire-base --skill livewire-development-jonaaix

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Livewire development often demands clear guidance for component creation, debugging reactivity, and performance optimization within Laravel projects.

Core Features & Use Cases

  • Scaffold and convert Livewire components across SFC, MFC, and class-based formats.
  • Debug reactivity issues, implement real-time validations, and manage islands and deferred loading.
  • Support migration tasks and performance tuning for Livewire 4, aligning with project conventions.

Quick Start

Ask me to scaffold a Livewire component named "Example" and wire up a basic interaction.

Frequently Asked Questions about livewire-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a Livewire component across different formats in Laravel?▼

You can scaffold Livewire components in Single File Component (SFC), Multi-File Component (MFC), or class-based formats using guided workflows that ensure correct wiring of interactivity within your Laravel project.

How does wire:model work with Livewire islands and deferred loading?▼

wire:model binds data to manage component reactivity, and you can optimize it using Livewire islands and deferred loading to control rendering performance within your Laravel application.

What is the best way to debug reactivity and performance issues in Livewire 4?▼

Debugging reactivity and performance issues in Livewire 4 involves using guided workflows to check wire:model interactions, implement real-time validations, and manage islands for optimized loading.

Can I migrate existing Livewire components to Livewire 4 conventions?▼

Yes, you can migrate existing components to Livewire 4 conventions by following specific migration and performance tuning workflows that align your project with updated component formats and directives.

Does Livewire support integrating JavaScript hooks and interceptors with wire:click?▼

Livewire supports integrating JavaScript hooks and interceptors with wire:click directives to extend component interactivity and manage complex client-side behaviors within Laravel projects.

Related Skills

Explore More Software Engineering Skills→
bmadiganbmadigan
1

laravel-feature

Automates Laravel feature scaffolding with TDD-driven models, migrations, factories, tests, validation, and Livewire components.

Community
Advanced
elab-developmentelab-development

fluxui-development

Create Flux UI components in Laravel Blade and Livewire workflows.

Official
Basic
sasabajicsasabajic
1

laravel-frontend

Enforce Laravel frontend best practices for Blade, Livewire, Inertia.js, Vite, Tailwind CSS, and Alpine.js.

Community
Intermediate
MicrockMicrock
322

convex-realtime

Synchronize reactive user interfaces with Convex real-time queries.

Community
Advanced