evilissimo/naming-things

Reviews and improves **names** in code — variables, functions, classes, modules, parameters — for clarity, intent, and consistency with language/team conventions. Triggers when asked to review names, rename things, improve code readability, clean up confusing code, or when examining code with generic/vague names like "data", "info", "manager", "temp", "util". Does NOT trigger for general code review unrelated to naming, architecture design, debugging, or performance optimization. Identifies naming anti-patterns (generic names, misleading names, type-encoding, abbreviations), suggests role-based names that reveal intent, checks consistency with project/domain vocabulary, and flags misalignment with language culture.

1.05x

Quality

90%

Does it follow best practices?

Impact

94%

1.05x

Average score across 5 eval scenarios

Securityby

Passed

No known issues

React Settings Component Naming Pass

Name: evilissimo/naming-things
Rating: 91.6 (1 reviews)
Author: evilissimo

Problem/Feature Description

A frontend team is preparing a settings panel for broader maintenance. The component functions, but reviewers complain that code search and code review discussions are painful because similar names are used for different concepts and several identifiers do not match React/TypeScript norms.

Create a naming review and a revised component that keeps behavior intact while improving readability and convention alignment.

Output Specification

Produce settingsNamingReview.md explaining the naming issues and proposed replacements. Produce AccountSettingsPanel.tsx with the revised code.

Input Files

=============== FILE: settings.tsx ===============

interface IInfo {
  id: string
  admin: boolean
  msgs: string[]
}

type props = { info: IInfo; cfg: { send: boolean } }

export function account_settings({ info, cfg }: props) {
  const [data, setData] = useState<IInfo | null>(null)
  const [flag, setFlag] = useState(false)
  const [arr, setArr] = useState<string[]>([])

  useEffect(() => {
    fetchThing(info.id).then((res) => {
      setData(res)
      setArr(res.msgs)
    })
  }, [info.id])

  function handle() {
    if (cfg.send && data?.admin) {
      sendEmail(data.id)
      setFlag(true)
    }
  }

  return <button onClick={handle}>{flag ? 'sent' : arr.length}</button>
}