Merge pull request #163 from laststance/chore/react-doctor-findings

chore: address react doctor findings

Author: ryota-murakami

e2e/fixtures/electron-app.ts

@@ -34,6 +34,8 @@ export const test = baseTest.extend<ElectronFixtures>({
   // eslint-disable-next-line no-empty-pattern
   isolatedHome: async ({}, use) => {
     const home = createIsolatedHome()
+    // Playwright's fixture callback is named `use`; this is not a React Hook.
+    // react-doctor-disable-next-line react-hooks/rules-of-hooks
     await use(home)
     destroyIsolatedHome(home)
   },
@@ -57,12 +59,16 @@ export const test = baseTest.extend<ElectronFixtures>({
         E2E_BACKGROUND_LAUNCH: process.env['E2E_BACKGROUND_LAUNCH'] ?? '1',
       },
     })
+    // Playwright's fixture callback is named `use`; this is not a React Hook.
+    // react-doctor-disable-next-line react-hooks/rules-of-hooks
     await use(app)
     await app.close()
   },
   appWindow: async ({ electronApp }, use) => {
     const window = await electronApp.firstWindow()
     await window.waitForLoadState('domcontentloaded')
+    // Playwright's fixture callback is named `use`; this is not a React Hook.
+    // react-doctor-disable-next-line react-hooks/rules-of-hooks
     await use(window)
   },
 })

e2e/helpers/redux.ts

@@ -57,6 +57,9 @@ export async function getStoreState<T, A = undefined>(
           'window.__store__ is not exposed. Did you build with E2E_BUILD=1?',
         )
       }
