[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-chakra-ui-chakra-ui-refactor":3,"mdc--6fgns-key":49,"related-org-chakra-ui-chakra-ui-refactor":2760,"related-repo-chakra-ui-chakra-ui-refactor":2798},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":25,"repoUrl":26,"updatedAt":27,"license":28,"forks":29,"topics":30,"repo":44,"sourceUrl":47,"mdContent":48},"chakra-ui-refactor","refactor and improve Chakra UI components","Review, convert, and improve UI code using Chakra UI v3. Use this skill whenever a user wants to review Chakra UI code for issues, convert plain HTML\u002FCSS, Tailwind, CSS Modules, or styled-components to Chakra UI, clean up messy Chakra components, fix layout structure or token usage, or asks anything like \"is this correct\", \"what's wrong with this\", \"review my component\", \"refactor this\", \"clean up\", \"convert\", or \"chakra-ify this\" — even without the words \"review\" or \"refactor\". Trigger on any request to check, improve, or convert Chakra UI code, however casually phrased.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"chakra-ui","Chakra UI","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fchakra-ui.png",[12,16,19,22],{"name":13,"slug":14,"type":15},"React","react","tag",{"name":17,"slug":18,"type":15},"UI Components","ui-components",{"name":20,"slug":21,"type":15},"Frontend","frontend",{"name":23,"slug":24,"type":15},"Design","design",40503,"https:\u002F\u002Fgithub.com\u002Fchakra-ui\u002Fchakra-ui","2026-07-12T08:48:28.392675",null,3621,[31,32,33,8,34,35,36,37,14,38,39,40,18,41,42,43],"a11y","accessible","ark-ui","component","css-in-js","dark-mode","design-system","react-components","reactjs","styled","ui-library","uikit","wai-aria",{"repoUrl":26,"stars":25,"forks":29,"topics":45,"description":46},[31,32,33,8,34,35,36,37,14,38,39,40,18,41,42,43],"Chakra UI is a component system for building SaaS products with speed ⚡️","https:\u002F\u002Fgithub.com\u002Fchakra-ui\u002Fchakra-ui\u002Ftree\u002FHEAD\u002Fskills\u002Fchakra-ui-refactor","---\nname: chakra-ui-refactor\ndescription: >\n  Review, convert, and improve UI code using Chakra UI v3. Use this skill\n  whenever a user wants to review Chakra UI code for issues, convert plain\n  HTML\u002FCSS, Tailwind, CSS Modules, or styled-components to Chakra UI, clean up\n  messy Chakra components, fix layout structure or token usage, or asks anything\n  like \"is this correct\", \"what's wrong with this\", \"review my component\",\n  \"refactor this\", \"clean up\", \"convert\", or \"chakra-ify this\" — even without\n  the words \"review\" or \"refactor\". Trigger on any request to check, improve, or\n  convert Chakra UI code, however casually phrased.\n---\n\n# Chakra UI Refactor & Review\n\nYou are reviewing and improving UI code using Chakra UI v3. Depending on what\nthe developer needs, you produce a structured critique, rewritten code, or both.\nRead the code and project context fully before producing any output.\n\n---\n\n## Step 1 — Orient and determine intent\n\nBefore any output, establish:\n\n- **Chakra UI version** — check `package.json`; use v3 by default\n- **Framework** — Next.js App Router, Pages Router, Vite, plain React\n- **Source type** — existing Chakra, plain HTML\u002FCSS, Tailwind, CSS Modules,\n  styled-components\n- **What the user is asking:**\n  - **Review only** — \"check this\", \"is this correct\u002Fidiomatic\", \"what's wrong\",\n    \"review my code\" → produce a critique with targeted fixes, no full rewrite\n  - **Refactor \u002F convert** — \"refactor this\", \"convert from Tailwind\", \"clean\n    this up\" → produce rewritten code\n  - **Both** — \"review and fix\" → critique first, then the rewritten code\n\nState your reading at the top of the response (e.g. \"Reviewing as existing\nChakra v3 code. Assuming Next.js App Router.\").\n\nIf code isn't shared yet, ask for it. Don't review a description of code.\n\n---\n\n## Step 2 — Analyze the code\n\nWork through the code across these dimensions regardless of output mode. For\nreview, they become findings. For refactor, they become the checklist of what to\nfix.\n\n**Accessibility**\n\n- Do all interactive elements have accessible labels? (`aria-label` on icon\n  buttons, `htmlFor`\u002F`id` on label+input pairs, `alt` on images)\n- Is keyboard navigation possible? (focus rings not suppressed, interactive\n  elements are actually focusable)\n- Does the heading hierarchy make sense? (no skipped levels, no `h1` used as a\n  style shortcut)\n- Are form fields wrapped in `Field.Root` with `Field.Label` and\n  `Field.ErrorText`?\n- Does the component work without color as the only signal?\n\n**Responsiveness**\n\n- Do layout components specify behavior at multiple breakpoints?\n- Are there hardcoded pixel values where responsive tokens would work better?\n- Would this break on mobile? (fixed widths, `overflow: hidden` on small\n  viewports)\n\n**Chakra API correctness**\n\n- Are v3 prop names used? (`disabled` not `isDisabled`, `colorPalette` not\n  `colorScheme`, `gap` not `spacing`, `open` not `isOpen`)\n- Are compound components used correctly? (`Field.Root`\u002F`Field.Label`,\n  `Dialog.Root`\u002F`Dialog.Content`, etc.)\n- Is `\"use client\"` placed correctly in Next.js App Router?\n- Are there v2 patterns still present? (`extendTheme`, `ColorModeScript`,\n  `useColorModeValue`, `sx` prop)\n\n**Token and style usage**\n\n- Are hardcoded colors used where semantic tokens would work? (`bg=\"#f9fafb\"` →\n  `bg=\"bg.subtle\"`)\n- Are raw hex or palette values used instead of semantic tokens? These won't\n  respect dark mode.\n- Are there inline `style={{}}` props that should be Chakra style props?\n\n**Component structure**\n\n- Is there unnecessary nesting? (`Box > Box > Box` when one would do)\n- Is manual spacing (`mt={4}` on every child) used where `Stack gap={4}` would\n  be cleaner?\n- Are the right layout primitives used? (`Flex` vs `Stack` vs `Grid` vs\n  `SimpleGrid`)\n\n**Maintainability**\n\n- Does the same visual pattern repeat 3+ times? (candidate for a component or\n  recipe)\n- Are there one-off style overrides that suggest a recipe or slot recipe?\n- Are prop types \u002F TypeScript types present and accurate?\n\n---\n\n## Step 3a — Review output\n\nUse this when the user wants a critique, not a rewrite.\n\nCategorize findings by impact:\n\n**Critical** — bugs and accessibility failures that break behavior or exclude\nusers\n\n- Missing `aria-label` on an icon-only button\n- Form field with no label association\n- Interactive `Box` with `onClick` but no keyboard access\n- Wrong v3 prop name that silently does nothing (`isDisabled` doesn't disable in\n  v3)\n- `\"use client\"` missing on a component that uses hooks in App Router\n\n**Improvements** — correctness and quality issues that aren't urgent\n\n- Hardcoded colors that break dark mode\n- Missing responsive breakpoints\n- Unnecessary nesting or wrong layout primitive\n- v2 patterns that still work but should be updated\n\n**Optional suggestions** — non-blocking ideas\n\n- Extract a repeated pattern into a component\n- Replace a one-off style with a recipe variant\n- Add a missing TypeScript type\n\nFor each critical issue and significant improvement, show a minimal fix:\n\n```\n**Missing aria-label on close button** (Critical)\nThe IconButton for closing the dialog has no accessible label.\n\n\u002F\u002F Before\n\u003CIconButton icon={\u003CCloseIcon \u002F>} onClick={onClose} \u002F>\n\u002F\u002F After\n\u003CIconButton aria-label=\"Close dialog\" icon={\u003CCloseIcon \u002F>} onClick={onClose} \u002F>\n```\n\nSkip sections with nothing to report. Calibrate length to the code — a 20-line\ncomponent needs a tight review, not an exhaustive one.\n\n---\n\n## Step 3b — Refactor \u002F convert output\n\nUse this when the user wants rewritten code.\n\n### Conversion strategy by source\n\n**From plain HTML \u002F CSS**\n\n| HTML                     | Chakra equivalent                           |\n| ------------------------ | ------------------------------------------- |\n| `\u003Cdiv>` layout wrapper   | `Box`, `Flex`, `Stack`, `Grid`              |\n| `\u003Csection>`, `\u003Carticle>` | `Box as=\"section\"`, `Box as=\"article\"`      |\n| `\u003Cnav>`                  | `Box as=\"nav\"`                              |\n| `\u003Cul>` \u002F `\u003Cli>`          | `Box as=\"ul\"` \u002F `Box as=\"li\"`, or `Stack`   |\n| `\u003Cbutton>`               | `Button` or `IconButton`                    |\n| `\u003Ca>`                    | `Link`                                      |\n| `\u003Cimg>`                  | `Image` (preserve `alt`)                    |\n| `\u003Cinput>`, `\u003Cselect>`    | `Input`, `NativeSelect` inside `Field.Root` |\n\n| CSS                      | Chakra style prop             |\n| ------------------------ | ----------------------------- |\n| `display: flex`          | `Flex` or `display=\"flex\"`    |\n| `flex-direction: column` | `Stack` or `flexDir=\"column\"` |\n| `gap: 16px`              | `gap={4}` (1 unit = 4px)      |\n| `padding: 16px 24px`     | `py={4} px={6}`               |\n| `border-radius: 8px`     | `rounded=\"md\"`                |\n| `color: #6b7280`         | `color=\"fg.muted\"`            |\n| `background: #f9fafb`    | `bg=\"bg.subtle\"`              |\n\n**From Tailwind CSS**\n\n| Tailwind                       | Chakra                                   |\n| ------------------------------ | ---------------------------------------- |\n| `flex`, `flex-col`, `flex-row` | `Flex`, `flexDir`                        |\n| `gap-4`                        | `gap={4}`                                |\n| `p-4`, `px-6`, `py-2`          | `p={4}`, `px={6}`, `py={2}`              |\n| `text-sm`, `font-bold`         | `fontSize=\"sm\"`, `fontWeight=\"bold\"`     |\n| `rounded-lg`, `shadow-md`      | `rounded=\"lg\"`, `shadow=\"md\"`            |\n| `w-full`, `max-w-lg`           | `w=\"full\"`, `maxW=\"lg\"`                  |\n| `hidden md:flex`               | `display={{ base: \"none\", md: \"flex\" }}` |\n| `grid grid-cols-3`             | `SimpleGrid columns={3}`                 |\n| `text-gray-500`, `bg-gray-100` | `color=\"fg.muted\"`, `bg=\"bg.subtle\"`     |\n| `hover:bg-gray-100`            | `_hover={{ bg: \"bg.subtle\" }}`           |\n\nReplace Tailwind responsive prefixes with Chakra's breakpoint object syntax:\n\n```tsx\n\u002F\u002F Tailwind: text-sm md:base lg:text-lg\n\u003CText fontSize={{ base: \"sm\", md: \"md\", lg: \"lg\" }} \u002F>\n```\n\n**From CSS Modules** — convert what you can to Chakra props; keep `className`\nfor styles that can't be expressed as props (animations, complex selectors):\n\n```tsx\n\u002F\u002F Before\n\u003Cdiv className={styles.card}>...\u003C\u002Fdiv>\n\u002F\u002F After — converted to props; className kept only for unconvertible styles\n\u003CBox p={4} rounded=\"lg\" shadow=\"sm\" className={styles.fadeIn}>...\u003C\u002FBox>\n```\n\nOnce all class names are eliminated, remove the import entirely.\n\n**From styled-components \u002F @emotion\u002Fstyled** — map to `Box` with equivalent\nstyle props, then remove the import and uninstall if no longer used elsewhere:\n\n```tsx\n\u002F\u002F Before\nconst Card = styled.div`padding: 1rem; &:hover { background: #f3f4f6; }`\n\u002F\u002F After\n\u003CBox p={4} _hover={{ bg: \"bg.muted\" }} \u002F>\n```\n\n**From existing Chakra UI (cleanup)**\n\n- Flatten `Box > Box > Box` nesting; replace `mt`\u002F`mb` on every child with\n  `Stack gap={N}`\n- Replace `sx` with `css` (v3 rename); update nested `&:hover` selectors inside\n  it\n- Replace `bg=\"gray.50\"` → `bg=\"bg.subtle\"` and other semantic token equivalents\n- Update v2 prop names: `isDisabled→disabled`, `colorScheme→colorPalette`,\n  `spacing→gap`\n- Update compound components: `FormControl→Field.Root`, `Modal→Dialog`,\n  `Select→NativeSelect`\n\n### Preserve behavior — non-negotiable\n\n- Keep all event handlers, state variables, and conditional rendering exactly\n  as-is\n- Keep `aria-*` attributes; add missing ones where clearly needed\n- Keep semantic HTML intent (`\u003Cnav>` → `Box as=\"nav\"`, not just `Box`)\n- Keep `\"use client\"` where it exists; add it only when the component genuinely\n  needs it\n- Don't add `\"use client\"` just because a component uses Chakra UI\n- A partially-converted component that works is better than a fully-converted\n  one that doesn't\n\n### `asChild` for Next.js Link and Image\n\n```tsx\nimport NextLink from \"next\u002Flink\"\n\u003CChakraLink asChild>\u003CNextLink href=\"\u002Fabout\">About\u003C\u002FNextLink>\u003C\u002FChakraLink>\n\nimport NextImage from \"next\u002Fimage\"\n\u003CChakraImage asChild>\u003CNextImage src=\"\u002Fhero.png\" alt=\"Hero\" width={800} height={400} \u002F>\u003C\u002FChakraImage>\n```\n\n### Refactor output format\n\n**1. Refactored code** — complete, runnable, with correct imports\n\n**2. What changed** — concise list focused on non-obvious decisions:\n\n```\n- Replaced \u003Cdiv className=\"flex gap-4\"> with \u003CFlex gap={4}>\n- Replaced bg=\"#f9fafb\" with bg=\"bg.subtle\" for dark mode compatibility\n- Kept form submit handler and validation logic unchanged\n- Added aria-label to close icon button (was missing)\n```\n\n**3. Suggestions** (optional) — meaningful improvements beyond this refactor:\nextracting a reusable component, adopting a recipe, migrating a v2 pattern.\n\n---\n\n## When to ask vs proceed\n\nProceed if the code and intent are clear. Ask when:\n\n- The code isn't shared yet\n- The component is very large and scope is unclear\n- There's context or state you can't see that would change the review\n- There's ambiguous behavior that could be interpreted multiple ways\n\nState assumptions at the top of the response when you proceed without asking.\n",{"data":50,"body":51},{"name":4,"description":6},{"type":52,"children":53},"root",[54,63,69,73,80,85,171,176,181,184,190,195,203,294,302,328,336,484,492,533,541,613,621,639,642,648,653,658,668,730,740,763,773,791,796,808,813,816,822,827,834,842,1130,1312,1320,1653,1658,1791,1809,2011,2016,2033,2163,2171,2303,2309,2382,2394,2667,2673,2683,2693,2702,2712,2715,2721,2726,2749,2754],{"type":55,"tag":56,"props":57,"children":59},"element","h1",{"id":58},"chakra-ui-refactor-review",[60],{"type":61,"value":62},"text","Chakra UI Refactor & Review",{"type":55,"tag":64,"props":65,"children":66},"p",{},[67],{"type":61,"value":68},"You are reviewing and improving UI code using Chakra UI v3. Depending on what\nthe developer needs, you produce a structured critique, rewritten code, or both.\nRead the code and project context fully before producing any output.",{"type":55,"tag":70,"props":71,"children":72},"hr",{},[],{"type":55,"tag":74,"props":75,"children":77},"h2",{"id":76},"step-1-orient-and-determine-intent",[78],{"type":61,"value":79},"Step 1 — Orient and determine intent",{"type":55,"tag":64,"props":81,"children":82},{},[83],{"type":61,"value":84},"Before any output, establish:",{"type":55,"tag":86,"props":87,"children":88},"ul",{},[89,110,120,130],{"type":55,"tag":90,"props":91,"children":92},"li",{},[93,99,101,108],{"type":55,"tag":94,"props":95,"children":96},"strong",{},[97],{"type":61,"value":98},"Chakra UI version",{"type":61,"value":100}," — check ",{"type":55,"tag":102,"props":103,"children":105},"code",{"className":104},[],[106],{"type":61,"value":107},"package.json",{"type":61,"value":109},"; use v3 by default",{"type":55,"tag":90,"props":111,"children":112},{},[113,118],{"type":55,"tag":94,"props":114,"children":115},{},[116],{"type":61,"value":117},"Framework",{"type":61,"value":119}," — Next.js App Router, Pages Router, Vite, plain React",{"type":55,"tag":90,"props":121,"children":122},{},[123,128],{"type":55,"tag":94,"props":124,"children":125},{},[126],{"type":61,"value":127},"Source type",{"type":61,"value":129}," — existing Chakra, plain HTML\u002FCSS, Tailwind, CSS Modules,\nstyled-components",{"type":55,"tag":90,"props":131,"children":132},{},[133,138],{"type":55,"tag":94,"props":134,"children":135},{},[136],{"type":61,"value":137},"What the user is asking:",{"type":55,"tag":86,"props":139,"children":140},{},[141,151,161],{"type":55,"tag":90,"props":142,"children":143},{},[144,149],{"type":55,"tag":94,"props":145,"children":146},{},[147],{"type":61,"value":148},"Review only",{"type":61,"value":150}," — \"check this\", \"is this correct\u002Fidiomatic\", \"what's wrong\",\n\"review my code\" → produce a critique with targeted fixes, no full rewrite",{"type":55,"tag":90,"props":152,"children":153},{},[154,159],{"type":55,"tag":94,"props":155,"children":156},{},[157],{"type":61,"value":158},"Refactor \u002F convert",{"type":61,"value":160}," — \"refactor this\", \"convert from Tailwind\", \"clean\nthis up\" → produce rewritten code",{"type":55,"tag":90,"props":162,"children":163},{},[164,169],{"type":55,"tag":94,"props":165,"children":166},{},[167],{"type":61,"value":168},"Both",{"type":61,"value":170}," — \"review and fix\" → critique first, then the rewritten code",{"type":55,"tag":64,"props":172,"children":173},{},[174],{"type":61,"value":175},"State your reading at the top of the response (e.g. \"Reviewing as existing\nChakra v3 code. Assuming Next.js App Router.\").",{"type":55,"tag":64,"props":177,"children":178},{},[179],{"type":61,"value":180},"If code isn't shared yet, ask for it. Don't review a description of code.",{"type":55,"tag":70,"props":182,"children":183},{},[],{"type":55,"tag":74,"props":185,"children":187},{"id":186},"step-2-analyze-the-code",[188],{"type":61,"value":189},"Step 2 — Analyze the code",{"type":55,"tag":64,"props":191,"children":192},{},[193],{"type":61,"value":194},"Work through the code across these dimensions regardless of output mode. For\nreview, they become findings. For refactor, they become the checklist of what to\nfix.",{"type":55,"tag":64,"props":196,"children":197},{},[198],{"type":55,"tag":94,"props":199,"children":200},{},[201],{"type":61,"value":202},"Accessibility",{"type":55,"tag":86,"props":204,"children":205},{},[206,243,248,260,289],{"type":55,"tag":90,"props":207,"children":208},{},[209,211,217,219,225,227,233,235,241],{"type":61,"value":210},"Do all interactive elements have accessible labels? (",{"type":55,"tag":102,"props":212,"children":214},{"className":213},[],[215],{"type":61,"value":216},"aria-label",{"type":61,"value":218}," on icon\nbuttons, ",{"type":55,"tag":102,"props":220,"children":222},{"className":221},[],[223],{"type":61,"value":224},"htmlFor",{"type":61,"value":226},"\u002F",{"type":55,"tag":102,"props":228,"children":230},{"className":229},[],[231],{"type":61,"value":232},"id",{"type":61,"value":234}," on label+input pairs, ",{"type":55,"tag":102,"props":236,"children":238},{"className":237},[],[239],{"type":61,"value":240},"alt",{"type":61,"value":242}," on images)",{"type":55,"tag":90,"props":244,"children":245},{},[246],{"type":61,"value":247},"Is keyboard navigation possible? (focus rings not suppressed, interactive\nelements are actually focusable)",{"type":55,"tag":90,"props":249,"children":250},{},[251,253,258],{"type":61,"value":252},"Does the heading hierarchy make sense? (no skipped levels, no ",{"type":55,"tag":102,"props":254,"children":256},{"className":255},[],[257],{"type":61,"value":56},{"type":61,"value":259}," used as a\nstyle shortcut)",{"type":55,"tag":90,"props":261,"children":262},{},[263,265,271,273,279,281,287],{"type":61,"value":264},"Are form fields wrapped in ",{"type":55,"tag":102,"props":266,"children":268},{"className":267},[],[269],{"type":61,"value":270},"Field.Root",{"type":61,"value":272}," with ",{"type":55,"tag":102,"props":274,"children":276},{"className":275},[],[277],{"type":61,"value":278},"Field.Label",{"type":61,"value":280}," and\n",{"type":55,"tag":102,"props":282,"children":284},{"className":283},[],[285],{"type":61,"value":286},"Field.ErrorText",{"type":61,"value":288},"?",{"type":55,"tag":90,"props":290,"children":291},{},[292],{"type":61,"value":293},"Does the component work without color as the only signal?",{"type":55,"tag":64,"props":295,"children":296},{},[297],{"type":55,"tag":94,"props":298,"children":299},{},[300],{"type":61,"value":301},"Responsiveness",{"type":55,"tag":86,"props":303,"children":304},{},[305,310,315],{"type":55,"tag":90,"props":306,"children":307},{},[308],{"type":61,"value":309},"Do layout components specify behavior at multiple breakpoints?",{"type":55,"tag":90,"props":311,"children":312},{},[313],{"type":61,"value":314},"Are there hardcoded pixel values where responsive tokens would work better?",{"type":55,"tag":90,"props":316,"children":317},{},[318,320,326],{"type":61,"value":319},"Would this break on mobile? (fixed widths, ",{"type":55,"tag":102,"props":321,"children":323},{"className":322},[],[324],{"type":61,"value":325},"overflow: hidden",{"type":61,"value":327}," on small\nviewports)",{"type":55,"tag":64,"props":329,"children":330},{},[331],{"type":55,"tag":94,"props":332,"children":333},{},[334],{"type":61,"value":335},"Chakra API correctness",{"type":55,"tag":86,"props":337,"children":338},{},[339,404,437,450],{"type":55,"tag":90,"props":340,"children":341},{},[342,344,350,352,358,360,366,368,374,375,381,382,388,389,395,396,402],{"type":61,"value":343},"Are v3 prop names used? (",{"type":55,"tag":102,"props":345,"children":347},{"className":346},[],[348],{"type":61,"value":349},"disabled",{"type":61,"value":351}," not ",{"type":55,"tag":102,"props":353,"children":355},{"className":354},[],[356],{"type":61,"value":357},"isDisabled",{"type":61,"value":359},", ",{"type":55,"tag":102,"props":361,"children":363},{"className":362},[],[364],{"type":61,"value":365},"colorPalette",{"type":61,"value":367}," not\n",{"type":55,"tag":102,"props":369,"children":371},{"className":370},[],[372],{"type":61,"value":373},"colorScheme",{"type":61,"value":359},{"type":55,"tag":102,"props":376,"children":378},{"className":377},[],[379],{"type":61,"value":380},"gap",{"type":61,"value":351},{"type":55,"tag":102,"props":383,"children":385},{"className":384},[],[386],{"type":61,"value":387},"spacing",{"type":61,"value":359},{"type":55,"tag":102,"props":390,"children":392},{"className":391},[],[393],{"type":61,"value":394},"open",{"type":61,"value":351},{"type":55,"tag":102,"props":397,"children":399},{"className":398},[],[400],{"type":61,"value":401},"isOpen",{"type":61,"value":403},")",{"type":55,"tag":90,"props":405,"children":406},{},[407,409,414,415,420,422,428,429,435],{"type":61,"value":408},"Are compound components used correctly? (",{"type":55,"tag":102,"props":410,"children":412},{"className":411},[],[413],{"type":61,"value":270},{"type":61,"value":226},{"type":55,"tag":102,"props":416,"children":418},{"className":417},[],[419],{"type":61,"value":278},{"type":61,"value":421},",\n",{"type":55,"tag":102,"props":423,"children":425},{"className":424},[],[426],{"type":61,"value":427},"Dialog.Root",{"type":61,"value":226},{"type":55,"tag":102,"props":430,"children":432},{"className":431},[],[433],{"type":61,"value":434},"Dialog.Content",{"type":61,"value":436},", etc.)",{"type":55,"tag":90,"props":438,"children":439},{},[440,442,448],{"type":61,"value":441},"Is ",{"type":55,"tag":102,"props":443,"children":445},{"className":444},[],[446],{"type":61,"value":447},"\"use client\"",{"type":61,"value":449}," placed correctly in Next.js App Router?",{"type":55,"tag":90,"props":451,"children":452},{},[453,455,461,462,468,469,475,476,482],{"type":61,"value":454},"Are there v2 patterns still present? (",{"type":55,"tag":102,"props":456,"children":458},{"className":457},[],[459],{"type":61,"value":460},"extendTheme",{"type":61,"value":359},{"type":55,"tag":102,"props":463,"children":465},{"className":464},[],[466],{"type":61,"value":467},"ColorModeScript",{"type":61,"value":421},{"type":55,"tag":102,"props":470,"children":472},{"className":471},[],[473],{"type":61,"value":474},"useColorModeValue",{"type":61,"value":359},{"type":55,"tag":102,"props":477,"children":479},{"className":478},[],[480],{"type":61,"value":481},"sx",{"type":61,"value":483}," prop)",{"type":55,"tag":64,"props":485,"children":486},{},[487],{"type":55,"tag":94,"props":488,"children":489},{},[490],{"type":61,"value":491},"Token and style usage",{"type":55,"tag":86,"props":493,"children":494},{},[495,515,520],{"type":55,"tag":90,"props":496,"children":497},{},[498,500,506,508,514],{"type":61,"value":499},"Are hardcoded colors used where semantic tokens would work? (",{"type":55,"tag":102,"props":501,"children":503},{"className":502},[],[504],{"type":61,"value":505},"bg=\"#f9fafb\"",{"type":61,"value":507}," →\n",{"type":55,"tag":102,"props":509,"children":511},{"className":510},[],[512],{"type":61,"value":513},"bg=\"bg.subtle\"",{"type":61,"value":403},{"type":55,"tag":90,"props":516,"children":517},{},[518],{"type":61,"value":519},"Are raw hex or palette values used instead of semantic tokens? These won't\nrespect dark mode.",{"type":55,"tag":90,"props":521,"children":522},{},[523,525,531],{"type":61,"value":524},"Are there inline ",{"type":55,"tag":102,"props":526,"children":528},{"className":527},[],[529],{"type":61,"value":530},"style={{}}",{"type":61,"value":532}," props that should be Chakra style props?",{"type":55,"tag":64,"props":534,"children":535},{},[536],{"type":55,"tag":94,"props":537,"children":538},{},[539],{"type":61,"value":540},"Component structure",{"type":55,"tag":86,"props":542,"children":543},{},[544,557,578],{"type":55,"tag":90,"props":545,"children":546},{},[547,549,555],{"type":61,"value":548},"Is there unnecessary nesting? (",{"type":55,"tag":102,"props":550,"children":552},{"className":551},[],[553],{"type":61,"value":554},"Box > Box > Box",{"type":61,"value":556}," when one would do)",{"type":55,"tag":90,"props":558,"children":559},{},[560,562,568,570,576],{"type":61,"value":561},"Is manual spacing (",{"type":55,"tag":102,"props":563,"children":565},{"className":564},[],[566],{"type":61,"value":567},"mt={4}",{"type":61,"value":569}," on every child) used where ",{"type":55,"tag":102,"props":571,"children":573},{"className":572},[],[574],{"type":61,"value":575},"Stack gap={4}",{"type":61,"value":577}," would\nbe cleaner?",{"type":55,"tag":90,"props":579,"children":580},{},[581,583,589,591,597,598,604,606,612],{"type":61,"value":582},"Are the right layout primitives used? (",{"type":55,"tag":102,"props":584,"children":586},{"className":585},[],[587],{"type":61,"value":588},"Flex",{"type":61,"value":590}," vs ",{"type":55,"tag":102,"props":592,"children":594},{"className":593},[],[595],{"type":61,"value":596},"Stack",{"type":61,"value":590},{"type":55,"tag":102,"props":599,"children":601},{"className":600},[],[602],{"type":61,"value":603},"Grid",{"type":61,"value":605}," vs\n",{"type":55,"tag":102,"props":607,"children":609},{"className":608},[],[610],{"type":61,"value":611},"SimpleGrid",{"type":61,"value":403},{"type":55,"tag":64,"props":614,"children":615},{},[616],{"type":55,"tag":94,"props":617,"children":618},{},[619],{"type":61,"value":620},"Maintainability",{"type":55,"tag":86,"props":622,"children":623},{},[624,629,634],{"type":55,"tag":90,"props":625,"children":626},{},[627],{"type":61,"value":628},"Does the same visual pattern repeat 3+ times? (candidate for a component or\nrecipe)",{"type":55,"tag":90,"props":630,"children":631},{},[632],{"type":61,"value":633},"Are there one-off style overrides that suggest a recipe or slot recipe?",{"type":55,"tag":90,"props":635,"children":636},{},[637],{"type":61,"value":638},"Are prop types \u002F TypeScript types present and accurate?",{"type":55,"tag":70,"props":640,"children":641},{},[],{"type":55,"tag":74,"props":643,"children":645},{"id":644},"step-3a-review-output",[646],{"type":61,"value":647},"Step 3a — Review output",{"type":55,"tag":64,"props":649,"children":650},{},[651],{"type":61,"value":652},"Use this when the user wants a critique, not a rewrite.",{"type":55,"tag":64,"props":654,"children":655},{},[656],{"type":61,"value":657},"Categorize findings by impact:",{"type":55,"tag":64,"props":659,"children":660},{},[661,666],{"type":55,"tag":94,"props":662,"children":663},{},[664],{"type":61,"value":665},"Critical",{"type":61,"value":667}," — bugs and accessibility failures that break behavior or exclude\nusers",{"type":55,"tag":86,"props":669,"children":670},{},[671,683,688,708,720],{"type":55,"tag":90,"props":672,"children":673},{},[674,676,681],{"type":61,"value":675},"Missing ",{"type":55,"tag":102,"props":677,"children":679},{"className":678},[],[680],{"type":61,"value":216},{"type":61,"value":682}," on an icon-only button",{"type":55,"tag":90,"props":684,"children":685},{},[686],{"type":61,"value":687},"Form field with no label association",{"type":55,"tag":90,"props":689,"children":690},{},[691,693,699,700,706],{"type":61,"value":692},"Interactive ",{"type":55,"tag":102,"props":694,"children":696},{"className":695},[],[697],{"type":61,"value":698},"Box",{"type":61,"value":272},{"type":55,"tag":102,"props":701,"children":703},{"className":702},[],[704],{"type":61,"value":705},"onClick",{"type":61,"value":707}," but no keyboard access",{"type":55,"tag":90,"props":709,"children":710},{},[711,713,718],{"type":61,"value":712},"Wrong v3 prop name that silently does nothing (",{"type":55,"tag":102,"props":714,"children":716},{"className":715},[],[717],{"type":61,"value":357},{"type":61,"value":719}," doesn't disable in\nv3)",{"type":55,"tag":90,"props":721,"children":722},{},[723,728],{"type":55,"tag":102,"props":724,"children":726},{"className":725},[],[727],{"type":61,"value":447},{"type":61,"value":729}," missing on a component that uses hooks in App Router",{"type":55,"tag":64,"props":731,"children":732},{},[733,738],{"type":55,"tag":94,"props":734,"children":735},{},[736],{"type":61,"value":737},"Improvements",{"type":61,"value":739}," — correctness and quality issues that aren't urgent",{"type":55,"tag":86,"props":741,"children":742},{},[743,748,753,758],{"type":55,"tag":90,"props":744,"children":745},{},[746],{"type":61,"value":747},"Hardcoded colors that break dark mode",{"type":55,"tag":90,"props":749,"children":750},{},[751],{"type":61,"value":752},"Missing responsive breakpoints",{"type":55,"tag":90,"props":754,"children":755},{},[756],{"type":61,"value":757},"Unnecessary nesting or wrong layout primitive",{"type":55,"tag":90,"props":759,"children":760},{},[761],{"type":61,"value":762},"v2 patterns that still work but should be updated",{"type":55,"tag":64,"props":764,"children":765},{},[766,771],{"type":55,"tag":94,"props":767,"children":768},{},[769],{"type":61,"value":770},"Optional suggestions",{"type":61,"value":772}," — non-blocking ideas",{"type":55,"tag":86,"props":774,"children":775},{},[776,781,786],{"type":55,"tag":90,"props":777,"children":778},{},[779],{"type":61,"value":780},"Extract a repeated pattern into a component",{"type":55,"tag":90,"props":782,"children":783},{},[784],{"type":61,"value":785},"Replace a one-off style with a recipe variant",{"type":55,"tag":90,"props":787,"children":788},{},[789],{"type":61,"value":790},"Add a missing TypeScript type",{"type":55,"tag":64,"props":792,"children":793},{},[794],{"type":61,"value":795},"For each critical issue and significant improvement, show a minimal fix:",{"type":55,"tag":797,"props":798,"children":802},"pre",{"className":799,"code":801,"language":61},[800],"language-text","**Missing aria-label on close button** (Critical)\nThe IconButton for closing the dialog has no accessible label.\n\n\u002F\u002F Before\n\u003CIconButton icon={\u003CCloseIcon \u002F>} onClick={onClose} \u002F>\n\u002F\u002F After\n\u003CIconButton aria-label=\"Close dialog\" icon={\u003CCloseIcon \u002F>} onClick={onClose} \u002F>\n",[803],{"type":55,"tag":102,"props":804,"children":806},{"__ignoreMap":805},"",[807],{"type":61,"value":801},{"type":55,"tag":64,"props":809,"children":810},{},[811],{"type":61,"value":812},"Skip sections with nothing to report. Calibrate length to the code — a 20-line\ncomponent needs a tight review, not an exhaustive one.",{"type":55,"tag":70,"props":814,"children":815},{},[],{"type":55,"tag":74,"props":817,"children":819},{"id":818},"step-3b-refactor-convert-output",[820],{"type":61,"value":821},"Step 3b — Refactor \u002F convert output",{"type":55,"tag":64,"props":823,"children":824},{},[825],{"type":61,"value":826},"Use this when the user wants rewritten code.",{"type":55,"tag":828,"props":829,"children":831},"h3",{"id":830},"conversion-strategy-by-source",[832],{"type":61,"value":833},"Conversion strategy by source",{"type":55,"tag":64,"props":835,"children":836},{},[837],{"type":55,"tag":94,"props":838,"children":839},{},[840],{"type":61,"value":841},"From plain HTML \u002F CSS",{"type":55,"tag":843,"props":844,"children":845},"table",{},[846,865],{"type":55,"tag":847,"props":848,"children":849},"thead",{},[850],{"type":55,"tag":851,"props":852,"children":853},"tr",{},[854,860],{"type":55,"tag":855,"props":856,"children":857},"th",{},[858],{"type":61,"value":859},"HTML",{"type":55,"tag":855,"props":861,"children":862},{},[863],{"type":61,"value":864},"Chakra equivalent",{"type":55,"tag":866,"props":867,"children":868},"tbody",{},[869,910,945,966,1009,1038,1059,1088],{"type":55,"tag":851,"props":870,"children":871},{},[872,884],{"type":55,"tag":873,"props":874,"children":875},"td",{},[876,882],{"type":55,"tag":102,"props":877,"children":879},{"className":878},[],[880],{"type":61,"value":881},"\u003Cdiv>",{"type":61,"value":883}," layout wrapper",{"type":55,"tag":873,"props":885,"children":886},{},[887,892,893,898,899,904,905],{"type":55,"tag":102,"props":888,"children":890},{"className":889},[],[891],{"type":61,"value":698},{"type":61,"value":359},{"type":55,"tag":102,"props":894,"children":896},{"className":895},[],[897],{"type":61,"value":588},{"type":61,"value":359},{"type":55,"tag":102,"props":900,"children":902},{"className":901},[],[903],{"type":61,"value":596},{"type":61,"value":359},{"type":55,"tag":102,"props":906,"children":908},{"className":907},[],[909],{"type":61,"value":603},{"type":55,"tag":851,"props":911,"children":912},{},[913,929],{"type":55,"tag":873,"props":914,"children":915},{},[916,922,923],{"type":55,"tag":102,"props":917,"children":919},{"className":918},[],[920],{"type":61,"value":921},"\u003Csection>",{"type":61,"value":359},{"type":55,"tag":102,"props":924,"children":926},{"className":925},[],[927],{"type":61,"value":928},"\u003Carticle>",{"type":55,"tag":873,"props":930,"children":931},{},[932,938,939],{"type":55,"tag":102,"props":933,"children":935},{"className":934},[],[936],{"type":61,"value":937},"Box as=\"section\"",{"type":61,"value":359},{"type":55,"tag":102,"props":940,"children":942},{"className":941},[],[943],{"type":61,"value":944},"Box as=\"article\"",{"type":55,"tag":851,"props":946,"children":947},{},[948,957],{"type":55,"tag":873,"props":949,"children":950},{},[951],{"type":55,"tag":102,"props":952,"children":954},{"className":953},[],[955],{"type":61,"value":956},"\u003Cnav>",{"type":55,"tag":873,"props":958,"children":959},{},[960],{"type":55,"tag":102,"props":961,"children":963},{"className":962},[],[964],{"type":61,"value":965},"Box as=\"nav\"",{"type":55,"tag":851,"props":967,"children":968},{},[969,986],{"type":55,"tag":873,"props":970,"children":971},{},[972,978,980],{"type":55,"tag":102,"props":973,"children":975},{"className":974},[],[976],{"type":61,"value":977},"\u003Cul>",{"type":61,"value":979}," \u002F ",{"type":55,"tag":102,"props":981,"children":983},{"className":982},[],[984],{"type":61,"value":985},"\u003Cli>",{"type":55,"tag":873,"props":987,"children":988},{},[989,995,996,1002,1004],{"type":55,"tag":102,"props":990,"children":992},{"className":991},[],[993],{"type":61,"value":994},"Box as=\"ul\"",{"type":61,"value":979},{"type":55,"tag":102,"props":997,"children":999},{"className":998},[],[1000],{"type":61,"value":1001},"Box as=\"li\"",{"type":61,"value":1003},", or ",{"type":55,"tag":102,"props":1005,"children":1007},{"className":1006},[],[1008],{"type":61,"value":596},{"type":55,"tag":851,"props":1010,"children":1011},{},[1012,1021],{"type":55,"tag":873,"props":1013,"children":1014},{},[1015],{"type":55,"tag":102,"props":1016,"children":1018},{"className":1017},[],[1019],{"type":61,"value":1020},"\u003Cbutton>",{"type":55,"tag":873,"props":1022,"children":1023},{},[1024,1030,1032],{"type":55,"tag":102,"props":1025,"children":1027},{"className":1026},[],[1028],{"type":61,"value":1029},"Button",{"type":61,"value":1031}," or ",{"type":55,"tag":102,"props":1033,"children":1035},{"className":1034},[],[1036],{"type":61,"value":1037},"IconButton",{"type":55,"tag":851,"props":1039,"children":1040},{},[1041,1050],{"type":55,"tag":873,"props":1042,"children":1043},{},[1044],{"type":55,"tag":102,"props":1045,"children":1047},{"className":1046},[],[1048],{"type":61,"value":1049},"\u003Ca>",{"type":55,"tag":873,"props":1051,"children":1052},{},[1053],{"type":55,"tag":102,"props":1054,"children":1056},{"className":1055},[],[1057],{"type":61,"value":1058},"Link",{"type":55,"tag":851,"props":1060,"children":1061},{},[1062,1071],{"type":55,"tag":873,"props":1063,"children":1064},{},[1065],{"type":55,"tag":102,"props":1066,"children":1068},{"className":1067},[],[1069],{"type":61,"value":1070},"\u003Cimg>",{"type":55,"tag":873,"props":1072,"children":1073},{},[1074,1080,1082,1087],{"type":55,"tag":102,"props":1075,"children":1077},{"className":1076},[],[1078],{"type":61,"value":1079},"Image",{"type":61,"value":1081}," (preserve ",{"type":55,"tag":102,"props":1083,"children":1085},{"className":1084},[],[1086],{"type":61,"value":240},{"type":61,"value":403},{"type":55,"tag":851,"props":1089,"children":1090},{},[1091,1107],{"type":55,"tag":873,"props":1092,"children":1093},{},[1094,1100,1101],{"type":55,"tag":102,"props":1095,"children":1097},{"className":1096},[],[1098],{"type":61,"value":1099},"\u003Cinput>",{"type":61,"value":359},{"type":55,"tag":102,"props":1102,"children":1104},{"className":1103},[],[1105],{"type":61,"value":1106},"\u003Cselect>",{"type":55,"tag":873,"props":1108,"children":1109},{},[1110,1116,1117,1123,1125],{"type":55,"tag":102,"props":1111,"children":1113},{"className":1112},[],[1114],{"type":61,"value":1115},"Input",{"type":61,"value":359},{"type":55,"tag":102,"props":1118,"children":1120},{"className":1119},[],[1121],{"type":61,"value":1122},"NativeSelect",{"type":61,"value":1124}," inside ",{"type":55,"tag":102,"props":1126,"children":1128},{"className":1127},[],[1129],{"type":61,"value":270},{"type":55,"tag":843,"props":1131,"children":1132},{},[1133,1149],{"type":55,"tag":847,"props":1134,"children":1135},{},[1136],{"type":55,"tag":851,"props":1137,"children":1138},{},[1139,1144],{"type":55,"tag":855,"props":1140,"children":1141},{},[1142],{"type":61,"value":1143},"CSS",{"type":55,"tag":855,"props":1145,"children":1146},{},[1147],{"type":61,"value":1148},"Chakra style prop",{"type":55,"tag":866,"props":1150,"children":1151},{},[1152,1179,1206,1229,1250,1271,1292],{"type":55,"tag":851,"props":1153,"children":1154},{},[1155,1164],{"type":55,"tag":873,"props":1156,"children":1157},{},[1158],{"type":55,"tag":102,"props":1159,"children":1161},{"className":1160},[],[1162],{"type":61,"value":1163},"display: flex",{"type":55,"tag":873,"props":1165,"children":1166},{},[1167,1172,1173],{"type":55,"tag":102,"props":1168,"children":1170},{"className":1169},[],[1171],{"type":61,"value":588},{"type":61,"value":1031},{"type":55,"tag":102,"props":1174,"children":1176},{"className":1175},[],[1177],{"type":61,"value":1178},"display=\"flex\"",{"type":55,"tag":851,"props":1180,"children":1181},{},[1182,1191],{"type":55,"tag":873,"props":1183,"children":1184},{},[1185],{"type":55,"tag":102,"props":1186,"children":1188},{"className":1187},[],[1189],{"type":61,"value":1190},"flex-direction: column",{"type":55,"tag":873,"props":1192,"children":1193},{},[1194,1199,1200],{"type":55,"tag":102,"props":1195,"children":1197},{"className":1196},[],[1198],{"type":61,"value":596},{"type":61,"value":1031},{"type":55,"tag":102,"props":1201,"children":1203},{"className":1202},[],[1204],{"type":61,"value":1205},"flexDir=\"column\"",{"type":55,"tag":851,"props":1207,"children":1208},{},[1209,1218],{"type":55,"tag":873,"props":1210,"children":1211},{},[1212],{"type":55,"tag":102,"props":1213,"children":1215},{"className":1214},[],[1216],{"type":61,"value":1217},"gap: 16px",{"type":55,"tag":873,"props":1219,"children":1220},{},[1221,1227],{"type":55,"tag":102,"props":1222,"children":1224},{"className":1223},[],[1225],{"type":61,"value":1226},"gap={4}",{"type":61,"value":1228}," (1 unit = 4px)",{"type":55,"tag":851,"props":1230,"children":1231},{},[1232,1241],{"type":55,"tag":873,"props":1233,"children":1234},{},[1235],{"type":55,"tag":102,"props":1236,"children":1238},{"className":1237},[],[1239],{"type":61,"value":1240},"padding: 16px 24px",{"type":55,"tag":873,"props":1242,"children":1243},{},[1244],{"type":55,"tag":102,"props":1245,"children":1247},{"className":1246},[],[1248],{"type":61,"value":1249},"py={4} px={6}",{"type":55,"tag":851,"props":1251,"children":1252},{},[1253,1262],{"type":55,"tag":873,"props":1254,"children":1255},{},[1256],{"type":55,"tag":102,"props":1257,"children":1259},{"className":1258},[],[1260],{"type":61,"value":1261},"border-radius: 8px",{"type":55,"tag":873,"props":1263,"children":1264},{},[1265],{"type":55,"tag":102,"props":1266,"children":1268},{"className":1267},[],[1269],{"type":61,"value":1270},"rounded=\"md\"",{"type":55,"tag":851,"props":1272,"children":1273},{},[1274,1283],{"type":55,"tag":873,"props":1275,"children":1276},{},[1277],{"type":55,"tag":102,"props":1278,"children":1280},{"className":1279},[],[1281],{"type":61,"value":1282},"color: #6b7280",{"type":55,"tag":873,"props":1284,"children":1285},{},[1286],{"type":55,"tag":102,"props":1287,"children":1289},{"className":1288},[],[1290],{"type":61,"value":1291},"color=\"fg.muted\"",{"type":55,"tag":851,"props":1293,"children":1294},{},[1295,1304],{"type":55,"tag":873,"props":1296,"children":1297},{},[1298],{"type":55,"tag":102,"props":1299,"children":1301},{"className":1300},[],[1302],{"type":61,"value":1303},"background: #f9fafb",{"type":55,"tag":873,"props":1305,"children":1306},{},[1307],{"type":55,"tag":102,"props":1308,"children":1310},{"className":1309},[],[1311],{"type":61,"value":513},{"type":55,"tag":64,"props":1313,"children":1314},{},[1315],{"type":55,"tag":94,"props":1316,"children":1317},{},[1318],{"type":61,"value":1319},"From Tailwind CSS",{"type":55,"tag":843,"props":1321,"children":1322},{},[1323,1339],{"type":55,"tag":847,"props":1324,"children":1325},{},[1326],{"type":55,"tag":851,"props":1327,"children":1328},{},[1329,1334],{"type":55,"tag":855,"props":1330,"children":1331},{},[1332],{"type":61,"value":1333},"Tailwind",{"type":55,"tag":855,"props":1335,"children":1336},{},[1337],{"type":61,"value":1338},"Chakra",{"type":55,"tag":866,"props":1340,"children":1341},{},[1342,1383,1403,1452,1487,1522,1557,1578,1599,1632],{"type":55,"tag":851,"props":1343,"children":1344},{},[1345,1368],{"type":55,"tag":873,"props":1346,"children":1347},{},[1348,1354,1355,1361,1362],{"type":55,"tag":102,"props":1349,"children":1351},{"className":1350},[],[1352],{"type":61,"value":1353},"flex",{"type":61,"value":359},{"type":55,"tag":102,"props":1356,"children":1358},{"className":1357},[],[1359],{"type":61,"value":1360},"flex-col",{"type":61,"value":359},{"type":55,"tag":102,"props":1363,"children":1365},{"className":1364},[],[1366],{"type":61,"value":1367},"flex-row",{"type":55,"tag":873,"props":1369,"children":1370},{},[1371,1376,1377],{"type":55,"tag":102,"props":1372,"children":1374},{"className":1373},[],[1375],{"type":61,"value":588},{"type":61,"value":359},{"type":55,"tag":102,"props":1378,"children":1380},{"className":1379},[],[1381],{"type":61,"value":1382},"flexDir",{"type":55,"tag":851,"props":1384,"children":1385},{},[1386,1395],{"type":55,"tag":873,"props":1387,"children":1388},{},[1389],{"type":55,"tag":102,"props":1390,"children":1392},{"className":1391},[],[1393],{"type":61,"value":1394},"gap-4",{"type":55,"tag":873,"props":1396,"children":1397},{},[1398],{"type":55,"tag":102,"props":1399,"children":1401},{"className":1400},[],[1402],{"type":61,"value":1226},{"type":55,"tag":851,"props":1404,"children":1405},{},[1406,1429],{"type":55,"tag":873,"props":1407,"children":1408},{},[1409,1415,1416,1422,1423],{"type":55,"tag":102,"props":1410,"children":1412},{"className":1411},[],[1413],{"type":61,"value":1414},"p-4",{"type":61,"value":359},{"type":55,"tag":102,"props":1417,"children":1419},{"className":1418},[],[1420],{"type":61,"value":1421},"px-6",{"type":61,"value":359},{"type":55,"tag":102,"props":1424,"children":1426},{"className":1425},[],[1427],{"type":61,"value":1428},"py-2",{"type":55,"tag":873,"props":1430,"children":1431},{},[1432,1438,1439,1445,1446],{"type":55,"tag":102,"props":1433,"children":1435},{"className":1434},[],[1436],{"type":61,"value":1437},"p={4}",{"type":61,"value":359},{"type":55,"tag":102,"props":1440,"children":1442},{"className":1441},[],[1443],{"type":61,"value":1444},"px={6}",{"type":61,"value":359},{"type":55,"tag":102,"props":1447,"children":1449},{"className":1448},[],[1450],{"type":61,"value":1451},"py={2}",{"type":55,"tag":851,"props":1453,"children":1454},{},[1455,1471],{"type":55,"tag":873,"props":1456,"children":1457},{},[1458,1464,1465],{"type":55,"tag":102,"props":1459,"children":1461},{"className":1460},[],[1462],{"type":61,"value":1463},"text-sm",{"type":61,"value":359},{"type":55,"tag":102,"props":1466,"children":1468},{"className":1467},[],[1469],{"type":61,"value":1470},"font-bold",{"type":55,"tag":873,"props":1472,"children":1473},{},[1474,1480,1481],{"type":55,"tag":102,"props":1475,"children":1477},{"className":1476},[],[1478],{"type":61,"value":1479},"fontSize=\"sm\"",{"type":61,"value":359},{"type":55,"tag":102,"props":1482,"children":1484},{"className":1483},[],[1485],{"type":61,"value":1486},"fontWeight=\"bold\"",{"type":55,"tag":851,"props":1488,"children":1489},{},[1490,1506],{"type":55,"tag":873,"props":1491,"children":1492},{},[1493,1499,1500],{"type":55,"tag":102,"props":1494,"children":1496},{"className":1495},[],[1497],{"type":61,"value":1498},"rounded-lg",{"type":61,"value":359},{"type":55,"tag":102,"props":1501,"children":1503},{"className":1502},[],[1504],{"type":61,"value":1505},"shadow-md",{"type":55,"tag":873,"props":1507,"children":1508},{},[1509,1515,1516],{"type":55,"tag":102,"props":1510,"children":1512},{"className":1511},[],[1513],{"type":61,"value":1514},"rounded=\"lg\"",{"type":61,"value":359},{"type":55,"tag":102,"props":1517,"children":1519},{"className":1518},[],[1520],{"type":61,"value":1521},"shadow=\"md\"",{"type":55,"tag":851,"props":1523,"children":1524},{},[1525,1541],{"type":55,"tag":873,"props":1526,"children":1527},{},[1528,1534,1535],{"type":55,"tag":102,"props":1529,"children":1531},{"className":1530},[],[1532],{"type":61,"value":1533},"w-full",{"type":61,"value":359},{"type":55,"tag":102,"props":1536,"children":1538},{"className":1537},[],[1539],{"type":61,"value":1540},"max-w-lg",{"type":55,"tag":873,"props":1542,"children":1543},{},[1544,1550,1551],{"type":55,"tag":102,"props":1545,"children":1547},{"className":1546},[],[1548],{"type":61,"value":1549},"w=\"full\"",{"type":61,"value":359},{"type":55,"tag":102,"props":1552,"children":1554},{"className":1553},[],[1555],{"type":61,"value":1556},"maxW=\"lg\"",{"type":55,"tag":851,"props":1558,"children":1559},{},[1560,1569],{"type":55,"tag":873,"props":1561,"children":1562},{},[1563],{"type":55,"tag":102,"props":1564,"children":1566},{"className":1565},[],[1567],{"type":61,"value":1568},"hidden md:flex",{"type":55,"tag":873,"props":1570,"children":1571},{},[1572],{"type":55,"tag":102,"props":1573,"children":1575},{"className":1574},[],[1576],{"type":61,"value":1577},"display={{ base: \"none\", md: \"flex\" }}",{"type":55,"tag":851,"props":1579,"children":1580},{},[1581,1590],{"type":55,"tag":873,"props":1582,"children":1583},{},[1584],{"type":55,"tag":102,"props":1585,"children":1587},{"className":1586},[],[1588],{"type":61,"value":1589},"grid grid-cols-3",{"type":55,"tag":873,"props":1591,"children":1592},{},[1593],{"type":55,"tag":102,"props":1594,"children":1596},{"className":1595},[],[1597],{"type":61,"value":1598},"SimpleGrid columns={3}",{"type":55,"tag":851,"props":1600,"children":1601},{},[1602,1618],{"type":55,"tag":873,"props":1603,"children":1604},{},[1605,1611,1612],{"type":55,"tag":102,"props":1606,"children":1608},{"className":1607},[],[1609],{"type":61,"value":1610},"text-gray-500",{"type":61,"value":359},{"type":55,"tag":102,"props":1613,"children":1615},{"className":1614},[],[1616],{"type":61,"value":1617},"bg-gray-100",{"type":55,"tag":873,"props":1619,"children":1620},{},[1621,1626,1627],{"type":55,"tag":102,"props":1622,"children":1624},{"className":1623},[],[1625],{"type":61,"value":1291},{"type":61,"value":359},{"type":55,"tag":102,"props":1628,"children":1630},{"className":1629},[],[1631],{"type":61,"value":513},{"type":55,"tag":851,"props":1633,"children":1634},{},[1635,1644],{"type":55,"tag":873,"props":1636,"children":1637},{},[1638],{"type":55,"tag":102,"props":1639,"children":1641},{"className":1640},[],[1642],{"type":61,"value":1643},"hover:bg-gray-100",{"type":55,"tag":873,"props":1645,"children":1646},{},[1647],{"type":55,"tag":102,"props":1648,"children":1650},{"className":1649},[],[1651],{"type":61,"value":1652},"_hover={{ bg: \"bg.subtle\" }}",{"type":55,"tag":64,"props":1654,"children":1655},{},[1656],{"type":61,"value":1657},"Replace Tailwind responsive prefixes with Chakra's breakpoint object syntax:",{"type":55,"tag":797,"props":1659,"children":1663},{"className":1660,"code":1661,"language":1662,"meta":805,"style":805},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Tailwind: text-sm md:base lg:text-lg\n\u003CText fontSize={{ base: \"sm\", md: \"md\", lg: \"lg\" }} \u002F>\n","tsx",[1664],{"type":55,"tag":102,"props":1665,"children":1666},{"__ignoreMap":805},[1667,1679],{"type":55,"tag":1668,"props":1669,"children":1672},"span",{"class":1670,"line":1671},"line",1,[1673],{"type":55,"tag":1668,"props":1674,"children":1676},{"style":1675},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[1677],{"type":61,"value":1678},"\u002F\u002F Tailwind: text-sm md:base lg:text-lg\n",{"type":55,"tag":1668,"props":1680,"children":1682},{"class":1670,"line":1681},2,[1683,1689,1695,1701,1706,1712,1717,1722,1728,1733,1738,1743,1747,1751,1756,1760,1764,1769,1773,1777,1782,1786],{"type":55,"tag":1668,"props":1684,"children":1686},{"style":1685},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[1687],{"type":61,"value":1688},"\u003C",{"type":55,"tag":1668,"props":1690,"children":1692},{"style":1691},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[1693],{"type":61,"value":1694},"Text",{"type":55,"tag":1668,"props":1696,"children":1698},{"style":1697},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[1699],{"type":61,"value":1700}," fontSize",{"type":55,"tag":1668,"props":1702,"children":1703},{"style":1685},[1704],{"type":61,"value":1705},"={{",{"type":55,"tag":1668,"props":1707,"children":1709},{"style":1708},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[1710],{"type":61,"value":1711}," base",{"type":55,"tag":1668,"props":1713,"children":1714},{"style":1685},[1715],{"type":61,"value":1716},":",{"type":55,"tag":1668,"props":1718,"children":1719},{"style":1685},[1720],{"type":61,"value":1721}," \"",{"type":55,"tag":1668,"props":1723,"children":1725},{"style":1724},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[1726],{"type":61,"value":1727},"sm",{"type":55,"tag":1668,"props":1729,"children":1730},{"style":1685},[1731],{"type":61,"value":1732},"\"",{"type":55,"tag":1668,"props":1734,"children":1735},{"style":1685},[1736],{"type":61,"value":1737},",",{"type":55,"tag":1668,"props":1739,"children":1740},{"style":1708},[1741],{"type":61,"value":1742}," md",{"type":55,"tag":1668,"props":1744,"children":1745},{"style":1685},[1746],{"type":61,"value":1716},{"type":55,"tag":1668,"props":1748,"children":1749},{"style":1685},[1750],{"type":61,"value":1721},{"type":55,"tag":1668,"props":1752,"children":1753},{"style":1724},[1754],{"type":61,"value":1755},"md",{"type":55,"tag":1668,"props":1757,"children":1758},{"style":1685},[1759],{"type":61,"value":1732},{"type":55,"tag":1668,"props":1761,"children":1762},{"style":1685},[1763],{"type":61,"value":1737},{"type":55,"tag":1668,"props":1765,"children":1766},{"style":1708},[1767],{"type":61,"value":1768}," lg",{"type":55,"tag":1668,"props":1770,"children":1771},{"style":1685},[1772],{"type":61,"value":1716},{"type":55,"tag":1668,"props":1774,"children":1775},{"style":1685},[1776],{"type":61,"value":1721},{"type":55,"tag":1668,"props":1778,"children":1779},{"style":1724},[1780],{"type":61,"value":1781},"lg",{"type":55,"tag":1668,"props":1783,"children":1784},{"style":1685},[1785],{"type":61,"value":1732},{"type":55,"tag":1668,"props":1787,"children":1788},{"style":1685},[1789],{"type":61,"value":1790}," }} \u002F>\n",{"type":55,"tag":64,"props":1792,"children":1793},{},[1794,1799,1801,1807],{"type":55,"tag":94,"props":1795,"children":1796},{},[1797],{"type":61,"value":1798},"From CSS Modules",{"type":61,"value":1800}," — convert what you can to Chakra props; keep ",{"type":55,"tag":102,"props":1802,"children":1804},{"className":1803},[],[1805],{"type":61,"value":1806},"className",{"type":61,"value":1808},"\nfor styles that can't be expressed as props (animations, complex selectors):",{"type":55,"tag":797,"props":1810,"children":1812},{"className":1660,"code":1811,"language":1662,"meta":805,"style":805},"\u002F\u002F Before\n\u003Cdiv className={styles.card}>...\u003C\u002Fdiv>\n\u002F\u002F After — converted to props; className kept only for unconvertible styles\n\u003CBox p={4} rounded=\"lg\" shadow=\"sm\" className={styles.fadeIn}>...\u003C\u002FBox>\n",[1813],{"type":55,"tag":102,"props":1814,"children":1815},{"__ignoreMap":805},[1816,1824,1886,1895],{"type":55,"tag":1668,"props":1817,"children":1818},{"class":1670,"line":1671},[1819],{"type":55,"tag":1668,"props":1820,"children":1821},{"style":1675},[1822],{"type":61,"value":1823},"\u002F\u002F Before\n",{"type":55,"tag":1668,"props":1825,"children":1826},{"class":1670,"line":1681},[1827,1831,1836,1841,1846,1852,1857,1862,1867,1872,1877,1881],{"type":55,"tag":1668,"props":1828,"children":1829},{"style":1685},[1830],{"type":61,"value":1688},{"type":55,"tag":1668,"props":1832,"children":1833},{"style":1708},[1834],{"type":61,"value":1835},"div",{"type":55,"tag":1668,"props":1837,"children":1838},{"style":1697},[1839],{"type":61,"value":1840}," className",{"type":55,"tag":1668,"props":1842,"children":1843},{"style":1685},[1844],{"type":61,"value":1845},"={",{"type":55,"tag":1668,"props":1847,"children":1849},{"style":1848},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[1850],{"type":61,"value":1851},"styles",{"type":55,"tag":1668,"props":1853,"children":1854},{"style":1685},[1855],{"type":61,"value":1856},".",{"type":55,"tag":1668,"props":1858,"children":1859},{"style":1848},[1860],{"type":61,"value":1861},"card",{"type":55,"tag":1668,"props":1863,"children":1864},{"style":1685},[1865],{"type":61,"value":1866},"}>",{"type":55,"tag":1668,"props":1868,"children":1869},{"style":1848},[1870],{"type":61,"value":1871},"...",{"type":55,"tag":1668,"props":1873,"children":1874},{"style":1685},[1875],{"type":61,"value":1876},"\u003C\u002F",{"type":55,"tag":1668,"props":1878,"children":1879},{"style":1708},[1880],{"type":61,"value":1835},{"type":55,"tag":1668,"props":1882,"children":1883},{"style":1685},[1884],{"type":61,"value":1885},">\n",{"type":55,"tag":1668,"props":1887,"children":1889},{"class":1670,"line":1888},3,[1890],{"type":55,"tag":1668,"props":1891,"children":1892},{"style":1675},[1893],{"type":61,"value":1894},"\u002F\u002F After — converted to props; className kept only for unconvertible styles\n",{"type":55,"tag":1668,"props":1896,"children":1898},{"class":1670,"line":1897},4,[1899,1903,1907,1912,1916,1922,1927,1932,1937,1941,1945,1949,1954,1958,1962,1966,1970,1974,1978,1982,1986,1991,1995,1999,2003,2007],{"type":55,"tag":1668,"props":1900,"children":1901},{"style":1685},[1902],{"type":61,"value":1688},{"type":55,"tag":1668,"props":1904,"children":1905},{"style":1691},[1906],{"type":61,"value":698},{"type":55,"tag":1668,"props":1908,"children":1909},{"style":1697},[1910],{"type":61,"value":1911}," p",{"type":55,"tag":1668,"props":1913,"children":1914},{"style":1685},[1915],{"type":61,"value":1845},{"type":55,"tag":1668,"props":1917,"children":1919},{"style":1918},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[1920],{"type":61,"value":1921},"4",{"type":55,"tag":1668,"props":1923,"children":1924},{"style":1685},[1925],{"type":61,"value":1926},"} ",{"type":55,"tag":1668,"props":1928,"children":1929},{"style":1697},[1930],{"type":61,"value":1931},"rounded",{"type":55,"tag":1668,"props":1933,"children":1934},{"style":1685},[1935],{"type":61,"value":1936},"=",{"type":55,"tag":1668,"props":1938,"children":1939},{"style":1685},[1940],{"type":61,"value":1732},{"type":55,"tag":1668,"props":1942,"children":1943},{"style":1724},[1944],{"type":61,"value":1781},{"type":55,"tag":1668,"props":1946,"children":1947},{"style":1685},[1948],{"type":61,"value":1732},{"type":55,"tag":1668,"props":1950,"children":1951},{"style":1697},[1952],{"type":61,"value":1953}," shadow",{"type":55,"tag":1668,"props":1955,"children":1956},{"style":1685},[1957],{"type":61,"value":1936},{"type":55,"tag":1668,"props":1959,"children":1960},{"style":1685},[1961],{"type":61,"value":1732},{"type":55,"tag":1668,"props":1963,"children":1964},{"style":1724},[1965],{"type":61,"value":1727},{"type":55,"tag":1668,"props":1967,"children":1968},{"style":1685},[1969],{"type":61,"value":1732},{"type":55,"tag":1668,"props":1971,"children":1972},{"style":1697},[1973],{"type":61,"value":1840},{"type":55,"tag":1668,"props":1975,"children":1976},{"style":1685},[1977],{"type":61,"value":1845},{"type":55,"tag":1668,"props":1979,"children":1980},{"style":1848},[1981],{"type":61,"value":1851},{"type":55,"tag":1668,"props":1983,"children":1984},{"style":1685},[1985],{"type":61,"value":1856},{"type":55,"tag":1668,"props":1987,"children":1988},{"style":1848},[1989],{"type":61,"value":1990},"fadeIn",{"type":55,"tag":1668,"props":1992,"children":1993},{"style":1685},[1994],{"type":61,"value":1866},{"type":55,"tag":1668,"props":1996,"children":1997},{"style":1848},[1998],{"type":61,"value":1871},{"type":55,"tag":1668,"props":2000,"children":2001},{"style":1685},[2002],{"type":61,"value":1876},{"type":55,"tag":1668,"props":2004,"children":2005},{"style":1691},[2006],{"type":61,"value":698},{"type":55,"tag":1668,"props":2008,"children":2009},{"style":1685},[2010],{"type":61,"value":1885},{"type":55,"tag":64,"props":2012,"children":2013},{},[2014],{"type":61,"value":2015},"Once all class names are eliminated, remove the import entirely.",{"type":55,"tag":64,"props":2017,"children":2018},{},[2019,2024,2026,2031],{"type":55,"tag":94,"props":2020,"children":2021},{},[2022],{"type":61,"value":2023},"From styled-components \u002F @emotion\u002Fstyled",{"type":61,"value":2025}," — map to ",{"type":55,"tag":102,"props":2027,"children":2029},{"className":2028},[],[2030],{"type":61,"value":698},{"type":61,"value":2032}," with equivalent\nstyle props, then remove the import and uninstall if no longer used elsewhere:",{"type":55,"tag":797,"props":2034,"children":2036},{"className":1660,"code":2035,"language":1662,"meta":805,"style":805},"\u002F\u002F Before\nconst Card = styled.div`padding: 1rem; &:hover { background: #f3f4f6; }`\n\u002F\u002F After\n\u003CBox p={4} _hover={{ bg: \"bg.muted\" }} \u002F>\n",[2037],{"type":55,"tag":102,"props":2038,"children":2039},{"__ignoreMap":805},[2040,2047,2093,2101],{"type":55,"tag":1668,"props":2041,"children":2042},{"class":1670,"line":1671},[2043],{"type":55,"tag":1668,"props":2044,"children":2045},{"style":1675},[2046],{"type":61,"value":1823},{"type":55,"tag":1668,"props":2048,"children":2049},{"class":1670,"line":1681},[2050,2055,2060,2064,2069,2073,2078,2083,2088],{"type":55,"tag":1668,"props":2051,"children":2052},{"style":1697},[2053],{"type":61,"value":2054},"const",{"type":55,"tag":1668,"props":2056,"children":2057},{"style":1848},[2058],{"type":61,"value":2059}," Card ",{"type":55,"tag":1668,"props":2061,"children":2062},{"style":1685},[2063],{"type":61,"value":1936},{"type":55,"tag":1668,"props":2065,"children":2066},{"style":1848},[2067],{"type":61,"value":2068}," styled",{"type":55,"tag":1668,"props":2070,"children":2071},{"style":1685},[2072],{"type":61,"value":1856},{"type":55,"tag":1668,"props":2074,"children":2076},{"style":2075},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[2077],{"type":61,"value":1835},{"type":55,"tag":1668,"props":2079,"children":2080},{"style":1685},[2081],{"type":61,"value":2082},"`",{"type":55,"tag":1668,"props":2084,"children":2085},{"style":1724},[2086],{"type":61,"value":2087},"padding: 1rem; &:hover { background: #f3f4f6; }",{"type":55,"tag":1668,"props":2089,"children":2090},{"style":1685},[2091],{"type":61,"value":2092},"`\n",{"type":55,"tag":1668,"props":2094,"children":2095},{"class":1670,"line":1888},[2096],{"type":55,"tag":1668,"props":2097,"children":2098},{"style":1675},[2099],{"type":61,"value":2100},"\u002F\u002F After\n",{"type":55,"tag":1668,"props":2102,"children":2103},{"class":1670,"line":1897},[2104,2108,2112,2116,2120,2124,2128,2133,2137,2142,2146,2150,2155,2159],{"type":55,"tag":1668,"props":2105,"children":2106},{"style":1685},[2107],{"type":61,"value":1688},{"type":55,"tag":1668,"props":2109,"children":2110},{"style":1691},[2111],{"type":61,"value":698},{"type":55,"tag":1668,"props":2113,"children":2114},{"style":1697},[2115],{"type":61,"value":1911},{"type":55,"tag":1668,"props":2117,"children":2118},{"style":1685},[2119],{"type":61,"value":1845},{"type":55,"tag":1668,"props":2121,"children":2122},{"style":1918},[2123],{"type":61,"value":1921},{"type":55,"tag":1668,"props":2125,"children":2126},{"style":1685},[2127],{"type":61,"value":1926},{"type":55,"tag":1668,"props":2129,"children":2130},{"style":1697},[2131],{"type":61,"value":2132},"_hover",{"type":55,"tag":1668,"props":2134,"children":2135},{"style":1685},[2136],{"type":61,"value":1705},{"type":55,"tag":1668,"props":2138,"children":2139},{"style":1708},[2140],{"type":61,"value":2141}," bg",{"type":55,"tag":1668,"props":2143,"children":2144},{"style":1685},[2145],{"type":61,"value":1716},{"type":55,"tag":1668,"props":2147,"children":2148},{"style":1685},[2149],{"type":61,"value":1721},{"type":55,"tag":1668,"props":2151,"children":2152},{"style":1724},[2153],{"type":61,"value":2154},"bg.muted",{"type":55,"tag":1668,"props":2156,"children":2157},{"style":1685},[2158],{"type":61,"value":1732},{"type":55,"tag":1668,"props":2160,"children":2161},{"style":1685},[2162],{"type":61,"value":1790},{"type":55,"tag":64,"props":2164,"children":2165},{},[2166],{"type":55,"tag":94,"props":2167,"children":2168},{},[2169],{"type":61,"value":2170},"From existing Chakra UI (cleanup)",{"type":55,"tag":86,"props":2172,"children":2173},{},[2174,2207,2234,2253,2278],{"type":55,"tag":90,"props":2175,"children":2176},{},[2177,2179,2184,2186,2192,2193,2199,2201],{"type":61,"value":2178},"Flatten ",{"type":55,"tag":102,"props":2180,"children":2182},{"className":2181},[],[2183],{"type":61,"value":554},{"type":61,"value":2185}," nesting; replace ",{"type":55,"tag":102,"props":2187,"children":2189},{"className":2188},[],[2190],{"type":61,"value":2191},"mt",{"type":61,"value":226},{"type":55,"tag":102,"props":2194,"children":2196},{"className":2195},[],[2197],{"type":61,"value":2198},"mb",{"type":61,"value":2200}," on every child with\n",{"type":55,"tag":102,"props":2202,"children":2204},{"className":2203},[],[2205],{"type":61,"value":2206},"Stack gap={N}",{"type":55,"tag":90,"props":2208,"children":2209},{},[2210,2212,2217,2218,2224,2226,2232],{"type":61,"value":2211},"Replace ",{"type":55,"tag":102,"props":2213,"children":2215},{"className":2214},[],[2216],{"type":61,"value":481},{"type":61,"value":272},{"type":55,"tag":102,"props":2219,"children":2221},{"className":2220},[],[2222],{"type":61,"value":2223},"css",{"type":61,"value":2225}," (v3 rename); update nested ",{"type":55,"tag":102,"props":2227,"children":2229},{"className":2228},[],[2230],{"type":61,"value":2231},"&:hover",{"type":61,"value":2233}," selectors inside\nit",{"type":55,"tag":90,"props":2235,"children":2236},{},[2237,2238,2244,2246,2251],{"type":61,"value":2211},{"type":55,"tag":102,"props":2239,"children":2241},{"className":2240},[],[2242],{"type":61,"value":2243},"bg=\"gray.50\"",{"type":61,"value":2245}," → ",{"type":55,"tag":102,"props":2247,"children":2249},{"className":2248},[],[2250],{"type":61,"value":513},{"type":61,"value":2252}," and other semantic token equivalents",{"type":55,"tag":90,"props":2254,"children":2255},{},[2256,2258,2264,2265,2271,2272],{"type":61,"value":2257},"Update v2 prop names: ",{"type":55,"tag":102,"props":2259,"children":2261},{"className":2260},[],[2262],{"type":61,"value":2263},"isDisabled→disabled",{"type":61,"value":359},{"type":55,"tag":102,"props":2266,"children":2268},{"className":2267},[],[2269],{"type":61,"value":2270},"colorScheme→colorPalette",{"type":61,"value":421},{"type":55,"tag":102,"props":2273,"children":2275},{"className":2274},[],[2276],{"type":61,"value":2277},"spacing→gap",{"type":55,"tag":90,"props":2279,"children":2280},{},[2281,2283,2289,2290,2296,2297],{"type":61,"value":2282},"Update compound components: ",{"type":55,"tag":102,"props":2284,"children":2286},{"className":2285},[],[2287],{"type":61,"value":2288},"FormControl→Field.Root",{"type":61,"value":359},{"type":55,"tag":102,"props":2291,"children":2293},{"className":2292},[],[2294],{"type":61,"value":2295},"Modal→Dialog",{"type":61,"value":421},{"type":55,"tag":102,"props":2298,"children":2300},{"className":2299},[],[2301],{"type":61,"value":2302},"Select→NativeSelect",{"type":55,"tag":828,"props":2304,"children":2306},{"id":2305},"preserve-behavior-non-negotiable",[2307],{"type":61,"value":2308},"Preserve behavior — non-negotiable",{"type":55,"tag":86,"props":2310,"children":2311},{},[2312,2317,2330,2354,2365,2377],{"type":55,"tag":90,"props":2313,"children":2314},{},[2315],{"type":61,"value":2316},"Keep all event handlers, state variables, and conditional rendering exactly\nas-is",{"type":55,"tag":90,"props":2318,"children":2319},{},[2320,2322,2328],{"type":61,"value":2321},"Keep ",{"type":55,"tag":102,"props":2323,"children":2325},{"className":2324},[],[2326],{"type":61,"value":2327},"aria-*",{"type":61,"value":2329}," attributes; add missing ones where clearly needed",{"type":55,"tag":90,"props":2331,"children":2332},{},[2333,2335,2340,2341,2346,2348,2353],{"type":61,"value":2334},"Keep semantic HTML intent (",{"type":55,"tag":102,"props":2336,"children":2338},{"className":2337},[],[2339],{"type":61,"value":956},{"type":61,"value":2245},{"type":55,"tag":102,"props":2342,"children":2344},{"className":2343},[],[2345],{"type":61,"value":965},{"type":61,"value":2347},", not just ",{"type":55,"tag":102,"props":2349,"children":2351},{"className":2350},[],[2352],{"type":61,"value":698},{"type":61,"value":403},{"type":55,"tag":90,"props":2355,"children":2356},{},[2357,2358,2363],{"type":61,"value":2321},{"type":55,"tag":102,"props":2359,"children":2361},{"className":2360},[],[2362],{"type":61,"value":447},{"type":61,"value":2364}," where it exists; add it only when the component genuinely\nneeds it",{"type":55,"tag":90,"props":2366,"children":2367},{},[2368,2370,2375],{"type":61,"value":2369},"Don't add ",{"type":55,"tag":102,"props":2371,"children":2373},{"className":2372},[],[2374],{"type":61,"value":447},{"type":61,"value":2376}," just because a component uses Chakra UI",{"type":55,"tag":90,"props":2378,"children":2379},{},[2380],{"type":61,"value":2381},"A partially-converted component that works is better than a fully-converted\none that doesn't",{"type":55,"tag":828,"props":2383,"children":2385},{"id":2384},"aschild-for-nextjs-link-and-image",[2386,2392],{"type":55,"tag":102,"props":2387,"children":2389},{"className":2388},[],[2390],{"type":61,"value":2391},"asChild",{"type":61,"value":2393}," for Next.js Link and Image",{"type":55,"tag":797,"props":2395,"children":2397},{"className":1660,"code":2396,"language":1662,"meta":805,"style":805},"import NextLink from \"next\u002Flink\"\n\u003CChakraLink asChild>\u003CNextLink href=\"\u002Fabout\">About\u003C\u002FNextLink>\u003C\u002FChakraLink>\n\nimport NextImage from \"next\u002Fimage\"\n\u003CChakraImage asChild>\u003CNextImage src=\"\u002Fhero.png\" alt=\"Hero\" width={800} height={400} \u002F>\u003C\u002FChakraImage>\n",[2398],{"type":55,"tag":102,"props":2399,"children":2400},{"__ignoreMap":805},[2401,2434,2514,2523,2552],{"type":55,"tag":1668,"props":2402,"children":2403},{"class":1670,"line":1671},[2404,2410,2415,2420,2424,2429],{"type":55,"tag":1668,"props":2405,"children":2407},{"style":2406},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[2408],{"type":61,"value":2409},"import",{"type":55,"tag":1668,"props":2411,"children":2412},{"style":1848},[2413],{"type":61,"value":2414}," NextLink ",{"type":55,"tag":1668,"props":2416,"children":2417},{"style":2406},[2418],{"type":61,"value":2419},"from",{"type":55,"tag":1668,"props":2421,"children":2422},{"style":1685},[2423],{"type":61,"value":1721},{"type":55,"tag":1668,"props":2425,"children":2426},{"style":1724},[2427],{"type":61,"value":2428},"next\u002Flink",{"type":55,"tag":1668,"props":2430,"children":2431},{"style":1685},[2432],{"type":61,"value":2433},"\"\n",{"type":55,"tag":1668,"props":2435,"children":2436},{"class":1670,"line":1681},[2437,2441,2446,2451,2456,2461,2466,2470,2474,2479,2483,2488,2493,2497,2501,2506,2510],{"type":55,"tag":1668,"props":2438,"children":2439},{"style":1685},[2440],{"type":61,"value":1688},{"type":55,"tag":1668,"props":2442,"children":2443},{"style":1691},[2444],{"type":61,"value":2445},"ChakraLink",{"type":55,"tag":1668,"props":2447,"children":2448},{"style":1697},[2449],{"type":61,"value":2450}," asChild",{"type":55,"tag":1668,"props":2452,"children":2453},{"style":1685},[2454],{"type":61,"value":2455},">\u003C",{"type":55,"tag":1668,"props":2457,"children":2458},{"style":1691},[2459],{"type":61,"value":2460},"NextLink",{"type":55,"tag":1668,"props":2462,"children":2463},{"style":1697},[2464],{"type":61,"value":2465}," href",{"type":55,"tag":1668,"props":2467,"children":2468},{"style":1685},[2469],{"type":61,"value":1936},{"type":55,"tag":1668,"props":2471,"children":2472},{"style":1685},[2473],{"type":61,"value":1732},{"type":55,"tag":1668,"props":2475,"children":2476},{"style":1724},[2477],{"type":61,"value":2478},"\u002Fabout",{"type":55,"tag":1668,"props":2480,"children":2481},{"style":1685},[2482],{"type":61,"value":1732},{"type":55,"tag":1668,"props":2484,"children":2485},{"style":1685},[2486],{"type":61,"value":2487},">",{"type":55,"tag":1668,"props":2489,"children":2490},{"style":1848},[2491],{"type":61,"value":2492},"About",{"type":55,"tag":1668,"props":2494,"children":2495},{"style":1685},[2496],{"type":61,"value":1876},{"type":55,"tag":1668,"props":2498,"children":2499},{"style":1691},[2500],{"type":61,"value":2460},{"type":55,"tag":1668,"props":2502,"children":2503},{"style":1685},[2504],{"type":61,"value":2505},">\u003C\u002F",{"type":55,"tag":1668,"props":2507,"children":2508},{"style":1691},[2509],{"type":61,"value":2445},{"type":55,"tag":1668,"props":2511,"children":2512},{"style":1685},[2513],{"type":61,"value":1885},{"type":55,"tag":1668,"props":2515,"children":2516},{"class":1670,"line":1888},[2517],{"type":55,"tag":1668,"props":2518,"children":2520},{"emptyLinePlaceholder":2519},true,[2521],{"type":61,"value":2522},"\n",{"type":55,"tag":1668,"props":2524,"children":2525},{"class":1670,"line":1897},[2526,2530,2535,2539,2543,2548],{"type":55,"tag":1668,"props":2527,"children":2528},{"style":2406},[2529],{"type":61,"value":2409},{"type":55,"tag":1668,"props":2531,"children":2532},{"style":1848},[2533],{"type":61,"value":2534}," NextImage ",{"type":55,"tag":1668,"props":2536,"children":2537},{"style":2406},[2538],{"type":61,"value":2419},{"type":55,"tag":1668,"props":2540,"children":2541},{"style":1685},[2542],{"type":61,"value":1721},{"type":55,"tag":1668,"props":2544,"children":2545},{"style":1724},[2546],{"type":61,"value":2547},"next\u002Fimage",{"type":55,"tag":1668,"props":2549,"children":2550},{"style":1685},[2551],{"type":61,"value":2433},{"type":55,"tag":1668,"props":2553,"children":2555},{"class":1670,"line":2554},5,[2556,2560,2565,2569,2573,2578,2583,2587,2591,2596,2600,2605,2609,2613,2618,2622,2627,2631,2636,2640,2645,2649,2654,2659,2663],{"type":55,"tag":1668,"props":2557,"children":2558},{"style":1685},[2559],{"type":61,"value":1688},{"type":55,"tag":1668,"props":2561,"children":2562},{"style":1691},[2563],{"type":61,"value":2564},"ChakraImage",{"type":55,"tag":1668,"props":2566,"children":2567},{"style":1697},[2568],{"type":61,"value":2450},{"type":55,"tag":1668,"props":2570,"children":2571},{"style":1685},[2572],{"type":61,"value":2455},{"type":55,"tag":1668,"props":2574,"children":2575},{"style":1691},[2576],{"type":61,"value":2577},"NextImage",{"type":55,"tag":1668,"props":2579,"children":2580},{"style":1697},[2581],{"type":61,"value":2582}," src",{"type":55,"tag":1668,"props":2584,"children":2585},{"style":1685},[2586],{"type":61,"value":1936},{"type":55,"tag":1668,"props":2588,"children":2589},{"style":1685},[2590],{"type":61,"value":1732},{"type":55,"tag":1668,"props":2592,"children":2593},{"style":1724},[2594],{"type":61,"value":2595},"\u002Fhero.png",{"type":55,"tag":1668,"props":2597,"children":2598},{"style":1685},[2599],{"type":61,"value":1732},{"type":55,"tag":1668,"props":2601,"children":2602},{"style":1697},[2603],{"type":61,"value":2604}," alt",{"type":55,"tag":1668,"props":2606,"children":2607},{"style":1685},[2608],{"type":61,"value":1936},{"type":55,"tag":1668,"props":2610,"children":2611},{"style":1685},[2612],{"type":61,"value":1732},{"type":55,"tag":1668,"props":2614,"children":2615},{"style":1724},[2616],{"type":61,"value":2617},"Hero",{"type":55,"tag":1668,"props":2619,"children":2620},{"style":1685},[2621],{"type":61,"value":1732},{"type":55,"tag":1668,"props":2623,"children":2624},{"style":1697},[2625],{"type":61,"value":2626}," width",{"type":55,"tag":1668,"props":2628,"children":2629},{"style":1685},[2630],{"type":61,"value":1845},{"type":55,"tag":1668,"props":2632,"children":2633},{"style":1918},[2634],{"type":61,"value":2635},"800",{"type":55,"tag":1668,"props":2637,"children":2638},{"style":1685},[2639],{"type":61,"value":1926},{"type":55,"tag":1668,"props":2641,"children":2642},{"style":1697},[2643],{"type":61,"value":2644},"height",{"type":55,"tag":1668,"props":2646,"children":2647},{"style":1685},[2648],{"type":61,"value":1845},{"type":55,"tag":1668,"props":2650,"children":2651},{"style":1918},[2652],{"type":61,"value":2653},"400",{"type":55,"tag":1668,"props":2655,"children":2656},{"style":1685},[2657],{"type":61,"value":2658},"} \u002F>\u003C\u002F",{"type":55,"tag":1668,"props":2660,"children":2661},{"style":1691},[2662],{"type":61,"value":2564},{"type":55,"tag":1668,"props":2664,"children":2665},{"style":1685},[2666],{"type":61,"value":1885},{"type":55,"tag":828,"props":2668,"children":2670},{"id":2669},"refactor-output-format",[2671],{"type":61,"value":2672},"Refactor output format",{"type":55,"tag":64,"props":2674,"children":2675},{},[2676,2681],{"type":55,"tag":94,"props":2677,"children":2678},{},[2679],{"type":61,"value":2680},"1. Refactored code",{"type":61,"value":2682}," — complete, runnable, with correct imports",{"type":55,"tag":64,"props":2684,"children":2685},{},[2686,2691],{"type":55,"tag":94,"props":2687,"children":2688},{},[2689],{"type":61,"value":2690},"2. What changed",{"type":61,"value":2692}," — concise list focused on non-obvious decisions:",{"type":55,"tag":797,"props":2694,"children":2697},{"className":2695,"code":2696,"language":61},[800],"- Replaced \u003Cdiv className=\"flex gap-4\"> with \u003CFlex gap={4}>\n- Replaced bg=\"#f9fafb\" with bg=\"bg.subtle\" for dark mode compatibility\n- Kept form submit handler and validation logic unchanged\n- Added aria-label to close icon button (was missing)\n",[2698],{"type":55,"tag":102,"props":2699,"children":2700},{"__ignoreMap":805},[2701],{"type":61,"value":2696},{"type":55,"tag":64,"props":2703,"children":2704},{},[2705,2710],{"type":55,"tag":94,"props":2706,"children":2707},{},[2708],{"type":61,"value":2709},"3. Suggestions",{"type":61,"value":2711}," (optional) — meaningful improvements beyond this refactor:\nextracting a reusable component, adopting a recipe, migrating a v2 pattern.",{"type":55,"tag":70,"props":2713,"children":2714},{},[],{"type":55,"tag":74,"props":2716,"children":2718},{"id":2717},"when-to-ask-vs-proceed",[2719],{"type":61,"value":2720},"When to ask vs proceed",{"type":55,"tag":64,"props":2722,"children":2723},{},[2724],{"type":61,"value":2725},"Proceed if the code and intent are clear. Ask when:",{"type":55,"tag":86,"props":2727,"children":2728},{},[2729,2734,2739,2744],{"type":55,"tag":90,"props":2730,"children":2731},{},[2732],{"type":61,"value":2733},"The code isn't shared yet",{"type":55,"tag":90,"props":2735,"children":2736},{},[2737],{"type":61,"value":2738},"The component is very large and scope is unclear",{"type":55,"tag":90,"props":2740,"children":2741},{},[2742],{"type":61,"value":2743},"There's context or state you can't see that would change the review",{"type":55,"tag":90,"props":2745,"children":2746},{},[2747],{"type":61,"value":2748},"There's ambiguous behavior that could be interpreted multiple ways",{"type":55,"tag":64,"props":2750,"children":2751},{},[2752],{"type":61,"value":2753},"State assumptions at the top of the response when you proceed without asking.",{"type":55,"tag":2755,"props":2756,"children":2757},"style",{},[2758],{"type":61,"value":2759},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":2761,"total":1888},[2762,2775,2791],{"slug":2763,"name":2763,"fn":2764,"description":2765,"org":2766,"tags":2767,"stars":25,"repoUrl":26,"updatedAt":2774},"chakra-ui-builder","build UI components with Chakra UI","Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form, dashboard, navbar, card, landing section, pricing table, or layout using Chakra UI; wants to add Chakra UI to a project, set up ChakraProvider, run CLI snippets, configure color mode, or fix provider wrapping; or asks about theming — defining brand colors, design tokens, semantic tokens, dark mode values, component recipes, slot recipes, typegen, or ejecting the default theme. Trigger on any Chakra UI building, setup, or theming or charts request, however casually phrased — \"add my brand colors\", \"make a reusable card style\", \"build a bar chart\", \"show me a line chart\", \"make me a login form\", \"build a sidebar\", \"add Chakra to my app\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2768,2769,2770,2773],{"name":23,"slug":24,"type":15},{"name":20,"slug":21,"type":15},{"name":2771,"slug":2772,"type":15},"Themes","themes",{"name":17,"slug":18,"type":15},"2026-07-12T08:48:27.118378",{"slug":2776,"name":2776,"fn":2777,"description":2778,"org":2779,"tags":2780,"stars":25,"repoUrl":26,"updatedAt":2790},"chakra-ui-migrate","migrate Chakra UI projects to v3","Migrate Chakra UI projects from v2 to v3, covering package changes, codemods, provider setup, color mode, prop renaming, compound components, theming, recipes, and Next.js updates. Use this skill whenever a user is upgrading Chakra UI versions, encountering breaking changes after an upgrade, converting old v2 patterns (ColorModeScript, useColorModeValue, styleConfig, extendTheme, isDisabled, colorScheme, @chakra-ui\u002Ficons, framer-motion dependency), fixing compound component patterns, or asking about differences between Chakra UI v2 and v3 — even if they don't say \"migrate\" or \"upgrade\" explicitly.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2781,2782,2785,2788,2789],{"name":20,"slug":21,"type":15},{"name":2783,"slug":2784,"type":15},"Migration","migration",{"name":2786,"slug":2787,"type":15},"Next.js","next-js",{"name":13,"slug":14,"type":15},{"name":17,"slug":18,"type":15},"2026-07-12T08:48:25.08774",{"slug":4,"name":4,"fn":5,"description":6,"org":2792,"tags":2793,"stars":25,"repoUrl":26,"updatedAt":27},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2794,2795,2796,2797],{"name":23,"slug":24,"type":15},{"name":20,"slug":21,"type":15},{"name":13,"slug":14,"type":15},{"name":17,"slug":18,"type":15},{"items":2799,"total":1888},[2800,2807,2815],{"slug":2763,"name":2763,"fn":2764,"description":2765,"org":2801,"tags":2802,"stars":25,"repoUrl":26,"updatedAt":2774},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2803,2804,2805,2806],{"name":23,"slug":24,"type":15},{"name":20,"slug":21,"type":15},{"name":2771,"slug":2772,"type":15},{"name":17,"slug":18,"type":15},{"slug":2776,"name":2776,"fn":2777,"description":2778,"org":2808,"tags":2809,"stars":25,"repoUrl":26,"updatedAt":2790},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2810,2811,2812,2813,2814],{"name":20,"slug":21,"type":15},{"name":2783,"slug":2784,"type":15},{"name":2786,"slug":2787,"type":15},{"name":13,"slug":14,"type":15},{"name":17,"slug":18,"type":15},{"slug":4,"name":4,"fn":5,"description":6,"org":2816,"tags":2817,"stars":25,"repoUrl":26,"updatedAt":27},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2818,2819,2820,2821],{"name":23,"slug":24,"type":15},{"name":20,"slug":21,"type":15},{"name":13,"slug":14,"type":15},{"name":17,"slug":18,"type":15}]