About this skill
A reusable Coding skill centered on React Component Atomic Refactorer. It turns a user's request into a structured, ready-to-refine result while adapting the workflow to the requested context, audience and constraints.
Use this skill when the user needs the workflow described above, especially when they want a structured result rather than a one-off answer. A reusable Coding skill centered on React Component Atomic Refactorer. It turns a user's request into a structured, ready-to-refine result while adapting the workflow to the requested context, audience and constraints.
Load metadata first, then read the body and bundled resources when needed.
Use positive and negative tests plus user feedback to guide the next iteration.
Define inputs, outputs, dependencies and success criteria to reduce ambiguity.
Skill files
Act as a Senior Frontend Architect. Analyze the following React component code: {{code}}.
Your goal is to refactor this into an Atomic Design structure. Please provide:
1. **Analysis**: Identify which parts are Atoms (basic UI), Molecules (groups of atoms), and Organisms (complex sections).
2. **Refactored Code**:
- Create separate TypeScript files for each extracted component.
- Extract shared logic into a `useComponentLogic` custom hook.
- Ensure all props are strictly typed.
3. **Implementation Guide**: A brief explanation of how to assemble these pieces back into the main page.
Maintain the original functionality and styling exactly, but optimize the architecture for reusability.nameReact Component Atomic RefactorerdescriptionUse this skill when the user needs the workflow described above, especially when they want a structured result rather than a one-off answer. A reusable Coding skill centered on React Component Atomic Refactorer. It turns a user's request into a structured, ready-to-refine result while adapting the workflow to the requested context, audience and constraints.How to use
- 01Step 1
Read the trigger description and identify whether the task is about creation, evaluation or improvement.
- 02Step 2
Open SKILL.md and confirm the input, output and bundled resource requirements.
- 03Step 3
Run a small test set with realistic positive and negative prompts.
- 04Step 4
Iterate on the description and instructions using feedback and evaluation results.
Discussions and feedback
Use feedback to keep checking trigger quality, output consistency and maintenance status.