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

alpineflow-development

Build interactive AlpineFlow diagrams with x-flow directives and flowCanvas configuration.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about alpineflow-development

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

FAQPage Schema
How do I set up an AlpineFlow diagram in a Livewire component?▼

Setting up an AlpineFlow diagram requires a `.flow-container` class, proper node positioning, and keeping `toolSettings` in the same Alpine scope as `flowCanvas` to ensure consistent rendering.

Why are my AlpineFlow whiteboard annotations rendering with empty paths?▼

AlpineFlow whiteboard annotations render with empty paths when `flow-freehand-end` events fail to spawn annotation nodes with correctly filled paths, often due to scope visibility issues.

Does AlpineFlow support timeline animations and auto layouts?▼

Yes, AlpineFlow supports timeline animations and auto layouts by orchestrating `update()`, `animate()`, timeline steps, and path motion helpers within your Livewire component configuration.

What is the correct way to configure viewport culling in AlpineFlow?▼

Viewport culling in AlpineFlow is configured by setting specific viewport culling options within the flowCanvas configuration to optimize rendering performance for large interactive diagrams.

Why does my AlpineFlow layout break when applying custom themes?▼

AlpineFlow layouts break when custom themes lack strict container and CSS setup, specifically missing `.flow-container`, `.flow-node`, and `.flow-panel` selectors or `--flow-*` variables.

Related Skills

Explore More Software Engineering Skills→
getartisanflowgetartisanflow
96

wireflow-development

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

Official
Advanced
meytalp-devmeytalp-dev

gsap-animation

Animate web UI elements with GSAP timelines, ScrollTrigger, and stagger effects.

Community
Advanced
riba2534riba2534
1.3k

feishu-cli-board

Export Feishu whiteboard images and import Mermaid or PlantUML diagrams via feishu-cli.

Community
Intermediate
xotongxotong

json-canvas

Create and edit JSON Canvas canvases with nodes and edges in Obsidian.

Community
Intermediate