Project-wide React JSX refactoring (clsx + conditional rendering). ⚠️ CRITICAL: Full codebase operation. Triggers: migrate clsx, refactor all jsx, codebase-wide react modernization
Refactors JSX to replace template strings with clsx and converts ternary conditionals to && operators.
/plugin marketplace add DieGopherLT/claude-kit/plugin install diegopherlt-claude-kit@DieGopherLT/claude-kithaikuRefactor JSX code to replace template strings with clsx and improve conditional rendering patterns.
Launch two explorer agents simultaneously:
Agent 1 - Template String Hunter:
className={\...`}`Agent 2 - Ternary Hunter:
{condition ? <Component /> : null} and variationsWait for both agents to complete before proceeding.
Check if clsx is installed. If not:
npm install clsx
Replace all findings from Agent 1:
Before:
className={`base-class ${isActive ? 'active' : ''} ${variant}`}
After:
className={clsx('base-class', isActive && 'active', variant)}
Add import: import clsx from 'clsx';
Replace all findings from Agent 2, handling edge cases:
Edge cases to handle:
Before:
{count > 0 ? <Component /> : null}
{items.length ? <List items={items} /> : null}
After:
{count > 0 && <Component />}
{items.length > 0 && <List items={items} />}
Critical: Ensure && left side is always boolean to avoid rendering 0, "", or NaN.
clsx&& operatorclsx imports added