state-management
State management patterns for React applications with Context, Redux, Zustand, and React Query.
- Choose Context API for simple global state, Zustand for medium complexity, Redux Toolkit for large-scale apps with complex logic, and React Query for server data fetching and caching
- Covers local vs. global state decisions, immutability constraints, and the minimal state principle to avoid redundant derived values
- Includes complete working examples for authentication contexts, shopping carts, todo management, and async data fetching with proper TypeScript typing
- Emphasizes selective subscriptions, single source of truth, and avoiding props drilling across 5+ component levels
State Management
When to use this skill
- Global State Required: Multiple components share the same data
- Props Drilling Problem: Passing props through 5+ levels
- Complex State Logic: Authentication, shopping cart, themes, etc.
- State Synchronization: Sync server data with client state
Instructions
Step 1: Determine State Scope
Distinguish between local and global state.
Decision Criteria:
- Local State: Used only within a single component
More from supercent-io/skills-template
security-best-practices
Implement security best practices for web applications and infrastructure. Use when securing APIs, preventing common vulnerabilities, or implementing security policies. Handles HTTPS, CORS, XSS, SQL Injection, CSRF, rate limiting, and OWASP Top 10.
14.1Kdata-analysis
Analyze datasets to extract insights, identify patterns, and generate reports. Use when exploring data, creating visualizations, or performing statistical analysis. Handles CSV, JSON, SQL queries, and Python pandas operations.
13.8Kweb-accessibility
Implement web accessibility (a11y) standards following WCAG 2.1 guidelines. Use when building accessible UIs, fixing accessibility issues, or ensuring compliance with disability standards. Handles ARIA attributes, keyboard navigation, screen readers, semantic HTML, and accessibility testing.
12.7Kworkflow-automation
Automate repetitive development tasks and workflows. Use when creating build scripts, automating deployments, or setting up development workflows. Handles npm scripts, Makefile, GitHub Actions workflows, and task automation.
12.6Kcode-review
Conduct thorough, constructive code reviews for quality and security. Use when reviewing pull requests, checking code quality, identifying bugs, or auditing security. Handles best practices, SOLID principles, security vulnerabilities, performance analysis, and testing coverage.
12.5Kdatabase-schema-design
Design and optimize database schemas for SQL and NoSQL databases. Use when creating new databases, designing tables, defining relationships, indexing strategies, or database migrations. Handles PostgreSQL, MySQL, MongoDB, normalization, and performance optimization.
12.2K