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
Chrome Web Store (includes 5 free captures): https://chromewebstore.google.com/detail/iokjpoihcpmmdfajnjmlghcclgdlmpgi