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/GenlockeDetail.tsx

@@ -1,7 +1,12 @@
 import { Link, useParams } from 'react-router-dom'
 import { useGenlocke } from '../hooks/useGenlockes'
 import { usePokemonFamilies } from '../hooks/usePokemon'
-import { GenlockeGraveyard, GenlockeLineage, StatCard, RuleBadges } from '../components'
+import {
+  GenlockeGraveyard,
+  GenlockeLineage,
+  StatCard,
+  RuleBadges,
+} from '../components'
 import type { GenlockeLegDetail, RetiredPokemon, RunStatus } from '../types'
 import { useMemo, useState } from 'react'
 
@@ -18,7 +23,8 @@ const statusRing: Record<RunStatus, string> = {
 }
 
 const statusStyles: Record<RunStatus, string> = {
-  active: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+  active:
+    'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
   completed: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
   failed: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
 }
@@ -28,7 +34,9 @@ function LegIndicator({ leg }: { leg: GenlockeLegDetail }) {
   const status = leg.runStatus as RunStatus | null
 
   const dot = status ? (
-    <div className={`w-4 h-4 rounded-full ${statusColors[status]} ring-2 ring-offset-2 ring-offset-white dark:ring-offset-gray-900 ${statusRing[status]}`} />
+    <div
+      className={`w-4 h-4 rounded-full ${statusColors[status]} ring-2 ring-offset-2 ring-offset-white dark:ring-offset-gray-900 ${statusRing[status]}`}
+    />
   ) : (
     <div className="w-4 h-4 rounded-full bg-gray-300 dark:bg-gray-600" />
   )
@@ -49,7 +57,10 @@ function LegIndicator({ leg }: { leg: GenlockeLegDetail }) {
 
   if (hasRun) {
     return (
-      <Link to={`/runs/${leg.runId}`} className="hover:opacity-80 transition-opacity">
+      <Link
+        to={`/runs/${leg.runId}`}
+        className="hover:opacity-80 transition-opacity"
+      >
         {content}
       </Link>
     )
@@ -105,7 +116,9 @@ export function GenlockeDetail() {
     }
 
     return genlocke.legs
-      .filter((leg) => leg.retiredPokemonIds && leg.retiredPokemonIds.length > 0)
+      .filter(
+        (leg) => leg.retiredPokemonIds && leg.retiredPokemonIds.length > 0
+      )
       .map((leg) => {
         // Find base Pokemon (lowest ID) for each family in this leg's retired list
         const seen = new Set<string>()
@@ -118,7 +131,11 @@ export function GenlockeDetail() {
             bases.push(family ? Math.min(...family) : pid)
           }
         }
-        return { legOrder: leg.legOrder, gameName: leg.game.name, pokemonIds: bases.sort((a, b) => a - b) }
+        return {
+          legOrder: leg.legOrder,
+          gameName: leg.game.name,
+          pokemonIds: bases.sort((a, b) => a - b),
+        }
       })
   }, [genlocke, familiesData])
 
@@ -202,8 +219,16 @@ export function GenlockeDetail() {
           Cumulative Stats
         </h2>
         <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-          <StatCard label="Encounters" value={genlocke.stats.totalEncounters} color="blue" />
-          <StatCard label="Deaths" value={genlocke.stats.totalDeaths} color="red" />
+          <StatCard
+            label="Encounters"
+            value={genlocke.stats.totalEncounters}
+            color="blue"
+          />
+          <StatCard
+            label="Deaths"
+            value={genlocke.stats.totalDeaths}
+            color="red"
+          />
           <StatCard
             label="Legs Completed"
             value={genlocke.stats.legsCompleted}