oh-my-opencode 4.9.2 → 4.11.0

package/packages/omo-codex/plugin/skills/frontend/references/design/raycast.md

@@ -0,0 +1,268 @@
+# Design System Inspired by Raycast
+
+## 1. Visual Theme & Atmosphere
+
+Raycast's marketing site feels like the dark interior of a precision instrument — a Swiss watch case carved from obsidian. The background isn't just dark, it's an almost-black blue-tint (`#07080a`) that creates a sense of being inside a macOS native application rather than a website. Every surface, every border, every shadow is calibrated to evoke the feeling of a high-performance desktop utility: fast, minimal, trustworthy.
+
+The signature move is the layered shadow system borrowed from macOS window chrome: multi-layer box-shadows with inset highlights that simulate physical depth, as if cards and buttons are actual pressed or raised glass elements on a dark desk. Combined with Raycast Red (`#FF6363`) — deployed almost exclusively in the hero's iconic diagonal stripe pattern — the palette creates a brand that reads as "powerful tool with personality." The red doesn't dominate; it punctuates.
+
+Inter is used everywhere — headings, body, buttons, captions — with extensive OpenType features (`calt`, `kern`, `liga`, `ss03`) creating a consistent, readable typographic voice. The positive letter-spacing (0.2px–0.4px on body text) is unusual for a dark UI and gives the text an airy, breathable quality that counterbalances the dense, dark surfaces. GeistMono appears for code elements, reinforcing the developer-tool identity.
+
+**Key Characteristics:**
+- Near-black blue-tinted background (`#07080a`) — not pure black, subtly blue-shifted
+- macOS-native shadow system with multi-layer inset highlights simulating physical depth
+- Raycast Red (`#FF6363`) as a punctuation color — hero stripes, not pervasive
+- Inter with positive letter-spacing (0.2px) for an airy, readable dark-mode experience
+- Radix UI component primitives powering the interaction layer
+- Subtle rgba white borders (0.06–0.1 opacity) for containment on dark surfaces
+- Keyboard shortcut styling with gradient key caps and heavy shadows
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Near-Black Blue** (`#07080a`): Primary page background — the foundational void with a subtle blue-cold undertone
+- **Pure White** (`#ffffff`): Primary heading text, high-emphasis elements
+- **Raycast Red** (`#FF6363` / `hsl(0, 100%, 69%)`): Brand accent — hero stripes, danger states, critical highlights
+
+### Secondary & Accent
+- **Raycast Blue** (`hsl(202, 100%, 67%)` / ~`#55b3ff`): Interactive accent — links, focus states, selected items
+- **Raycast Green** (`hsl(151, 59%, 59%)` / ~`#5fc992`): Success states, positive indicators
+- **Raycast Yellow** (`hsl(43, 100%, 60%)` / ~`#ffbc33`): Warning accents, highlights
+- **Blue Transparent** (`hsla(202, 100%, 67%, 0.15)`): Blue tint overlay for interactive surfaces
+- **Red Transparent** (`hsla(0, 100%, 69%, 0.15)`): Red tint overlay for danger/error surfaces
+
+### Surface & Background
+- **Deep Background** (`#07080a`): Page canvas, the darkest surface
+- **Surface 100** (`#101111`): Elevated surface, card backgrounds
+- **Key Start** (`#121212`): Keyboard key gradient start
+- **Key End** (`#0d0d0d`): Keyboard key gradient end
+- **Card Surface** (`#1b1c1e`): Badge backgrounds, tag fills, elevated containers
+- **Button Foreground** (`#18191a`): Dark surface for button text on light backgrounds
+
+### Neutrals & Text
+- **Near White** (`#f9f9f9` / `hsl(240, 11%, 96%)`): Primary body text, high-emphasis content
+- **Light Gray** (`#cecece` / `#cdcdce`): Secondary body text, descriptions
+- **Silver** (`#c0c0c0`): Tertiary text, subdued labels
+- **Medium Gray** (`#9c9c9d`): Link default color, secondary navigation
+- **Dim Gray** (`#6a6b6c`): Disabled text, low-emphasis labels
+- **Dark Gray** (`#434345`): Muted borders, inactive navigation links
+- **Border** (`hsl(195, 5%, 15%)` / ~`#252829`): Standard border color for cards and dividers
+- **Dark Border** (`#2f3031`): Separator lines, table borders
+
+### Semantic & Accent
+- **Error Red** (`hsl(0, 100%, 69%)`): Error states, destructive actions
+- **Success Green** (`hsl(151, 59%, 59%)`): Success confirmations, positive states
+- **Warning Yellow** (`hsl(43, 100%, 60%)`): Warnings, attention-needed states
+- **Info Blue** (`hsl(202, 100%, 67%)`): Informational highlights, links
+
+### Gradient System
+- **Keyboard Key Gradient**: Linear gradient from `#121212` (top) to `#0d0d0d` (bottom) — simulates physical key depth
+- **Warm Glow**: `rgba(215, 201, 175, 0.05)` radial spread — subtle warm ambient glow behind featured elements
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Inter` — humanist sans-serif, used everywhere. Fallbacks: `Inter Fallback`, system sans-serif
+- **System**: `SF Pro Text` — Apple system font for select macOS-native UI elements. Fallbacks: `SF Pro Icons`, `Inter`, `Inter Fallback`
+- **Monospace**: `GeistMono` — Vercel's monospace font for code elements. Fallbacks: `ui-monospace`, `SFMono-Regular`, `Roboto Mono`, `Menlo`, `Monaco`
+- **OpenType features**: `calt`, `kern`, `liga`, `ss03` enabled globally; `ss02`, `ss08` on display text; `liga` disabled (`"liga" 0`) on hero headings
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Display Hero | 64px | 600 | 1.10 | 0px | OpenType: liga 0, ss02, ss08 |
+| Section Display | 56px | 400 | 1.17 | 0.2px | OpenType: calt, kern, liga, ss03 |
+| Section Heading | 24px | 500 | normal | 0.2px | OpenType: calt, kern, liga, ss03 |
+| Card Heading | 22px | 400 | 1.15 | 0px | OpenType: calt, kern, liga, ss03 |
+| Sub-heading | 20px | 500 | 1.60 | 0.2px | Relaxed line-height for readability |
+| Body Large | 18px | 400 | 1.15 | 0.2px | OpenType: calt, kern, liga, ss03 |
+| Body | 16px | 500 | 1.60 | 0.2px | Primary body text, relaxed rhythm |
+| Body Tight | 16px | 400 | 1.15 | 0.1px | UI labels, compact contexts |
+| Button | 16px | 600 | 1.15 | 0.3px | Semibold, slightly wider tracking |
+| Nav Link | 16px | 500 | 1.40 | 0.3px | Links in navigation |
+| Caption | 14px | 500 | 1.14 | 0.2px | Small labels, metadata |
+| Caption Bold | 14px | 600 | 1.40 | 0px | Emphasized captions |
+| Small | 12px | 600 | 1.33 | 0px | Badges, tags, micro-labels |
+| Small Link | 12px | 400 | 1.50 | 0.4px | Footer links, fine print |
+| Code | 14px (GeistMono) | 500 | 1.60 | 0.3px | Code blocks, technical content |
+| Code Small | 12px (GeistMono) | 400 | 1.60 | 0.2px | Inline code, terminal output |
+
+### Principles
+- **Positive tracking on dark**: Unlike most dark UIs that use tight or neutral letter-spacing, Raycast applies +0.2px to +0.4px — creating an airy, readable feel that compensates for the dark background
+- **Weight 500 as baseline**: Most body text uses medium weight (500), not regular (400) — subtle extra heft improves legibility on dark surfaces
+- **Display restraint**: Hero text at 64px/600 is confident but not oversized — Raycast avoids typographic spectacle in favor of functional elegance
+- **OpenType everywhere**: `ss03` (stylistic set 3) is enabled globally across Inter, giving the typeface a slightly more geometric, tool-like quality
+
+## 4. Component Stylings
+
+### Buttons
+- **Primary Pill**: Transparent background, white text, pill shape (86px radius), multi-layer inset shadow (`rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset`). Hover: opacity 0.6
+- **Secondary Button**: Transparent background, white text, 6px radius, `1px solid rgba(255, 255, 255, 0.1)` border, subtle drop shadow (`rgba(0, 0, 0, 0.03) 0px 7px 3px`). Hover: opacity 0.6
+- **Ghost Button**: No background or border, gray text (`#6a6b6c`), 86px radius, same inset shadow. Hover: opacity 0.6, text brightens to white
+- **CTA (Download)**: Semi-transparent white background (`hsla(0, 0%, 100%, 0.815)`), dark text (`#18191a`), pill shape. Hover: full white background (`hsl(0, 0%, 100%)`)
+- **Transition**: All buttons use opacity transition for hover rather than background-color change — a signature Raycast interaction pattern
+
+### Cards & Containers
+- **Standard Card**: `#101111` surface, `1px solid rgba(255, 255, 255, 0.06)` border, 12px–16px border-radius
+- **Elevated Card**: Ring shadow `rgb(27, 28, 30) 0px 0px 0px 1px` outer + `rgb(7, 8, 10) 0px 0px 0px 1px inset` inner — creates a double-ring containment
+- **Feature Card**: 16px–20px border-radius, subtle warm glow (`rgba(215, 201, 175, 0.05) 0px 0px 20px 5px`) behind hero elements
+- **Hover**: Cards brighten slightly via border opacity increase or subtle shadow enhancement
+
+### Inputs & Forms
+- Dark input fields with `#07080a` background, `1px solid rgba(255, 255, 255, 0.08)` border, 8px border-radius
+- Focus state: Border brightens, blue glow (`hsla(202, 100%, 67%, 0.15)`) ring appears
+- Text: `#f9f9f9` input color, `#6a6b6c` placeholder
+- Labels: `#9c9c9d` at 14px weight 500
+
+### Navigation
+- **Top nav**: Dark background blending with page, white text links at 16px weight 500
+- **Nav links**: Gray text (`#9c9c9d`) → white on hover, underline decoration on hover
+- **CTA button**: Semi-transparent white pill at nav end
+- **Mobile**: Collapses to hamburger, maintains dark theme
+- **Sticky**: Nav fixed at top with subtle border separator
+
+### Image Treatment
+- **Product screenshots**: macOS window chrome style — rounded corners (12px), deep shadows simulating floating windows
+- **Full-bleed sections**: Dark screenshots blend seamlessly into the dark background
+- **Hero illustration**: Diagonal stripe pattern in Raycast Red — abstract, geometric, brand-defining
+- **App UI embeds**: Showing actual Raycast command palette and extensions — product as content
+
+### Keyboard Shortcut Keys
+- **Key cap styling**: Gradient background (`#121212` → `#0d0d0d`), heavy multi-layer shadow (`rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px` + inset shadows), creating realistic physical key appearance
+- Border-radius: 4px–6px for individual keys
+
+### Badges & Tags
+- **Neutral badge**: `#1b1c1e` background, white text, 6px radius, 14px font at weight 500, `0px 6px` padding
+- Compact, pill-like treatment for categorization
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Scale**: 1px, 2px, 3px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px
+- **Section padding**: 80px–120px vertical between major sections
+- **Card padding**: 16px–32px internal spacing
+- **Component gaps**: 8px–16px between related elements
+
+### Grid & Container
+- **Max width**: ~1200px container (breakpoint at 1204px), centered
+- **Column patterns**: Single-column hero, 2–3 column feature grids, full-width showcase sections
+- **App showcase**: Product UI presented in centered window frames
+
+### Whitespace Philosophy
+- **Dramatic negative space**: Sections float in vast dark void, creating cinematic pacing between features
+- **Dense product, sparse marketing**: The product UI screenshots are information-dense, but the surrounding marketing copy uses minimal text with generous spacing
+- **Vertical rhythm**: Consistent 24px–32px gaps between elements within sections
+
+### Border Radius Scale
+- **2px–3px**: Micro-elements, code spans, tiny indicators
+- **4px–5px**: Keyboard keys, small interactive elements
+- **6px**: Buttons, badges, tags — the workhorse radius
+- **8px**: Input fields, inline components
+- **9px–11px**: Images, medium containers
+- **12px**: Standard cards, product screenshots
+- **16px**: Large cards, feature sections
+- **20px**: Hero cards, prominent containers
+- **86px+**: Pill buttons, nav CTAs — full pill shape
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Void) | No shadow, `#07080a` surface | Page background |
+| Level 1 (Subtle) | `rgba(0, 0, 0, 0.28) 0px 1.189px 2.377px` | Minimal lift, inline elements |
+| Level 2 (Ring) | `rgb(27, 28, 30) 0px 0px 0px 1px` outer + `rgb(7, 8, 10) 0px 0px 0px 1px inset` inner | Card containment, double-ring technique |
+| Level 3 (Button) | `rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset` + `rgba(255, 255, 255, 0.25) 0px 0px 0px 1px` + `rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset` | macOS-native button press — white highlight top, dark inset bottom |
+| Level 4 (Key) | 5-layer shadow stack with inset press effects | Keyboard shortcut key caps — physical 3D appearance |
+| Level 5 (Floating) | `rgba(0, 0, 0, 0.5) 0px 0px 0px 2px` + `rgba(255, 255, 255, 0.19) 0px 0px 14px` + insets | Command palette, floating panels — heavy depth with glow |
+
+### Shadow Philosophy
+Raycast's shadow system is the most macOS-native on the web. Multi-layer shadows combine:
+- **Outer rings** for containment (replacing traditional borders)
+- **Inset top highlights** (`rgba(255, 255, 255, 0.05–0.25)`) simulating light source from above
+- **Inset bottom darks** (`rgba(0, 0, 0, 0.2)`) simulating shadow underneath
+- The effect is physical: elements feel like glass or brushed metal, not flat rectangles
+
+### Decorative Depth
+- **Warm glow**: `rgba(215, 201, 175, 0.05) 0px 0px 20px 5px` behind featured elements — a subtle warm aura on the cold dark canvas
+- **Blue info glow**: `rgba(0, 153, 255, 0.15)` for interactive state emphasis
+- **Red danger glow**: `rgba(255, 99, 99, 0.15)` for error/destructive state emphasis
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#07080a` (not pure black) as the background — the blue-cold tint is essential to the Raycast feel
+- Apply positive letter-spacing (+0.2px) on body text — this is deliberately different from most dark UIs
+- Use multi-layer shadows with inset highlights for interactive elements — the macOS-native depth is signature
+- Keep Raycast Red (`#FF6363`) as punctuation, not pervasive — reserve it for hero moments and error states
+- Use `rgba(255, 255, 255, 0.06)` borders for card containment — barely visible, structurally essential
+- Apply weight 500 as the body text baseline — medium weight improves dark-mode legibility
+- Use pill shapes (86px+ radius) for primary CTAs, rectangular shapes (6px–8px) for secondary actions
+- Enable OpenType features `calt`, `kern`, `liga`, `ss03` on all Inter text
+- Use opacity transitions (hover: opacity 0.6) for button interactions, not color changes
+
+### Don't
+- Use pure black (`#000000`) as the background — the blue tint differentiates Raycast from generic dark themes
+- Apply negative letter-spacing on body text — Raycast deliberately uses positive spacing for readability
+- Use Raycast Blue as the primary accent for everything — blue is for interactive/info, red is the brand color
+- Create single-layer flat shadows — the multi-layer inset system is core to the macOS-native aesthetic
+- Use regular weight (400) for body text when 500 is available — the extra weight prevents dark-mode text from feeling thin
+- Mix warm and cool borders — stick to the cool gray (`hsl(195, 5%, 15%)`) border palette
+- Apply heavy drop shadows without inset companions — shadows always come in pairs (outer + inset)
+- Use decorative elements, gradients, or colorful backgrounds — the dark void is the stage, content is the performer
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <600px | Single column, stacked cards, hamburger nav, hero text reduces to ~40px |
+| Small Tablet | 600px–768px | 2-column grid begins, nav partially visible |
+| Tablet | 768px–1024px | 2–3 column features, nav expanding, screenshots scale |
+| Desktop | 1024px–1200px | Full layout, all nav links visible, 64px hero display |
+| Large Desktop | >1200px | Max-width container centered, generous side margins |
+
+### Touch Targets
+- Pill buttons: 86px radius with 20px padding — well above 44px minimum
+- Secondary buttons: 8px padding minimum, but border provides visual target expansion
+- Nav links: 16px text with surrounding padding for accessible touch targets
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav → hamburger at mobile with slide-out menu
+- **Hero**: 64px display → 48px → 36px across breakpoints
+- **Feature grids**: 3-column → 2-column → single-column stack
+- **Product screenshots**: Scale within containers, maintaining macOS window chrome proportions
+- **Keyboard shortcut displays**: Simplify or hide on mobile where keyboard shortcuts are irrelevant
+
+### Image Behavior
+- Product screenshots scale responsively within fixed-ratio containers
+- Hero diagonal stripe pattern scales proportionally
+- macOS window chrome rounded corners maintained at all sizes
+- No lazy-loading artifacts — images are critical to the product narrative
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary Background: Near-Black Blue (`#07080a`)
+- Primary Text: Near White (`#f9f9f9`)
+- Brand Accent: Raycast Red (`#FF6363`)
+- Interactive Blue: Raycast Blue (`hsl(202, 100%, 67%)` / ~`#55b3ff`)
+- Secondary Text: Medium Gray (`#9c9c9d`)
+- Card Surface: Surface 100 (`#101111`)
+- Border: Dark Border (`hsl(195, 5%, 15%)` / ~`#252829`)
+
+### Example Component Prompts
+- "Create a hero section on #07080a background with 64px Inter heading (weight 600, line-height 1.1), near-white text (#f9f9f9), and a semi-transparent white pill CTA button (hsla(0,0%,100%,0.815), 86px radius, dark text #18191a)"
+- "Design a feature card with #101111 background, 1px solid rgba(255,255,255,0.06) border, 16px border-radius, double-ring shadow (rgb(27,28,30) 0px 0px 0px 1px outer), 22px Inter heading, and #9c9c9d body text"
+- "Build a navigation bar on dark background (#07080a), Inter links at 16px weight 500 in #9c9c9d, hover to white, and a translucent white pill button at the right end"
+- "Create a keyboard shortcut display with key caps using gradient background (#121212→#0d0d0d), 5-layer shadow for physical depth, 4px radius, Inter 12px weight 600 text"
+- "Design an alert card with #101111 surface, Raycast Red (#FF6363) left border accent, translucent red glow (hsla(0,100%,69%,0.15)), white heading, and #cecece description text"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Check the background is `#07080a` not pure black — the blue tint is critical
+2. Verify letter-spacing is positive (+0.2px) on body text — negative spacing breaks the Raycast aesthetic
+3. Ensure shadows have both outer and inset layers — single-layer shadows look flat and wrong
+4. Confirm Inter has OpenType features `calt`, `kern`, `liga`, `ss03` enabled
+5. Test that hover states use opacity transitions (0.6) not color swaps — this is a core interaction pattern

