Guide React application design with state boundaries and data fetching patterns.
npx skills add https://github.com/Muvon/octomind-tap --skill programming-react
Please help me install this Agent Skill. Skill: programming-react Source: https://github.com/Muvon/octomind-tap/tree/main/skills/programming-react Command: npx skills add https://github.com/Muvon/octomind-tap --skill programming-react
This Skill helps you design and implement React applications that stay maintainable as features and complexity grow, especially when state management, data fetching, and component boundaries start to blur.
Activate the programming-react Skill while working in your React project and ask it to refactor your current state/data-fetching approach to match React and Next.js best practices.
High-intent search queries and answers about installing and using this skill.
To separate server state from client state in React, keep server state in server-state libraries for caching and invalidation, while isolating client state to UI interactions. This prevents global stores from swallowing the app and ensures derived data is computed during render.
A scalable React architecture uses a feature-first folder layout, enforces clear component ownership boundaries, and correctly splits Server and Client Components. This composition prevents prop drilling and keeps Next.js App Router projects maintainable as complexity grows.
useEffect should be limited to external synchronization, not data fetching. For data fetching, use server-state libraries to handle caching, retries, and invalidation, which avoids the common pitfalls of ad-hoc fetch and state patterns.
Yes, you can refactor existing Next.js App Router projects by applying these React architecture best practices. It resolves blurred state boundaries and data-fetching patterns, transitioning your app to predictable hooks discipline and clear Server Component usage.
Set up testing with realistic network mocking by using pragmatic patterns that align with your server-state libraries. This approach ensures your tests accurately reflect caching and invalidation behavior without relying on fragile ad-hoc fetch mocks.
Global state management causes performance issues when it swallows server state and derived data. By separating server state into dedicated libraries and computing derived data during render, you reduce unnecessary re-renders and improve performance.
moughamirEnforce feature-based React architecture with unidirectional dependency flow and public API boundaries.
ntuan2502Guide Tailwind CSS v4 CSS-first configuration and native container queries for responsive layouts.
mgd34msuManage React server state with TanStack Query data fetching, caching, and mutations.
NextSpark-jsImplement TanStack Query patterns for data fetching and caching in Next.js.
