Component Polish

Component Polish analyzes your existing code and applies improvements while preserving functionality. It's like having a senior developer review and clean up your code instantly.

What Gets Polished

• JSX Structure — Reorganizes nested elements for better readability and removes unnecessary wrapper divs.
• Tailwind Classes — Removes duplicate classes, orders them consistently, and suggests more efficient alternatives.
• Hook Organization — Moves hooks to the top of components, groups related state, and identifies missing dependencies.
• Type Definitions — Adds missing TypeScript types and improves existing type definitions for better type safety.
• Visual Hierarchy — Improves spacing, sizing, and contrast for better visual consistency.

How to Use

1. Select the component code you want to polish
2. Press Cmd+Shift+P and type "Polish"
3. Review the suggested changes in the diff view
4. Accept all changes or cherry-pick specific improvements

Example Before/After

Before:

<div className="flex flex-col flex-col gap-4 p-4 p-4">
  <div>
    <h2 className="text-xl text-xl font-bold">{title}</h2>
  </div>
  <div>
    <p>{description}</p>
  </div>
</div>

After:

<div className="flex flex-col gap-4 p-4">
  <h2 className="text-xl font-bold">{title}</h2>
  <p>{description}</p>
</div>