How to fix a responsive layout bug with a coding agent
To fix a layout that breaks at one screen width, resize your dev site until it breaks, press C and pin the broken element right there. Tencil hands your agent your viewport width, the element’s size and position, its markup and its component, so it fixes the right breakpoint.
npx tencilWhat you need
- Tencil set up in your project with Claude Code or T3 Code
- Your dev server running
Find the width where it breaks
Resize the window, or use your browser’s device toolbar, until the text overflows, the columns collide or the icon drops out of line.
Pin it at that width
Press
Cand click the element that breaks, not its container. Describe what you expected, such as “these three cards should stack below this width instead of squeezing”.Add a screenshot when words fall short
Attach one to the pin. The agent gets it with the element context: the viewport and pixel ratio, the element’s size and position, its markup and, in React apps, its component and source file.
Check the fix at the same width
The page reloads in place, so you check the fix at the width you found it. Then widen and narrow the window around it, and reply on the pin if another width breaks.
Questions
What people run into along the way.
It works in your repository, so it reads your CSS, Tailwind config or design tokens, and gets the width you pinned at from Tencil.
Tencil hands over the width you saw; whether the agent checks others is up to the agent. Ask for it in the pin.
Read next
More on how it works and what it is good for.
- Visual bugsOverflowing text, a broken layout at one width, a misaligned icon: pin the bug on the element and your coding agent gets the markup, size and viewport to fix it.
- ReactIn React apps, Tencil hands your coding agent the component you clicked and the components that render it, each with its file and line. Next.js, Vite, TanStack Start and more.
- How it worksPress C on your dev site, click an element and say what should change. What Tencil captures, how the daemon hands it to your coding agent, and how the result reloads on the page.