Add pre-commit hooks for linting and formatting

Set up pre-commit framework with ruff (backend) and ESLint/Prettier/tsc
(frontend) hooks to catch issues locally before CI. Auto-format all
frontend files with Prettier to comply with the new check.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/NewRun.tsx

@@ -47,13 +47,13 @@ export function NewRun() {
     if (!selectedGame) return
     createRun.mutate(
       { gameId: selectedGame.id, name: runName, rules, namingScheme },
-      { onSuccess: (data) => navigate(`/runs/${data.id}`) },
+      { onSuccess: (data) => navigate(`/runs/${data.id}`) }
     )
   }
 
-  const visibleRuleKeys = RULE_DEFINITIONS
-    .filter((r) => !hiddenRules?.has(r.key))
-    .map((r) => r.key)
+  const visibleRuleKeys = RULE_DEFINITIONS.filter(
+    (r) => !hiddenRules?.has(r.key)
+  ).map((r) => r.key)
   const enabledRuleCount = visibleRuleKeys.filter((k) => rules[k]).length
   const totalRuleCount = visibleRuleKeys.length
 
@@ -84,7 +84,8 @@ export function NewRun() {
                       {selectedGame.name}
                     </p>
                     <p className="text-sm text-gray-500 dark:text-gray-400">
-                      {selectedGame.region.charAt(0).toUpperCase() + selectedGame.region.slice(1)}
+                      {selectedGame.region.charAt(0).toUpperCase() +
+                        selectedGame.region.slice(1)}
                     </p>
                   </div>
                 </div>
@@ -137,7 +138,11 @@ export function NewRun() {
 
       {step === 2 && (
         <div>
-          <RulesConfiguration rules={rules} onChange={setRules} hiddenRules={hiddenRules} />
+          <RulesConfiguration
+            rules={rules}
+            onChange={setRules}
+            hiddenRules={hiddenRules}
+          />
 
           <div className="mt-6 flex justify-between">
             <button
@@ -204,7 +209,8 @@ export function NewRun() {
                   ))}
                 </select>
                 <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                  Get nickname suggestions from a themed word list when catching Pokemon.
+                  Get nickname suggestions from a themed word list when catching
+                  Pokemon.
                 </p>
               </div>
             )}
@@ -223,7 +229,9 @@ export function NewRun() {
                 <div className="flex justify-between">
                   <dt className="text-gray-600 dark:text-gray-400">Region</dt>
                   <dd className="text-gray-900 dark:text-gray-100 font-medium">
-                    {selectedGame && (selectedGame.region.charAt(0).toUpperCase() + selectedGame.region.slice(1))}
+                    {selectedGame &&
+                      selectedGame.region.charAt(0).toUpperCase() +
+                        selectedGame.region.slice(1)}
                   </dd>
                 </div>
                 <div className="flex justify-between">
@@ -233,10 +241,13 @@ export function NewRun() {
                   </dd>
                 </div>
                 <div className="flex justify-between">
-                  <dt className="text-gray-600 dark:text-gray-400">Naming Scheme</dt>
+                  <dt className="text-gray-600 dark:text-gray-400">
+                    Naming Scheme
+                  </dt>
                   <dd className="text-gray-900 dark:text-gray-100 font-medium">
                     {namingScheme
-                      ? namingScheme.charAt(0).toUpperCase() + namingScheme.slice(1)
+                      ? namingScheme.charAt(0).toUpperCase() +
+                        namingScheme.slice(1)
                       : 'None'}
                   </dd>
                 </div>