nextfriday-react_skill

Overview

This skill encapsulates practical React and JSX patterns focused on component structure, prop handling, imports, lazy loading, and formatting. It provides concrete rules to produce predictable, maintainable components and cleaner JSX. Use it to enforce consistent patterns across React codebases and reduce common runtime and readability issues.

How this skill works

The skill inspects component source for anti-patterns and recommends replacements: it enforces Suspense for lazy-loaded components, extracts inline objects and callback variables, moves helper functions out of component files, and prefers direct type imports. It also checks JSX formatting like required blank lines between multi-line siblings and encourages template literals for mixed text and expressions.

When to use it

• When writing or reviewing React components or JSX code.
• During code reviews to catch common readability and runtime issues.
• When standardizing a codebase to improve maintainability and consistency.
• While refactoring components to separate logic from rendering.
• When onboarding engineers to a React style guide with concrete examples.

Best practices

• Wrap all lazy-loaded components in <Suspense> with a meaningful fallback.
• Avoid inline object props; assign them to constants above JSX.
• Destructure props inside the component body, not in the parameter list.
• Move helper functions and formatting utilities to separate modules.
• Extract render callbacks into named functions to keep JSX declarative.
• Import React types directly (e.g., import type { ReactNode } from 'react').

Example use cases

• Refactoring a modal that currently lazy-loads without Suspense to prevent runtime errors.
• Replacing inline style objects in a card grid with shared constants to avoid re-creates on each render.
• Splitting formatting helpers into utilities to enable unit testing and reuse.
• Converting map callbacks that build JSX with local variables into named render functions for clarity.
• Enforcing consistent imports and JSX spacing as part of a linting or style-check workflow.