How do I install the React Component Cleaner skill?

Run npx skillmds@latest add langfuse/react-component-cleaner in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is React Component Cleaner safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with React Component Cleaner?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is React Component Cleaner free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published React Component Cleaner?

langfuse (@langfuse) published this skill. Their other Agent Skills are listed on their SkillMD profile.

React Component Cleaner by langfuse

Name: React Component Cleaner
Rating: 4.666666666666667 (3 reviews)
Author: langfuse

File contents

The goal of this skill is to clean up a React component. The changes are meant to be non-breaking and auditable, therefore the instructions below should be followed carefully.

Avoid making any additional edits besides the ones instructed in this skill. If you are unsure about any of the instructions or need to do a one-off edit, ask the user for confirmation. You are allowed to invoke formatting and linting commands. If there are formatting / linting issues, do not make manual edits to reformat code, always use the fix variants of the commands.

Before starting to do any changes, audit the component you were instructed to fix by reading the react-component-guidelines skill. Do not audit the callsites of the component, these will be looked at later in the skill.

This skill references a sweepy cli tool. This can be found under https://github.com/bezbac/sweepy. Unless already available, install version v0.1.0, pinned to commit e58b55c0fb94364c12798ed16e632a5931b4eaa1: https://github.com/bezbac/sweepy/tree/e58b55c0fb94364c12798ed16e632a5931b4eaa1. Follow only that pinned commit's instructions to install it. Do this in a safe manner and comply with other security guidelines of the repository. If you are unsure about any of the instructions, ask the user for confirmation.

Now, you are ready to start cleaning up the component. Copy the contents of the component cleanup todolist verbatim into a TODO file (Use cp no manual edit) and follow the instructions in order, adding ✅ to the items you have completed. Do not commit the todo file, it is only for your reference.

Notes:

When moving classes into a variant, the variant must own the complete set of classes for every CSS property it changes.
- Remove those property classes from the component's base classes.
- Ensure exactly one variant branch supplies each property. Do not rely on cn, tailwind-merge, CSS order, or specificity to resolve conflicting classes. Prefer an exhaustive lookup table or cva variants.
The sweepy cli by default assumes an interactive mode, but it can be run in a non-interactive mode by passing the --yes flag. This will automatically accept all changes and is useful for automation.
The sweepy cli has a --dry-run flag that can be used to preview the changes that will be made without actually making them.

---name: react-component-cleanerdescription: Use this skill to clean up a React component. Only use this skill when instructed to do so by the user.--- The goal of this skill is to clean up a React component. The changes are meant to be non-breaking and auditable, therefore the instructions below should be followed carefully. Avoid making any additional edits besides the ones instructed in this skill. If you are unsure about any of the instructions or need to do a one-off edit, ask the user for confirmation. You are allowed to invoke formatting and linting commands. If there are formatting / linting issues, do not make manual edits to reformat code, always use the fix variants of the commands. Before starting to do any changes, audit the component you were instructed to fix by reading the [react-component-guidelines](../react-component-guidelines/SKILL.md) skill. Do not audit the callsites of the component, these will be looked at later in the skill. This skill references a `sweepy` cli tool. This can be found under https://github.com/bezbac/sweepy. Unless already available, install version `v0.1.0`, pinned to commit `e58b55c0fb94364c12798ed16e632a5931b4eaa1`: https://github.com/bezbac/sweepy/tree/e58b55c0fb94364c12798ed16e632a5931b4eaa1. Follow only that pinned commit's instructions to install it. Do this in a safe manner and comply with other security guidelines of the repository. If you are unsure about any of the instructions, ask the user for confirmation. Now, you are ready to start cleaning up the component. Copy the contents of the [component cleanup todolist](./references/component-cleanup-todolist.md) verbatim into a TODO file (Use `cp` no manual edit) and follow the instructions in order, adding ✅ to the items you have completed. Do not commit the todo file, it is only for your reference. --- Notes: - When moving classes into a variant, the variant must own the complete set of classes for every CSS property it changes. - Remove those property classes from the component's base classes. - Ensure exactly one variant branch supplies each property. Do not rely on `cn`, `tailwind-merge`, CSS order, or specificity to resolve conflicting classes. Prefer an exhaustive lookup table or `cva` variants. - The `sweepy` cli by default assumes an interactive mode, but it can be run in a non-interactive mode by passing the `--yes` flag. This will automatically accept all changes and is useful for automation. - The `sweepy` cli has a `--dry-run` flag that can be used to preview the changes that will be made without actually making them.

Frequently asked questions

React Component Cleaner