skills.rest
getartisanflow
getartisanflowOFFICIAL
Explore all skills by this author →
WebsiteGitHub

wireflow-development

Build Livewire WaveWire diagrams with proper component, trait, and event wiring.

96|3|Updated Apr 2, 2026
Search Tags:#livewire#blade-components#flow-diagrams#reverb#alpineflow#wireflow#flow-events
One-click install
npx skills add https://github.com/getartisanflow/wireflow --skill wireflow-development
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wireflow-development
Source: https://github.com/getartisanflow/wireflow/tree/main/resources/boost/skills/wireflow-development
Command: npx skills add https://github.com/getartisanflow/wireflow --skill wireflow-development

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill keeps Livewire applications from breaking when integrating WireFlow by codifying how to use the <x-flow> canvas, WithWireFlow trait, server event handlers, and configuration without creating Alpine conflicts or miswired scopes.

Core Features & Use Cases

  • Component Guidance: Covers when to activate <x-flow> and related components, populate node slots, place handles, and respect the isolated Alpine scope of the canvas.
  • Trait Methods & Events: Catalogs WithWireFlow convenience and base methods, server-to-client animations, event signatures, whiteboard annotations, and the use of #[Renderless] or skipRender when dispatching commands.
  • Infrastructure Rules: Captures critical practices such as not importing Alpine, injecting tool settings via x-init, attaching custom listeners through $el.addEventListener, using fitViewOnInit, and configuring Reverb/TLS/message limits for collaboration.

Quick Start

Tell the assistant to scaffold a Livewire component that uses WithWireFlow, registers an <x-flow> canvas with proper event listeners, and configures theme plus tool settings.

Frequently Asked Questions about wireflow-development

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

FAQPage Schema
How do I integrate WireFlow diagrams into a Livewire application without breaking Alpine?▼

To integrate WireFlow diagrams into a Livewire application without breaking Alpine, you must avoid importing Alpine separately and instead inject tool settings directly into the flowCanvas scope using x-init. This ensures the isolated Alpine scope of the <x-flow> canvas remains stable.

What is the WithWireFlow trait used for in Laravel Livewire components?▼

The WithWireFlow trait in Laravel Livewire components provides convenience and base methods for orchestrating collaborative canvases. It handles server-to-client animations, whiteboard annotations, and server event handlers using #[Renderless] or skipRender when dispatching commands.

How do I wire custom event listeners for a Livewire flow diagram canvas?▼

To wire custom event listeners for a Livewire flow diagram canvas, you should attach them through the $el.addEventListener method within the x-init directive. This approach correctly scopes the listeners to the <x-flow> Blade component without causing conflicts.

Does WireFlow collaboration work with Laravel Reverb over TLS?▼

Yes, WireFlow collaboration works with Laravel Reverb over TLS, but you must properly configure Reverb TLS settings and respect message limits. Honoring these infrastructure rules ensures reliable real-time collaborative canvas updates.

Why is my Livewire WireFlow component miswiring node slots and handles?▼

Your Livewire WireFlow component is miswiring node slots and handles because the tool settings were not properly injected into the flowCanvas scope. You must use x-init to activate the <x-flow> canvas and ensure proper component, trait, and event wiring.

Related Skills

Explore More Software Engineering Skills→
jonaaixjonaaix
1

volt-development

Create and integrate Volt-powered single-file Livewire components in Laravel.

Community
Intermediate
firtozfirtoz
10

cf-socka-realtime

Enable real-time features over Durable Object WebSockets with Socka contracts.

Community
Advanced
jonaaixjonaaix
1

echo-development

Configure Laravel Echo broadcasting with Reverb, Pusher, or Ably drivers.

Community
Advanced
HuskyDannyHuskyDanny

architecture-diagram

Generate standalone HTML/SVG system architecture diagrams from text descriptions.

Community
Basic