spatie avatar

Livewire Development

Handles Livewire 4 component development with awareness of the shift to single-file components by default and the new islands and async action patterns. Knows about wire directives, the View Transitions API changes, and the updated JavaScript hooks like interceptMessage. Good for when you're building reactive Laravel UIs and need someone who gets that wire:model isn't real-time by default anymore and wire:scroll got renamed. It'll remind you about wire:key in loops and knows the difference between single-file, multi-file, and class-based component formats. Treats Livewire components like mini HTTP endpoints, which is the right mental model for validation and authorization.

skills.sh installs
608
GitHub stars
647
last updated
Aug 21, 2026

Install

$ npx -y skills add spatie/freek.dev --skill livewire-development --agent claude-code

Installs into .claude/skills of the current project.

Files

Livewire Development

When to Apply

Activate this skill when:

  • Creating or modifying Livewire components
  • Using wire: directives (model, click, loading, sort, intersect)
  • Implementing islands or async actions
  • Writing Livewire component tests

Documentation

Use search-docs for detailed Livewire 4 patterns and documentation.

Basic Usage

Creating Components

Single-file component (default in v4)

{{ $assist->artisanCommand('make:livewire create-post') }}

Multi-file component

{{ $assist->artisanCommand('make:livewire create-post --mfc') }}

Class-based component (v3 style)

{{ $assist->artisanCommand('make:livewire create-post --class') }}

With namespace

{{ $assist->artisanCommand('make:livewire Posts/CreatePost') }}

Converting Between Formats

Use php artisan livewire:convert create-post to convert between single-file, multi-file, and class-based formats.

Component Format Reference

Sponsors

Details

Repository
github.com/spatie/freek.dev
Categories
Frontend Development, Documentation, Debugging, PHP & Laravel
First seen
Jun 3, 2026

More from spatie/freek.dev

All 2
1jeremylongshore avatarperformance-lighthouse-runnerjeremylongshore/claude-code-plugins-plus-skillsManage performance lighthouse runner operations. Auto-activating skill for Frontend Development. Triggers on: performance lighthouse runner, performance lightho604skills.sh installs
2dylantarre avatarbuttons-ctasdylantarre/animation-principlesUse when animating buttons, CTAs, or clickable action elements to create satisfying, responsive interactions598skills.sh installs
3secondsky avatarmobile-first-designsecondsky/claude-skillsDesigns responsive interfaces starting from mobile screens with progressive enhancement for larger devices. Use when building responsive websites, optimizing fo598skills.sh installs
4bobmatnyc avatartanstack-querybobmatnyc/claude-mpm-skillsTanStack Query (React Query) for asynchronous server-state management with automatic caching, background refetching, optimistic updates, and pagination in React595skills.sh installs
5openai avatarslidesopenai/skillsCreate and edit presentation slide decks (`.pptx`) with PptxGenJS, bundled layout helpers, and render/validation utilities. Use when tasks involve building a ne589skills.sh installs
6anthropics avatarinteractive-dashboard-builderanthropics/knowledge-work-pluginsBuild self-contained interactive HTML dashboards with Chart.js, dropdown filters, and professional styling. Use when creating dashboards, building interactive r586skills.sh installs