New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Livewire Development

by coollabsio in coollabsio/coolify

A skill your agent uses for any task or question involving Livewire.

MITAuto-check passedBackend & APIs

Install Livewire Development

skills CLI
$ npx skills add coollabsio/coolify --skill livewire-development -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install coollabsio/coolify livewire-development --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/coollabsio/coolify.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/livewire-development .claude/skills/livewire-development && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
livewire-development
GitHub stars
63k
Token cost
~964 tokens
SKILL.md length
260 words
Files
1
Skills in repo
5
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses for any task or question involving Livewire.

  • Question involving Livewire
  • SKILL.md covers Documentation, Basic Usage, Livewire 3 Specifics and Best Practices, plus 3 more sections
  • Calls php
  • Non-Livewire reactive UI (React

What it does

Livewire Development is an agent skill from coollabsio/coolify. Use for any task or question involving Livewire. Activate if user mentions Livewire, wire: directives, or Livewire-specific concepts like wire:model, wire:click, invoke this skill. Covers building new components, debugging reactivity issues, real-time form validation, loading states, migrating from Livewire 2 to 3, converting component formats (SFC/MFC/class-based), and performance optimization. Do not use for non-Livewire reactive UI (React, Vue, Alpine-only, Inertia.js) or standard Laravel forms without Livewire.

Its SKILL.md is about 960 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Backend & APIs, covering Backend development, Forms and validation and Performance optimization. It works with Laravel, React, Vue.js and Docker. The repository describes itself as: An open-source, self-hostable PaaS alternative to Vercel, Heroku & Netlify that lets you easily deploy static sites, databases, full-stack applications and 280+ one-click… The licence is MIT.

When your agent uses it

  • Question involving Livewire
  • Non-Livewire reactive UI (React
  • Standard Laravel forms without Livewire

Example prompts

  • “/livewire-development”

What it can do on your machine

Read from SKILL.md and the folder at commit 407c384. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • php

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Livewire Development loads about 964 tokens when it runs. Until then it costs about 135 tokens; SKILL.md has 260 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~135
When it runs · the whole SKILL.md, loaded when a task matches
~964

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from coollabsio/coolify at commit 407c384, republished under its MIT licence (© coollabsio). 260 words, ~964 tokens.

Download SKILL.mdSave it as .claude/skills/livewire-development/SKILL.md (or your agent's skills folder).
name
livewire-development
description
Use for any task or question involving Livewire. Activate if user mentions Livewire, wire: directives, or Livewire-specific concepts like wire:model, wire:click, invoke this skill. Covers building new components, debugging reactivity issues, real-time form validation, loading states, migrating from Livewire 2 to 3, converting component formats (SFC/MFC/class-based), and performance optimization. Do not use for non-Livewire reactive UI (React, Vue, Alpine-only, Inertia.js) or standard Laravel forms without Livewire.
license
MIT
metadata.author
laravel

Livewire Development

Documentation

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

Basic Usage

Creating Components

Use the php artisan make:livewire [Posts\CreatePost] Artisan command to create new components.

Fundamental Concepts
  • State should live on the server, with the UI reflecting it.
  • All Livewire requests hit the Laravel backend; they're like regular HTTP requests. Always validate form data and run authorization checks in Livewire actions.

Livewire 3 Specifics

Key Changes From Livewire 2

These things changed in Livewire 3, but may not have been updated in this application. Verify this application's setup to ensure you follow existing conventions.

  • Use wire:model.live for real-time updates, wire:model is now deferred by default.
  • Components now use the App\Livewire namespace (not App\Http\Livewire).
  • Use $this->dispatch() to dispatch events (not emit or dispatchBrowserEvent).
  • Use the components.layouts.app view as the typical layout path (not layouts.app).
New Directives
  • wire:show, wire:transition, wire:cloak, wire:offline, wire:target are available for use.
Alpine Integration
  • Alpine is now included with Livewire; don't manually include Alpine.js.
  • Plugins included with Alpine: persist, intersect, collapse, and focus.

Best Practices

Component Structure
  • Livewire components require a single root element.
  • Use wire:loading and wire:dirty for delightful loading states.
Using Keys in Loops
<!-- Wire Key in Loops -->
blade
@foreach ($items as $item)
    <div wire:key="item-{{ $item->id }}">
        {{ $item->name }}
    </div>
@endforeach
Lifecycle Hooks

Prefer lifecycle hooks like mount(), updatedFoo() for initialization and reactive side effects:

<!-- Lifecycle Hook Examples -->
php
public function mount(User $user) { $this->user = $user; }
public function updatedSearch() { $this->resetPage(); }

JavaScript Hooks

You can listen for livewire:init to hook into Livewire initialization:

<!-- Livewire Init Hook Example -->
js
document.addEventListener('livewire:init', function () {
    Livewire.hook('request', ({ fail }) => {
        fail(({ status, preventDefault }) => {
            if (status === 419) {
                preventDefault();
                alert('Your session expired');
            }
        });
    });

    Livewire.hook('commit', ({ fail }) => {
        fail(() => console.error('Livewire commit failed'));
    });
});

Testing

<!-- Example Livewire Component Test -->
php
Livewire::test(Counter::class)
    ->assertSet('count', 0)
    ->call('increment')
    ->assertSet('count', 1)
    ->assertSee(1)
    ->assertStatus(200);
<!-- Testing Livewire Component Exists on Page -->
php
$this->get('/posts/create')
    ->assertSeeLivewire(CreatePost::class);

Common Pitfalls

  • Forgetting wire:key in loops causes unexpected behavior when items change
  • Using wire:model expecting real-time updates (use wire:model.live instead in v3)
  • Not validating/authorizing in Livewire actions (treat them like HTTP requests)
  • Including Alpine.js separately when it's already bundled with Livewire 3

© coollabsio, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/livewire-development of coollabsio/coolify.

Open the folder on GitHubat commit 407c384

Compare with similar skills

Livewire Development next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Livewire Development compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Livewire Development this skillcoollabsio/coolify63k—~964Automated safety check: PassMIT
Livewire Developmentyungifez/skuul4091 repos~1.9kAutomated safety check: PassMIT
Octane Frankenphp GotchasAratKruglik/claude-laravel155—~732Automated safety check: PassNone
Spatie Guidelinesfreekmurze/dotfiles1k—~2.7kAutomated safety check: PassMIT
Wayfinder Developmentslimani-dev/muraqib1281 repos~622Automated safety check: PassMIT
Configure Nightwatchtrypostit/trypost676—~2.7kAutomated safety check: PassMIT

Similar skills

  • Livewire Development

    yungifez/skuul

    A skill your agent uses for any task or question involving Livewire.

    409 GitHub starsUsed in 1 repo~1.9k tokens
    Backend & APIsAuto-check passed

  • Octane Frankenphp Gotchas

    AratKruglik/claude-laravel

    A skill your agent uses when debugging unexpected behavior in Laravel Octane with FrankenPHP - stale data between requests, memory leaks, singleton contamination, static property state, or anything…

    155 GitHub stars~732 tokensUpdated 5 mo ago
    Backend & APIsAuto-check passed

  • Spatie Guidelines

    freekmurze/dotfiles

    Spatie's PHP, Laravel, JavaScript and Vue coding guidelines and conventions.

    1k GitHub stars~2.7k tokensUpdated 2 days ago
    Backend & APIsAuto-check passed

  • Wayfinder Development

    slimani-dev/muraqib

    A skill your agent uses for Laravel Wayfinder which auto-generates typed functions for Laravel controllers and routes.

    128 GitHub starsUsed in 1 repo~622 tokens
    Backend & APIsAuto-check passed

  • Configure Nightwatch

    trypostit/trypost

    Configures Laravel Nightwatch data collection, sampling rates, filtering rules, and redaction policies.

    676 GitHub stars~2.7k tokensUpdated today
    Backend & APIsAuto-check passed

  • Passport Development

    trypostit/trypost

    Develops OAuth2 API authentication with Laravel Passport. An agent skill from trypostit/trypost.

    676 GitHub stars~1.9k tokensUpdated today
    Backend & APIsAuto-check passed

More from coollabsio/coolify

  • Configuring Horizon

    coollabsio/coolify

    A skill your agent uses whenever the user mentions Horizon by name in a Laravel context.

    63k GitHub starsUsed in 4 repos~898 tokens
    Auto-check passed

  • Fortify Development

    coollabsio/coolify

    ACTIVATE when the user works on authentication in Laravel. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 4 repos~1.9k tokens
    Auto-check passed

  • MCP Development

    coollabsio/coolify

    A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 1 repo~949 tokens
    Auto-check passed

  • Laravel Actions

    coollabsio/coolify

    Build, refactor, and troubleshoot Laravel Actions using lorisleiva/laravel-actions.

    63k GitHub stars~2.4k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Livewire Development

What does Livewire Development do?

A skill your agent uses for any task or question involving Livewire. Livewire Development is an agent skill from coollabsio/coolify. Use for any task or question involving Livewire.

When should I use Livewire Development?

Livewire Development fits situations like: question involving Livewire; non-Livewire reactive UI (React; standard Laravel forms without Livewire.

How do I install Livewire Development in Claude Code?

Run `npx skills add coollabsio/coolify --skill livewire-development -a claude-code`. Or copy the skill folder (.agents/skills/livewire-development in coollabsio/coolify) into .claude/skills/livewire-development in your project. Claude Code loads it when a task matches its description.

How do I install Livewire Development in Codex?

Run `npx skills add coollabsio/coolify --skill livewire-development -a codex`. Or copy the skill folder (.agents/skills/livewire-development in coollabsio/coolify) into .agents/skills/livewire-development in your project. Codex loads it when a task matches its description.

Can I use Livewire Development in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add coollabsio/coolify --skill livewire-development -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/livewire-development, .gemini/skills/livewire-development, .github/skills/livewire-development and .opencode/skills/livewire-development in your project.

What does Livewire Development need to run?

Going by SKILL.md and its folder, Livewire Development needs the command-line tools its instructions call (php).

Does Livewire Development access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Livewire Development safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Livewire Development use?

Livewire Development is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Livewire Development use?

About 964 tokens (SKILL.md is roughly 3.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Livewire Development?

Skills that share tags, products or a category with Livewire Development: Livewire Development (yungifez/skuul, 409 stars), Octane Frankenphp Gotchas (AratKruglik/claude-laravel, 155 stars), Spatie Guidelines (freekmurze/dotfiles, 1k stars) and Wayfinder Development (slimani-dev/muraqib, 128 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Livewire Development?

coollabsio (a GitHub organization) maintains it in coollabsio/coolify, which has 62,671 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 7, 2026.

Source: coollabsio/coolify on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.