alpineflow-development

What problem does it solve?

This skill keeps AlpineFlow diagrams stable by enforcing container classes, positioning rules, scope visibility, and drawing conventions so nodes, handles, and canvases behave when building Livewire editors or whiteboard experiences.

Core Features & Use Cases

• Strict container and CSS setup ensures .flow-container, .flow-node, and .flow-panel selectors and --flow-* variables apply consistently across themes and prevents layout breakage.
• Scope-aware interaction explains why toolSettings must live in the same Alpine scope as flowCanvas, how x-flow directives share that data, and how events like flow-freehand-end spawn annotation nodes with filled paths.
• Animation, timeline, and layout tools describe how to orchestrate update(), animate(), timeline steps, path motion helpers, viewport culling, and addon registries for animated, auto-layout, and collaborative flows.

Quick Start

Set up a flow container with flowCanvas, keep toolSettings in the same scope, and wire x-flow directives so nodes, handles, whiteboard annotations, and animations render consistently.