AgentSkillsCN

react-best-practices-refactor

借助 Tailwind CSS 和严格遵循 AstroJS 的功能化结构，将大型 React 文件重构为职责单一的组件。

SKILL.md
--- frontmatter
name: react-best-practices-refactor
description: Refactors large React files into single-responsibility components using Tailwind CSS and a strict feature-based structure compatible with AstroJS.

React Best Practices Refactor

This skill enforces senior-level React architecture, especially when refactoring code generated by Lovable and preparing it for AstroJS projects.

When to use this skill

Use this skill when:

  • •A .tsx file contains multiple components
  • •React code is large, unstructured, or AI-generated
  • •The user asks to refactor, clean, or organize React code
  • •Preparing React components for AstroJS usage

Do NOT use this skill when:

  • •The code is already modular and well-structured
  • •Only small edits are requested

How to use it

  1. •Identify the page-level component
  2. •Split UI, logic, and composition into separate files
  3. •Enforce feature-based folder structure
  4. •Apply Tailwind CSS for all styling
  5. •Remove the original monolithic file

Folder Structure (Mandatory)

/components/react/Prompt/ ├── PromptPage.tsx ├── PromptHeader.tsx ├── PromptForm.tsx ├── PromptList.tsx ├── PromptItem.tsx ├── hooks/ │ └── usePrompt.ts ├── types.ts └── index.ts

Component Rules

  • •One component per file
  • •Named exports only
  • •Props must be typed
  • •Tailwind CSS only (no CSS files)
  • •No complex logic inside JSX

Expected Output

  • •Modular, maintainable React components
  • •AstroJS-compatible code
  • •Clear and explicit folder structure