frontend-state skill

Overview

This skill designs and implements frontend application state management. It creates Context APIs and global stores, optimizes state flows, and keeps UI state synchronized across components. Outputs are organized under src/contexts/ and src/store/ for easy integration.

How this skill works

The agent inspects application requirements and component interactions to propose a Context API shape and global store architecture. It generates context providers, hooks, action handlers, and selectors, then applies optimizations like memoization and selective subscriptions. It also implements synchronization strategies for derived state, persisted state, and cross-tab updates.

When to use it

• Building or refactoring global state for React applications
• Standardizing state access patterns across large component trees
• Improving performance by reducing unnecessary re-renders
• Adding persistence, undo/redo, or cross-tab synchronization
• Creating reusable Context providers and custom hooks

Best practices

• Model state by domain and keep context focused on a single responsibility
• Use selectors and memoized hooks to avoid cascading re-renders
• Prefer local state for ephemeral UI values and global state for shared data
• Document context shape and exported hooks for consuming components
• Include tests for reducers, selectors, and critical sync logic

Example use cases

• Design a Context API and provider for authentication, theming, and feature flags
• Refactor a legacy prop-drilling flow into a typed global store with hooks
• Optimize a chat UI by splitting state into message list, pagination, and composer contexts
• Add persistence with localStorage and implement versioned migrations
• Implement cross-tab synchronization and conflict resolution for collaborative editors

FAQ