{"slug": "claude-code-kept-hardcoding-w-232px-on-my-sidebar-links-until-i-started-feeding", "title": "Claude Code kept hardcoding w-[232px] on my sidebar links until I started feeding it the parent's flex rules", "summary": "A developer built a 356-line Manifest V3 Chrome extension that captures a UI element's parent layout rules, rendered box, and non-default CSS and formats them into a prompt block for AI coding tools like Claude Code and Cursor. The tool addresses a common failure where models given screenshots hardcode pixel widths such as w-[232px] instead of inheriting flex container behavior, while DevTools computed-style dumps return hundreds of browser defaults with no container context. The extension runs entirely locally with only the activeTab permission and no backend, and is distributed through the Chrome Web Store with five free captures.", "body_md": "If you paste a screenshot of a sidebar into Claude Code or Cursor and ask for the same nav item, you usually get `w-[232px]` and a fresh `flex` wrapper. The screenshot shows a 232px wide link. It doesn't show that the link fills a `flex-col` nav with `align-items: stretch`, so the model copies the pixel width and the layout stops flexing.\n\nCopying computed styles out of DevTools has the opposite problem. You get a few hundred properties for the element, most of them browser defaults, and nothing at all about the container it sits in.\n\nWhat works better is pasting the parent's layout explicitly, plus the element's rendered box and only its non-default CSS. Here's that same nav link formatted as a prompt block:\n\n```\n### UI Element: a.nav-item.is-active\n- Selector: aside.sidebar > nav > a.nav-item.is-active\n- Box: 232x36 at (12, 208)\n- Parent nav: display: flex; flex-direction: column; align-items: stretch; gap: 2px\n- Children: svg.icon, span.label, span.badge\n- Text: \"Billing and invoices 3\"\n\nTailwind v4: flex flex-row items-center gap-2 px-3 w-full h-9 text-sm font-medium leading-5 text-[#f4f4f5] bg-[#27272a] rounded-md\n\nComputed CSS (non-default):\ndisplay: flex; flex-direction: row; align-items: center; gap: 8px;\npadding: 0px 12px; width: 100%; height: 36px; font-size: 14px;\nfont-weight: 500; line-height: 20px; color: rgb(244, 244, 245);\nbackground-color: rgb(39, 39, 42); border-radius: 6px;\n\nFix / Refactor this element: keep the parent layout constraints, use the Tailwind v4 classes above, and apply:\n```\n\nThe width comes out as `w-full` because the link's width matches the nav's content box. With the parent's flex column spelled out, the model has a reason to keep it instead of adding a wrapper.\n\nI wrapped this into a tiny 356-line Manifest V3 Chrome extension (`activeTab` only, no backend, 100% local in-browser execution): hit \"Pick Element on Page\", click an element, and it copies that block.\n\nSite: [https://picolabs.app](https://picolabs.app)\n\nChrome Web Store (includes 5 free captures): [https://chromewebstore.google.com/detail/iokjpoihcpmmdfajnjmlghcclgdlmpgi](https://chromewebstore.google.com/detail/iokjpoihcpmmdfajnjmlghcclgdlmpgi)", "url": "https://wpnews.pro/news/claude-code-kept-hardcoding-w-232px-on-my-sidebar-links-until-i-started-feeding", "canonical_source": "https://dev.to/picolabs/claude-code-kept-hardcoding-w-232px-on-my-sidebar-links-until-i-started-feeding-it-the-parents-l19", "published_at": "2026-10-29 13:34:51+00:00", "updated_at": "2026-10-29 13:47:36.455317+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "ai-products"], "entities": ["Claude Code", "Cursor", "Chrome Web Store", "picolabs.app", "Tailwind"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/claude-code-kept-hardcoding-w-232px-on-my-sidebar-links-until-i-started-feeding", "markdown": "https://wpnews.pro/news/claude-code-kept-hardcoding-w-232px-on-my-sidebar-links-until-i-started-feeding.md", "text": "https://wpnews.pro/news/claude-code-kept-hardcoding-w-232px-on-my-sidebar-links-until-i-started-feeding.txt", "jsonld": "https://wpnews.pro/news/claude-code-kept-hardcoding-w-232px-on-my-sidebar-links-until-i-started-feeding.jsonld"}}