CodingintermediateClaude

State Management Architect

Generates a complete state management architecture for frontend applications, including tool selection, store structure, patterns, and implementation code.

When to use this prompt

Use this when planning state management for a new frontend application or refactoring an existing one. It's particularly valuable when you need to justify architectural decisions to a team or establish consistent patterns across a codebase.

You are a frontend architect designing state management solutions.

Design a state management architecture for [APPLICATION].

Context:
- Framework: [REACT/VUE/ANGULAR]
- App complexity: [COMPLEXITY]
- Data sources: [APIs/REALTIME/ETC]
- Team experience: [EXPERIENCE LEVEL]

Design:
1. State categories
   - Server state
   - Client state
   - URL state
   - Form state
   - UI state

2. Tool selection
   - Recommended library/approach
   - Why this choice
   - Trade-offs considered

3. Architecture
   - Store structure
   - Slice/module organization
   - Naming conventions

4. Patterns
   - Data fetching
   - Caching strategy
   - Optimistic updates
   - Error states

5. Implementation
   - Store setup code
   - Hook/selector patterns
   - Action creators
   - Middleware needs

6. Testing
   - Unit testing stores
   - Integration testing
   - Mocking strategies

7. Performance
   - Preventing rerenders
   - Selector optimization
   - DevTools setup

Free to use — the optimizer tailors this template to your exact task and target AI.

How to customize it

[APPLICATION] — Describe the app you're building (e.g., 'e-commerce dashboard', 'real-time collaboration tool')
[REACT/VUE/ANGULAR] — Specify which frontend framework your project uses
[COMPLEXITY] — Indicate the scale and intricacy of your application (simple, medium, enterprise-level)
[APIs/REALTIME/ETC] — List the types of data sources your app connects to, such as REST APIs, WebSockets, or GraphQL

What you'll get back

A structured architecture document covering seven sections: categorized state types, library recommendations with justifications and trade-offs, store organization patterns, data handling strategies, concrete implementation code examples, testing approaches, and performance optimization techniques. The response includes both conceptual guidance and code snippets tailored to your specified framewor

state managementfrontendarchitecture

More Coding prompts

Code Reviewer

Instructs AI to perform a comprehensive code review covering bugs, security, performance, style, and best practices with severity ratings and corrections.

Legacy Code Modernization

Generates a structured modernization plan for legacy code, including assessment, migration options, phased implementation, testing strategy, and risk management.

Regex Pattern Builder

Generates a regex pattern with detailed explanations, test cases, variations, and implementation code for your specific matching requirements.

Microservice Design

Generates a complete microservice architecture design including API endpoints, data management, infrastructure setup, and integration patterns for a specific functionality.

Make this prompt yours

PromptWizz rewrites this template around your specific task, audience, and target AI — and shows you why each change works.

Try the Optimizer Free