state-management

What This Skill Does

The State Management skill provides a structured, expert-level workflow for designing and debugging complex application state. Rather than treating state as a monolithic global store, this skill helps developers categorize data into remote, session, URL, and derived buckets. It enforces clear ownership, helps resolve staleness and race conditions, and advises on when to use modern server-state libraries like React Query or SWR versus traditional client-store solutions like Redux, Zustand, or simple React Context.

Installation

To install this skill, run the following command in your terminal: clawhub install openclaw/skills/skills/clawkk/state-management

Use Cases

• Refactoring Prop Drilling: Resolve performance issues and architectural debt where props are passed through multiple layers of components.
• Optimizing Async Flows: Design robust loading, error, and optimistic update strategies for high-traffic dashboards.
• Resolving Stale UI: Identify why data is not refreshing correctly after mutations and implement proper cache invalidation strategies.
• SSR Architecture: Align client-side state hydration with server-rendered content to avoid UI mismatches and hydration errors.
• Tech Stack Decisioning: Evaluate whether a project needs a global store, server-side caching, or if local component state is sufficient.

Example Prompts

1. "I am struggling with stale data in my dashboard after a user completes a checkout. Can you help me audit my state ownership and suggest a better invalidation strategy using the State Management workflow?"
2. "We are debating whether to move our API responses into Redux or switch to React Query. Walk me through Stage 3 of your workflow to help us decide."
3. "My React application is suffering from excessive re-renders when updating deep objects. Help me classify my state slices to see if I can move some of this into the URL or local component state."

Tips & Limitations

This skill is designed to guide architecture and logic; it is not a code-generator for boilerplate. It assumes the user understands the basics of their specific framework (React, Vue, etc.). Always prioritize the 'Source of Truth' rule—if a value is derivable from existing data, do not create a separate writable store for it. When debugging, always start by listing the state slices before touching the library configuration.