name: js-ts-clean-code description: Use when refactoring JavaScript or TypeScript for readability, maintainability, and type safety. Triggers on nested ternaries, repeated branching over string ids, duplicated UI metadata, large render branches, lookup-table refactors, and efforts to codify industry coding best practices.

JS/TS Clean Code

Apply this skill when code works but is getting hard to read, extend, or trust.

Replace nested ternaries and long if chains with named helper functions or typed lookup tables.
Keep one source of truth for UI metadata such as labels, data-testid, icons, and menu wiring.
Use Record<Union, T>, as const, Set, and Map to make repeated id-based logic explicit and type-safe.
Prefer guard clauses and early returns over deep nesting.
Keep React render logic declarative; move branching-heavy derivation into small pure functions before introducing extra hooks.

Find readability hotspots. Look for nested ternaries, repeated item.id === ... checks, duplicated string literals, and derived state spread across JSX.
Choose the lightest abstraction that removes repetition. Use a typed config object for static metadata, a pure helper for dynamic labels/titles, and Set/Map for repeated membership or lookup checks.
Preserve behavior while shrinking decision points. Keep public props, event ordering, data-testid, and UI text stable unless the task explicitly changes behavior.
Encode the rule so the code does not regress. Prefer adding or tightening lint rules when a smell is objective and cheap to enforce, such as no-nested-ternary.
Validate after the refactor. Run lint, typecheck, and the relevant tests once the structural changes are complete.

For React and Next.js components, pair this skill with vercel-react-best-practices.
Derive display state during render when it is cheap and synchronous.
Avoid moving logic into effects when a pure function or typed config is enough.

For concise source-backed rationale and links, read references/sources.md.