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.

主要功能

01Implements the Presenter pattern to separate complex UI logic from JSX rendering.

02Enforces testable component patterns by converting internal state to controllable props.

0323 GitHub stars

04Mandates the extraction of conditional UI branches into independent, testable components.

05Promotes Server Components for data fetching to eliminate brittle useEffect patterns.

06Provides strict directory structural rules using kebab-case and PascalCase conventions.

使用场景

01Performing automated code reviews to catch common AI pitfalls in component responsibility.

02Standardizing frontend architecture for new projects to ensure consistent code quality.

03Refactoring legacy React components to improve unit testability and maintainability.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add imaimai17468/imaimai-front-templete coding-guidelines

For use in Claude.ai and ChatGPT

Download Skill