skills.rest
mainza-ai
mainza-aiCOMMUNITY
Explore all skills by this author →
GitHub

milimo-frontend-state-manager

Manage React UI state across a 7-slice Zustand store to prevent re-render thrash.

83|18|Updated Jan 25, 2026
Search Tags:#typescript#frontend#react#zustand#state-management#sse#ui-performance
One-click install
npx skills add https://github.com/mainza-ai/milimovideo --skill milimo-frontend-state-manager
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: milimo-frontend-state-manager
Source: https://github.com/mainza-ai/milimovideo/tree/main/skills/skills/milimo-frontend-state-manager
Command: npx skills add https://github.com/mainza-ai/milimovideo --skill milimo-frontend-state-manager

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Milimo Frontend State Manager provides a cohesive, high-performance blueprint for maintaining and synchronizing a complex React UI, preventing re-render thrash and drift across a multi-slice store.

Core Features & Use Cases

  • The 7-slice Zustand God Store (projectSlice, shotSlice, trackSlice, playbackSlice, uiSlice, elementSlice, serverSlice) enables centralized, predictable state management without independent React Contexts, with selective bindings to avoid reconciliation loops.
  • Magnetic 1 timeline layout and free-placement tracks enable deterministic layout calculations and flexible overlays for V1, V2, and A1 tracks.
  • Safari-specific workarounds for audio drift, draggable hover quirks, and SSE-driven updates ensure reliable playback and UI responsiveness.
  • SSE & React Hooks patterns provide robust backend event handling, status polling, and patching of UI state.

Quick Start

Wire the timelineStore.ts slices to your React components and follow the documented state patterns to initialize and maintain Milimo's frontend.

Frequently Asked Questions about milimo-frontend-state-manager

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

FAQPage Schema
How do I prevent React UI re-render thrash with a multi-slice Zustand store?▼

Prevent React UI re-render thrash by consolidating application state into a 7-slice Zustand God Store with selective state bindings. This approach eliminates independent React Contexts and stops reconciliation loops.

What is the best way to handle SSE-driven state updates in a React frontend?▼

Handle SSE-driven state updates by applying dedicated SSE and React Hooks patterns. These patterns patch UI state directly from backend events, ensuring reliable status polling and UI responsiveness.

How do I calculate deterministic timeline layouts for free-placement video tracks?▼

Calculate deterministic timeline layouts by implementing magnetic timeline layout logic for free-placement tracks. This enables flexible overlays for V1, V2, and A1 tracks while maintaining UI layout coherence.

Does this Zustand state management approach include Safari audio drift workarounds?▼

Yes, this Zustand state management approach includes documented Safari workarounds. It specifically addresses audio drift, draggable hover quirks, and SSE updates to ensure reliable playback on Safari.

Can I use independent React Context providers alongside a global Zustand store?▼

No, you cannot use independent React Context providers. The architecture requires a single global Zustand store with explicit component boundaries to meet UI performance and layout coherence requirements.

Related Skills

Explore More Software Engineering Skills→
alceupassosalceupassos

store-data-structures

Structure Zustand store data for lists, details, caching, and optimistic updates.

Community
Intermediate
abzhawabzhaw

server-sent-events

Stream AI model outputs to clients via Server-Sent Events.

Community
Intermediate
u9401066u9401066
1

react-patterns

Implement React component design patterns with TypeScript typings and usage guidelines.

Community
Advanced
hasnahasna

redux

Create a Redux-compatible StateStore adapter for json-render's StateProvider.

Official
Intermediate