Toolverse
All skills

livewire-development

by spatie

Develops reactive Livewire 4 components. Activates when creating, updating, or modifying Livewire components; working with wire:model, wire:click, wire:loading, or any wire: directives; adding real-time updates, loading states, or reactivity; debugging component behavior;

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
spatie
Category
Frontend
Views
35

About this skill

Develops reactive Livewire 4 components. Activates when creating, updating, or modifying Livewire components; working with wire:model, wire:click, wire:loading, or any wire: directives; adding real-time updates, loading states, or reactivity; debugging component behavior; writing Livewire tests; or when the user mentions Livewire, component, counter, or reactive UI.

How to use

  1. Aktywuj umiejętność, wspominając o Livewire, komponencie reaktywnym, wire: dyrektywach lub testach komponentów w swojej wiadomości do asystenta.

  2. Aby utworzyć nowy komponent, poproś asystenta o wygenerowanie kodu dla single-file component (domyślny format w v4) lub określ format: multi-file (--mfc) lub class-based (--class). Asystent wygeneruje pełny kod komponentu z logika PHP i szablonami Blade.

  3. Pracuj z wire: dyrektywami — wire:model do dwukierunkowego wiązania danych, wire:click do obsługi kliknięć, wire:loading do stanów ładowania. Asystent podpowie prawidłową składnię i wzorce dla każdej dyrektywy.

  4. Jeśli masz istniejący komponent w innym formacie, poproś asystenta o konwersję — może zmienić single-file na multi-file, class-based na single-file itp. Asystent wskaże odpowiednią komendę artisan.

  5. Do debugowania zachowania komponentu lub implementacji real-time aktualizacji, opisz problem — asystent zasugeruje rozwiązanie z użyciem islands, async actions lub odpowiednich dyrektyw wire:.

  6. Przy pisaniu testów komponentów poproś o kod testowy — asystent wygeneruje testy Livewire sprawdzające renderowanie, interakcje użytkownika i zmianę stanu.

Related skills

landing-page-guide-v2

by bear2u

Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements

Frontend
3486

browser-automation

by browserbase

Automate web browser interactions using natural language via CLI commands. Use when the user asks to browse websites, navigate web pages, extract data from websites, take screenshots, fill forms, click buttons, or interact with web applications. Triggers include \

Frontend
21175

svg-precision

by dkyazzentwatwa

Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.

Frontend
233466

react

by lobehub

React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.

Frontend
2058

brainstorming

by obra

Use when creating or developing, before writing code or implementation plans - refines rough ideas into fully-formed designs through collaborative questioning, alternative exploration, and incremental validation. Don't use during clear 'mechanical' processes

Frontend
49170

senior-fullstack

by davila7

Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects,

Frontend
2896