busirocket-react_skill

Overview

This skill enforces component, hook, and Zustand store structure rules for scalable React and Next.js projects. It provides clear constraints: one component per .tsx file, one hook per hook file, extraction of helpers/types, and focused Zustand stores for global UI state. Use it to guide refactors and to standardize patterns across a codebase.

How this skill works

The skill inspects file organization and patterns: component and hook file exports, presence of inline helpers or types, and Zustand store boundaries. It checks for single exports per file, recommends extracting utilities and types, and validates store responsibilities and selector usage to avoid unnecessary re-renders. It flags client/server boundary misuses and enforces modal visibility comes from stores rather than props.

When to use it

• Writing or refactoring .tsx components
• Extracting or creating hooks under hooks/<area>/useXxx.ts
• Implementing global UI state such as modals or progress indicators
• Avoiding prop drilling and setting up cross-component communication
• Deciding client vs server components in Next.js app router

Best practices

• One exported component per file; keep files small and focused
• One exported hook per hook file; move helpers to utils/ and types to types/
• Create one Zustand store per domain and split stores when they grow
• Use selectors (useStore(s => s.value)) to minimize re-renders and only read needed slices
• Define actions inside the store and read modal visibility from store state, not props
• Prefer server components for large static subtrees; opt into 'use client' only where required

Example use cases

• Refactor a page with deep prop drilling into a uiStore for modal and toast state
• Extract a heavyweight component into a folder namespace with inner child components each in its own file
• Move inline helper functions into utils/ and types into a shared types/ folder during cleanup
• Create a workspaceStore to share selection and filters between panels without lifting state
• Implement a modal system where open/close state and actions live in zustand store, consumed by modal components