fix: raise react-doctor score from 84 to 97/100

- Fix missing aria-controls on combobox role elements (2 errors)
- Remove trivial useMemo wrappers replaced with plain const (7 instances)
- Migrate motion → LazyMotion + m in 4 files (~30kb bundle savings)
- Convert renderActions render-prop to ReactNode in CommentDisplay
- Extract stable icon constants for NavItem memo in Sidebar
- Replace <a> with next/link for internal Footer links
- Add metadata export to app/page.tsx (converted to server component)
- Fix array index keys with stable identifiers
- Add keyboard handlers to clickable non-interactive elements
- Remove 14 unused exports/types (knip dead code)
- Fix cmdk-input-wrapper unknown DOM property
- Fix label-has-associated-control in dialog.stories.tsx
- Update framer-motion test mocks for LazyMotion/m/domAnimation

Generated with [Ami](https://ami.dev)
Co-Authored-By: Ami <noreply@ami.dev>

Author: ryota-murakami

.agents/react-doctor/SKILL.md

@@ -0,0 +1,19 @@
+---
+name: react-doctor
+description: Run after making React changes to catch issues early. Use when reviewing code, finishing a feature, or fixing bugs in a React project.
+version: 1.0.0
+---
+
+# React Doctor
+
+Scans your React codebase for security, performance, correctness, and architecture issues. Outputs a 0-100 score with actionable diagnostics.
+
+## Usage
+
+```bash
+npx -y react-doctor@latest . --verbose --diff
+```
+
+## Workflow
+
+Run after making changes to catch issues early. Fix errors first, then re-run to verify the score improved.

e2e/helpers/db-query.ts

@@ -112,40 +112,6 @@ export async function querySingle<T>(
   return data as T
 }
 
-/**
- * Count records in Supabase table with optional filters.
- *
- * @param table - Table name to query
- * @param filters - Optional key-value filters to apply
- * @returns Number of matching records
- *
- * @example
- * const cardCount = await countRecords('repocard', { board_id: 'board-123' })
- * expect(cardCount).toBe(5)
- */
-export async function countRecords(
-  table: string,
-  filters?: Record<string, string | number | boolean>,
-): Promise<number> {
-  const supabase = createLocalSupabaseClient()
-
-  let query = supabase.from(table).select('*', { count: 'exact', head: true })
-
-  if (filters) {
-    for (const [key, value] of Object.entries(filters)) {
-      query = query.eq(key, value)
-    }
-  }
-
-  const { count, error } = await query
-
-  if (error) {
-    throw new Error(`Supabase count failed on ${table}: ${error.message}`)
-  }
-
-  return count ?? 0
-}
-
 // ============================================================================
 // Test Data UUIDs (matching seed.sql)
 // ============================================================================
@@ -168,13 +134,6 @@ export const STATUS_IDS = {
   productionRelease: '00000000-0000-0000-0000-000000000205',
 } as const
 
-/** Work Projects board status list UUIDs */
-export const WORK_PROJECT_STATUS_IDS = {
-  backlog: '00000000-0000-0000-0000-000000000211',
-  active: '00000000-0000-0000-0000-000000000212',
-  complete: '00000000-0000-0000-0000-000000000213',
-} as const
-
 /** Repo card UUIDs */
 export const CARD_IDS = {
   card1: '00000000-0000-0000-0000-000000000301',
@@ -192,16 +151,6 @@ export const PROJECT_INFO_IDS = {
   projinfo4: '00000000-0000-0000-0000-000000000404',
 } as const
 
-/** Maintenance item UUIDs */
-export const MAINTENANCE_IDS = {
-  maintenance1: '00000000-0000-0000-0000-000000000501',
-  maintenance2: '00000000-0000-0000-0000-000000000502',
-} as const
-
-/** Maintenance project info UUID */
-export const MAINTENANCE_PROJECT_INFO_ID =
-  '00000000-0000-0000-0000-000000000601'
-
 // ============================================================================
 // State Reset Helpers (for test isolation with real DB)
 // ============================================================================
@@ -803,48 +752,3 @@ export async function resetUserSettings(): Promise<void> {
     throw new Error(`resetUserSettings: ${error.message}`)
   }
 }
-
-/**
- * Reset a moved repo card back to its original board (testBoard).
- * Call this in afterEach for move-to-another-board tests to ensure clean state.
- *
- * @param cardId - The card ID to restore
- * @param originalStatusId - The original status list ID (defaults to Planning)
- * @param originalOrder - The original order position (defaults to 0).
- *   NOTE: The default order=0 may not match seeded data for some cards
- *   (e.g. card5 is seeded at order=2). Pass the correct originalOrder when known.
- *
- * @example
- * test.afterEach(async () => {
- *   await resetRepoCardToOriginalBoard(CARD_IDS.card5, STATUS_IDS.planning, 2)
- * })
- */
-export async function resetRepoCardToOriginalBoard(
-  cardId: string,
-  originalStatusId: string = STATUS_IDS.planning,
-  originalOrder: number = 0,
-): Promise<void> {
-  const supabase = createLocalSupabaseClient()
-
-  const { data, error } = await supabase
-    .from('repocard')
-    .update({
-      board_id: BOARD_IDS.testBoard,
-      status_id: originalStatusId,
-      order: originalOrder,
-    })
-    .eq('id', cardId)
-    .select('id')
-
-  if (error) {
-    throw new Error(
-      `resetRepoCardToOriginalBoard: failed for id=${cardId}: ${error.message}`,
-    )
-  }
-  if (!data || data.length === 0) {
-    throw new Error(
-      `resetRepoCardToOriginalBoard: UPDATE matched 0 rows for id=${cardId}. ` +
-        `URL=${process.env.NEXT_PUBLIC_SUPABASE_URL || 'http://127.0.0.1:54321'}`,
-    )
-  }
-}

mocks/handlers/data.ts

@@ -142,16 +142,9 @@ export type MockBoard = (typeof INITIAL_MOCK_BOARDS)[number]
  * Mock boards data (mutable to allow state persistence in tests)
  * Reset via POST /__msw__/reset endpoint between tests
  */
-export let mockBoards: MockBoard[] = INITIAL_MOCK_BOARDS.map((b) => ({ ...b }))
-
-/**
- * Reset mock data to initial state (called between tests for isolation)
- * Exported for use by the /__msw__/reset API route
- */
-export function resetMockData(): void {
-  mockBoards = INITIAL_MOCK_BOARDS.map((b) => ({ ...b }))
-  mockUserSettings = { ...INITIAL_MOCK_USER_SETTINGS }
-}
+export const mockBoards: MockBoard[] = INITIAL_MOCK_BOARDS.map((b) => ({
+  ...b,
+}))
 
 /**
  * Update a board in the mock data array
@@ -636,4 +629,4 @@ const INITIAL_MOCK_USER_SETTINGS = {
  * NULL values = use defaults ("My Boards", default subtitle)
  * Reset via resetMockData() between tests for isolation
  */
-export let mockUserSettings = { ...INITIAL_MOCK_USER_SETTINGS }
+export const mockUserSettings = { ...INITIAL_MOCK_USER_SETTINGS }

mocks/handlers/index.ts

@@ -12,9 +12,6 @@ import type { HttpHandler } from 'msw'
 import { githubApiHandlers } from './github'
 import { supabaseHandlers } from './supabase'
 
-// Re-export mock data utilities for Storybook stories
-export { resetMockData } from './data'
-
 // Re-export individual handler groups for selective use
 export { githubApiHandlers } from './github'
 export {

src/app/(landing)/FeaturesSection.tsx

@@ -84,9 +84,9 @@ export const FeaturesSection = memo(function FeaturesSection() {
         </div>
 
         <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-          {features.map((feature, index) => (
+          {features.map((feature) => (
             <div
-              key={index}
+              key={feature.title}
               className="group border-border bg-background/50 hover:bg-background hover:border-primary/20 relative cursor-pointer rounded-2xl border p-8 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
             >
               <div className="text-primary mb-4 transition-transform duration-300 group-hover:scale-110">

src/app/(landing)/Footer.tsx

@@ -1,7 +1,8 @@
 'use client'
 
 import { Columns3, Github } from 'lucide-react'
-import React, { memo } from 'react'
+import Link from 'next/link'
+import { memo } from 'react'
 
 /**
  * Simple footer with logo, GitHub link, and credits.
@@ -17,15 +18,18 @@ export const Footer = memo(function Footer() {
           <span className="text-foreground text-sm font-medium">GitBox</span>
         </div>
         <div className="text-muted-foreground flex items-center gap-6 text-sm">
-          <a
+          <Link
             href="/privacy"
             className="hover:text-foreground transition-colors"
           >
             Privacy
-          </a>
-          <a href="/terms" className="hover:text-foreground transition-colors">
+          </Link>
+          <Link
+            href="/terms"
+            className="hover:text-foreground transition-colors"
+          >
             Terms
-          </a>
+          </Link>
           <a
             href="https://github.com/laststance/gitbox"
             target="_blank"

src/app/(landing)/Glow.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { cva, type VariantProps } from 'class-variance-authority'
-import React, { memo, useMemo } from 'react'
+import React, { memo } from 'react'
 
 import { cn } from '@/lib/utils'
 
@@ -49,21 +49,15 @@ export const Glow = memo(function Glow({
   ref,
   ...props
 }: GlowProps & { ref?: React.Ref<HTMLDivElement> }) {
-  const outerGlowClassName = useMemo(
-    () =>
-      variant === 'center'
-        ? `${GLOW_OUTER_BASE} ${GLOW_CENTER_TRANSLATE}`
-        : GLOW_OUTER_BASE,
-    [variant],
-  )
+  const outerGlowClassName =
+    variant === 'center'
+      ? `${GLOW_OUTER_BASE} ${GLOW_CENTER_TRANSLATE}`
+      : GLOW_OUTER_BASE
 
-  const innerGlowClassName = useMemo(
-    () =>
-      variant === 'center'
-        ? `${GLOW_INNER_BASE} ${GLOW_CENTER_TRANSLATE}`
-        : GLOW_INNER_BASE,
-    [variant],
-  )
+  const innerGlowClassName =
+    variant === 'center'
+      ? `${GLOW_INNER_BASE} ${GLOW_CENTER_TRANSLATE}`
+      : GLOW_INNER_BASE
 
   return (
     <div

src/app/(landing)/HowItWorksSection.tsx

@@ -46,9 +46,9 @@ export const HowItWorksSection = memo(function HowItWorksSection() {
         </div>
 
         <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-          {steps.map((item, index) => (
+          {steps.map((item) => (
             <div
-              key={index}
+              key={item.title}
               className="group border-border/50 bg-background/30 hover:bg-background/60 hover:border-primary/20 relative flex cursor-pointer gap-4 rounded-xl border p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-md"
             >
               <div className="bg-primary/10 text-primary flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-lg font-bold transition-transform duration-300 group-hover:scale-110">

src/app/board/[id]/loading.tsx

@@ -76,8 +76,8 @@ const Loading = memo(function Loading() {
 
       {/* Kanban columns skeleton */}
       <div className="flex flex-1 gap-4 overflow-x-auto p-4">
-        {columnCardCounts.map((count, i) => (
-          <ColumnSkeleton key={i} cardCount={count} />
+        {columnCardCounts.map((count) => (
+          <ColumnSkeleton key={count} cardCount={count} />
         ))}
       </div>
     </div>