+      // Test selectors are trusted code passed by specs; dynamic rebuild is
+      // what preserves helpful selector-source errors across the browser wall.
+      // react-doctor-disable-next-line react-doctor/no-eval
       const fn = new Function(
         'state',
         'args',

src/renderer/src/bootstrap.test.ts

@@ -20,6 +20,7 @@
 
 import { readFileSync } from 'node:fs'
 import { resolve } from 'node:path'
+import { runInThisContext } from 'node:vm'
 
 import { beforeEach, describe, expect, it } from 'vitest'
 
@@ -119,10 +120,9 @@ function installStorageMock(): StorageMock {
 
 function runBootstrap(): void {
   const script = loadBootstrapScript()
-  // Using `new Function` (not `eval`) keeps the script in its own lexical
-  // scope so test-file locals can't leak in. The IIFE wrapper inside the
-  // script provides its own isolation on top of that.
-  new Function(script)()
+  // Run the inline script in the global VM context so test-file locals cannot
+  // leak in while `document` and `localStorage` stay available.
+  runInThisContext(script, { filename: 'renderer-theme-bootstrap.js' })
 }
 
 beforeEach(() => {

src/renderer/src/components/skills/UndoToast.tsx

@@ -75,7 +75,7 @@ export const UndoToast = React.memo(function UndoToast({
   toastId,
 }: UndoToastProps): React.ReactElement {
   const expiresAtMs = new Date(expiresAt).getTime()
-  const [remainingMs, setRemainingMs] = useState(
+  const [remainingMs, setRemainingMs] = useState(() =>
     Math.max(0, expiresAtMs - Date.now()),
   )
   const [isRestoring, setIsRestoring] = useState(false)

website/src/app/page.tsx

@@ -1,8 +1,16 @@
+import type { Metadata } from 'next'
+
 import { Hero } from '@/components/Hero'
 import { Features } from '@/components/Features'
 import { Download } from '@/components/Download'
 import { Footer } from '@/components/Footer'
 
+export const metadata: Metadata = {
+  title: 'Skills Desktop - AI Agent Skills Manager',
+  description:
+    'Visualize and manage installed Skills across AI agents, inspect symlink status, and keep local coding tools in sync.',
+}
+
 export default function Home() {
   return (
     <main className="min-h-screen">

website/src/components/Download.tsx

@@ -8,12 +8,12 @@ export function Download() {
       <div className="container mx-auto px-4">
         <div className="relative overflow-hidden rounded-2xl border border-border bg-card/30">
           {/* Background decoration */}
-          <div className="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-primary/10 blur-3xl" />
-          <div className="absolute -bottom-20 -left-20 h-64 w-64 rounded-full bg-accent/10 blur-3xl" />
+          <div className="absolute -right-20 -top-20 size-64 rounded-full bg-primary/10 blur-3xl" />
+          <div className="absolute -bottom-20 -left-20 size-64 rounded-full bg-accent/10 blur-3xl" />
 
           <div className="relative p-8 sm:p-12 lg:p-16">
             <div className="mx-auto max-w-3xl text-center">
-              <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
+              <h2 className="mb-4 text-3xl font-semibold tracking-tight sm:text-4xl">
                 Ready to Get Started?
               </h2>
               <p className="mb-10 text-lg text-muted-foreground">
@@ -28,7 +28,7 @@ export function Download() {
                   href="https://github.com/laststance/skills-desktop/releases/download/v0.17.0/skills-desktop-0.17.0-arm64.dmg"
                   className="inline-flex w-full items-center justify-center gap-3 rounded-xl bg-primary px-8 py-4 text-lg font-semibold text-primary-foreground transition-all hover:bg-primary/90 hover:scale-105 sm:w-auto"
                 >
-                  <Apple className="h-6 w-6" />
+                  <Apple className="size-6" />
                   <div className="text-left">
                     <div>Download for Mac</div>
                     <div className="text-xs font-normal opacity-80">
@@ -41,7 +41,7 @@ export function Download() {
                   href="https://github.com/laststance/skills-desktop/releases/download/v0.17.0/skills-desktop-0.17.0-x64.dmg"
                   className="inline-flex w-full items-center justify-center gap-3 rounded-xl border border-border bg-card/50 px-8 py-4 text-lg font-semibold transition-all hover:bg-card hover:scale-105 sm:w-auto"
                 >
-                  <Cpu className="h-6 w-6" />
+                  <Cpu className="size-6" />
                   <div className="text-left">
                     <div>Download for Mac</div>
                     <div className="text-xs font-normal text-muted-foreground">
@@ -57,7 +57,7 @@ export function Download() {
                   href="https://github.com/laststance/skills-desktop/releases"
                   className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground"
                 >
-                  <DownloadIcon className="h-4 w-4" />
+                  <DownloadIcon className="size-4" />
                   View all releases on GitHub
                 </a>
               </div>

website/src/components/Features.tsx

@@ -47,7 +47,7 @@ export function Features() {
       <div className="container mx-auto px-4">
         {/* Section header */}
         <div className="mb-16 text-center">
-          <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
+          <h2 className="mb-4 text-3xl font-semibold tracking-tight sm:text-4xl">
             Everything You Need to Manage Skills
           </h2>
           <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
@@ -58,13 +58,13 @@ export function Features() {
 
         {/* Feature grid */}
         <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
-          {features.map((feature, index) => (
+          {features.map((feature) => (
             <div
-              key={index}
+              key={feature.title}
               className="group relative rounded-xl border border-border bg-card/30 p-6 transition-all hover:border-primary/50 hover:bg-card/50"
             >
               <div className="mb-4 inline-flex rounded-lg bg-primary/10 p-3 text-primary">
-                <feature.icon className="h-6 w-6" />
+                <feature.icon className="size-6" />
               </div>
               <h3 className="mb-2 text-xl font-semibold">{feature.title}</h3>
               <p className="text-muted-foreground">{feature.description}</p>

website/src/components/Footer.tsx

@@ -23,19 +23,22 @@ export function Footer() {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <Github className="h-5 w-5" />
+              <Github className="size-5" />
             </a>
             <a
               href="https://twitter.com/laaboratory"
               className="text-muted-foreground hover:text-foreground"
               target="_blank"
               rel="noopener noreferrer"
             >
-              <Twitter className="h-5 w-5" />
+              <Twitter className="size-5" />
             </a>
           </div>
 
-          <div className="text-sm text-muted-foreground">
+          <div
+            className="text-sm text-muted-foreground"
+            suppressHydrationWarning
+          >
             © {new Date().getFullYear()} Laststance.io. MIT License.
           </div>
         </div>

website/src/components/Hero.tsx

@@ -12,12 +12,12 @@ export function Hero() {
         <div className="flex flex-col items-center text-center">
           {/* Badge */}
           <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-border bg-card/50 px-4 py-1.5 text-sm text-muted-foreground">
-            <span className="h-2 w-2 rounded-full bg-primary animate-pulse" />
+            <span className="size-2 rounded-full bg-primary animate-pulse" />
             Now available for macOS
           </div>
 
           {/* Title */}
-          <h1 className="mb-6 max-w-4xl text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
+          <h1 className="mb-6 max-w-4xl text-4xl font-semibold tracking-tight sm:text-5xl lg:text-6xl">
             Manage Your AI Agent <span className="gradient-text">Skills</span>{' '}
             in One Place
           </h1>
@@ -34,7 +34,7 @@ export function Hero() {
               href="https://github.com/laststance/skills-desktop/releases/download/v0.17.0/skills-desktop-0.17.0-arm64.dmg"
               className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-8 py-3 text-lg font-semibold text-primary-foreground transition-all hover:bg-primary/90 hover:scale-105"
             >
-              <Apple className="h-5 w-5" />
+              <Apple className="size-5" />
               <div className="text-left">
                 <div>Download for Mac</div>
                 <div className="text-xs font-normal opacity-80">
@@ -46,7 +46,7 @@ export function Hero() {
               href="https://github.com/laststance/skills-desktop/releases/download/v0.17.0/skills-desktop-0.17.0-x64.dmg"
               className="inline-flex items-center justify-center gap-2 rounded-lg border border-border bg-card/50 px-8 py-3 text-lg font-semibold transition-all hover:bg-card hover:scale-105"
             >
-              <Cpu className="h-5 w-5" />
+              <Cpu className="size-5" />
               <div className="text-left">
                 <div>Download for Mac</div>
                 <div className="text-xs font-normal text-muted-foreground">
@@ -69,9 +69,9 @@ export function Hero() {
             <div className="absolute -inset-4 rounded-2xl bg-gradient-to-r from-primary/20 via-accent/20 to-primary/20 blur-2xl" />
             <div className="glass relative overflow-hidden rounded-xl shadow-2xl">
               <div className="flex h-8 items-center gap-2 border-b border-border/50 bg-card/80 px-4">
-                <div className="h-3 w-3 rounded-full bg-red-500" />
-                <div className="h-3 w-3 rounded-full bg-yellow-500" />
-                <div className="h-3 w-3 rounded-full bg-green-500" />
+                <div className="size-3 rounded-full bg-red-500" />
+                <div className="size-3 rounded-full bg-yellow-500" />
+                <div className="size-3 rounded-full bg-green-500" />
                 <span className="ml-4 text-sm text-muted-foreground">
                   Skills Desktop
                 </span>