What this prompt does
This prompt builds a single interactive Livewire 3 component from a clear spec, covering both the PHP class and the Blade view. Rather than producing a skeleton, it asks for the reactive behavior that actually makes Livewire feel responsive: debounced search, loading states, browser-event dispatch, and a paginated list, plus a PHPUnit feature test so the interactivity is protected against regressions.
The variables shape exactly what gets built. [component_purpose] defines the feature, [properties] lists the reactive public properties that drive the UI, and [interaction_type] tells the AI which behavior (filtering, pagination, live updates) needs to happen without a page reload. [validation_approach] controls how form input is checked, [notifications] decides which browser events fire for toasts, and [alpine_feature] specifies where Alpine.js handles purely client-side concerns like dropdowns or modal toggles. Because the prompt pins the debounce at 300ms and demands wire:loading indicators, the result behaves consistently instead of leaving those details to chance.
When to use it
- Building a live search box that filters results as the user types, without a full page reload
- Creating a dynamic form that validates fields in real time and shows inline errors
- Adding a paginated, filterable list (products, users, posts) to a Livewire app
- Wiring toast notifications driven by server-side success or error events
- Combining Livewire reactivity with small Alpine.js touches for dropdowns and modals
- Replacing a JavaScript-heavy widget with a JS-light Livewire equivalent
Example output
You get a Livewire component class with the declared [properties] as public properties, lifecycle and action methods for the interaction, and a Blade view styled with Tailwind that includes wire:loading indicators and pagination links. Alpine.js handles the [alpine_feature] inline. Alongside that sits a PHPUnit feature test exercising the component's main flows — typing into search, asserting filtered results, and checking validation — so you have coverage from the first commit.
Pro tips
- Make
[component_purpose]a full sentence (real-time product search with filters and sorting) so the AI knows what data it's working with - List every reactive property in
[properties]; anything you omit won't be wired up and you'll add it manually later - Match
[validation_approach]to your UX — real-time field validation feels nicer but fires more requests than on-submit - Keep the 300ms debounce unless your dataset is tiny; lower values hammer the server with queries on every keystroke
- Use
[alpine_feature]only for genuinely client-side state (open/closed toggles); pushing that through Livewire adds needless round-trips - Treat the generated PHPUnit test as a baseline and extend it for your edge cases before trusting the component in production