package/packages/omo-codex/plugin/skills/frontend/references/design/react-dev-tooling-skill.md

@@ -0,0 +1,230 @@
+# React Dev Tooling Defaults
+
+When setting up or working on a React project, install three dev-only tools by default unless the user explicitly opts out. They make every coding agent's frontend work measurably faster and the resulting code measurably better.
+
+## The three tools
+
+| Tool | What it does | Why it's a default |
+|---|---|---|
+| **react-grab** | Cmd/Ctrl+C on any UI element copies its source location + nearby code + component stack into the clipboard, formatted for an AI agent to act on. | Cuts agent edit time **~2×** because the agent receives the actual source coordinates instead of guessing from a screenshot. From the author of Million.dev. |
+| **react-scan** | Visually highlights every component render in dev. Detects unnecessary re-renders, slow renders, and tracks render causes. Has a headless `react-scan/lite` mode for automated perf measurement. | Catches re-render regressions the moment they happen, before they ship. Pairs with the perfection ruleset (`../perfection/README.md`) for Lighthouse 100 work. |
+| **react-doctor** | Static scanner that finds bad React patterns across state & effects, perf, architecture, security, a11y. One-shot `npx react-doctor@latest` audit + CI GitHub Action + agent-skill installer. | Catches AI-generated React anti-patterns deterministically. Run before commit and in CI. Installs itself as a Claude Code / OpenCode / Cursor / Codex skill so the agent learns from each scan. |
+
+All three are **dev-only** (`process.env.NODE_ENV === 'development'` or `import.meta.env.DEV`). None ship to production.
+
+## Default install for a React project
+
+Run from project root. This is the canonical setup. Skip ONLY if the user says "no extra dev tools" or the project README explicitly forbids them.
+
+```bash
+# 1. react-grab — adds itself to package.json + entry file with dev gate
+npx grab@latest init
+
+# 2. react-doctor — first audit + agent-skill install
+npx react-doctor@latest install
+
+# 3. react-scan — adds itself with dev gate
+npx react-scan@latest init
+```
+
+The `init`/`install` CLIs handle framework detection and gating for you. If the CLI fails or the project uses a non-standard setup, fall back to the manual snippets below.
+
+After install, confirm by reading the diff. Each tool should appear ONLY behind a `process.env.NODE_ENV === "development"` / `import.meta.env.DEV` gate.
+
+## Manual install (when the CLI does not fit)
+
+### Next.js (App Router) — `app/layout.tsx`
+
+```tsx
+import Script from "next/script";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        {process.env.NODE_ENV === "development" && (
+          <>
+            <Script
+              src="//unpkg.com/react-grab/dist/index.global.js"
+              crossOrigin="anonymous"
+              strategy="beforeInteractive"
+            />
+            <Script
+              src="//unpkg.com/react-scan/dist/auto.global.js"
+              crossOrigin="anonymous"
+              strategy="beforeInteractive"
+            />
+          </>
+        )}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+### Next.js (Pages Router) — `pages/_document.tsx`
+
+Same pattern, but the `<Script>` tags live inside `<Head>` from `next/document` and gate on `process.env.NODE_ENV === 'development'`.
+
+### Vite — `src/main.tsx` (or wherever the entry is)
+
+```tsx
+if (import.meta.env.DEV) {
+  void import("react-grab");
+  void import("react-scan");
+}
+```
+
+Optionally add the Vite plugin for richer `displayName` data on react-scan:
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import reactScan from "vite-plugin-react-scan";
+
+export default defineConfig({
+  plugins: [react(), reactScan()],
+});
+```
+
+### Webpack / CRA — entry file top
+
+```ts
+if (process.env.NODE_ENV === "development") {
+  void import("react-grab");
+  void import("react-scan");
+}
+```
+
+### Remix — `app/root.tsx`
+
+```tsx
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        {process.env.NODE_ENV === "development" && (
+          <>
+            <script crossOrigin="anonymous" src="//unpkg.com/react-grab/dist/index.global.js" />
+            <script crossOrigin="anonymous" src="//unpkg.com/react-scan/dist/auto.global.js" />
+          </>
+        )}
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+```
+
+### Astro — `src/layouts/Layout.astro`
+
+```astro
+---
+const isDev = import.meta.env.DEV;
+---
+<head>
+  {isDev && (
+    <>
+      <script crossorigin="anonymous" src="//unpkg.com/react-grab/dist/index.global.js" is:inline></script>
+      <script crossorigin="anonymous" src="//unpkg.com/react-scan/dist/auto.global.js" is:inline></script>
+    </>
+  )}
+</head>
+```
+
+## react-doctor — wire the scan, not the bundle
+
+react-doctor is a one-shot CLI plus a CI action, NOT a runtime injection. Wire it in three places:
+
+1. **As an agent skill** so your coding agent learns from each scan and avoids the issues next time:
+
+   ```bash
+   npx react-doctor@latest install
+   ```
+
+   Detects Claude Code / OpenCode / Cursor / Codex automatically and writes the skill into the right location.
+
+2. **As a local pre-commit / scripted gate:**
+
+   ```bash
+   # Manual audit
+   npx react-doctor@latest
+
+   # JSON for scripting / CI
+   npx react-doctor@latest --json > .react-doctor-report.json
+   ```
+
+3. **As a CI gate** that blocks PRs when the static scan regresses:
+
+   ```yaml
+   # .github/workflows/react-doctor.yml
+   name: React Doctor
+   on: [pull_request]
+   jobs:
+     audit:
+       runs-on: ubuntu-latest
+       steps:
+         - uses: actions/checkout@v4
+         - uses: millionco/react-doctor@main
+   ```
+
+## Feature flag — opt-out without surgery
+
+The `NODE_ENV === "development"` gate already keeps these out of production. For temporarily disabling the runtime tools during a dev session (e.g. when profiling without instrumentation overhead), put one env var in front:
+
+```ts
+// entry file
+const enableDevTools =
+  process.env.NODE_ENV === "development" &&
+  process.env.NEXT_PUBLIC_DISABLE_REACT_DEVTOOLS !== "1";
+
+if (enableDevTools) {
+  void import("react-grab");
+  void import("react-scan");
+}
+```
+
+Then `NEXT_PUBLIC_DISABLE_REACT_DEVTOOLS=1 npm run dev` skips both without re-editing code.
+
+For Vite use `VITE_DISABLE_REACT_DEVTOOLS`, for CRA use `REACT_APP_DISABLE_REACT_DEVTOOLS`. The variable name MUST start with the framework's required prefix or it won't reach the bundle.
+
+## When NOT to install these
+
+- **The project is not React.** None of these apply to Solid, Svelte, Vue, Qwik, or any non-React framework. Skip silently.
+- **The user explicitly said "no extra dev dependencies"** or the README forbids them. Respect that.
+- **The project ships React 16 or earlier.** react-scan and react-doctor target modern React (17+, often 18+). Check `package.json` first; if the project is on legacy React, skip the runtime tools and only run react-doctor's static scan (it's framework-tolerant).
+- **The project is a library, not an app.** Libraries have no entry file to inject into; only consumers (apps) should run the runtime tools. The static scan still applies.
+
+## Verification
+
+After install, sanity-check that the tools are loaded ONLY in dev:
+
+```bash
+# 1. Build for production
+npm run build && npm run start  # or vite build && vite preview, etc.
+
+# 2. Open the production URL and verify
+#    - No react-grab toolbar visible
+#    - No react-scan overlay or console output
+#    - DOM contains zero <script> tags pointing at unpkg.com/react-grab or unpkg.com/react-scan
+curl -s http://localhost:3000 | grep -E 'react-grab|react-scan' && echo "LEAK — fix the gate" || echo "OK"
+```
+
+If any of those leak into production, the dev gate is broken. Fix the gate before declaring done.
+
+## Cross-skill references
+
+- For **render performance / Lighthouse 100** work, see `../perfection/react-perf-tooling.md` — Playwright + `react-scan/lite` integration used during automated audits.
+- For **debugging an in-flight React bug**, see `../../debugging/references/tools/react-devtools.md` — runtime/static use during a bug hunt rather than initial setup.
+- The Phase 0 Design System Gate (in `README.md`) and this React Dev Tooling Gate are both pre-implementation gates. Run Phase 0 first (design system must exist), then this gate (dev tooling must be installed).
+
+## Mantra
+
+> **Every React project the agent sets up gets these three tools wired with dev-only gates by default. The user opts out, not in.**