Claude Code kept hardcoding w-[232px] on my sidebar links until I started feeding it the parent's flex rules

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.

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. Copying 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. What 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: UI Element: a.nav-item.is-active - Selector: aside.sidebar nav a.nav-item.is-active - Box: 232x36 at 12, 208 - Parent nav: display: flex; flex-direction: column; align-items: stretch; gap: 2px - Children: svg.icon, span.label, span.badge - Text: "Billing and invoices 3" Tailwind 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 Computed CSS non-default : display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 0px 12px; width: 100%; height: 36px; font-size: 14px; font-weight: 500; line-height: 20px; color: rgb 244, 244, 245 ; background-color: rgb 39, 39, 42 ; border-radius: 6px; Fix / Refactor this element: keep the parent layout constraints, use the Tailwind v4 classes above, and apply: The 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. I 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. Site: https://picolabs.app https://picolabs.app Chrome Web Store includes 5 free captures : https://chromewebstore.google.com/detail/iokjpoihcpmmdfajnjmlghcclgdlmpgi https://chromewebstore.google.com/detail/iokjpoihcpmmdfajnjmlghcclgdlmpgi