What problem does it solve?
This Skill addresses the complexities of state management, testability, and architectural clarity in React applications. It automates the enforcement of best practices for @pumped-fn/react, eliminating common pitfalls like useEffect dependency hell and inconsistent data flow.
Core Features & Use Cases
- Layered Architecture Guidance: Defines clear separation between Resource, Feature State, and UI Projection layers for scalable and maintainable React apps.
- Built-in Testability: Emphasizes mocking at the resource layer using
preset(), enabling robust, isolated, and fast component testing without complex setup.
- Seamless Progressive Migration: Facilitates effortless evolution from local storage prototypes to remote API backends, allowing you to swap data sources with minimal code changes.
- Use Case: Ideal for teams building new React applications or refactoring existing ones, this Skill ensures a consistent, high-performance, and easily testable architecture, significantly reducing development time and long-term maintenance costs.
Quick Start
Example: Initialize your React app with ScopeProvider
// app/main.tsx
import { ScopeProvider } from '@pumped-fn/react'
import { appScope } from './scope' // Assume appScope is defined
appScope.run(async () => {
ReactDOM.createRoot(document.getElementById('root')!).render(
<ScopeProvider scope={appScope}>
<App />
</ScopeProvider>
)
})
