skills.rest
langfuse
langfuseOFFICIAL
Explore all skills by this author →
Website𝕏@langfuseGitHub

react-component-cleaner

Refactors React component props, variants, and classNames through an auditable step-by-step cleanup workflow.

34.0k|3.7k|Updated May 18, 2023
Search Tags:#storybook#Tailwind#Refactoring#cva#typeScript#reAct#component cleanup
One-click install
npx skills add https://github.com/langfuse/langfuse --skill react-component-cleaner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-component-cleaner
Source: https://github.com/langfuse/langfuse/tree/main/.agents/skills/react-component-cleaner
Command: npx skills add https://github.com/langfuse/langfuse --skill react-component-cleaner

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires sweepy, and includes references (resource) components.

What problem does it solve?

React components accumulate loose prop types, redundant props, and scattered className or style overrides over time, making them hard to maintain and audit. This Skill performs a structured, non-breaking cleanup of a React component with commit-by-commit traceability.

Core Features & Use Cases

  • Interface Tightening: Removes unused props, freezes string props into literal unions, converts optional props to required, and combines dependent props into discriminated unions.
  • Variant Consolidation: Moves color and size related classes from className/style props into cva-style variants with exhaustive lookup tables, avoiding specificity conflicts.
  • Callsite Migration: Uses the sweepy CLI to freeze, replace, and lift prop values across all callsites, with lint/format checks and commits after each step.
  • Use Case: You have a Button component with a free-form className prop and redundant size flags. Run this Skill to tighten its interface, migrate all callsites, add a Storybook story, and receive a final audit report.

Quick Start

Ask the AI to clean up a specific React component using the react-component-cleaner skill and follow its guided todolist.

Frequently Asked Questions about react-component-cleaner

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I clean up a React component's props without breaking callsites?▼

Use a stepwise refactor: remove unused props, freeze string props into literal unions, and migrate each callsite one at a time. This Skill automates that flow with the sweepy CLI, committing after every change so each step stays auditable.

How to move Tailwind classes from className props into cva variants?▼

Identify color and size related classes in className or style props, then move them into a variant that owns the complete set of classes for each CSS property it changes. Ensure exactly one variant branch supplies each property instead of relying on tailwind-merge or specificity.

What is the sweepy CLI used for in React refactoring?▼

sweepy is a CLI tool used to freeze props, narrow prop types, replace prop values, and lift violating classes across callsites. It supports a --dry-run flag to preview changes and a --yes flag for non-interactive automation.

Does this refactoring change component behavior or visuals?▼

The cleanup is designed to be non-breaking: changes are limited to interface tightening and class relocation, with lint and format checks after each step. A final audit verifies callsites remain valid in positioning and HTML semantics.

When should I not use an automated component cleanup workflow?▼

Avoid it when a component needs redesign rather than cleanup, or when callsites rely on dynamic className composition that cannot be frozen into literal unions. The Skill asks for user confirmation before any uncertain or one-off edits.

Related Skills

Explore More Software Engineering Skills→
akinwolakinwol

web-design-guidelines

Evaluate web UI code against interface guidelines and report accessibility issues.

Community
Intermediate
cowwoccowwoc
4

pre-presentation-cleanup

Remove agent worktrees, delete subagent branches, and squash commits before review.

Community
Advanced
oakossoakoss
14

storybook-stories

Generate and maintain Storybook stories and interaction tests using CSF3 format.

Official
Intermediate
lushly-devlushly-dev
4

migrate-systems

Orchestrate incremental system migrations with AST-based codemods and verification patterns.

Official
Advanced