What is the recommended approach for data fetching?

The skill discourages using useEffect for data fetching in presentational components, favoring Server Components with async/await for better performance and SSR support.

Can this skill be used to refactor existing codebases?

Certainly. It includes eight core refactoring principles, such as logic extraction and conditional UI separation, specifically designed to clean up complex React components.

How does this skill improve AI-generated React code?

It forces the AI to avoid 'internal state traps' by requiring that UI states be controlled via props, making components significantly easier to test and reuse.

Does this skill help with project organization?

Yes, it defines a clear directory hierarchy and naming convention (kebab-case for directories, PascalCase for files) to ensure a scalable and predictable file structure.

React Coding Guidelines & Testability

Name: React Coding Guidelines & Testability
Author: imaimai17468

byimaimai17468

•

安全与测试

Enforces robust React patterns and architectural standards to prevent common AI coding errors in testability and prop control.

关于

This skill provides a comprehensive framework for building high-quality React components by addressing specific areas where AI models typically struggle, such as component testability and state management. It guides Claude to separate concerns, implement the Presenter pattern, and extract conditional logic into manageable, prop-driven sub-components. By adhering to these guidelines, developers can ensure their codebase remains maintainable, highly testable, and free from the internal state traps often found in AI-generated code.

主要功能

Implements the Presenter pattern to separate complex UI logic from JSX rendering.
Enforces testable component patterns by converting internal state to controllable props.
23 GitHub stars
Mandates the extraction of conditional UI branches into independent, testable components.
Promotes Server Components for data fetching to eliminate brittle useEffect patterns.
Provides strict directory structural rules using kebab-case and PascalCase conventions.

使用场景

Performing automated code reviews to catch common AI pitfalls in component responsibility.
Standardizing frontend architecture for new projects to ensure consistent code quality.
Refactoring legacy React components to improve unit testability and maintainability.

关于

主要功能

Implements the Presenter pattern to separate complex UI logic from JSX rendering.
Enforces testable component patterns by converting internal state to controllable props.
23 GitHub stars
Mandates the extraction of conditional UI branches into independent, testable components.
Promotes Server Components for data fetching to eliminate brittle useEffect patterns.
Provides strict directory structural rules using kebab-case and PascalCase conventions.

使用场景

Performing automated code reviews to catch common AI pitfalls in component responsibility.
Standardizing frontend architecture for new projects to ensure consistent code quality.
Refactoring legacy React components to improve unit testability and maintainability.