busirocket-react-components-and-hooks_skill

Overview

This skill enforces consistent React component and hook structure for TypeScript/React/Next.js projects. It codifies one-component-per-file and one-hook-per-file rules, moves helpers and inline types into dedicated folders, and helps teams decide client vs server components. Use it to make code easier to test, review, and scale.

How this skill works

The skill inspects .tsx component files, hook files under hooks/, and common folders like utils/ and types/. It flags violations: multiple exports in one file, helpers or inline types inside components or hooks, and improper client/server boundaries. It also suggests extracting helpers to utils/, types to types/, and hooks to hooks/<area>/useXxx.ts.

When to use it

• Writing new .tsx components
• Refactoring large components into smaller parts
• Extracting or creating reusable hooks
• Enforcing codebase-wide structure rules
• Auditing client vs server component boundaries

Best practices

• Keep exactly one exported React component per .tsx file.
• Keep exactly one exported hook per hook file (hooks/<area>/useXxx.ts).
• Move helper functions from components/hooks into utils/ and import them.
• Place all shared types in types/ and import rather than inline types.
• Prefer server components for large subtrees; only add 'use client' at necessary boundaries.
• Use clear folder namespacing for complex components and logical hook placement.

Example use cases

• Refactor a large page component: extract subcomponents into separate .tsx files and move helpers to utils/.
• Create a reusable hook: implement one hook per file under hooks/auth/useAuth.ts with no inline helpers or types.
• Audit app router boundaries: convert non-interactive UI to server components and add 'use client' only where interactivity is needed.
• Enforce code review checks: automatically flag files that export multiple components or contain inline types.
• Organize a component library: use folder namespacing for complex components and keep stable hook APIs.