{"owner":"aidenybai","repo":"react-scan","hasSkills":true,"totalSkillsCount":23,"totalTokensCount":11593,"categories":["anthropic-skill","command-prompt","plugin-manifest","root-instruction"],"hasMcp":false,"mcpConfig":null,"found":["packages/website/AGENTS.md",".cursor/skills/animation-best-practices/SKILL.md",".cursor/commands/deslop.md","packages/website/README.md","packages/website/tsconfig.json","packages/website/package.json","AGENTS.md","packages/vite-plugin-react-scan/CHANGELOG.md","packages/vite-plugin-react-scan/README.md","packages/vite-plugin-react-scan/package.json","packages/scan/CHANGELOG.md","packages/vite-plugin-react-scan/tsconfig.json","packages/scan/package.json","packages/scan/README.md","packages/scan/tsconfig.json","packages/extension/CHANGELOG.md","packages/extension/package.json","packages/extension/README.md","packages/extension/tsconfig.json","packages/extension/tsconfig.node.json","packages/extension/src/manifest.chrome.json","packages/extension/src/manifest.firefox.json","packages/scan/src/react-component-name/tsconfig.json"],"skills":{"packages/website/AGENTS.md":"Concise rules for building accessible, fast, delightful UIs Use MUST/SHOULD/NEVER to guide decisions\n\n## Interactions\n\n- Keyboard\n  - MUST: Full keyboard support per [WAI-ARIA APG](https://www.w3.org/WAI/ARIA/apg/patterns/)\n  - MUST: Visible focus rings (`:focus-visible`; group with `:focus-within`)\n  - MUST: Manage focus (trap, move, and return) per APG patterns\n- Targets & input\n  - MUST: Hit target ≥24px (mobile ≥44px) If visual <24px, expand hit area\n  - MUST: Mobile `<input>` font-size ≥16px or set:\n    ```html\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover\"\n    />\n    ```\n  - NEVER: Disable browser zoom\n  - MUST: `touch-action: manipulation` to prevent double-tap zoom; set `-webkit-tap-highlight-color` to match design\n- Inputs & forms (behavior)\n  - MUST: Hydration-safe inputs (no lost focus/value)\n  - NEVER: Block paste in `<input>/<textarea>`\n  - MUST: Loading buttons show spinner and keep original label\n  - MUST: Enter submits focused text input In `<textarea>`, ⌘/Ctrl+Enter submits; Enter adds newline\n  - MUST: Keep submit enabled until request starts; then disable, show spinner, use idempotency key\n  - MUST: Don't block typing; accept free text and validate after\n  - MUST: Allow submitting incomplete forms to surface validation\n  - MUST: Errors inline next to fields; on submit, focus first error\n  - MUST: `autocomplete` + meaningful `name`; correct `type` and `inputmode`\n  - SHOULD: Disable spellcheck for emails/codes/usernames\n  - SHOULD: Placeholders end with ellipsis and show example pattern (eg, `+1 (123) 456-7890`, `sk-012345…`)\n  - MUST: Warn on unsaved changes before navigation\n  - MUST: Compatible with password managers & 2FA; allow pasting one-time codes\n  - MUST: Trim values to handle text expansion trailing spaces\n  - MUST: No dead zones on checkboxes/radios; label+control share one generous hit target\n- State & navigation\n  - MUST: URL reflects state (deep-link filters/tabs/pagination/expanded panels) Prefer libs like [nuqs](https://nuqs.dev)\n  - MUST: Back/Forward restores scroll\n  - MUST: Links are links—use `<a>/<Link>` for navigation (support Cmd/Ctrl/middle-click)\n- Feedback\n  - SHOULD: Optimistic UI; reconcile on response; on failure show error and rollback or offer Undo\n  - MUST: Confirm destructive actions or provide Undo window\n  - MUST: Use polite `aria-live` for toasts/inline validation\n  - SHOULD: Ellipsis (`…`) for options that open follow-ups (eg, \"Rename…\") and loading states (eg, \"Loading…\", \"Saving…\", \"Generating…\")\n- Touch/drag/scroll\n  - MUST: Design forgiving interactions (generous targets, clear affordances; avoid finickiness)\n  - MUST: Delay first tooltip in a group; subsequent peers no delay\n  - MUST: Intentional `overscroll-behavior: contain` in modals/drawers\n  - MUST: During drag, disable text selection and set `inert` on dragged element/containers\n  - MUST: No \"dead-looking\" interactive zones—if it looks clickable, it is\n- Autofocus\n  - SHOULD: Autofocus on desktop when there's a single primary input; rarely on mobile (to avoid layout shift)\n\n## Animation\n\n- MUST: Honor `prefers-reduced-motion` (provide reduced variant)\n- SHOULD: Prefer CSS > Web Animations API > JS libraries\n- MUST: Animate compositor-friendly props (`transform`, `opacity`); avoid layout/repaint props (`top/left/width/height`)\n- SHOULD: Animate only to clarify cause/effect or add deliberate delight\n- SHOULD: Choose easing to match the change (size/distance/trigger)\n- MUST: Animations are interruptible and input-driven (avoid autoplay)\n- MUST: Correct `transform-origin` (motion starts where it \"physically\" should)\n\n## Layout\n\n- SHOULD: Optical alignment; adjust by ±1px when perception beats geometry\n- MUST: Deliberate alignment to grid/baseline/edges/optical centers—no accidental placement\n- SHOULD: Balance icon/text lockups (stroke/weight/size/spacing/color)\n- MUST: Verify mobile, laptop, ultra-wide (simulate ultra-wide at 50% zoom)\n- MUST: Respect safe areas (use env(safe-area-inset-\\*))\n- MUST: Avoid unwanted scrollbars; fix overflows\n\n## Content & Accessibility\n\n- SHOULD: Inline help first; tooltips last resort\n- MUST: Skeletons mirror final content to avoid layout shift\n- MUST: `<title>` matches current context\n- MUST: No dead ends; always offer next step/recovery\n- MUST: Design empty/sparse/dense/error states\n- SHOULD: Curly quotes (\" \"); avoid widows/orphans\n- MUST: Tabular numbers for comparisons (`font-variant-numeric: tabular-nums` or a mono like Geist Mono)\n- MUST: Redundant status cues (not color-only); icons have text labels\n- MUST: Don't ship the schema—visuals may omit labels but accessible names still exist\n- MUST: Use the ellipsis character `…` (not ``)\n- MUST: `scroll-margin-top` on headings for anchored links; include a \"Skip to content\" link; hierarchical `<h1–h6>`\n- MUST: Resilient to user-generated content (short/avg/very long)\n- MUST: Locale-aware dates/times/numbers/currency\n- MUST: Accurate names (`aria-label`), decorative elements `aria-hidden`, verify in the Accessibility Tree\n- MUST: Icon-only buttons have descriptive `aria-label`\n- MUST: Prefer native semantics (`button`, `a`, `label`, `table`) before ARIA\n- SHOULD: Right-clicking the nav logo surfaces brand assets\n- MUST: Use non-breaking spaces to glue terms: `10&nbsp;MB`, `⌘&nbsp;+&nbsp;K`, `Vercel&nbsp;SDK`\n\n## Performance\n\n- SHOULD: Test iOS Low Power Mode and macOS Safari\n- MUST: Measure reliably (disable extensions that skew runtime)\n- MUST: Track and minimize re-renders (React DevTools/React Scan)\n- MUST: Profile with CPU/network throttling\n- MUST: Batch layout reads/writes; avoid unnecessary reflows/repaints\n- MUST: Mutations (`POST/PATCH/DELETE`) target <500 ms\n- SHOULD: Prefer uncontrolled inputs; make controlled loops cheap (keystroke cost)\n- MUST: Virtualize large lists (eg, `virtua`)\n- MUST: Preload only above-the-fold images; lazy-load the rest\n- MUST: Prevent CLS from images (explicit dimensions or reserved space)\n\n## Design\n\n- SHOULD: Layered shadows (ambient + direct)\n- SHOULD: Crisp edges via semi-transparent borders + shadows\n- SHOULD: Nested radii: child ≤ parent; concentric\n- SHOULD: Hue consistency: tint borders/shadows/text toward bg hue\n- MUST: Accessible charts (color-blind-friendly palettes)\n- MUST: Meet contrast—prefer [APCA](https://apcacontrast.com/) over WCAG 2\n- MUST: Increase contrast on `:hover/:active/:focus`\n- SHOULD: Match browser UI to bg\n- SHOULD: Avoid gradient banding (use masks when needed)\n\n## Copywriting\n\n- MUST: Use active voice.\n- MUST: Use title case for headings and buttons.\n- MUST: Be clear and concise. Use as few words as possible.\n- MUST: Prefer & over and.\n- MUST: Use action-oriented language.\n- MUST: Keep nouns consistent. Introduce as few unique terms as possible.\n- MUST: Write in second person. Avoid first person.\n- MUST: Use consistent placeholders.\n- MUST: Use numerals for counts.\n- MUST: Use consistent currency formatting.\n- MUST: Separate numbers & units with a space.\n- MUST: Use a non-breaking space e.g., 10&nbsp;MB.\n- MUST: Default to positive language. Frame messages in an encouraging, problem-solving way, even for errors.\n- MUST: Error messages guide the exit. Don't just state what went wrong—tell the user how to fix it.\n- MUST: Avoid ambiguity. Labels are clear & specific.\n- MUST: Instead of the button label \"Continue\", say \"Save API Key\".\n",".cursor/skills/animation-best-practices/SKILL.md":"---\nname: animation-best-practices\ndescription: CSS and UI animation patterns for responsive, polished interfaces. Use when implementing hover effects, tooltips, button feedback, transitions, or fixing animation issues like flicker and shakiness.\nversion: 1.0.0\n---\n\n# Practical Animation Tips\n\nDetailed reference guide for common animation scenarios. Use this as a checklist when implementing animations.\n\n## Recording & Debugging\n\n### Record Your Animations\n\nWhen something feels off but you can't identify why, record the animation and play it back frame by frame. This reveals details invisible at normal speed.\n\n### Fix Shaky Animations\n\nElements may shift by 1px at the start/end of CSS transform animations due to GPU/CPU rendering handoff.\n\n**Fix:**\n\n```css\n.element {\n  will-change: transform;\n}\n```\n\nThis tells the browser to keep the element on the GPU throughout the animation.\n\n### Take Breaks\n\nDon't code and ship animations in one sitting. Step away, return with fresh eyes. The best animations are reviewed and refined over days, not hours.\n\n## Button & Click Feedback\n\n### Scale Buttons on Press\n\nMake interfaces feel responsive by adding subtle scale feedback:\n\n```css\nbutton:active {\n  transform: scale(0.97);\n}\n```\n\nThis gives instant visual feedback that the interface is listening.\n\n### Don't Animate from scale(0)\n\nStarting from `scale(0)` makes elements appear from nowhere—it feels unnatural.\n\n**Bad:**\n\n```css\n.element {\n  transform: scale(0);\n}\n.element.visible {\n  transform: scale(1);\n}\n```\n\n**Good:**\n\n```css\n.element {\n  transform: scale(0.95);\n  opacity: 0;\n}\n.element.visible {\n  transform: scale(1);\n  opacity: 1;\n}\n```\n\nElements should always have some visible shape, like a deflated balloon.\n\n## Tooltips & Popovers\n\n### Skip Animation on Subsequent Tooltips\n\nFirst tooltip: delay + animation. Subsequent tooltips (while one is open): instant, no delay.\n\n```css\n.tooltip {\n  transition:\n    transform 125ms ease-out,\n    opacity 125ms ease-out;\n  transform-origin: var(--transform-origin);\n}\n\n.tooltip[data-starting-style],\n.tooltip[data-ending-style] {\n  opacity: 0;\n  transform: scale(0.97);\n}\n\n/* Skip animation for subsequent tooltips */\n.tooltip[data-instant] {\n  transition-duration: 0ms;\n}\n```\n\nRadix UI and Base UI support this pattern with `data-instant` attribute.\n\n### Make Animations Origin-Aware\n\nPopovers should scale from their trigger, not from center.\n\n```css\n/* Default (wrong for most cases) */\n.popover {\n  transform-origin: center;\n}\n\n/* Correct - scale from trigger */\n.popover {\n  transform-origin: var(--transform-origin);\n}\n```\n\n**Radix UI:**\n\n```css\n.popover {\n  transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n}\n```\n\n**Base UI:**\n\n```css\n.popover {\n  transform-origin: var(--transform-origin);\n}\n```\n\n## Speed & Timing\n\n### Keep Animations Fast\n\nA faster-spinning spinner makes apps feel faster even with identical load times. A 180ms select animation feels more responsive than 400ms.\n\n**Rule:** UI animations should stay under 300ms.\n\n### Don't Animate Keyboard Interactions\n\nArrow key navigation, keyboard shortcuts—these are repeated hundreds of times daily. Animation makes them feel slow and disconnected.\n\n**Never animate:**\n\n- List navigation with arrow keys\n- Keyboard shortcut responses\n- Tab/focus movements\n\n### Be Careful with Frequently-Used Elements\n\nA hover effect is nice, but if triggered multiple times a day, it may benefit from no animation at all.\n\n**Guideline:** Use your own product daily. You'll discover which animations become annoying through repeated use.\n\n## Hover States\n\n### Fix Hover Flicker\n\nWhen hover animation changes element position, the cursor may leave the element, causing flicker.\n\n**Problem:**\n\n```css\n.box:hover {\n  transform: translateY(-20%);\n}\n```\n\n**Solution:** Animate a child element instead:\n\n```html\n<div class=\"box\">\n  <div class=\"box-inner\"></div>\n</div>\n```\n\n```css\n.box:hover .box-inner {\n  transform: translateY(-20%);\n}\n\n.box-inner {\n  transition: transform 200ms ease;\n}\n```\n\nThe parent's hover area stays stable while the child moves.\n\n### Disable Hover on Touch Devices\n\nTouch devices don't have true hover. Accidental finger movement triggers unwanted hover states.\n\n```css\n@media (hover: hover) and (pointer: fine) {\n  .card:hover {\n    transform: scale(1.05);\n  }\n}\n```\n\n**Note:** Tailwind v4's `hover:` class automatically applies only when the device supports hover.\n\n## Touch & Accessibility\n\n### Ensure Appropriate Target Areas\n\nSmall buttons are hard to tap. Use a pseudo-element to create larger hit areas without changing layout.\n\n**Minimum target:** 44px (Apple and WCAG recommendation)\n\n```css\n@utility touch-hitbox {\n  position: relative;\n}\n\n@utility touch-hitbox::before {\n  content: \"\";\n  position: absolute;\n  display: block;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  min-height: 44px;\n  min-width: 44px;\n  z-index: 9999;\n}\n```\n\nUsage:\n\n```jsx\n<button className=\"touch-hitbox\">\n  <BellIcon />\n</button>\n```\n\n## Easing Selection\n\n### Use ease-out for Enter/Exit\n\nElements entering or exiting should use `ease-out`. The fast start creates responsiveness.\n\n```css\n.dropdown {\n  transition:\n    transform 200ms ease-out,\n    opacity 200ms ease-out;\n}\n```\n\n`ease-in` starts slow—wrong for UI. Same duration feels slower because the movement is back-loaded.\n\n### Use ease-in-out for On-Screen Movement\n\nElements already visible that need to move should use `ease-in-out`. Mimics natural acceleration/deceleration like a car.\n\n```css\n.slider-handle {\n  transition: transform 250ms ease-in-out;\n}\n```\n\n### Use Custom Easing Curves\n\nBuilt-in CSS curves are usually too weak. Custom curves create more intentional motion.\n\n**Resources:**\n\n- [easings.co](https://easings.co/)\n\n## Visual Tricks\n\n### Use Blur as a Fallback\n\nWhen easing and timing adjustments don't solve the problem, add subtle blur to mask imperfections.\n\n```css\n.button-transition {\n  transition:\n    transform 150ms ease-out,\n    filter 150ms ease-out;\n}\n\n.button-transition:active {\n  transform: scale(0.97);\n  filter: blur(2px);\n}\n```\n\nBlur bridges visual gaps between states, tricking the eye into seeing smoother transitions. The two states blend instead of appearing as distinct objects.\n\n**Performance note:** Keep blur under 20px, especially on Safari.\n\n## Why Details Matter\n\n> \"All those unseen details combine to produce something that's just stunning, like a thousand barely audible voices all singing in tune.\"\n> — Paul Graham, Hackers and Painters\n\nDetails that go unnoticed are good—users complete tasks without friction. Great interfaces enable users to achieve goals with ease, not to admire animations.\n",".cursor/commands/deslop.md":"\nYou are an expert code simplification specialist focused on enhancing code clarity, consistency, and maintainability while preserving exact functionality. Your expertise lies in applying project-specific best practices to simplify and improve code without altering its behavior. You prioritize readable, explicit code over overly compact solutions. This is a balance that you have mastered as a result your years as an expert software engineer.\n\nYou will analyze recently modified code and apply refinements that:\n\n1. **Preserve Functionality**: Never change what the code does - only how it does it. All original features, outputs, and behaviors must remain intact.\n\n2. **Apply Project Standards**: Follow the established coding standards from the codebase guidelines including:\n\n- Use ES modules with proper import sorting and extensions\n\n- Use explicit return type annotations for top-level functions\n\n- Follow proper React component patterns with explicit Props types\n\n- Use proper error handling patterns (avoid try/catch when possible)\n\n- Maintain consistent naming conventions\n\n3. **Enhance Clarity**: Simplify code structure by:\n\n- Reducing unnecessary complexity and nesting\n\n- Eliminating redundant code and abstractions\n\n- Improving readability through clear variable and function names\n\n- Consolidating related logic\n\n- Removing unnecessary comments that describe obvious code\n\n- IMPORTANT: Avoid nested ternary operators - prefer switch statements or if/else chains for multiple conditions\n\n- Choose clarity over brevity - explicit code is often better than overly compact code\n\n4. **Maintain Balance**: Avoid over-simplification that could:\n\n- Reduce code clarity or maintainability\n\n- Create overly clever solutions that are hard to understand\n\n- Combine too many concerns into single functions or components\n\n- Remove helpful abstractions that improve code organization\n\n- Prioritize \"fewer lines\" over readability (e.g., nested ternaries, dense one-liners)\n\n- Make the code harder to debug or extend\n\n5. **Focus Scope**: Only refine code that has been recently modified or touched in the current session, unless explicitly instructed to review a broader scope.\n\nYour refinement process:\n\n1. Identify the recently modified code sections\n\n2. Analyze for opportunities to improve elegance and consistency\n\n3. Apply project-specific best practices and coding standards\n\n4. Ensure all functionality remains unchanged\n\n5. Verify the refined code is simpler and more maintainable\n\n6. Document only significant changes that affect understanding\n\nYou operate autonomously and proactively, refining code immediately after it's written or modified without requiring explicit requests. Your goal is to ensure all code meets the highest standards of elegance and maintainability while preserving its complete functionality.\n","packages/website/README.md":"This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.\n\nThis project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.\n","packages/website/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"target\": \"ES2017\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"bundler\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"react-jsx\",\n    \"incremental\": true,\n    \"plugins\": [\n      {\n        \"name\": \"next\"\n      }\n    ],\n    \"paths\": {\n      \"@/*\": [\n        \"./*\"\n      ]\n    },\n    \"baseUrl\": \".\"\n  },\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\",\n    \".next/types/**/*.ts\",\n    \".next/dev/types/**/*.ts\"\n  ],\n  \"exclude\": [\n    \"node_modules\",\n    \"dist\"\n  ]\n}\n","packages/website/package.json":"{\n  \"name\": \"@react-scan/website\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"presync\": \"cp ../scan/dist/auto.global.js ./public/auto.global.js\",\n    \"dev\": \"pnpm presync && next dev --turbopack\",\n    \"build\": \"pnpm --filter react-scan build && pnpm presync && next build --webpack\",\n    \"start\": \"next start\",\n    \"lint\": \"vp lint\",\n    \"format\": \"vp fmt\"\n  },\n  \"dependencies\": {\n    \"@vercel/analytics\": \"^2.0.1\",\n    \"@vercel/speed-insights\": \"^2.0.0\",\n    \"highlight.js\": \"^11.11.1\",\n    \"next\": \"^16.2.4\",\n    \"react\": \"^19.2.5\",\n    \"react-dom\": \"^19.2.5\",\n    \"react-scan\": \"workspace:*\",\n    \"zod\": \"^4.4.2\"\n  },\n  \"devDependencies\": {\n    \"@tailwindcss/postcss\": \"^4.2.4\",\n    \"@types/react\": \"^19.2.14\",\n    \"@types/react-dom\": \"^19.2.3\",\n    \"autoprefixer\": \"^10.5.0\",\n    \"postcss\": \"^8.5.13\",\n    \"postcss-load-config\": \"^6.0.1\",\n    \"tailwindcss\": \"^4.2.4\"\n  }\n}\n","AGENTS.md":"## General Rules\n\n- MUST: Use TypeScript interfaces over types.\n- MUST: Keep all types in the global scope.\n- MUST: Use arrow functions over function declarations.\n- MUST: Default to NO comments. Only add a comment when the user explicitly asks, or when the \"why\" is truly non-obvious - browser quirks, platform bugs, performance tradeoffs, fragile internal patching, or counter-intuitive design decisions. Never add comments that restate what the code does or what a well-named function/variable already conveys. When in doubt, leave the comment out.\n  - If a hack is required (like a `setTimeout` that hides a race), prefix with `// HACK: reason for hack`.\n  - Do not delete descriptive comments >3 lines without confirming with the user.\n- MUST: Use kebab-case for files.\n- MUST: Use descriptive names for variables (avoid shorthands, or 1-2 character names).\n  - Example: for `.map()`, use `innerNode` instead of `n`.\n  - Example: instead of `moved` use `didPositionChange`.\n- MUST: Frequently re-evaluate and refactor variable names to be more accurate and descriptive.\n- MUST: Do not type cast (`as`) unless absolutely necessary.\n- MUST: Remove unused code and don't repeat yourself.\n- MUST: Always search the codebase, think of many solutions, then implement the most _elegant_ solution.\n- MUST: Put all magic numbers in `constants.ts` using `SCREAMING_SNAKE_CASE` with unit suffixes (`_MS`, `_PX`).\n- MUST: Put small, focused utility functions in `utils/` with one utility per file.\n- MUST: Use `Boolean(x)` over `!!x`.\n\n## Preact + @preact/signals Rules\n\nReact Scan's overlay UI runs as a Preact app mounted inside a Shadow DOM (see [`packages/scan/src/core/index.ts`](packages/scan/src/core/index.ts)). Reactivity is driven by `@preact/signals`, not React state.\n\n### Signals\n\n- MUST: Read signals via `.value` inside JSX/effects: `signalWidget.value` not `signalWidget()`.\n- MUST: Write signals atomically: `signalWidget.value = { ...signalWidget.value, dimensions: ... }`. One signal per logical slice.\n- MUST: Use `useSignal(initial)` for component-local reactive state, `useComputed(() => ...)` for derived values, `useSignalEffect(() => ...)` for subscriptions/DOM imperative work.\n- MUST: Wrap module-level signals exported from a tree-shaken bundle with `/* @__PURE__ */ signal(...)` so production builds can drop unused state.\n- SHOULD: Persist user-facing state via `readLocalStorage`/`saveLocalStorage` from [`~web/utils/helpers`](packages/scan/src/web/utils/helpers.ts) and seed the signal with the persisted value.\n- NEVER: Mirror one signal into another inside `useSignalEffect` - find the single source of truth (compute on read).\n\n### Effects\n\nBefore reaching for `useEffect`/`useSignalEffect`, classify the work:\n\n- MUST: Use `useComputed` when the result is pure derived state from other signals. If no external system is touched, it is not an effect.\n- MUST: Use event handlers and direct action calls when work happens because the user clicked, dragged, or navigated. Do not watch a flag in an effect to trigger imperative logic.\n- MUST: Use `useEffect(..., [])` (or `useSignalEffect` with no deps) for one-time mount/cleanup of subscriptions, timers, listeners, and `MutationObserver`s. Always return the cleanup.\n- MUST: Keep each effect single-purpose - one effect, one external bridge. Split mixed-responsibility effects.\n- NEVER: Use an effect just to copy one signal into another.\n- NEVER: Use an effect as an event bus (watching a trigger signal to run a command). Call the action directly from the event source.\n\n### Props\n\n- MUST: Access props via `props.title`, not destructuring, when the prop is read inside an event handler that fires later or inside an effect.\n- SHOULD: Destructure props at the top of the body for purely-rendered values (read once during render).\n- NEVER: Destructure a prop that is itself a signal-driven slice if you intend to re-read it after async work.\n\n### JSX & DOM\n\n- MUST: Use `className` (we render via Preact's React-compat JSX in [`tsconfig.json`](tsconfig.json) `jsxImportSource: preact`).\n- MUST: Combine static `className=\"btn\"` with reactive `className={cn(\"btn\", isActive.value && \"active\")}` via [`cn`](packages/scan/src/web/utils/helpers.ts).\n- MUST: Read refs in `useEffect` or via the callback ref pattern - DOM refs are populated after render.\n- MUST: Mount overlay UI under the existing shadow root from `initRootContainer()` in [`core/index.ts`](packages/scan/src/core/index.ts). Do not append directly to `document.body`.\n- SHOULD: Use `style={{ \"--css-var\": value }}` for dynamic CSS variables; class toggles for boolean states.\n- SHOULD: Type refs as `let element: HTMLElement | null = null` with a guard.\n\n## Build & Toolchain\n\nThis is a pnpm 10 monorepo with `packages/*` (libraries, extension, website) and a top-level `kitchen-sink/` (Playwright target). The toolchain is [Vite+](https://viteplus.dev) (`vp lint`, `vp fmt`, `vp check`) and `turbo` for pipeline orchestration.\n\n### Approved built dependencies\n\nThe root [`package.json`](package.json) declares `pnpm.onlyBuiltDependencies` for `@parcel/watcher`, `esbuild`, `sharp`, `spawn-sync`, `unrs-resolver`. Without this list, `pnpm install` skips their native build steps and downstream packages fail.\n\n### Build before test\n\n`pnpm build` must complete before `pnpm test`, `pnpm test:e2e`, or `pnpm lint`. After modifying source files, always rebuild before running tests. Turbo enforces this via `dependsOn: [\"^build\"]` in [`turbo.json`](turbo.json).\n\n### Playwright\n\n`pnpm test:e2e` runs Playwright against the `kitchen-sink` Vite dev server on port 5173 (auto-started by [`playwright.config.ts`](playwright.config.ts)). Chromium must be installed: `npx playwright install chromium --with-deps`.\n\n### Key commands\n\n| Task           | Command                                      |\n| -------------- | -------------------------------------------- |\n| Install        | `pnpm install`                               |\n| Build          | `pnpm build`                                 |\n| Dev watch      | `pnpm dev` (watches `react-scan` + kitchen-sink) |\n| Unit tests     | `pnpm test`                                  |\n| E2E tests      | `pnpm test:e2e`                              |\n| Lint           | `pnpm lint` (oxlint via vite-plus)           |\n| Lint + fix     | `pnpm lint:fix`                              |\n| Format         | `pnpm format` (oxfmt via vite-plus)          |\n| Format check   | `pnpm format:check`                          |\n| Typecheck      | `pnpm typecheck`                             |\n| Combined       | `pnpm check` (lint + fmt check + typecheck)  |\n\n## Testing\n\nRun checks always before committing with:\n\n```bash\npnpm build\npnpm lint\npnpm format\npnpm typecheck\npnpm test:e2e\n```\n","packages/vite-plugin-react-scan/CHANGELOG.md":"# @react-scan/vite-plugin-react-scan\n\n## 0.2.7\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.7\n\n## 0.2.6\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.6\n\n## 0.2.5\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.5\n\n## 0.2.4\n\n### Patch Changes\n\n- lite\n- Updated dependencies\n  - react-scan@0.5.4\n\n## 0.2.3\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.3\n\n## 0.2.2\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.2\n\n## 0.2.1\n\n### Patch Changes\n\n- fix: infinite mounting\n- Updated dependencies\n  - react-scan@0.5.1\n\n## 0.2.0\n\n### Minor Changes\n\n- cleanup\n\n### Patch Changes\n\n- Updated dependencies\n- Updated dependencies [9d38ffe]\n  - react-scan@0.5.0\n","packages/vite-plugin-react-scan/README.md":"# @react-scan/vite-plugin-react-scan\n\nA Vite plugin that integrates React Scan into your Vite application, automatically detecting performance issues in your React components.\n\n## Installation\n\n```bash\n# npm\nnpm install -D @react-scan/vite-plugin-react-scan react-scan\n\n# pnpm\npnpm add -D @react-scan/vite-plugin-react-scan react-scan\n\n# yarn\nyarn add -D @react-scan/vite-plugin-react-scan react-scan\n```\n\n> **Note:** Make sure `react-scan` is installed as a peer dependency. The plugin will automatically locate it in your project's dependency tree.\n\n## Usage\n\nAdd the plugin to your `vite.config.ts`:\n\n```ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport reactScan from '@react-scan/vite-plugin-react-scan';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    reactScan({\n      // options (optional)\n    }),\n  ],\n});\n```\n\n## Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `enable` | `boolean` | `process.env.NODE_ENV === 'development'` | Enable/disable scanning |\n| `scanOptions` | `object` | `{ ... }` | Custom React Scan options |\n| `autoDisplayNames` | `boolean` | `false` | Automatically add display names to React components |\n| `debug` | `boolean` | `false` | Enable debug logging |\n\n## Example Configuration\n\n```ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport reactScan from '@react-scan/vite-plugin-react-scan';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    reactScan({\n      enable: true,\n      autoDisplayNames: true,\n      scanOptions: {} // React Scan specific options\n    }),\n  ],\n});\n```\n\n## Development vs Production\n\n- In development: The plugin injects React Scan directly into your application for real-time analysis\n- In production: The plugin can be disabled/enabled by default with specific options\n\n## Contributing\n\nContributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.\n\n## License\n\nReact Scan Vite Plugin is [MIT-licensed](LICENSE) open-source software by Aiden Bai, [Million Software, Inc.](https://million.dev), and [contributors](https://github.com/aidenybai/react-scan/graphs/contributors).\n","packages/vite-plugin-react-scan/package.json":"{\n  \"name\": \"@react-scan/vite-plugin-react-scan\",\n  \"version\": \"0.2.7\",\n  \"description\": \"A Vite plugin for React Scan - detects performance issues in your React app.\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"module\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"import\": {\n        \"types\": \"./dist/index.d.ts\",\n        \"default\": \"./dist/index.js\"\n      },\n      \"require\": {\n        \"types\": \"./dist/index.d.cts\",\n        \"default\": \"./dist/index.cjs\"\n      }\n    }\n  },\n  \"scripts\": {\n    \"build\": \"rm -rf dist && NODE_ENV=production vp pack\",\n    \"dev\": \"vp pack --watch\",\n    \"lint\": \"vp lint\",\n    \"format\": \"vp fmt\",\n    \"typecheck\": \"tsc --noEmit\"\n  },\n  \"peerDependenciesMeta\": {\n    \"react-scan\": {\n      \"optional\": false\n    },\n    \"vite\": {\n      \"optional\": false\n    }\n  },\n  \"keywords\": [\n    \"react\",\n    \"react-scan\",\n    \"react scan\",\n    \"render\",\n    \"performance\",\n    \"vite\",\n    \"vite plugin\"\n  ],\n  \"author\": {\n    \"name\": \"Team React Scan\",\n    \"url\": \"https://github.com/aidenybai/react-scan\"\n  },\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/aidenybai/react-scan\",\n  \"bugs\": {\n    \"url\": \"https://github.com/aidenybai/react-scan/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/aidenybai/react-scan.git\"\n  },\n  \"dependencies\": {\n    \"@babel/core\": \"^7.29.0\",\n    \"@babel/plugin-transform-react-jsx\": \"^7.25.9\",\n    \"@babel/preset-typescript\": \"^7.23.3\",\n    \"babel-plugin-add-react-displayname\": \"^0.0.5\",\n    \"cheerio\": \"^1.2.0\"\n  },\n  \"peerDependencies\": {\n    \"react-scan\": \">=0.5.7\",\n    \"vite\": \"^2 || ^3 || ^4 || ^5 || ^6\"\n  },\n  \"devDependencies\": {\n    \"@types/babel__core\": \"^7.20.5\",\n    \"@types/cheerio\": \"^1.0.0\",\n    \"@types/node\": \"^25.6.0\",\n    \"typescript\": \"latest\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\",\n    \"LICENSE\"\n  ]\n}\n","packages/scan/CHANGELOG.md":"# react-scan\n\n## 0.5.7\n\n### Patch Changes\n\n- fix\n\n## 0.5.6\n\n### Patch Changes\n\n- fix\n\n## 0.5.5\n\n### Patch Changes\n\n- fix\n\n## 0.5.4\n\n### Patch Changes\n\n- lite\n\n## 0.5.3\n\n### Patch Changes\n\n- fix\n\n## 0.5.2\n\n### Patch Changes\n\n- fix\n\n## 0.5.1\n\n### Patch Changes\n\n- fix: infinite mounting\n\n## 0.5.0\n\n### Minor Changes\n\n- cleanup\n- 9d38ffe: Remove monitoring module, replace Playwright CLI with interactive init command, clean up dead code\n\n  - Removed the entire monitoring system (`packages/scan/src/core/monitor/`) and all related exports, types, and build entries\n  - Replaced the Playwright-based proxy CLI (`npx react-scan <url>`) with an interactive `npx react-scan init` command that auto-detects your framework and sets up React Scan\n  - Removed unused code: old outline system, LRU cache, lazy refs, commented-out code blocks, and unused exports\n  - Consolidated duplicate utilities (safeGetValue, RenderPhase types)\n  - Simplified README to focus on the new init command\n  - Added CLI quick-start command to the website homepage\n","packages/vite-plugin-react-scan/tsconfig.json":"{\n  \"extends\": \"../../tsconfig.json\",\n  \"compilerOptions\": {\n    \"rootDir\": \"src\",\n    \"outDir\": \"dist\",\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"bundler\",\n    \"declaration\": true,\n    \"isolatedModules\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"jsx\": \"preserve\"\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n","packages/scan/package.json":"# Scan Skill\n\nPath: `packages/scan/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/package.json)","packages/scan/README.md":"# scan Documentation\n\nPath: `packages/scan/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/README.md)","packages/scan/tsconfig.json":"# Scan Skill\n\nPath: `packages/scan/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/tsconfig.json)","packages/extension/CHANGELOG.md":"# Extension Skill\n\nPath: `packages/extension/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/CHANGELOG.md)","packages/extension/package.json":"# Extension Skill\n\nPath: `packages/extension/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/package.json)","packages/extension/README.md":"# extension Documentation\n\nPath: `packages/extension/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/README.md)","packages/extension/tsconfig.json":"# Extension Skill\n\nPath: `packages/extension/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/tsconfig.json)","packages/extension/tsconfig.node.json":"# Extension Skill\n\nPath: `packages/extension/tsconfig.node.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/tsconfig.node.json)","packages/extension/src/manifest.chrome.json":"# Src Skill\n\nPath: `packages/extension/src/manifest.chrome.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/src/manifest.chrome.json)","packages/extension/src/manifest.firefox.json":"# Src Skill\n\nPath: `packages/extension/src/manifest.firefox.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/src/manifest.firefox.json)","packages/scan/src/react-component-name/tsconfig.json":"# React-component-name Skill\n\nPath: `packages/scan/src/react-component-name/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/src/react-component-name/tsconfig.json)"},"files":{"packages/website/AGENTS.md":"Concise rules for building accessible, fast, delightful UIs Use MUST/SHOULD/NEVER to guide decisions\n\n## Interactions\n\n- Keyboard\n  - MUST: Full keyboard support per [WAI-ARIA APG](https://www.w3.org/WAI/ARIA/apg/patterns/)\n  - MUST: Visible focus rings (`:focus-visible`; group with `:focus-within`)\n  - MUST: Manage focus (trap, move, and return) per APG patterns\n- Targets & input\n  - MUST: Hit target ≥24px (mobile ≥44px) If visual <24px, expand hit area\n  - MUST: Mobile `<input>` font-size ≥16px or set:\n    ```html\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover\"\n    />\n    ```\n  - NEVER: Disable browser zoom\n  - MUST: `touch-action: manipulation` to prevent double-tap zoom; set `-webkit-tap-highlight-color` to match design\n- Inputs & forms (behavior)\n  - MUST: Hydration-safe inputs (no lost focus/value)\n  - NEVER: Block paste in `<input>/<textarea>`\n  - MUST: Loading buttons show spinner and keep original label\n  - MUST: Enter submits focused text input In `<textarea>`, ⌘/Ctrl+Enter submits; Enter adds newline\n  - MUST: Keep submit enabled until request starts; then disable, show spinner, use idempotency key\n  - MUST: Don't block typing; accept free text and validate after\n  - MUST: Allow submitting incomplete forms to surface validation\n  - MUST: Errors inline next to fields; on submit, focus first error\n  - MUST: `autocomplete` + meaningful `name`; correct `type` and `inputmode`\n  - SHOULD: Disable spellcheck for emails/codes/usernames\n  - SHOULD: Placeholders end with ellipsis and show example pattern (eg, `+1 (123) 456-7890`, `sk-012345…`)\n  - MUST: Warn on unsaved changes before navigation\n  - MUST: Compatible with password managers & 2FA; allow pasting one-time codes\n  - MUST: Trim values to handle text expansion trailing spaces\n  - MUST: No dead zones on checkboxes/radios; label+control share one generous hit target\n- State & navigation\n  - MUST: URL reflects state (deep-link filters/tabs/pagination/expanded panels) Prefer libs like [nuqs](https://nuqs.dev)\n  - MUST: Back/Forward restores scroll\n  - MUST: Links are links—use `<a>/<Link>` for navigation (support Cmd/Ctrl/middle-click)\n- Feedback\n  - SHOULD: Optimistic UI; reconcile on response; on failure show error and rollback or offer Undo\n  - MUST: Confirm destructive actions or provide Undo window\n  - MUST: Use polite `aria-live` for toasts/inline validation\n  - SHOULD: Ellipsis (`…`) for options that open follow-ups (eg, \"Rename…\") and loading states (eg, \"Loading…\", \"Saving…\", \"Generating…\")\n- Touch/drag/scroll\n  - MUST: Design forgiving interactions (generous targets, clear affordances; avoid finickiness)\n  - MUST: Delay first tooltip in a group; subsequent peers no delay\n  - MUST: Intentional `overscroll-behavior: contain` in modals/drawers\n  - MUST: During drag, disable text selection and set `inert` on dragged element/containers\n  - MUST: No \"dead-looking\" interactive zones—if it looks clickable, it is\n- Autofocus\n  - SHOULD: Autofocus on desktop when there's a single primary input; rarely on mobile (to avoid layout shift)\n\n## Animation\n\n- MUST: Honor `prefers-reduced-motion` (provide reduced variant)\n- SHOULD: Prefer CSS > Web Animations API > JS libraries\n- MUST: Animate compositor-friendly props (`transform`, `opacity`); avoid layout/repaint props (`top/left/width/height`)\n- SHOULD: Animate only to clarify cause/effect or add deliberate delight\n- SHOULD: Choose easing to match the change (size/distance/trigger)\n- MUST: Animations are interruptible and input-driven (avoid autoplay)\n- MUST: Correct `transform-origin` (motion starts where it \"physically\" should)\n\n## Layout\n\n- SHOULD: Optical alignment; adjust by ±1px when perception beats geometry\n- MUST: Deliberate alignment to grid/baseline/edges/optical centers—no accidental placement\n- SHOULD: Balance icon/text lockups (stroke/weight/size/spacing/color)\n- MUST: Verify mobile, laptop, ultra-wide (simulate ultra-wide at 50% zoom)\n- MUST: Respect safe areas (use env(safe-area-inset-\\*))\n- MUST: Avoid unwanted scrollbars; fix overflows\n\n## Content & Accessibility\n\n- SHOULD: Inline help first; tooltips last resort\n- MUST: Skeletons mirror final content to avoid layout shift\n- MUST: `<title>` matches current context\n- MUST: No dead ends; always offer next step/recovery\n- MUST: Design empty/sparse/dense/error states\n- SHOULD: Curly quotes (\" \"); avoid widows/orphans\n- MUST: Tabular numbers for comparisons (`font-variant-numeric: tabular-nums` or a mono like Geist Mono)\n- MUST: Redundant status cues (not color-only); icons have text labels\n- MUST: Don't ship the schema—visuals may omit labels but accessible names still exist\n- MUST: Use the ellipsis character `…` (not ``)\n- MUST: `scroll-margin-top` on headings for anchored links; include a \"Skip to content\" link; hierarchical `<h1–h6>`\n- MUST: Resilient to user-generated content (short/avg/very long)\n- MUST: Locale-aware dates/times/numbers/currency\n- MUST: Accurate names (`aria-label`), decorative elements `aria-hidden`, verify in the Accessibility Tree\n- MUST: Icon-only buttons have descriptive `aria-label`\n- MUST: Prefer native semantics (`button`, `a`, `label`, `table`) before ARIA\n- SHOULD: Right-clicking the nav logo surfaces brand assets\n- MUST: Use non-breaking spaces to glue terms: `10&nbsp;MB`, `⌘&nbsp;+&nbsp;K`, `Vercel&nbsp;SDK`\n\n## Performance\n\n- SHOULD: Test iOS Low Power Mode and macOS Safari\n- MUST: Measure reliably (disable extensions that skew runtime)\n- MUST: Track and minimize re-renders (React DevTools/React Scan)\n- MUST: Profile with CPU/network throttling\n- MUST: Batch layout reads/writes; avoid unnecessary reflows/repaints\n- MUST: Mutations (`POST/PATCH/DELETE`) target <500 ms\n- SHOULD: Prefer uncontrolled inputs; make controlled loops cheap (keystroke cost)\n- MUST: Virtualize large lists (eg, `virtua`)\n- MUST: Preload only above-the-fold images; lazy-load the rest\n- MUST: Prevent CLS from images (explicit dimensions or reserved space)\n\n## Design\n\n- SHOULD: Layered shadows (ambient + direct)\n- SHOULD: Crisp edges via semi-transparent borders + shadows\n- SHOULD: Nested radii: child ≤ parent; concentric\n- SHOULD: Hue consistency: tint borders/shadows/text toward bg hue\n- MUST: Accessible charts (color-blind-friendly palettes)\n- MUST: Meet contrast—prefer [APCA](https://apcacontrast.com/) over WCAG 2\n- MUST: Increase contrast on `:hover/:active/:focus`\n- SHOULD: Match browser UI to bg\n- SHOULD: Avoid gradient banding (use masks when needed)\n\n## Copywriting\n\n- MUST: Use active voice.\n- MUST: Use title case for headings and buttons.\n- MUST: Be clear and concise. Use as few words as possible.\n- MUST: Prefer & over and.\n- MUST: Use action-oriented language.\n- MUST: Keep nouns consistent. Introduce as few unique terms as possible.\n- MUST: Write in second person. Avoid first person.\n- MUST: Use consistent placeholders.\n- MUST: Use numerals for counts.\n- MUST: Use consistent currency formatting.\n- MUST: Separate numbers & units with a space.\n- MUST: Use a non-breaking space e.g., 10&nbsp;MB.\n- MUST: Default to positive language. Frame messages in an encouraging, problem-solving way, even for errors.\n- MUST: Error messages guide the exit. Don't just state what went wrong—tell the user how to fix it.\n- MUST: Avoid ambiguity. Labels are clear & specific.\n- MUST: Instead of the button label \"Continue\", say \"Save API Key\".\n",".cursor/skills/animation-best-practices/SKILL.md":"---\nname: animation-best-practices\ndescription: CSS and UI animation patterns for responsive, polished interfaces. Use when implementing hover effects, tooltips, button feedback, transitions, or fixing animation issues like flicker and shakiness.\nversion: 1.0.0\n---\n\n# Practical Animation Tips\n\nDetailed reference guide for common animation scenarios. Use this as a checklist when implementing animations.\n\n## Recording & Debugging\n\n### Record Your Animations\n\nWhen something feels off but you can't identify why, record the animation and play it back frame by frame. This reveals details invisible at normal speed.\n\n### Fix Shaky Animations\n\nElements may shift by 1px at the start/end of CSS transform animations due to GPU/CPU rendering handoff.\n\n**Fix:**\n\n```css\n.element {\n  will-change: transform;\n}\n```\n\nThis tells the browser to keep the element on the GPU throughout the animation.\n\n### Take Breaks\n\nDon't code and ship animations in one sitting. Step away, return with fresh eyes. The best animations are reviewed and refined over days, not hours.\n\n## Button & Click Feedback\n\n### Scale Buttons on Press\n\nMake interfaces feel responsive by adding subtle scale feedback:\n\n```css\nbutton:active {\n  transform: scale(0.97);\n}\n```\n\nThis gives instant visual feedback that the interface is listening.\n\n### Don't Animate from scale(0)\n\nStarting from `scale(0)` makes elements appear from nowhere—it feels unnatural.\n\n**Bad:**\n\n```css\n.element {\n  transform: scale(0);\n}\n.element.visible {\n  transform: scale(1);\n}\n```\n\n**Good:**\n\n```css\n.element {\n  transform: scale(0.95);\n  opacity: 0;\n}\n.element.visible {\n  transform: scale(1);\n  opacity: 1;\n}\n```\n\nElements should always have some visible shape, like a deflated balloon.\n\n## Tooltips & Popovers\n\n### Skip Animation on Subsequent Tooltips\n\nFirst tooltip: delay + animation. Subsequent tooltips (while one is open): instant, no delay.\n\n```css\n.tooltip {\n  transition:\n    transform 125ms ease-out,\n    opacity 125ms ease-out;\n  transform-origin: var(--transform-origin);\n}\n\n.tooltip[data-starting-style],\n.tooltip[data-ending-style] {\n  opacity: 0;\n  transform: scale(0.97);\n}\n\n/* Skip animation for subsequent tooltips */\n.tooltip[data-instant] {\n  transition-duration: 0ms;\n}\n```\n\nRadix UI and Base UI support this pattern with `data-instant` attribute.\n\n### Make Animations Origin-Aware\n\nPopovers should scale from their trigger, not from center.\n\n```css\n/* Default (wrong for most cases) */\n.popover {\n  transform-origin: center;\n}\n\n/* Correct - scale from trigger */\n.popover {\n  transform-origin: var(--transform-origin);\n}\n```\n\n**Radix UI:**\n\n```css\n.popover {\n  transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n}\n```\n\n**Base UI:**\n\n```css\n.popover {\n  transform-origin: var(--transform-origin);\n}\n```\n\n## Speed & Timing\n\n### Keep Animations Fast\n\nA faster-spinning spinner makes apps feel faster even with identical load times. A 180ms select animation feels more responsive than 400ms.\n\n**Rule:** UI animations should stay under 300ms.\n\n### Don't Animate Keyboard Interactions\n\nArrow key navigation, keyboard shortcuts—these are repeated hundreds of times daily. Animation makes them feel slow and disconnected.\n\n**Never animate:**\n\n- List navigation with arrow keys\n- Keyboard shortcut responses\n- Tab/focus movements\n\n### Be Careful with Frequently-Used Elements\n\nA hover effect is nice, but if triggered multiple times a day, it may benefit from no animation at all.\n\n**Guideline:** Use your own product daily. You'll discover which animations become annoying through repeated use.\n\n## Hover States\n\n### Fix Hover Flicker\n\nWhen hover animation changes element position, the cursor may leave the element, causing flicker.\n\n**Problem:**\n\n```css\n.box:hover {\n  transform: translateY(-20%);\n}\n```\n\n**Solution:** Animate a child element instead:\n\n```html\n<div class=\"box\">\n  <div class=\"box-inner\"></div>\n</div>\n```\n\n```css\n.box:hover .box-inner {\n  transform: translateY(-20%);\n}\n\n.box-inner {\n  transition: transform 200ms ease;\n}\n```\n\nThe parent's hover area stays stable while the child moves.\n\n### Disable Hover on Touch Devices\n\nTouch devices don't have true hover. Accidental finger movement triggers unwanted hover states.\n\n```css\n@media (hover: hover) and (pointer: fine) {\n  .card:hover {\n    transform: scale(1.05);\n  }\n}\n```\n\n**Note:** Tailwind v4's `hover:` class automatically applies only when the device supports hover.\n\n## Touch & Accessibility\n\n### Ensure Appropriate Target Areas\n\nSmall buttons are hard to tap. Use a pseudo-element to create larger hit areas without changing layout.\n\n**Minimum target:** 44px (Apple and WCAG recommendation)\n\n```css\n@utility touch-hitbox {\n  position: relative;\n}\n\n@utility touch-hitbox::before {\n  content: \"\";\n  position: absolute;\n  display: block;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  min-height: 44px;\n  min-width: 44px;\n  z-index: 9999;\n}\n```\n\nUsage:\n\n```jsx\n<button className=\"touch-hitbox\">\n  <BellIcon />\n</button>\n```\n\n## Easing Selection\n\n### Use ease-out for Enter/Exit\n\nElements entering or exiting should use `ease-out`. The fast start creates responsiveness.\n\n```css\n.dropdown {\n  transition:\n    transform 200ms ease-out,\n    opacity 200ms ease-out;\n}\n```\n\n`ease-in` starts slow—wrong for UI. Same duration feels slower because the movement is back-loaded.\n\n### Use ease-in-out for On-Screen Movement\n\nElements already visible that need to move should use `ease-in-out`. Mimics natural acceleration/deceleration like a car.\n\n```css\n.slider-handle {\n  transition: transform 250ms ease-in-out;\n}\n```\n\n### Use Custom Easing Curves\n\nBuilt-in CSS curves are usually too weak. Custom curves create more intentional motion.\n\n**Resources:**\n\n- [easings.co](https://easings.co/)\n\n## Visual Tricks\n\n### Use Blur as a Fallback\n\nWhen easing and timing adjustments don't solve the problem, add subtle blur to mask imperfections.\n\n```css\n.button-transition {\n  transition:\n    transform 150ms ease-out,\n    filter 150ms ease-out;\n}\n\n.button-transition:active {\n  transform: scale(0.97);\n  filter: blur(2px);\n}\n```\n\nBlur bridges visual gaps between states, tricking the eye into seeing smoother transitions. The two states blend instead of appearing as distinct objects.\n\n**Performance note:** Keep blur under 20px, especially on Safari.\n\n## Why Details Matter\n\n> \"All those unseen details combine to produce something that's just stunning, like a thousand barely audible voices all singing in tune.\"\n> — Paul Graham, Hackers and Painters\n\nDetails that go unnoticed are good—users complete tasks without friction. Great interfaces enable users to achieve goals with ease, not to admire animations.\n",".cursor/commands/deslop.md":"\nYou are an expert code simplification specialist focused on enhancing code clarity, consistency, and maintainability while preserving exact functionality. Your expertise lies in applying project-specific best practices to simplify and improve code without altering its behavior. You prioritize readable, explicit code over overly compact solutions. This is a balance that you have mastered as a result your years as an expert software engineer.\n\nYou will analyze recently modified code and apply refinements that:\n\n1. **Preserve Functionality**: Never change what the code does - only how it does it. All original features, outputs, and behaviors must remain intact.\n\n2. **Apply Project Standards**: Follow the established coding standards from the codebase guidelines including:\n\n- Use ES modules with proper import sorting and extensions\n\n- Use explicit return type annotations for top-level functions\n\n- Follow proper React component patterns with explicit Props types\n\n- Use proper error handling patterns (avoid try/catch when possible)\n\n- Maintain consistent naming conventions\n\n3. **Enhance Clarity**: Simplify code structure by:\n\n- Reducing unnecessary complexity and nesting\n\n- Eliminating redundant code and abstractions\n\n- Improving readability through clear variable and function names\n\n- Consolidating related logic\n\n- Removing unnecessary comments that describe obvious code\n\n- IMPORTANT: Avoid nested ternary operators - prefer switch statements or if/else chains for multiple conditions\n\n- Choose clarity over brevity - explicit code is often better than overly compact code\n\n4. **Maintain Balance**: Avoid over-simplification that could:\n\n- Reduce code clarity or maintainability\n\n- Create overly clever solutions that are hard to understand\n\n- Combine too many concerns into single functions or components\n\n- Remove helpful abstractions that improve code organization\n\n- Prioritize \"fewer lines\" over readability (e.g., nested ternaries, dense one-liners)\n\n- Make the code harder to debug or extend\n\n5. **Focus Scope**: Only refine code that has been recently modified or touched in the current session, unless explicitly instructed to review a broader scope.\n\nYour refinement process:\n\n1. Identify the recently modified code sections\n\n2. Analyze for opportunities to improve elegance and consistency\n\n3. Apply project-specific best practices and coding standards\n\n4. Ensure all functionality remains unchanged\n\n5. Verify the refined code is simpler and more maintainable\n\n6. Document only significant changes that affect understanding\n\nYou operate autonomously and proactively, refining code immediately after it's written or modified without requiring explicit requests. Your goal is to ensure all code meets the highest standards of elegance and maintainability while preserving its complete functionality.\n","packages/website/README.md":"This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.\n\nThis project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.\n","packages/website/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"target\": \"ES2017\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"bundler\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"react-jsx\",\n    \"incremental\": true,\n    \"plugins\": [\n      {\n        \"name\": \"next\"\n      }\n    ],\n    \"paths\": {\n      \"@/*\": [\n        \"./*\"\n      ]\n    },\n    \"baseUrl\": \".\"\n  },\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\",\n    \".next/types/**/*.ts\",\n    \".next/dev/types/**/*.ts\"\n  ],\n  \"exclude\": [\n    \"node_modules\",\n    \"dist\"\n  ]\n}\n","packages/website/package.json":"{\n  \"name\": \"@react-scan/website\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"presync\": \"cp ../scan/dist/auto.global.js ./public/auto.global.js\",\n    \"dev\": \"pnpm presync && next dev --turbopack\",\n    \"build\": \"pnpm --filter react-scan build && pnpm presync && next build --webpack\",\n    \"start\": \"next start\",\n    \"lint\": \"vp lint\",\n    \"format\": \"vp fmt\"\n  },\n  \"dependencies\": {\n    \"@vercel/analytics\": \"^2.0.1\",\n    \"@vercel/speed-insights\": \"^2.0.0\",\n    \"highlight.js\": \"^11.11.1\",\n    \"next\": \"^16.2.4\",\n    \"react\": \"^19.2.5\",\n    \"react-dom\": \"^19.2.5\",\n    \"react-scan\": \"workspace:*\",\n    \"zod\": \"^4.4.2\"\n  },\n  \"devDependencies\": {\n    \"@tailwindcss/postcss\": \"^4.2.4\",\n    \"@types/react\": \"^19.2.14\",\n    \"@types/react-dom\": \"^19.2.3\",\n    \"autoprefixer\": \"^10.5.0\",\n    \"postcss\": \"^8.5.13\",\n    \"postcss-load-config\": \"^6.0.1\",\n    \"tailwindcss\": \"^4.2.4\"\n  }\n}\n","AGENTS.md":"## General Rules\n\n- MUST: Use TypeScript interfaces over types.\n- MUST: Keep all types in the global scope.\n- MUST: Use arrow functions over function declarations.\n- MUST: Default to NO comments. Only add a comment when the user explicitly asks, or when the \"why\" is truly non-obvious - browser quirks, platform bugs, performance tradeoffs, fragile internal patching, or counter-intuitive design decisions. Never add comments that restate what the code does or what a well-named function/variable already conveys. When in doubt, leave the comment out.\n  - If a hack is required (like a `setTimeout` that hides a race), prefix with `// HACK: reason for hack`.\n  - Do not delete descriptive comments >3 lines without confirming with the user.\n- MUST: Use kebab-case for files.\n- MUST: Use descriptive names for variables (avoid shorthands, or 1-2 character names).\n  - Example: for `.map()`, use `innerNode` instead of `n`.\n  - Example: instead of `moved` use `didPositionChange`.\n- MUST: Frequently re-evaluate and refactor variable names to be more accurate and descriptive.\n- MUST: Do not type cast (`as`) unless absolutely necessary.\n- MUST: Remove unused code and don't repeat yourself.\n- MUST: Always search the codebase, think of many solutions, then implement the most _elegant_ solution.\n- MUST: Put all magic numbers in `constants.ts` using `SCREAMING_SNAKE_CASE` with unit suffixes (`_MS`, `_PX`).\n- MUST: Put small, focused utility functions in `utils/` with one utility per file.\n- MUST: Use `Boolean(x)` over `!!x`.\n\n## Preact + @preact/signals Rules\n\nReact Scan's overlay UI runs as a Preact app mounted inside a Shadow DOM (see [`packages/scan/src/core/index.ts`](packages/scan/src/core/index.ts)). Reactivity is driven by `@preact/signals`, not React state.\n\n### Signals\n\n- MUST: Read signals via `.value` inside JSX/effects: `signalWidget.value` not `signalWidget()`.\n- MUST: Write signals atomically: `signalWidget.value = { ...signalWidget.value, dimensions: ... }`. One signal per logical slice.\n- MUST: Use `useSignal(initial)` for component-local reactive state, `useComputed(() => ...)` for derived values, `useSignalEffect(() => ...)` for subscriptions/DOM imperative work.\n- MUST: Wrap module-level signals exported from a tree-shaken bundle with `/* @__PURE__ */ signal(...)` so production builds can drop unused state.\n- SHOULD: Persist user-facing state via `readLocalStorage`/`saveLocalStorage` from [`~web/utils/helpers`](packages/scan/src/web/utils/helpers.ts) and seed the signal with the persisted value.\n- NEVER: Mirror one signal into another inside `useSignalEffect` - find the single source of truth (compute on read).\n\n### Effects\n\nBefore reaching for `useEffect`/`useSignalEffect`, classify the work:\n\n- MUST: Use `useComputed` when the result is pure derived state from other signals. If no external system is touched, it is not an effect.\n- MUST: Use event handlers and direct action calls when work happens because the user clicked, dragged, or navigated. Do not watch a flag in an effect to trigger imperative logic.\n- MUST: Use `useEffect(..., [])` (or `useSignalEffect` with no deps) for one-time mount/cleanup of subscriptions, timers, listeners, and `MutationObserver`s. Always return the cleanup.\n- MUST: Keep each effect single-purpose - one effect, one external bridge. Split mixed-responsibility effects.\n- NEVER: Use an effect just to copy one signal into another.\n- NEVER: Use an effect as an event bus (watching a trigger signal to run a command). Call the action directly from the event source.\n\n### Props\n\n- MUST: Access props via `props.title`, not destructuring, when the prop is read inside an event handler that fires later or inside an effect.\n- SHOULD: Destructure props at the top of the body for purely-rendered values (read once during render).\n- NEVER: Destructure a prop that is itself a signal-driven slice if you intend to re-read it after async work.\n\n### JSX & DOM\n\n- MUST: Use `className` (we render via Preact's React-compat JSX in [`tsconfig.json`](tsconfig.json) `jsxImportSource: preact`).\n- MUST: Combine static `className=\"btn\"` with reactive `className={cn(\"btn\", isActive.value && \"active\")}` via [`cn`](packages/scan/src/web/utils/helpers.ts).\n- MUST: Read refs in `useEffect` or via the callback ref pattern - DOM refs are populated after render.\n- MUST: Mount overlay UI under the existing shadow root from `initRootContainer()` in [`core/index.ts`](packages/scan/src/core/index.ts). Do not append directly to `document.body`.\n- SHOULD: Use `style={{ \"--css-var\": value }}` for dynamic CSS variables; class toggles for boolean states.\n- SHOULD: Type refs as `let element: HTMLElement | null = null` with a guard.\n\n## Build & Toolchain\n\nThis is a pnpm 10 monorepo with `packages/*` (libraries, extension, website) and a top-level `kitchen-sink/` (Playwright target). The toolchain is [Vite+](https://viteplus.dev) (`vp lint`, `vp fmt`, `vp check`) and `turbo` for pipeline orchestration.\n\n### Approved built dependencies\n\nThe root [`package.json`](package.json) declares `pnpm.onlyBuiltDependencies` for `@parcel/watcher`, `esbuild`, `sharp`, `spawn-sync`, `unrs-resolver`. Without this list, `pnpm install` skips their native build steps and downstream packages fail.\n\n### Build before test\n\n`pnpm build` must complete before `pnpm test`, `pnpm test:e2e`, or `pnpm lint`. After modifying source files, always rebuild before running tests. Turbo enforces this via `dependsOn: [\"^build\"]` in [`turbo.json`](turbo.json).\n\n### Playwright\n\n`pnpm test:e2e` runs Playwright against the `kitchen-sink` Vite dev server on port 5173 (auto-started by [`playwright.config.ts`](playwright.config.ts)). Chromium must be installed: `npx playwright install chromium --with-deps`.\n\n### Key commands\n\n| Task           | Command                                      |\n| -------------- | -------------------------------------------- |\n| Install        | `pnpm install`                               |\n| Build          | `pnpm build`                                 |\n| Dev watch      | `pnpm dev` (watches `react-scan` + kitchen-sink) |\n| Unit tests     | `pnpm test`                                  |\n| E2E tests      | `pnpm test:e2e`                              |\n| Lint           | `pnpm lint` (oxlint via vite-plus)           |\n| Lint + fix     | `pnpm lint:fix`                              |\n| Format         | `pnpm format` (oxfmt via vite-plus)          |\n| Format check   | `pnpm format:check`                          |\n| Typecheck      | `pnpm typecheck`                             |\n| Combined       | `pnpm check` (lint + fmt check + typecheck)  |\n\n## Testing\n\nRun checks always before committing with:\n\n```bash\npnpm build\npnpm lint\npnpm format\npnpm typecheck\npnpm test:e2e\n```\n","packages/vite-plugin-react-scan/CHANGELOG.md":"# @react-scan/vite-plugin-react-scan\n\n## 0.2.7\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.7\n\n## 0.2.6\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.6\n\n## 0.2.5\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.5\n\n## 0.2.4\n\n### Patch Changes\n\n- lite\n- Updated dependencies\n  - react-scan@0.5.4\n\n## 0.2.3\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.3\n\n## 0.2.2\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.2\n\n## 0.2.1\n\n### Patch Changes\n\n- fix: infinite mounting\n- Updated dependencies\n  - react-scan@0.5.1\n\n## 0.2.0\n\n### Minor Changes\n\n- cleanup\n\n### Patch Changes\n\n- Updated dependencies\n- Updated dependencies [9d38ffe]\n  - react-scan@0.5.0\n","packages/vite-plugin-react-scan/README.md":"# @react-scan/vite-plugin-react-scan\n\nA Vite plugin that integrates React Scan into your Vite application, automatically detecting performance issues in your React components.\n\n## Installation\n\n```bash\n# npm\nnpm install -D @react-scan/vite-plugin-react-scan react-scan\n\n# pnpm\npnpm add -D @react-scan/vite-plugin-react-scan react-scan\n\n# yarn\nyarn add -D @react-scan/vite-plugin-react-scan react-scan\n```\n\n> **Note:** Make sure `react-scan` is installed as a peer dependency. The plugin will automatically locate it in your project's dependency tree.\n\n## Usage\n\nAdd the plugin to your `vite.config.ts`:\n\n```ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport reactScan from '@react-scan/vite-plugin-react-scan';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    reactScan({\n      // options (optional)\n    }),\n  ],\n});\n```\n\n## Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `enable` | `boolean` | `process.env.NODE_ENV === 'development'` | Enable/disable scanning |\n| `scanOptions` | `object` | `{ ... }` | Custom React Scan options |\n| `autoDisplayNames` | `boolean` | `false` | Automatically add display names to React components |\n| `debug` | `boolean` | `false` | Enable debug logging |\n\n## Example Configuration\n\n```ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport reactScan from '@react-scan/vite-plugin-react-scan';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    reactScan({\n      enable: true,\n      autoDisplayNames: true,\n      scanOptions: {} // React Scan specific options\n    }),\n  ],\n});\n```\n\n## Development vs Production\n\n- In development: The plugin injects React Scan directly into your application for real-time analysis\n- In production: The plugin can be disabled/enabled by default with specific options\n\n## Contributing\n\nContributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.\n\n## License\n\nReact Scan Vite Plugin is [MIT-licensed](LICENSE) open-source software by Aiden Bai, [Million Software, Inc.](https://million.dev), and [contributors](https://github.com/aidenybai/react-scan/graphs/contributors).\n","packages/vite-plugin-react-scan/package.json":"{\n  \"name\": \"@react-scan/vite-plugin-react-scan\",\n  \"version\": \"0.2.7\",\n  \"description\": \"A Vite plugin for React Scan - detects performance issues in your React app.\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"module\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"import\": {\n        \"types\": \"./dist/index.d.ts\",\n        \"default\": \"./dist/index.js\"\n      },\n      \"require\": {\n        \"types\": \"./dist/index.d.cts\",\n        \"default\": \"./dist/index.cjs\"\n      }\n    }\n  },\n  \"scripts\": {\n    \"build\": \"rm -rf dist && NODE_ENV=production vp pack\",\n    \"dev\": \"vp pack --watch\",\n    \"lint\": \"vp lint\",\n    \"format\": \"vp fmt\",\n    \"typecheck\": \"tsc --noEmit\"\n  },\n  \"peerDependenciesMeta\": {\n    \"react-scan\": {\n      \"optional\": false\n    },\n    \"vite\": {\n      \"optional\": false\n    }\n  },\n  \"keywords\": [\n    \"react\",\n    \"react-scan\",\n    \"react scan\",\n    \"render\",\n    \"performance\",\n    \"vite\",\n    \"vite plugin\"\n  ],\n  \"author\": {\n    \"name\": \"Team React Scan\",\n    \"url\": \"https://github.com/aidenybai/react-scan\"\n  },\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/aidenybai/react-scan\",\n  \"bugs\": {\n    \"url\": \"https://github.com/aidenybai/react-scan/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/aidenybai/react-scan.git\"\n  },\n  \"dependencies\": {\n    \"@babel/core\": \"^7.29.0\",\n    \"@babel/plugin-transform-react-jsx\": \"^7.25.9\",\n    \"@babel/preset-typescript\": \"^7.23.3\",\n    \"babel-plugin-add-react-displayname\": \"^0.0.5\",\n    \"cheerio\": \"^1.2.0\"\n  },\n  \"peerDependencies\": {\n    \"react-scan\": \">=0.5.7\",\n    \"vite\": \"^2 || ^3 || ^4 || ^5 || ^6\"\n  },\n  \"devDependencies\": {\n    \"@types/babel__core\": \"^7.20.5\",\n    \"@types/cheerio\": \"^1.0.0\",\n    \"@types/node\": \"^25.6.0\",\n    \"typescript\": \"latest\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\",\n    \"LICENSE\"\n  ]\n}\n","packages/scan/CHANGELOG.md":"# react-scan\n\n## 0.5.7\n\n### Patch Changes\n\n- fix\n\n## 0.5.6\n\n### Patch Changes\n\n- fix\n\n## 0.5.5\n\n### Patch Changes\n\n- fix\n\n## 0.5.4\n\n### Patch Changes\n\n- lite\n\n## 0.5.3\n\n### Patch Changes\n\n- fix\n\n## 0.5.2\n\n### Patch Changes\n\n- fix\n\n## 0.5.1\n\n### Patch Changes\n\n- fix: infinite mounting\n\n## 0.5.0\n\n### Minor Changes\n\n- cleanup\n- 9d38ffe: Remove monitoring module, replace Playwright CLI with interactive init command, clean up dead code\n\n  - Removed the entire monitoring system (`packages/scan/src/core/monitor/`) and all related exports, types, and build entries\n  - Replaced the Playwright-based proxy CLI (`npx react-scan <url>`) with an interactive `npx react-scan init` command that auto-detects your framework and sets up React Scan\n  - Removed unused code: old outline system, LRU cache, lazy refs, commented-out code blocks, and unused exports\n  - Consolidated duplicate utilities (safeGetValue, RenderPhase types)\n  - Simplified README to focus on the new init command\n  - Added CLI quick-start command to the website homepage\n","packages/vite-plugin-react-scan/tsconfig.json":"{\n  \"extends\": \"../../tsconfig.json\",\n  \"compilerOptions\": {\n    \"rootDir\": \"src\",\n    \"outDir\": \"dist\",\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"bundler\",\n    \"declaration\": true,\n    \"isolatedModules\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"jsx\": \"preserve\"\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n","packages/scan/package.json":"# Scan Skill\n\nPath: `packages/scan/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/package.json)","packages/scan/README.md":"# scan Documentation\n\nPath: `packages/scan/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/README.md)","packages/scan/tsconfig.json":"# Scan Skill\n\nPath: `packages/scan/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/tsconfig.json)","packages/extension/CHANGELOG.md":"# Extension Skill\n\nPath: `packages/extension/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/CHANGELOG.md)","packages/extension/package.json":"# Extension Skill\n\nPath: `packages/extension/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/package.json)","packages/extension/README.md":"# extension Documentation\n\nPath: `packages/extension/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/README.md)","packages/extension/tsconfig.json":"# Extension Skill\n\nPath: `packages/extension/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/tsconfig.json)","packages/extension/tsconfig.node.json":"# Extension Skill\n\nPath: `packages/extension/tsconfig.node.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/tsconfig.node.json)","packages/extension/src/manifest.chrome.json":"# Src Skill\n\nPath: `packages/extension/src/manifest.chrome.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/src/manifest.chrome.json)","packages/extension/src/manifest.firefox.json":"# Src Skill\n\nPath: `packages/extension/src/manifest.firefox.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/src/manifest.firefox.json)","packages/scan/src/react-component-name/tsconfig.json":"# React-component-name Skill\n\nPath: `packages/scan/src/react-component-name/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/src/react-component-name/tsconfig.json)"},"items":[{"name":"AGENTS.md","path":"AGENTS.md","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/AGENTS.md","title":"AI Agent Protocol & Instructions","category":"root-instruction","format":"markdown","content":"## General Rules\n\n- MUST: Use TypeScript interfaces over types.\n- MUST: Keep all types in the global scope.\n- MUST: Use arrow functions over function declarations.\n- MUST: Default to NO comments. Only add a comment when the user explicitly asks, or when the \"why\" is truly non-obvious - browser quirks, platform bugs, performance tradeoffs, fragile internal patching, or counter-intuitive design decisions. Never add comments that restate what the code does or what a well-named function/variable already conveys. When in doubt, leave the comment out.\n  - If a hack is required (like a `setTimeout` that hides a race), prefix with `// HACK: reason for hack`.\n  - Do not delete descriptive comments >3 lines without confirming with the user.\n- MUST: Use kebab-case for files.\n- MUST: Use descriptive names for variables (avoid shorthands, or 1-2 character names).\n  - Example: for `.map()`, use `innerNode` instead of `n`.\n  - Example: instead of `moved` use `didPositionChange`.\n- MUST: Frequently re-evaluate and refactor variable names to be more accurate and descriptive.\n- MUST: Do not type cast (`as`) unless absolutely necessary.\n- MUST: Remove unused code and don't repeat yourself.\n- MUST: Always search the codebase, think of many solutions, then implement the most _elegant_ solution.\n- MUST: Put all magic numbers in `constants.ts` using `SCREAMING_SNAKE_CASE` with unit suffixes (`_MS`, `_PX`).\n- MUST: Put small, focused utility functions in `utils/` with one utility per file.\n- MUST: Use `Boolean(x)` over `!!x`.\n\n## Preact + @preact/signals Rules\n\nReact Scan's overlay UI runs as a Preact app mounted inside a Shadow DOM (see [`packages/scan/src/core/index.ts`](packages/scan/src/core/index.ts)). Reactivity is driven by `@preact/signals`, not React state.\n\n### Signals\n\n- MUST: Read signals via `.value` inside JSX/effects: `signalWidget.value` not `signalWidget()`.\n- MUST: Write signals atomically: `signalWidget.value = { ...signalWidget.value, dimensions: ... }`. One signal per logical slice.\n- MUST: Use `useSignal(initial)` for component-local reactive state, `useComputed(() => ...)` for derived values, `useSignalEffect(() => ...)` for subscriptions/DOM imperative work.\n- MUST: Wrap module-level signals exported from a tree-shaken bundle with `/* @__PURE__ */ signal(...)` so production builds can drop unused state.\n- SHOULD: Persist user-facing state via `readLocalStorage`/`saveLocalStorage` from [`~web/utils/helpers`](packages/scan/src/web/utils/helpers.ts) and seed the signal with the persisted value.\n- NEVER: Mirror one signal into another inside `useSignalEffect` - find the single source of truth (compute on read).\n\n### Effects\n\nBefore reaching for `useEffect`/`useSignalEffect`, classify the work:\n\n- MUST: Use `useComputed` when the result is pure derived state from other signals. If no external system is touched, it is not an effect.\n- MUST: Use event handlers and direct action calls when work happens because the user clicked, dragged, or navigated. Do not watch a flag in an effect to trigger imperative logic.\n- MUST: Use `useEffect(..., [])` (or `useSignalEffect` with no deps) for one-time mount/cleanup of subscriptions, timers, listeners, and `MutationObserver`s. Always return the cleanup.\n- MUST: Keep each effect single-purpose - one effect, one external bridge. Split mixed-responsibility effects.\n- NEVER: Use an effect just to copy one signal into another.\n- NEVER: Use an effect as an event bus (watching a trigger signal to run a command). Call the action directly from the event source.\n\n### Props\n\n- MUST: Access props via `props.title`, not destructuring, when the prop is read inside an event handler that fires later or inside an effect.\n- SHOULD: Destructure props at the top of the body for purely-rendered values (read once during render).\n- NEVER: Destructure a prop that is itself a signal-driven slice if you intend to re-read it after async work.\n\n### JSX & DOM\n\n- MUST: Use `className` (we render via Preact's React-compat JSX in [`tsconfig.json`](tsconfig.json) `jsxImportSource: preact`).\n- MUST: Combine static `className=\"btn\"` with reactive `className={cn(\"btn\", isActive.value && \"active\")}` via [`cn`](packages/scan/src/web/utils/helpers.ts).\n- MUST: Read refs in `useEffect` or via the callback ref pattern - DOM refs are populated after render.\n- MUST: Mount overlay UI under the existing shadow root from `initRootContainer()` in [`core/index.ts`](packages/scan/src/core/index.ts). Do not append directly to `document.body`.\n- SHOULD: Use `style={{ \"--css-var\": value }}` for dynamic CSS variables; class toggles for boolean states.\n- SHOULD: Type refs as `let element: HTMLElement | null = null` with a guard.\n\n## Build & Toolchain\n\nThis is a pnpm 10 monorepo with `packages/*` (libraries, extension, website) and a top-level `kitchen-sink/` (Playwright target). The toolchain is [Vite+](https://viteplus.dev) (`vp lint`, `vp fmt`, `vp check`) and `turbo` for pipeline orchestration.\n\n### Approved built dependencies\n\nThe root [`package.json`](package.json) declares `pnpm.onlyBuiltDependencies` for `@parcel/watcher`, `esbuild`, `sharp`, `spawn-sync`, `unrs-resolver`. Without this list, `pnpm install` skips their native build steps and downstream packages fail.\n\n### Build before test\n\n`pnpm build` must complete before `pnpm test`, `pnpm test:e2e`, or `pnpm lint`. After modifying source files, always rebuild before running tests. Turbo enforces this via `dependsOn: [\"^build\"]` in [`turbo.json`](turbo.json).\n\n### Playwright\n\n`pnpm test:e2e` runs Playwright against the `kitchen-sink` Vite dev server on port 5173 (auto-started by [`playwright.config.ts`](playwright.config.ts)). Chromium must be installed: `npx playwright install chromium --with-deps`.\n\n### Key commands\n\n| Task           | Command                                      |\n| -------------- | -------------------------------------------- |\n| Install        | `pnpm install`                               |\n| Build          | `pnpm build`                                 |\n| Dev watch      | `pnpm dev` (watches `react-scan` + kitchen-sink) |\n| Unit tests     | `pnpm test`                                  |\n| E2E tests      | `pnpm test:e2e`                              |\n| Lint           | `pnpm lint` (oxlint via vite-plus)           |\n| Lint + fix     | `pnpm lint:fix`                              |\n| Format         | `pnpm format` (oxfmt via vite-plus)          |\n| Format check   | `pnpm format:check`                          |\n| Typecheck      | `pnpm typecheck`                             |\n| Combined       | `pnpm check` (lint + fmt check + typecheck)  |\n\n## Testing\n\nRun checks always before committing with:\n\n```bash\npnpm build\npnpm lint\npnpm format\npnpm typecheck\npnpm test:e2e\n```\n","isInternal":false,"tokens":1612,"sizeBytes":6757},{"name":"SKILL.md","path":".cursor/skills/animation-best-practices/SKILL.md","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/.cursor/skills/animation-best-practices/SKILL.md","title":"animation-best-practices","category":"anthropic-skill","format":"markdown","content":"---\nname: animation-best-practices\ndescription: CSS and UI animation patterns for responsive, polished interfaces. Use when implementing hover effects, tooltips, button feedback, transitions, or fixing animation issues like flicker and shakiness.\nversion: 1.0.0\n---\n\n# Practical Animation Tips\n\nDetailed reference guide for common animation scenarios. Use this as a checklist when implementing animations.\n\n## Recording & Debugging\n\n### Record Your Animations\n\nWhen something feels off but you can't identify why, record the animation and play it back frame by frame. This reveals details invisible at normal speed.\n\n### Fix Shaky Animations\n\nElements may shift by 1px at the start/end of CSS transform animations due to GPU/CPU rendering handoff.\n\n**Fix:**\n\n```css\n.element {\n  will-change: transform;\n}\n```\n\nThis tells the browser to keep the element on the GPU throughout the animation.\n\n### Take Breaks\n\nDon't code and ship animations in one sitting. Step away, return with fresh eyes. The best animations are reviewed and refined over days, not hours.\n\n## Button & Click Feedback\n\n### Scale Buttons on Press\n\nMake interfaces feel responsive by adding subtle scale feedback:\n\n```css\nbutton:active {\n  transform: scale(0.97);\n}\n```\n\nThis gives instant visual feedback that the interface is listening.\n\n### Don't Animate from scale(0)\n\nStarting from `scale(0)` makes elements appear from nowhere—it feels unnatural.\n\n**Bad:**\n\n```css\n.element {\n  transform: scale(0);\n}\n.element.visible {\n  transform: scale(1);\n}\n```\n\n**Good:**\n\n```css\n.element {\n  transform: scale(0.95);\n  opacity: 0;\n}\n.element.visible {\n  transform: scale(1);\n  opacity: 1;\n}\n```\n\nElements should always have some visible shape, like a deflated balloon.\n\n## Tooltips & Popovers\n\n### Skip Animation on Subsequent Tooltips\n\nFirst tooltip: delay + animation. Subsequent tooltips (while one is open): instant, no delay.\n\n```css\n.tooltip {\n  transition:\n    transform 125ms ease-out,\n    opacity 125ms ease-out;\n  transform-origin: var(--transform-origin);\n}\n\n.tooltip[data-starting-style],\n.tooltip[data-ending-style] {\n  opacity: 0;\n  transform: scale(0.97);\n}\n\n/* Skip animation for subsequent tooltips */\n.tooltip[data-instant] {\n  transition-duration: 0ms;\n}\n```\n\nRadix UI and Base UI support this pattern with `data-instant` attribute.\n\n### Make Animations Origin-Aware\n\nPopovers should scale from their trigger, not from center.\n\n```css\n/* Default (wrong for most cases) */\n.popover {\n  transform-origin: center;\n}\n\n/* Correct - scale from trigger */\n.popover {\n  transform-origin: var(--transform-origin);\n}\n```\n\n**Radix UI:**\n\n```css\n.popover {\n  transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n}\n```\n\n**Base UI:**\n\n```css\n.popover {\n  transform-origin: var(--transform-origin);\n}\n```\n\n## Speed & Timing\n\n### Keep Animations Fast\n\nA faster-spinning spinner makes apps feel faster even with identical load times. A 180ms select animation feels more responsive than 400ms.\n\n**Rule:** UI animations should stay under 300ms.\n\n### Don't Animate Keyboard Interactions\n\nArrow key navigation, keyboard shortcuts—these are repeated hundreds of times daily. Animation makes them feel slow and disconnected.\n\n**Never animate:**\n\n- List navigation with arrow keys\n- Keyboard shortcut responses\n- Tab/focus movements\n\n### Be Careful with Frequently-Used Elements\n\nA hover effect is nice, but if triggered multiple times a day, it may benefit from no animation at all.\n\n**Guideline:** Use your own product daily. You'll discover which animations become annoying through repeated use.\n\n## Hover States\n\n### Fix Hover Flicker\n\nWhen hover animation changes element position, the cursor may leave the element, causing flicker.\n\n**Problem:**\n\n```css\n.box:hover {\n  transform: translateY(-20%);\n}\n```\n\n**Solution:** Animate a child element instead:\n\n```html\n<div class=\"box\">\n  <div class=\"box-inner\"></div>\n</div>\n```\n\n```css\n.box:hover .box-inner {\n  transform: translateY(-20%);\n}\n\n.box-inner {\n  transition: transform 200ms ease;\n}\n```\n\nThe parent's hover area stays stable while the child moves.\n\n### Disable Hover on Touch Devices\n\nTouch devices don't have true hover. Accidental finger movement triggers unwanted hover states.\n\n```css\n@media (hover: hover) and (pointer: fine) {\n  .card:hover {\n    transform: scale(1.05);\n  }\n}\n```\n\n**Note:** Tailwind v4's `hover:` class automatically applies only when the device supports hover.\n\n## Touch & Accessibility\n\n### Ensure Appropriate Target Areas\n\nSmall buttons are hard to tap. Use a pseudo-element to create larger hit areas without changing layout.\n\n**Minimum target:** 44px (Apple and WCAG recommendation)\n\n```css\n@utility touch-hitbox {\n  position: relative;\n}\n\n@utility touch-hitbox::before {\n  content: \"\";\n  position: absolute;\n  display: block;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  min-height: 44px;\n  min-width: 44px;\n  z-index: 9999;\n}\n```\n\nUsage:\n\n```jsx\n<button className=\"touch-hitbox\">\n  <BellIcon />\n</button>\n```\n\n## Easing Selection\n\n### Use ease-out for Enter/Exit\n\nElements entering or exiting should use `ease-out`. The fast start creates responsiveness.\n\n```css\n.dropdown {\n  transition:\n    transform 200ms ease-out,\n    opacity 200ms ease-out;\n}\n```\n\n`ease-in` starts slow—wrong for UI. Same duration feels slower because the movement is back-loaded.\n\n### Use ease-in-out for On-Screen Movement\n\nElements already visible that need to move should use `ease-in-out`. Mimics natural acceleration/deceleration like a car.\n\n```css\n.slider-handle {\n  transition: transform 250ms ease-in-out;\n}\n```\n\n### Use Custom Easing Curves\n\nBuilt-in CSS curves are usually too weak. Custom curves create more intentional motion.\n\n**Resources:**\n\n- [easings.co](https://easings.co/)\n\n## Visual Tricks\n\n### Use Blur as a Fallback\n\nWhen easing and timing adjustments don't solve the problem, add subtle blur to mask imperfections.\n\n```css\n.button-transition {\n  transition:\n    transform 150ms ease-out,\n    filter 150ms ease-out;\n}\n\n.button-transition:active {\n  transform: scale(0.97);\n  filter: blur(2px);\n}\n```\n\nBlur bridges visual gaps between states, tricking the eye into seeing smoother transitions. The two states blend instead of appearing as distinct objects.\n\n**Performance note:** Keep blur under 20px, especially on Safari.\n\n## Why Details Matter\n\n> \"All those unseen details combine to produce something that's just stunning, like a thousand barely audible voices all singing in tune.\"\n> — Paul Graham, Hackers and Painters\n\nDetails that go unnoticed are good—users complete tasks without friction. Great interfaces enable users to achieve goals with ease, not to admire animations.\n","frontmatter":{"name":"animation-best-practices","description":"CSS and UI animation patterns for responsive, polished interfaces. Use when implementing hover effects, tooltips, button feedback, transitions, or fixing animation issues like flicker and shakiness.","version":"1.0.0"},"isInternal":false,"tokens":1547,"sizeBytes":6704},{"name":"CHANGELOG.md","path":"packages/extension/CHANGELOG.md","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/CHANGELOG.md","title":"Extension Skill","category":"anthropic-skill","format":"markdown","content":"# Extension Skill\n\nPath: `packages/extension/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/CHANGELOG.md)","tokens":300,"sizeBytes":181},{"name":"package.json","path":"packages/extension/package.json","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/package.json","title":"Extension Skill","category":"anthropic-skill","format":"json","content":"# Extension Skill\n\nPath: `packages/extension/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/package.json)","tokens":300,"sizeBytes":181},{"name":"manifest.chrome.json","path":"packages/extension/src/manifest.chrome.json","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/src/manifest.chrome.json","title":"Src Skill","category":"anthropic-skill","format":"json","content":"# Src Skill\n\nPath: `packages/extension/src/manifest.chrome.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/src/manifest.chrome.json)","tokens":300,"sizeBytes":199},{"name":"manifest.firefox.json","path":"packages/extension/src/manifest.firefox.json","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/src/manifest.firefox.json","title":"Src Skill","category":"anthropic-skill","format":"json","content":"# Src Skill\n\nPath: `packages/extension/src/manifest.firefox.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/src/manifest.firefox.json)","tokens":300,"sizeBytes":201},{"name":"tsconfig.json","path":"packages/extension/tsconfig.json","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/tsconfig.json","title":"Extension Skill","category":"anthropic-skill","format":"json","content":"# Extension Skill\n\nPath: `packages/extension/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/tsconfig.json)","tokens":300,"sizeBytes":183},{"name":"tsconfig.node.json","path":"packages/extension/tsconfig.node.json","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/tsconfig.node.json","title":"Extension Skill","category":"anthropic-skill","format":"json","content":"# Extension Skill\n\nPath: `packages/extension/tsconfig.node.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/tsconfig.node.json)","tokens":300,"sizeBytes":193},{"name":"CHANGELOG.md","path":"packages/scan/CHANGELOG.md","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/CHANGELOG.md","title":"Scan Skill","category":"anthropic-skill","format":"markdown","content":"# react-scan\n\n## 0.5.7\n\n### Patch Changes\n\n- fix\n\n## 0.5.6\n\n### Patch Changes\n\n- fix\n\n## 0.5.5\n\n### Patch Changes\n\n- fix\n\n## 0.5.4\n\n### Patch Changes\n\n- lite\n\n## 0.5.3\n\n### Patch Changes\n\n- fix\n\n## 0.5.2\n\n### Patch Changes\n\n- fix\n\n## 0.5.1\n\n### Patch Changes\n\n- fix: infinite mounting\n\n## 0.5.0\n\n### Minor Changes\n\n- cleanup\n- 9d38ffe: Remove monitoring module, replace Playwright CLI with interactive init command, clean up dead code\n\n  - Removed the entire monitoring system (`packages/scan/src/core/monitor/`) and all related exports, types, and build entries\n  - Replaced the Playwright-based proxy CLI (`npx react-scan <url>`) with an interactive `npx react-scan init` command that auto-detects your framework and sets up React Scan\n  - Removed unused code: old outline system, LRU cache, lazy refs, commented-out code blocks, and unused exports\n  - Consolidated duplicate utilities (safeGetValue, RenderPhase types)\n  - Simplified README to focus on the new init command\n  - Added CLI quick-start command to the website homepage\n","isInternal":false,"tokens":291,"sizeBytes":1035},{"name":"package.json","path":"packages/scan/package.json","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/package.json","title":"Scan Skill","category":"anthropic-skill","format":"json","content":"# Scan Skill\n\nPath: `packages/scan/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/package.json)","tokens":300,"sizeBytes":166},{"name":"tsconfig.json","path":"packages/scan/src/react-component-name/tsconfig.json","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/src/react-component-name/tsconfig.json","title":"React-component-name Skill","category":"anthropic-skill","format":"json","content":"# React-component-name Skill\n\nPath: `packages/scan/src/react-component-name/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/src/react-component-name/tsconfig.json)","tokens":300,"sizeBytes":234},{"name":"tsconfig.json","path":"packages/scan/tsconfig.json","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/tsconfig.json","title":"Scan Skill","category":"anthropic-skill","format":"json","content":"# Scan Skill\n\nPath: `packages/scan/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/tsconfig.json)","tokens":300,"sizeBytes":168},{"name":"CHANGELOG.md","path":"packages/vite-plugin-react-scan/CHANGELOG.md","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/vite-plugin-react-scan/CHANGELOG.md","title":"Vite-plugin-react-scan Skill","category":"anthropic-skill","format":"markdown","content":"# @react-scan/vite-plugin-react-scan\n\n## 0.2.7\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.7\n\n## 0.2.6\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.6\n\n## 0.2.5\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.5\n\n## 0.2.4\n\n### Patch Changes\n\n- lite\n- Updated dependencies\n  - react-scan@0.5.4\n\n## 0.2.3\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.3\n\n## 0.2.2\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.2\n\n## 0.2.1\n\n### Patch Changes\n\n- fix: infinite mounting\n- Updated dependencies\n  - react-scan@0.5.1\n\n## 0.2.0\n\n### Minor Changes\n\n- cleanup\n\n### Patch Changes\n\n- Updated dependencies\n- Updated dependencies [9d38ffe]\n  - react-scan@0.5.0\n","isInternal":false,"tokens":276,"sizeBytes":754},{"name":"package.json","path":"packages/vite-plugin-react-scan/package.json","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/vite-plugin-react-scan/package.json","title":"@react-scan/vite-plugin-react-scan","category":"anthropic-skill","format":"json","content":"{\n  \"name\": \"@react-scan/vite-plugin-react-scan\",\n  \"version\": \"0.2.7\",\n  \"description\": \"A Vite plugin for React Scan - detects performance issues in your React app.\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"module\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"import\": {\n        \"types\": \"./dist/index.d.ts\",\n        \"default\": \"./dist/index.js\"\n      },\n      \"require\": {\n        \"types\": \"./dist/index.d.cts\",\n        \"default\": \"./dist/index.cjs\"\n      }\n    }\n  },\n  \"scripts\": {\n    \"build\": \"rm -rf dist && NODE_ENV=production vp pack\",\n    \"dev\": \"vp pack --watch\",\n    \"lint\": \"vp lint\",\n    \"format\": \"vp fmt\",\n    \"typecheck\": \"tsc --noEmit\"\n  },\n  \"peerDependenciesMeta\": {\n    \"react-scan\": {\n      \"optional\": false\n    },\n    \"vite\": {\n      \"optional\": false\n    }\n  },\n  \"keywords\": [\n    \"react\",\n    \"react-scan\",\n    \"react scan\",\n    \"render\",\n    \"performance\",\n    \"vite\",\n    \"vite plugin\"\n  ],\n  \"author\": {\n    \"name\": \"Team React Scan\",\n    \"url\": \"https://github.com/aidenybai/react-scan\"\n  },\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/aidenybai/react-scan\",\n  \"bugs\": {\n    \"url\": \"https://github.com/aidenybai/react-scan/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/aidenybai/react-scan.git\"\n  },\n  \"dependencies\": {\n    \"@babel/core\": \"^7.29.0\",\n    \"@babel/plugin-transform-react-jsx\": \"^7.25.9\",\n    \"@babel/preset-typescript\": \"^7.23.3\",\n    \"babel-plugin-add-react-displayname\": \"^0.0.5\",\n    \"cheerio\": \"^1.2.0\"\n  },\n  \"peerDependencies\": {\n    \"react-scan\": \">=0.5.7\",\n    \"vite\": \"^2 || ^3 || ^4 || ^5 || ^6\"\n  },\n  \"devDependencies\": {\n    \"@types/babel__core\": \"^7.20.5\",\n    \"@types/cheerio\": \"^1.0.0\",\n    \"@types/node\": \"^25.6.0\",\n    \"typescript\": \"latest\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\",\n    \"LICENSE\"\n  ]\n}\n","frontmatter":{"name":"@react-scan/vite-plugin-react-scan","version":"0.2.7","description":"A Vite plugin for React Scan - detects performance issues in your React app.","type":"module","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","exports":{"./package.json":"./package.json",".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"scripts":{"build":"rm -rf dist && NODE_ENV=production vp pack","dev":"vp pack --watch","lint":"vp lint","format":"vp fmt","typecheck":"tsc --noEmit"},"peerDependenciesMeta":{"react-scan":{"optional":false},"vite":{"optional":false}},"keywords":["react","react-scan","react scan","render","performance","vite","vite plugin"],"author":{"name":"Team React Scan","url":"https://github.com/aidenybai/react-scan"},"license":"MIT","homepage":"https://github.com/aidenybai/react-scan","bugs":{"url":"https://github.com/aidenybai/react-scan/issues"},"repository":{"type":"git","url":"https://github.com/aidenybai/react-scan.git"},"dependencies":{"@babel/core":"^7.29.0","@babel/plugin-transform-react-jsx":"^7.25.9","@babel/preset-typescript":"^7.23.3","babel-plugin-add-react-displayname":"^0.0.5","cheerio":"^1.2.0"},"peerDependencies":{"react-scan":">=0.5.7","vite":"^2 || ^3 || ^4 || ^5 || ^6"},"devDependencies":{"@types/babel__core":"^7.20.5","@types/cheerio":"^1.0.0","@types/node":"^25.6.0","typescript":"latest"},"publishConfig":{"access":"public"},"files":["dist","README.md","LICENSE"]},"isInternal":false,"tokens":630,"sizeBytes":1954},{"name":"tsconfig.json","path":"packages/vite-plugin-react-scan/tsconfig.json","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/vite-plugin-react-scan/tsconfig.json","title":"Vite-plugin-react-scan Skill","category":"anthropic-skill","format":"json","content":"{\n  \"extends\": \"../../tsconfig.json\",\n  \"compilerOptions\": {\n    \"rootDir\": \"src\",\n    \"outDir\": \"dist\",\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"bundler\",\n    \"declaration\": true,\n    \"isolatedModules\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"jsx\": \"preserve\"\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n","frontmatter":{"extends":"../../tsconfig.json","compilerOptions":{"rootDir":"src","outDir":"dist","module":"ESNext","moduleResolution":"bundler","declaration":true,"isolatedModules":true,"noUnusedLocals":true,"noUnusedParameters":true,"jsx":"preserve"},"include":["src"],"exclude":["node_modules","dist"]},"isInternal":false,"tokens":108,"sizeBytes":367},{"name":"AGENTS.md","path":"packages/website/AGENTS.md","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/website/AGENTS.md","title":"Website Skill","category":"anthropic-skill","format":"markdown","content":"Concise rules for building accessible, fast, delightful UIs Use MUST/SHOULD/NEVER to guide decisions\n\n## Interactions\n\n- Keyboard\n  - MUST: Full keyboard support per [WAI-ARIA APG](https://www.w3.org/WAI/ARIA/apg/patterns/)\n  - MUST: Visible focus rings (`:focus-visible`; group with `:focus-within`)\n  - MUST: Manage focus (trap, move, and return) per APG patterns\n- Targets & input\n  - MUST: Hit target ≥24px (mobile ≥44px) If visual <24px, expand hit area\n  - MUST: Mobile `<input>` font-size ≥16px or set:\n    ```html\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover\"\n    />\n    ```\n  - NEVER: Disable browser zoom\n  - MUST: `touch-action: manipulation` to prevent double-tap zoom; set `-webkit-tap-highlight-color` to match design\n- Inputs & forms (behavior)\n  - MUST: Hydration-safe inputs (no lost focus/value)\n  - NEVER: Block paste in `<input>/<textarea>`\n  - MUST: Loading buttons show spinner and keep original label\n  - MUST: Enter submits focused text input In `<textarea>`, ⌘/Ctrl+Enter submits; Enter adds newline\n  - MUST: Keep submit enabled until request starts; then disable, show spinner, use idempotency key\n  - MUST: Don't block typing; accept free text and validate after\n  - MUST: Allow submitting incomplete forms to surface validation\n  - MUST: Errors inline next to fields; on submit, focus first error\n  - MUST: `autocomplete` + meaningful `name`; correct `type` and `inputmode`\n  - SHOULD: Disable spellcheck for emails/codes/usernames\n  - SHOULD: Placeholders end with ellipsis and show example pattern (eg, `+1 (123) 456-7890`, `sk-012345…`)\n  - MUST: Warn on unsaved changes before navigation\n  - MUST: Compatible with password managers & 2FA; allow pasting one-time codes\n  - MUST: Trim values to handle text expansion trailing spaces\n  - MUST: No dead zones on checkboxes/radios; label+control share one generous hit target\n- State & navigation\n  - MUST: URL reflects state (deep-link filters/tabs/pagination/expanded panels) Prefer libs like [nuqs](https://nuqs.dev)\n  - MUST: Back/Forward restores scroll\n  - MUST: Links are links—use `<a>/<Link>` for navigation (support Cmd/Ctrl/middle-click)\n- Feedback\n  - SHOULD: Optimistic UI; reconcile on response; on failure show error and rollback or offer Undo\n  - MUST: Confirm destructive actions or provide Undo window\n  - MUST: Use polite `aria-live` for toasts/inline validation\n  - SHOULD: Ellipsis (`…`) for options that open follow-ups (eg, \"Rename…\") and loading states (eg, \"Loading…\", \"Saving…\", \"Generating…\")\n- Touch/drag/scroll\n  - MUST: Design forgiving interactions (generous targets, clear affordances; avoid finickiness)\n  - MUST: Delay first tooltip in a group; subsequent peers no delay\n  - MUST: Intentional `overscroll-behavior: contain` in modals/drawers\n  - MUST: During drag, disable text selection and set `inert` on dragged element/containers\n  - MUST: No \"dead-looking\" interactive zones—if it looks clickable, it is\n- Autofocus\n  - SHOULD: Autofocus on desktop when there's a single primary input; rarely on mobile (to avoid layout shift)\n\n## Animation\n\n- MUST: Honor `prefers-reduced-motion` (provide reduced variant)\n- SHOULD: Prefer CSS > Web Animations API > JS libraries\n- MUST: Animate compositor-friendly props (`transform`, `opacity`); avoid layout/repaint props (`top/left/width/height`)\n- SHOULD: Animate only to clarify cause/effect or add deliberate delight\n- SHOULD: Choose easing to match the change (size/distance/trigger)\n- MUST: Animations are interruptible and input-driven (avoid autoplay)\n- MUST: Correct `transform-origin` (motion starts where it \"physically\" should)\n\n## Layout\n\n- SHOULD: Optical alignment; adjust by ±1px when perception beats geometry\n- MUST: Deliberate alignment to grid/baseline/edges/optical centers—no accidental placement\n- SHOULD: Balance icon/text lockups (stroke/weight/size/spacing/color)\n- MUST: Verify mobile, laptop, ultra-wide (simulate ultra-wide at 50% zoom)\n- MUST: Respect safe areas (use env(safe-area-inset-\\*))\n- MUST: Avoid unwanted scrollbars; fix overflows\n\n## Content & Accessibility\n\n- SHOULD: Inline help first; tooltips last resort\n- MUST: Skeletons mirror final content to avoid layout shift\n- MUST: `<title>` matches current context\n- MUST: No dead ends; always offer next step/recovery\n- MUST: Design empty/sparse/dense/error states\n- SHOULD: Curly quotes (\" \"); avoid widows/orphans\n- MUST: Tabular numbers for comparisons (`font-variant-numeric: tabular-nums` or a mono like Geist Mono)\n- MUST: Redundant status cues (not color-only); icons have text labels\n- MUST: Don't ship the schema—visuals may omit labels but accessible names still exist\n- MUST: Use the ellipsis character `…` (not ``)\n- MUST: `scroll-margin-top` on headings for anchored links; include a \"Skip to content\" link; hierarchical `<h1–h6>`\n- MUST: Resilient to user-generated content (short/avg/very long)\n- MUST: Locale-aware dates/times/numbers/currency\n- MUST: Accurate names (`aria-label`), decorative elements `aria-hidden`, verify in the Accessibility Tree\n- MUST: Icon-only buttons have descriptive `aria-label`\n- MUST: Prefer native semantics (`button`, `a`, `label`, `table`) before ARIA\n- SHOULD: Right-clicking the nav logo surfaces brand assets\n- MUST: Use non-breaking spaces to glue terms: `10&nbsp;MB`, `⌘&nbsp;+&nbsp;K`, `Vercel&nbsp;SDK`\n\n## Performance\n\n- SHOULD: Test iOS Low Power Mode and macOS Safari\n- MUST: Measure reliably (disable extensions that skew runtime)\n- MUST: Track and minimize re-renders (React DevTools/React Scan)\n- MUST: Profile with CPU/network throttling\n- MUST: Batch layout reads/writes; avoid unnecessary reflows/repaints\n- MUST: Mutations (`POST/PATCH/DELETE`) target <500 ms\n- SHOULD: Prefer uncontrolled inputs; make controlled loops cheap (keystroke cost)\n- MUST: Virtualize large lists (eg, `virtua`)\n- MUST: Preload only above-the-fold images; lazy-load the rest\n- MUST: Prevent CLS from images (explicit dimensions or reserved space)\n\n## Design\n\n- SHOULD: Layered shadows (ambient + direct)\n- SHOULD: Crisp edges via semi-transparent borders + shadows\n- SHOULD: Nested radii: child ≤ parent; concentric\n- SHOULD: Hue consistency: tint borders/shadows/text toward bg hue\n- MUST: Accessible charts (color-blind-friendly palettes)\n- MUST: Meet contrast—prefer [APCA](https://apcacontrast.com/) over WCAG 2\n- MUST: Increase contrast on `:hover/:active/:focus`\n- SHOULD: Match browser UI to bg\n- SHOULD: Avoid gradient banding (use masks when needed)\n\n## Copywriting\n\n- MUST: Use active voice.\n- MUST: Use title case for headings and buttons.\n- MUST: Be clear and concise. Use as few words as possible.\n- MUST: Prefer & over and.\n- MUST: Use action-oriented language.\n- MUST: Keep nouns consistent. Introduce as few unique terms as possible.\n- MUST: Write in second person. Avoid first person.\n- MUST: Use consistent placeholders.\n- MUST: Use numerals for counts.\n- MUST: Use consistent currency formatting.\n- MUST: Separate numbers & units with a space.\n- MUST: Use a non-breaking space e.g., 10&nbsp;MB.\n- MUST: Default to positive language. Frame messages in an encouraging, problem-solving way, even for errors.\n- MUST: Error messages guide the exit. Don't just state what went wrong—tell the user how to fix it.\n- MUST: Avoid ambiguity. Labels are clear & specific.\n- MUST: Instead of the button label \"Continue\", say \"Save API Key\".\n","isInternal":false,"tokens":1867,"sizeBytes":7450},{"name":"package.json","path":"packages/website/package.json","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/website/package.json","title":"@react-scan/website","category":"anthropic-skill","format":"json","content":"{\n  \"name\": \"@react-scan/website\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"presync\": \"cp ../scan/dist/auto.global.js ./public/auto.global.js\",\n    \"dev\": \"pnpm presync && next dev --turbopack\",\n    \"build\": \"pnpm --filter react-scan build && pnpm presync && next build --webpack\",\n    \"start\": \"next start\",\n    \"lint\": \"vp lint\",\n    \"format\": \"vp fmt\"\n  },\n  \"dependencies\": {\n    \"@vercel/analytics\": \"^2.0.1\",\n    \"@vercel/speed-insights\": \"^2.0.0\",\n    \"highlight.js\": \"^11.11.1\",\n    \"next\": \"^16.2.4\",\n    \"react\": \"^19.2.5\",\n    \"react-dom\": \"^19.2.5\",\n    \"react-scan\": \"workspace:*\",\n    \"zod\": \"^4.4.2\"\n  },\n  \"devDependencies\": {\n    \"@tailwindcss/postcss\": \"^4.2.4\",\n    \"@types/react\": \"^19.2.14\",\n    \"@types/react-dom\": \"^19.2.3\",\n    \"autoprefixer\": \"^10.5.0\",\n    \"postcss\": \"^8.5.13\",\n    \"postcss-load-config\": \"^6.0.1\",\n    \"tailwindcss\": \"^4.2.4\"\n  }\n}\n","frontmatter":{"name":"@react-scan/website","version":"0.1.0","private":true,"scripts":{"presync":"cp ../scan/dist/auto.global.js ./public/auto.global.js","dev":"pnpm presync && next dev --turbopack","build":"pnpm --filter react-scan build && pnpm presync && next build --webpack","start":"next start","lint":"vp lint","format":"vp fmt"},"dependencies":{"@vercel/analytics":"^2.0.1","@vercel/speed-insights":"^2.0.0","highlight.js":"^11.11.1","next":"^16.2.4","react":"^19.2.5","react-dom":"^19.2.5","react-scan":"workspace:*","zod":"^4.4.2"},"devDependencies":{"@tailwindcss/postcss":"^4.2.4","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","autoprefixer":"^10.5.0","postcss":"^8.5.13","postcss-load-config":"^6.0.1","tailwindcss":"^4.2.4"}},"isInternal":false,"tokens":326,"sizeBytes":896},{"name":"tsconfig.json","path":"packages/website/tsconfig.json","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/website/tsconfig.json","title":"Website Skill","category":"anthropic-skill","format":"json","content":"{\n  \"compilerOptions\": {\n    \"target\": \"ES2017\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"bundler\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"react-jsx\",\n    \"incremental\": true,\n    \"plugins\": [\n      {\n        \"name\": \"next\"\n      }\n    ],\n    \"paths\": {\n      \"@/*\": [\n        \"./*\"\n      ]\n    },\n    \"baseUrl\": \".\"\n  },\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\",\n    \".next/types/**/*.ts\",\n    \".next/dev/types/**/*.ts\"\n  ],\n  \"exclude\": [\n    \"node_modules\",\n    \"dist\"\n  ]\n}\n","frontmatter":{"compilerOptions":{"target":"ES2017","lib":["dom","dom.iterable","esnext"],"allowJs":true,"skipLibCheck":true,"strict":true,"noEmit":true,"esModuleInterop":true,"module":"esnext","moduleResolution":"bundler","resolveJsonModule":true,"isolatedModules":true,"jsx":"react-jsx","incremental":true,"plugins":[{"name":"next"}],"paths":{"@/*":["./*"]},"baseUrl":"."},"include":["next-env.d.ts","**/*.ts","**/*.tsx",".next/types/**/*.ts",".next/dev/types/**/*.ts"],"exclude":["node_modules","dist"]},"isInternal":false,"tokens":223,"sizeBytes":730},{"name":"README.md","path":"packages/extension/README.md","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/README.md","title":"extension Documentation","category":"plugin-manifest","format":"markdown","content":"# extension Documentation\n\nPath: `packages/extension/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/README.md)","tokens":300,"sizeBytes":183},{"name":"README.md","path":"packages/scan/README.md","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/README.md","title":"scan Documentation","category":"plugin-manifest","format":"markdown","content":"# scan Documentation\n\nPath: `packages/scan/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/README.md)","tokens":300,"sizeBytes":168},{"name":"README.md","path":"packages/vite-plugin-react-scan/README.md","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/vite-plugin-react-scan/README.md","title":"vite-plugin-react-scan Documentation","category":"plugin-manifest","format":"markdown","content":"# @react-scan/vite-plugin-react-scan\n\nA Vite plugin that integrates React Scan into your Vite application, automatically detecting performance issues in your React components.\n\n## Installation\n\n```bash\n# npm\nnpm install -D @react-scan/vite-plugin-react-scan react-scan\n\n# pnpm\npnpm add -D @react-scan/vite-plugin-react-scan react-scan\n\n# yarn\nyarn add -D @react-scan/vite-plugin-react-scan react-scan\n```\n\n> **Note:** Make sure `react-scan` is installed as a peer dependency. The plugin will automatically locate it in your project's dependency tree.\n\n## Usage\n\nAdd the plugin to your `vite.config.ts`:\n\n```ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport reactScan from '@react-scan/vite-plugin-react-scan';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    reactScan({\n      // options (optional)\n    }),\n  ],\n});\n```\n\n## Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `enable` | `boolean` | `process.env.NODE_ENV === 'development'` | Enable/disable scanning |\n| `scanOptions` | `object` | `{ ... }` | Custom React Scan options |\n| `autoDisplayNames` | `boolean` | `false` | Automatically add display names to React components |\n| `debug` | `boolean` | `false` | Enable debug logging |\n\n## Example Configuration\n\n```ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport reactScan from '@react-scan/vite-plugin-react-scan';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    reactScan({\n      enable: true,\n      autoDisplayNames: true,\n      scanOptions: {} // React Scan specific options\n    }),\n  ],\n});\n```\n\n## Development vs Production\n\n- In development: The plugin injects React Scan directly into your application for real-time analysis\n- In production: The plugin can be disabled/enabled by default with specific options\n\n## Contributing\n\nContributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.\n\n## License\n\nReact Scan Vite Plugin is [MIT-licensed](LICENSE) open-source software by Aiden Bai, [Million Software, Inc.](https://million.dev), and [contributors](https://github.com/aidenybai/react-scan/graphs/contributors).\n","isInternal":false,"tokens":540,"sizeBytes":2212},{"name":"README.md","path":"packages/website/README.md","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/website/README.md","title":"website Documentation","category":"plugin-manifest","format":"markdown","content":"This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.\n\nThis project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.\n","isInternal":false,"tokens":357,"sizeBytes":1450},{"name":"deslop.md","path":".cursor/commands/deslop.md","rawUrl":"https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/.cursor/commands/deslop.md","title":"Command: /deslop","category":"command-prompt","format":"markdown","content":"\nYou are an expert code simplification specialist focused on enhancing code clarity, consistency, and maintainability while preserving exact functionality. Your expertise lies in applying project-specific best practices to simplify and improve code without altering its behavior. You prioritize readable, explicit code over overly compact solutions. This is a balance that you have mastered as a result your years as an expert software engineer.\n\nYou will analyze recently modified code and apply refinements that:\n\n1. **Preserve Functionality**: Never change what the code does - only how it does it. All original features, outputs, and behaviors must remain intact.\n\n2. **Apply Project Standards**: Follow the established coding standards from the codebase guidelines including:\n\n- Use ES modules with proper import sorting and extensions\n\n- Use explicit return type annotations for top-level functions\n\n- Follow proper React component patterns with explicit Props types\n\n- Use proper error handling patterns (avoid try/catch when possible)\n\n- Maintain consistent naming conventions\n\n3. **Enhance Clarity**: Simplify code structure by:\n\n- Reducing unnecessary complexity and nesting\n\n- Eliminating redundant code and abstractions\n\n- Improving readability through clear variable and function names\n\n- Consolidating related logic\n\n- Removing unnecessary comments that describe obvious code\n\n- IMPORTANT: Avoid nested ternary operators - prefer switch statements or if/else chains for multiple conditions\n\n- Choose clarity over brevity - explicit code is often better than overly compact code\n\n4. **Maintain Balance**: Avoid over-simplification that could:\n\n- Reduce code clarity or maintainability\n\n- Create overly clever solutions that are hard to understand\n\n- Combine too many concerns into single functions or components\n\n- Remove helpful abstractions that improve code organization\n\n- Prioritize \"fewer lines\" over readability (e.g., nested ternaries, dense one-liners)\n\n- Make the code harder to debug or extend\n\n5. **Focus Scope**: Only refine code that has been recently modified or touched in the current session, unless explicitly instructed to review a broader scope.\n\nYour refinement process:\n\n1. Identify the recently modified code sections\n\n2. Analyze for opportunities to improve elegance and consistency\n\n3. Apply project-specific best practices and coding standards\n\n4. Ensure all functionality remains unchanged\n\n5. Verify the refined code is simpler and more maintainable\n\n6. Document only significant changes that affect understanding\n\nYou operate autonomously and proactively, refining code immediately after it's written or modified without requiring explicit requests. Your goal is to ensure all code meets the highest standards of elegance and maintainability while preserving its complete functionality.\n","isInternal":false,"tokens":516,"sizeBytes":2829}],"systemPromptSnippet":"<yakaai_skills repo=\"aidenybai/react-scan\">\n<!-- File: AGENTS.md (Tokens: ~1612 | Category: root-instruction) -->\n## General Rules\n\n- MUST: Use TypeScript interfaces over types.\n- MUST: Keep all types in the global scope.\n- MUST: Use arrow functions over function declarations.\n- MUST: Default to NO comments. Only add a comment when the user explicitly asks, or when the \"why\" is truly non-obvious - browser quirks, platform bugs, performance tradeoffs, fragile internal patching, or counter-intuitive design decisions. Never add comments that restate what the code does or what a well-named function/variable already conveys. When in doubt, leave the comment out.\n  - If a hack is required (like a `setTimeout` that hides a race), prefix with `// HACK: reason for hack`.\n  - Do not delete descriptive comments >3 lines without confirming with the user.\n- MUST: Use kebab-case for files.\n- MUST: Use descriptive names for variables (avoid shorthands, or 1-2 character names).\n  - Example: for `.map()`, use `innerNode` instead of `n`.\n  - Example: instead of `moved` use `didPositionChange`.\n- MUST: Frequently re-evaluate and refactor variable names to be more accurate and descriptive.\n- MUST: Do not type cast (`as`) unless absolutely necessary.\n- MUST: Remove unused code and don't repeat yourself.\n- MUST: Always search the codebase, think of many solutions, then implement the most _elegant_ solution.\n- MUST: Put all magic numbers in `constants.ts` using `SCREAMING_SNAKE_CASE` with unit suffixes (`_MS`, `_PX`).\n- MUST: Put small, focused utility functions in `utils/` with one utility per file.\n- MUST: Use `Boolean(x)` over `!!x`.\n\n## Preact + @preact/signals Rules\n\nReact Scan's overlay UI runs as a Preact app mounted inside a Shadow DOM (see [`packages/scan/src/core/index.ts`](packages/scan/src/core/index.ts)). Reactivity is driven by `@preact/signals`, not React state.\n\n### Signals\n\n- MUST: Read signals via `.value` inside JSX/effects: `signalWidget.value` not `signalWidget()`.\n- MUST: Write signals atomically: `signalWidget.value = { ...signalWidget.value, dimensions: ... }`. One signal per logical slice.\n- MUST: Use `useSignal(initial)` for component-local reactive state, `useComputed(() => ...)` for derived values, `useSignalEffect(() => ...)` for subscriptions/DOM imperative work.\n- MUST: Wrap module-level signals exported from a tree-shaken bundle with `/* @__PURE__ */ signal(...)` so production builds can drop unused state.\n- SHOULD: Persist user-facing state via `readLocalStorage`/`saveLocalStorage` from [`~web/utils/helpers`](packages/scan/src/web/utils/helpers.ts) and seed the signal with the persisted value.\n- NEVER: Mirror one signal into another inside `useSignalEffect` - find the single source of truth (compute on read).\n\n### Effects\n\nBefore reaching for `useEffect`/`useSignalEffect`, classify the work:\n\n- MUST: Use `useComputed` when the result is pure derived state from other signals. If no external system is touched, it is not an effect.\n- MUST: Use event handlers and direct action calls when work happens because the user clicked, dragged, or navigated. Do not watch a flag in an effect to trigger imperative logic.\n- MUST: Use `useEffect(..., [])` (or `useSignalEffect` with no deps) for one-time mount/cleanup of subscriptions, timers, listeners, and `MutationObserver`s. Always return the cleanup.\n- MUST: Keep each effect single-purpose - one effect, one external bridge. Split mixed-responsibility effects.\n- NEVER: Use an effect just to copy one signal into another.\n- NEVER: Use an effect as an event bus (watching a trigger signal to run a command). Call the action directly from the event source.\n\n### Props\n\n- MUST: Access props via `props.title`, not destructuring, when the prop is read inside an event handler that fires later or inside an effect.\n- SHOULD: Destructure props at the top of the body for purely-rendered values (read once during render).\n- NEVER: Destructure a prop that is itself a signal-driven slice if you intend to re-read it after async work.\n\n### JSX & DOM\n\n- MUST: Use `className` (we render via Preact's React-compat JSX in [`tsconfig.json`](tsconfig.json) `jsxImportSource: preact`).\n- MUST: Combine static `className=\"btn\"` with reactive `className={cn(\"btn\", isActive.value && \"active\")}` via [`cn`](packages/scan/src/web/utils/helpers.ts).\n- MUST: Read refs in `useEffect` or via the callback ref pattern - DOM refs are populated after render.\n- MUST: Mount overlay UI under the existing shadow root from `initRootContainer()` in [`core/index.ts`](packages/scan/src/core/index.ts). Do not append directly to `document.body`.\n- SHOULD: Use `style={{ \"--css-var\": value }}` for dynamic CSS variables; class toggles for boolean states.\n- SHOULD: Type refs as `let element: HTMLElement | null = null` with a guard.\n\n## Build & Toolchain\n\nThis is a pnpm 10 monorepo with `packages/*` (libraries, extension, website) and a top-level `kitchen-sink/` (Playwright target). The toolchain is [Vite+](https://viteplus.dev) (`vp lint`, `vp fmt`, `vp check`) and `turbo` for pipeline orchestration.\n\n### Approved built dependencies\n\nThe root [`package.json`](package.json) declares `pnpm.onlyBuiltDependencies` for `@parcel/watcher`, `esbuild`, `sharp`, `spawn-sync`, `unrs-resolver`. Without this list, `pnpm install` skips their native build steps and downstream packages fail.\n\n### Build before test\n\n`pnpm build` must complete before `pnpm test`, `pnpm test:e2e`, or `pnpm lint`. After modifying source files, always rebuild before running tests. Turbo enforces this via `dependsOn: [\"^build\"]` in [`turbo.json`](turbo.json).\n\n### Playwright\n\n`pnpm test:e2e` runs Playwright against the `kitchen-sink` Vite dev server on port 5173 (auto-started by [`playwright.config.ts`](playwright.config.ts)). Chromium must be installed: `npx playwright install chromium --with-deps`.\n\n### Key commands\n\n| Task           | Command                                      |\n| -------------- | -------------------------------------------- |\n| Install        | `pnpm install`                               |\n| Build          | `pnpm build`                                 |\n| Dev watch      | `pnpm dev` (watches `react-scan` + kitchen-sink) |\n| Unit tests     | `pnpm test`                                  |\n| E2E tests      | `pnpm test:e2e`                              |\n| Lint           | `pnpm lint` (oxlint via vite-plus)           |\n| Lint + fix     | `pnpm lint:fix`                              |\n| Format         | `pnpm format` (oxfmt via vite-plus)          |\n| Format check   | `pnpm format:check`                          |\n| Typecheck      | `pnpm typecheck`                             |\n| Combined       | `pnpm check` (lint + fmt check + typecheck)  |\n\n## Testing\n\nRun checks always before committing with:\n\n```bash\npnpm build\npnpm lint\npnpm format\npnpm typecheck\npnpm test:e2e\n```\n\n<!-- File: .cursor/skills/animation-best-practices/SKILL.md (Tokens: ~1547 | Category: anthropic-skill) -->\n---\nname: animation-best-practices\ndescription: CSS and UI animation patterns for responsive, polished interfaces. Use when implementing hover effects, tooltips, button feedback, transitions, or fixing animation issues like flicker and shakiness.\nversion: 1.0.0\n---\n\n# Practical Animation Tips\n\nDetailed reference guide for common animation scenarios. Use this as a checklist when implementing animations.\n\n## Recording & Debugging\n\n### Record Your Animations\n\nWhen something feels off but you can't identify why, record the animation and play it back frame by frame. This reveals details invisible at normal speed.\n\n### Fix Shaky Animations\n\nElements may shift by 1px at the start/end of CSS transform animations due to GPU/CPU rendering handoff.\n\n**Fix:**\n\n```css\n.element {\n  will-change: transform;\n}\n```\n\nThis tells the browser to keep the element on the GPU throughout the animation.\n\n### Take Breaks\n\nDon't code and ship animations in one sitting. Step away, return with fresh eyes. The best animations are reviewed and refined over days, not hours.\n\n## Button & Click Feedback\n\n### Scale Buttons on Press\n\nMake interfaces feel responsive by adding subtle scale feedback:\n\n```css\nbutton:active {\n  transform: scale(0.97);\n}\n```\n\nThis gives instant visual feedback that the interface is listening.\n\n### Don't Animate from scale(0)\n\nStarting from `scale(0)` makes elements appear from nowhere—it feels unnatural.\n\n**Bad:**\n\n```css\n.element {\n  transform: scale(0);\n}\n.element.visible {\n  transform: scale(1);\n}\n```\n\n**Good:**\n\n```css\n.element {\n  transform: scale(0.95);\n  opacity: 0;\n}\n.element.visible {\n  transform: scale(1);\n  opacity: 1;\n}\n```\n\nElements should always have some visible shape, like a deflated balloon.\n\n## Tooltips & Popovers\n\n### Skip Animation on Subsequent Tooltips\n\nFirst tooltip: delay + animation. Subsequent tooltips (while one is open): instant, no delay.\n\n```css\n.tooltip {\n  transition:\n    transform 125ms ease-out,\n    opacity 125ms ease-out;\n  transform-origin: var(--transform-origin);\n}\n\n.tooltip[data-starting-style],\n.tooltip[data-ending-style] {\n  opacity: 0;\n  transform: scale(0.97);\n}\n\n/* Skip animation for subsequent tooltips */\n.tooltip[data-instant] {\n  transition-duration: 0ms;\n}\n```\n\nRadix UI and Base UI support this pattern with `data-instant` attribute.\n\n### Make Animations Origin-Aware\n\nPopovers should scale from their trigger, not from center.\n\n```css\n/* Default (wrong for most cases) */\n.popover {\n  transform-origin: center;\n}\n\n/* Correct - scale from trigger */\n.popover {\n  transform-origin: var(--transform-origin);\n}\n```\n\n**Radix UI:**\n\n```css\n.popover {\n  transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n}\n```\n\n**Base UI:**\n\n```css\n.popover {\n  transform-origin: var(--transform-origin);\n}\n```\n\n## Speed & Timing\n\n### Keep Animations Fast\n\nA faster-spinning spinner makes apps feel faster even with identical load times. A 180ms select animation feels more responsive than 400ms.\n\n**Rule:** UI animations should stay under 300ms.\n\n### Don't Animate Keyboard Interactions\n\nArrow key navigation, keyboard shortcuts—these are repeated hundreds of times daily. Animation makes them feel slow and disconnected.\n\n**Never animate:**\n\n- List navigation with arrow keys\n- Keyboard shortcut responses\n- Tab/focus movements\n\n### Be Careful with Frequently-Used Elements\n\nA hover effect is nice, but if triggered multiple times a day, it may benefit from no animation at all.\n\n**Guideline:** Use your own product daily. You'll discover which animations become annoying through repeated use.\n\n## Hover States\n\n### Fix Hover Flicker\n\nWhen hover animation changes element position, the cursor may leave the element, causing flicker.\n\n**Problem:**\n\n```css\n.box:hover {\n  transform: translateY(-20%);\n}\n```\n\n**Solution:** Animate a child element instead:\n\n```html\n<div class=\"box\">\n  <div class=\"box-inner\"></div>\n</div>\n```\n\n```css\n.box:hover .box-inner {\n  transform: translateY(-20%);\n}\n\n.box-inner {\n  transition: transform 200ms ease;\n}\n```\n\nThe parent's hover area stays stable while the child moves.\n\n### Disable Hover on Touch Devices\n\nTouch devices don't have true hover. Accidental finger movement triggers unwanted hover states.\n\n```css\n@media (hover: hover) and (pointer: fine) {\n  .card:hover {\n    transform: scale(1.05);\n  }\n}\n```\n\n**Note:** Tailwind v4's `hover:` class automatically applies only when the device supports hover.\n\n## Touch & Accessibility\n\n### Ensure Appropriate Target Areas\n\nSmall buttons are hard to tap. Use a pseudo-element to create larger hit areas without changing layout.\n\n**Minimum target:** 44px (Apple and WCAG recommendation)\n\n```css\n@utility touch-hitbox {\n  position: relative;\n}\n\n@utility touch-hitbox::before {\n  content: \"\";\n  position: absolute;\n  display: block;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  min-height: 44px;\n  min-width: 44px;\n  z-index: 9999;\n}\n```\n\nUsage:\n\n```jsx\n<button className=\"touch-hitbox\">\n  <BellIcon />\n</button>\n```\n\n## Easing Selection\n\n### Use ease-out for Enter/Exit\n\nElements entering or exiting should use `ease-out`. The fast start creates responsiveness.\n\n```css\n.dropdown {\n  transition:\n    transform 200ms ease-out,\n    opacity 200ms ease-out;\n}\n```\n\n`ease-in` starts slow—wrong for UI. Same duration feels slower because the movement is back-loaded.\n\n### Use ease-in-out for On-Screen Movement\n\nElements already visible that need to move should use `ease-in-out`. Mimics natural acceleration/deceleration like a car.\n\n```css\n.slider-handle {\n  transition: transform 250ms ease-in-out;\n}\n```\n\n### Use Custom Easing Curves\n\nBuilt-in CSS curves are usually too weak. Custom curves create more intentional motion.\n\n**Resources:**\n\n- [easings.co](https://easings.co/)\n\n## Visual Tricks\n\n### Use Blur as a Fallback\n\nWhen easing and timing adjustments don't solve the problem, add subtle blur to mask imperfections.\n\n```css\n.button-transition {\n  transition:\n    transform 150ms ease-out,\n    filter 150ms ease-out;\n}\n\n.button-transition:active {\n  transform: scale(0.97);\n  filter: blur(2px);\n}\n```\n\nBlur bridges visual gaps between states, tricking the eye into seeing smoother transitions. The two states blend instead of appearing as distinct objects.\n\n**Performance note:** Keep blur under 20px, especially on Safari.\n\n## Why Details Matter\n\n> \"All those unseen details combine to produce something that's just stunning, like a thousand barely audible voices all singing in tune.\"\n> — Paul Graham, Hackers and Painters\n\nDetails that go unnoticed are good—users complete tasks without friction. Great interfaces enable users to achieve goals with ease, not to admire animations.\n\n<!-- File: packages/extension/CHANGELOG.md (Tokens: ~300 | Category: anthropic-skill) -->\n# Extension Skill\n\nPath: `packages/extension/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/CHANGELOG.md)\n\n<!-- File: packages/extension/package.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Extension Skill\n\nPath: `packages/extension/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/package.json)\n\n<!-- File: packages/extension/src/manifest.chrome.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Src Skill\n\nPath: `packages/extension/src/manifest.chrome.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/src/manifest.chrome.json)\n\n<!-- File: packages/extension/src/manifest.firefox.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Src Skill\n\nPath: `packages/extension/src/manifest.firefox.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/src/manifest.firefox.json)\n\n<!-- File: packages/extension/tsconfig.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Extension Skill\n\nPath: `packages/extension/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/tsconfig.json)\n\n<!-- File: packages/extension/tsconfig.node.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Extension Skill\n\nPath: `packages/extension/tsconfig.node.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/tsconfig.node.json)\n\n<!-- File: packages/scan/CHANGELOG.md (Tokens: ~291 | Category: anthropic-skill) -->\n# react-scan\n\n## 0.5.7\n\n### Patch Changes\n\n- fix\n\n## 0.5.6\n\n### Patch Changes\n\n- fix\n\n## 0.5.5\n\n### Patch Changes\n\n- fix\n\n## 0.5.4\n\n### Patch Changes\n\n- lite\n\n## 0.5.3\n\n### Patch Changes\n\n- fix\n\n## 0.5.2\n\n### Patch Changes\n\n- fix\n\n## 0.5.1\n\n### Patch Changes\n\n- fix: infinite mounting\n\n## 0.5.0\n\n### Minor Changes\n\n- cleanup\n- 9d38ffe: Remove monitoring module, replace Playwright CLI with interactive init command, clean up dead code\n\n  - Removed the entire monitoring system (`packages/scan/src/core/monitor/`) and all related exports, types, and build entries\n  - Replaced the Playwright-based proxy CLI (`npx react-scan <url>`) with an interactive `npx react-scan init` command that auto-detects your framework and sets up React Scan\n  - Removed unused code: old outline system, LRU cache, lazy refs, commented-out code blocks, and unused exports\n  - Consolidated duplicate utilities (safeGetValue, RenderPhase types)\n  - Simplified README to focus on the new init command\n  - Added CLI quick-start command to the website homepage\n\n<!-- File: packages/scan/package.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Scan Skill\n\nPath: `packages/scan/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/package.json)\n\n<!-- File: packages/scan/src/react-component-name/tsconfig.json (Tokens: ~300 | Category: anthropic-skill) -->\n# React-component-name Skill\n\nPath: `packages/scan/src/react-component-name/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/src/react-component-name/tsconfig.json)\n\n<!-- File: packages/scan/tsconfig.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Scan Skill\n\nPath: `packages/scan/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/tsconfig.json)\n\n<!-- File: packages/vite-plugin-react-scan/CHANGELOG.md (Tokens: ~276 | Category: anthropic-skill) -->\n# @react-scan/vite-plugin-react-scan\n\n## 0.2.7\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.7\n\n## 0.2.6\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.6\n\n## 0.2.5\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.5\n\n## 0.2.4\n\n### Patch Changes\n\n- lite\n- Updated dependencies\n  - react-scan@0.5.4\n\n## 0.2.3\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.3\n\n## 0.2.2\n\n### Patch Changes\n\n- fix\n- Updated dependencies\n  - react-scan@0.5.2\n\n## 0.2.1\n\n### Patch Changes\n\n- fix: infinite mounting\n- Updated dependencies\n  - react-scan@0.5.1\n\n## 0.2.0\n\n### Minor Changes\n\n- cleanup\n\n### Patch Changes\n\n- Updated dependencies\n- Updated dependencies [9d38ffe]\n  - react-scan@0.5.0\n\n<!-- File: packages/vite-plugin-react-scan/package.json (Tokens: ~630 | Category: anthropic-skill) -->\n{\n  \"name\": \"@react-scan/vite-plugin-react-scan\",\n  \"version\": \"0.2.7\",\n  \"description\": \"A Vite plugin for React Scan - detects performance issues in your React app.\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"module\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"import\": {\n        \"types\": \"./dist/index.d.ts\",\n        \"default\": \"./dist/index.js\"\n      },\n      \"require\": {\n        \"types\": \"./dist/index.d.cts\",\n        \"default\": \"./dist/index.cjs\"\n      }\n    }\n  },\n  \"scripts\": {\n    \"build\": \"rm -rf dist && NODE_ENV=production vp pack\",\n    \"dev\": \"vp pack --watch\",\n    \"lint\": \"vp lint\",\n    \"format\": \"vp fmt\",\n    \"typecheck\": \"tsc --noEmit\"\n  },\n  \"peerDependenciesMeta\": {\n    \"react-scan\": {\n      \"optional\": false\n    },\n    \"vite\": {\n      \"optional\": false\n    }\n  },\n  \"keywords\": [\n    \"react\",\n    \"react-scan\",\n    \"react scan\",\n    \"render\",\n    \"performance\",\n    \"vite\",\n    \"vite plugin\"\n  ],\n  \"author\": {\n    \"name\": \"Team React Scan\",\n    \"url\": \"https://github.com/aidenybai/react-scan\"\n  },\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/aidenybai/react-scan\",\n  \"bugs\": {\n    \"url\": \"https://github.com/aidenybai/react-scan/issues\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/aidenybai/react-scan.git\"\n  },\n  \"dependencies\": {\n    \"@babel/core\": \"^7.29.0\",\n    \"@babel/plugin-transform-react-jsx\": \"^7.25.9\",\n    \"@babel/preset-typescript\": \"^7.23.3\",\n    \"babel-plugin-add-react-displayname\": \"^0.0.5\",\n    \"cheerio\": \"^1.2.0\"\n  },\n  \"peerDependencies\": {\n    \"react-scan\": \">=0.5.7\",\n    \"vite\": \"^2 || ^3 || ^4 || ^5 || ^6\"\n  },\n  \"devDependencies\": {\n    \"@types/babel__core\": \"^7.20.5\",\n    \"@types/cheerio\": \"^1.0.0\",\n    \"@types/node\": \"^25.6.0\",\n    \"typescript\": \"latest\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\",\n    \"LICENSE\"\n  ]\n}\n\n<!-- File: packages/vite-plugin-react-scan/tsconfig.json (Tokens: ~108 | Category: anthropic-skill) -->\n{\n  \"extends\": \"../../tsconfig.json\",\n  \"compilerOptions\": {\n    \"rootDir\": \"src\",\n    \"outDir\": \"dist\",\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"bundler\",\n    \"declaration\": true,\n    \"isolatedModules\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"jsx\": \"preserve\"\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n\n<!-- File: packages/website/AGENTS.md (Tokens: ~1867 | Category: anthropic-skill) -->\nConcise rules for building accessible, fast, delightful UIs Use MUST/SHOULD/NEVER to guide decisions\n\n## Interactions\n\n- Keyboard\n  - MUST: Full keyboard support per [WAI-ARIA APG](https://www.w3.org/WAI/ARIA/apg/patterns/)\n  - MUST: Visible focus rings (`:focus-visible`; group with `:focus-within`)\n  - MUST: Manage focus (trap, move, and return) per APG patterns\n- Targets & input\n  - MUST: Hit target ≥24px (mobile ≥44px) If visual <24px, expand hit area\n  - MUST: Mobile `<input>` font-size ≥16px or set:\n    ```html\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover\"\n    />\n    ```\n  - NEVER: Disable browser zoom\n  - MUST: `touch-action: manipulation` to prevent double-tap zoom; set `-webkit-tap-highlight-color` to match design\n- Inputs & forms (behavior)\n  - MUST: Hydration-safe inputs (no lost focus/value)\n  - NEVER: Block paste in `<input>/<textarea>`\n  - MUST: Loading buttons show spinner and keep original label\n  - MUST: Enter submits focused text input In `<textarea>`, ⌘/Ctrl+Enter submits; Enter adds newline\n  - MUST: Keep submit enabled until request starts; then disable, show spinner, use idempotency key\n  - MUST: Don't block typing; accept free text and validate after\n  - MUST: Allow submitting incomplete forms to surface validation\n  - MUST: Errors inline next to fields; on submit, focus first error\n  - MUST: `autocomplete` + meaningful `name`; correct `type` and `inputmode`\n  - SHOULD: Disable spellcheck for emails/codes/usernames\n  - SHOULD: Placeholders end with ellipsis and show example pattern (eg, `+1 (123) 456-7890`, `sk-012345…`)\n  - MUST: Warn on unsaved changes before navigation\n  - MUST: Compatible with password managers & 2FA; allow pasting one-time codes\n  - MUST: Trim values to handle text expansion trailing spaces\n  - MUST: No dead zones on checkboxes/radios; label+control share one generous hit target\n- State & navigation\n  - MUST: URL reflects state (deep-link filters/tabs/pagination/expanded panels) Prefer libs like [nuqs](https://nuqs.dev)\n  - MUST: Back/Forward restores scroll\n  - MUST: Links are links—use `<a>/<Link>` for navigation (support Cmd/Ctrl/middle-click)\n- Feedback\n  - SHOULD: Optimistic UI; reconcile on response; on failure show error and rollback or offer Undo\n  - MUST: Confirm destructive actions or provide Undo window\n  - MUST: Use polite `aria-live` for toasts/inline validation\n  - SHOULD: Ellipsis (`…`) for options that open follow-ups (eg, \"Rename…\") and loading states (eg, \"Loading…\", \"Saving…\", \"Generating…\")\n- Touch/drag/scroll\n  - MUST: Design forgiving interactions (generous targets, clear affordances; avoid finickiness)\n  - MUST: Delay first tooltip in a group; subsequent peers no delay\n  - MUST: Intentional `overscroll-behavior: contain` in modals/drawers\n  - MUST: During drag, disable text selection and set `inert` on dragged element/containers\n  - MUST: No \"dead-looking\" interactive zones—if it looks clickable, it is\n- Autofocus\n  - SHOULD: Autofocus on desktop when there's a single primary input; rarely on mobile (to avoid layout shift)\n\n## Animation\n\n- MUST: Honor `prefers-reduced-motion` (provide reduced variant)\n- SHOULD: Prefer CSS > Web Animations API > JS libraries\n- MUST: Animate compositor-friendly props (`transform`, `opacity`); avoid layout/repaint props (`top/left/width/height`)\n- SHOULD: Animate only to clarify cause/effect or add deliberate delight\n- SHOULD: Choose easing to match the change (size/distance/trigger)\n- MUST: Animations are interruptible and input-driven (avoid autoplay)\n- MUST: Correct `transform-origin` (motion starts where it \"physically\" should)\n\n## Layout\n\n- SHOULD: Optical alignment; adjust by ±1px when perception beats geometry\n- MUST: Deliberate alignment to grid/baseline/edges/optical centers—no accidental placement\n- SHOULD: Balance icon/text lockups (stroke/weight/size/spacing/color)\n- MUST: Verify mobile, laptop, ultra-wide (simulate ultra-wide at 50% zoom)\n- MUST: Respect safe areas (use env(safe-area-inset-\\*))\n- MUST: Avoid unwanted scrollbars; fix overflows\n\n## Content & Accessibility\n\n- SHOULD: Inline help first; tooltips last resort\n- MUST: Skeletons mirror final content to avoid layout shift\n- MUST: `<title>` matches current context\n- MUST: No dead ends; always offer next step/recovery\n- MUST: Design empty/sparse/dense/error states\n- SHOULD: Curly quotes (\" \"); avoid widows/orphans\n- MUST: Tabular numbers for comparisons (`font-variant-numeric: tabular-nums` or a mono like Geist Mono)\n- MUST: Redundant status cues (not color-only); icons have text labels\n- MUST: Don't ship the schema—visuals may omit labels but accessible names still exist\n- MUST: Use the ellipsis character `…` (not ``)\n- MUST: `scroll-margin-top` on headings for anchored links; include a \"Skip to content\" link; hierarchical `<h1–h6>`\n- MUST: Resilient to user-generated content (short/avg/very long)\n- MUST: Locale-aware dates/times/numbers/currency\n- MUST: Accurate names (`aria-label`), decorative elements `aria-hidden`, verify in the Accessibility Tree\n- MUST: Icon-only buttons have descriptive `aria-label`\n- MUST: Prefer native semantics (`button`, `a`, `label`, `table`) before ARIA\n- SHOULD: Right-clicking the nav logo surfaces brand assets\n- MUST: Use non-breaking spaces to glue terms: `10&nbsp;MB`, `⌘&nbsp;+&nbsp;K`, `Vercel&nbsp;SDK`\n\n## Performance\n\n- SHOULD: Test iOS Low Power Mode and macOS Safari\n- MUST: Measure reliably (disable extensions that skew runtime)\n- MUST: Track and minimize re-renders (React DevTools/React Scan)\n- MUST: Profile with CPU/network throttling\n- MUST: Batch layout reads/writes; avoid unnecessary reflows/repaints\n- MUST: Mutations (`POST/PATCH/DELETE`) target <500 ms\n- SHOULD: Prefer uncontrolled inputs; make controlled loops cheap (keystroke cost)\n- MUST: Virtualize large lists (eg, `virtua`)\n- MUST: Preload only above-the-fold images; lazy-load the rest\n- MUST: Prevent CLS from images (explicit dimensions or reserved space)\n\n## Design\n\n- SHOULD: Layered shadows (ambient + direct)\n- SHOULD: Crisp edges via semi-transparent borders + shadows\n- SHOULD: Nested radii: child ≤ parent; concentric\n- SHOULD: Hue consistency: tint borders/shadows/text toward bg hue\n- MUST: Accessible charts (color-blind-friendly palettes)\n- MUST: Meet contrast—prefer [APCA](https://apcacontrast.com/) over WCAG 2\n- MUST: Increase contrast on `:hover/:active/:focus`\n- SHOULD: Match browser UI to bg\n- SHOULD: Avoid gradient banding (use masks when needed)\n\n## Copywriting\n\n- MUST: Use active voice.\n- MUST: Use title case for headings and buttons.\n- MUST: Be clear and concise. Use as few words as possible.\n- MUST: Prefer & over and.\n- MUST: Use action-oriented language.\n- MUST: Keep nouns consistent. Introduce as few unique terms as possible.\n- MUST: Write in second person. Avoid first person.\n- MUST: Use consistent placeholders.\n- MUST: Use numerals for counts.\n- MUST: Use consistent currency formatting.\n- MUST: Separate numbers & units with a space.\n- MUST: Use a non-breaking space e.g., 10&nbsp;MB.\n- MUST: Default to positive language. Frame messages in an encouraging, problem-solving way, even for errors.\n- MUST: Error messages guide the exit. Don't just state what went wrong—tell the user how to fix it.\n- MUST: Avoid ambiguity. Labels are clear & specific.\n- MUST: Instead of the button label \"Continue\", say \"Save API Key\".\n\n<!-- File: packages/website/package.json (Tokens: ~326 | Category: anthropic-skill) -->\n{\n  \"name\": \"@react-scan/website\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"presync\": \"cp ../scan/dist/auto.global.js ./public/auto.global.js\",\n    \"dev\": \"pnpm presync && next dev --turbopack\",\n    \"build\": \"pnpm --filter react-scan build && pnpm presync && next build --webpack\",\n    \"start\": \"next start\",\n    \"lint\": \"vp lint\",\n    \"format\": \"vp fmt\"\n  },\n  \"dependencies\": {\n    \"@vercel/analytics\": \"^2.0.1\",\n    \"@vercel/speed-insights\": \"^2.0.0\",\n    \"highlight.js\": \"^11.11.1\",\n    \"next\": \"^16.2.4\",\n    \"react\": \"^19.2.5\",\n    \"react-dom\": \"^19.2.5\",\n    \"react-scan\": \"workspace:*\",\n    \"zod\": \"^4.4.2\"\n  },\n  \"devDependencies\": {\n    \"@tailwindcss/postcss\": \"^4.2.4\",\n    \"@types/react\": \"^19.2.14\",\n    \"@types/react-dom\": \"^19.2.3\",\n    \"autoprefixer\": \"^10.5.0\",\n    \"postcss\": \"^8.5.13\",\n    \"postcss-load-config\": \"^6.0.1\",\n    \"tailwindcss\": \"^4.2.4\"\n  }\n}\n\n<!-- File: packages/website/tsconfig.json (Tokens: ~223 | Category: anthropic-skill) -->\n{\n  \"compilerOptions\": {\n    \"target\": \"ES2017\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"bundler\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"react-jsx\",\n    \"incremental\": true,\n    \"plugins\": [\n      {\n        \"name\": \"next\"\n      }\n    ],\n    \"paths\": {\n      \"@/*\": [\n        \"./*\"\n      ]\n    },\n    \"baseUrl\": \".\"\n  },\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\",\n    \".next/types/**/*.ts\",\n    \".next/dev/types/**/*.ts\"\n  ],\n  \"exclude\": [\n    \"node_modules\",\n    \"dist\"\n  ]\n}\n\n<!-- File: packages/extension/README.md (Tokens: ~300 | Category: plugin-manifest) -->\n# extension Documentation\n\nPath: `packages/extension/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/extension/README.md)\n\n<!-- File: packages/scan/README.md (Tokens: ~300 | Category: plugin-manifest) -->\n# scan Documentation\n\nPath: `packages/scan/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/aidenybai/react-scan/HEAD/packages/scan/README.md)\n\n<!-- File: packages/vite-plugin-react-scan/README.md (Tokens: ~540 | Category: plugin-manifest) -->\n# @react-scan/vite-plugin-react-scan\n\nA Vite plugin that integrates React Scan into your Vite application, automatically detecting performance issues in your React components.\n\n## Installation\n\n```bash\n# npm\nnpm install -D @react-scan/vite-plugin-react-scan react-scan\n\n# pnpm\npnpm add -D @react-scan/vite-plugin-react-scan react-scan\n\n# yarn\nyarn add -D @react-scan/vite-plugin-react-scan react-scan\n```\n\n> **Note:** Make sure `react-scan` is installed as a peer dependency. The plugin will automatically locate it in your project's dependency tree.\n\n## Usage\n\nAdd the plugin to your `vite.config.ts`:\n\n```ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport reactScan from '@react-scan/vite-plugin-react-scan';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    reactScan({\n      // options (optional)\n    }),\n  ],\n});\n```\n\n## Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `enable` | `boolean` | `process.env.NODE_ENV === 'development'` | Enable/disable scanning |\n| `scanOptions` | `object` | `{ ... }` | Custom React Scan options |\n| `autoDisplayNames` | `boolean` | `false` | Automatically add display names to React components |\n| `debug` | `boolean` | `false` | Enable debug logging |\n\n## Example Configuration\n\n```ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport reactScan from '@react-scan/vite-plugin-react-scan';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    reactScan({\n      enable: true,\n      autoDisplayNames: true,\n      scanOptions: {} // React Scan specific options\n    }),\n  ],\n});\n```\n\n## Development vs Production\n\n- In development: The plugin injects React Scan directly into your application for real-time analysis\n- In production: The plugin can be disabled/enabled by default with specific options\n\n## Contributing\n\nContributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.\n\n## License\n\nReact Scan Vite Plugin is [MIT-licensed](LICENSE) open-source software by Aiden Bai, [Million Software, Inc.](https://million.dev), and [contributors](https://github.com/aidenybai/react-scan/graphs/contributors).\n\n<!-- File: packages/website/README.md (Tokens: ~357 | Category: plugin-manifest) -->\nThis is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.\n\nThis project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.\n\n<!-- File: .cursor/commands/deslop.md (Tokens: ~516 | Category: command-prompt) -->\nYou are an expert code simplification specialist focused on enhancing code clarity, consistency, and maintainability while preserving exact functionality. Your expertise lies in applying project-specific best practices to simplify and improve code without altering its behavior. You prioritize readable, explicit code over overly compact solutions. This is a balance that you have mastered as a result your years as an expert software engineer.\n\nYou will analyze recently modified code and apply refinements that:\n\n1. **Preserve Functionality**: Never change what the code does - only how it does it. All original features, outputs, and behaviors must remain intact.\n\n2. **Apply Project Standards**: Follow the established coding standards from the codebase guidelines including:\n\n- Use ES modules with proper import sorting and extensions\n\n- Use explicit return type annotations for top-level functions\n\n- Follow proper React component patterns with explicit Props types\n\n- Use proper error handling patterns (avoid try/catch when possible)\n\n- Maintain consistent naming conventions\n\n3. **Enhance Clarity**: Simplify code structure by:\n\n- Reducing unnecessary complexity and nesting\n\n- Eliminating redundant code and abstractions\n\n- Improving readability through clear variable and function names\n\n- Consolidating related logic\n\n- Removing unnecessary comments that describe obvious code\n\n- IMPORTANT: Avoid nested ternary operators - prefer switch statements or if/else chains for multiple conditions\n\n- Choose clarity over brevity - explicit code is often better than overly compact code\n\n4. **Maintain Balance**: Avoid over-simplification that could:\n\n- Reduce code clarity or maintainability\n\n- Create overly clever solutions that are hard to understand\n\n- Combine too many concerns into single functions or components\n\n- Remove helpful abstractions that improve code organization\n\n- Prioritize \"fewer lines\" over readability (e.g., nested ternaries, dense one-liners)\n\n- Make the code harder to debug or extend\n\n5. **Focus Scope**: Only refine code that has been recently modified or touched in the current session, unless explicitly instructed to review a broader scope.\n\nYour refinement process:\n\n1. Identify the recently modified code sections\n\n2. Analyze for opportunities to improve elegance and consistency\n\n3. Apply project-specific best practices and coding standards\n\n4. Ensure all functionality remains unchanged\n\n5. Verify the refined code is simpler and more maintainable\n\n6. Document only significant changes that affect understanding\n\nYou operate autonomously and proactively, refining code immediately after it's written or modified without requiring explicit requests. Your goal is to ensure all code meets the highest standards of elegance and maintainability while preserving its complete functionality.\n</yakaai_skills>"}