Verified:GitHub

cyberflow-state-machine

Orchestrate Vue 3 game-state transitions with a queueing sequencer and animation sequences.

Updated Nov 29, 2025

Search Tags:#accessibility #vue #animation #queue #sequencer #game-state-machine #interruptibility

One-click install

npx skills add https://github.com/endlessblink/flow-state --skill cyberflow-state-machine

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: cyberflow-state-machine
Source: https://github.com/endlessblink/flow-state/tree/main/.claude/skills/cyberflow-state-machine
Command: npx skills add https://github.com/endlessblink/flow-state --skill cyberflow-state-machine

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a reusable, declarative approach to coordinating multi-step game animations and state transitions within Vue 3 apps, eliminating ad-hoc, browser-only timing hacks.

Core Features & Use Cases

Central sequencer that queues, prioritizes, and runs multi-step animation sequences for in-game events (level-ups, boss defeats, mission outcomes)
Interruptibility and queueing rules that allow higher-priority sequences to preempt lower-priority ones, while non-blocking events can occur in parallel
Intensity-aware choreography supporting minimal, moderate, and intense sequences to adapt visuals to context
Accessibility considerations with dismissible overlays, ARIA live regions, and keyboard shortcuts for user control
Event-driven integration with game stores to trigger cohesive animations from game events
Real-world scenario: level-up animations progressively reveal level changes, particles, and XP updates

Quick Start

Create an intense level-up sequence with the provided hooks and enqueue it when a player levels up, ensuring proper priority handling and dismissibility.

Frequently Asked Questions about cyberflow-state-machine

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

FAQPage Schema

How do I coordinate multi-step game animations and state transitions in Vue 3?▼

A central sequencer queues and prioritizes multi-step animation sequences, allowing higher-priority events to preempt others. Non-blocking events run in parallel while lower-priority sequences wait.

Can I queue and interrupt game animation sequences based on priority?▼

A central sequencer queues and prioritizes multi-step animation sequences, allowing higher-priority events to preempt others. Non-blocking events run in parallel while lower-priority sequences wait.

How do you add accessibility safeguards to intense game animation sequences?▼

Intensity-aware choreography supports minimal, moderate, and intense visual sequences to adapt to context. This scales visual feedback appropriately for different in-game events.

How do I trigger cohesive choreographed animations from game store events?▼

You trigger cohesive animations from game store events through event-driven integration. The sequencer reacts to game state changes, automatically running the corresponding choreographed animation sequence.