---

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