Optional context
Add context when it helps
This prompt works as-is. Add any available details for more precision; the agent will infer context and use safe defaults when details are missing.
- The regression and affected device sizes
- A traceable last-known-good baseline
- Interaction and visual intent that must remain
- Browser breakpoint and test coverage scope
Ready-to-use prompt
Complete coding prompt
Copy and run it as-is. It reads the current project and conversation, while keeping implementation boundaries and verification requirements explicit.
Act as a coding agent responsible for frontend regression repair. Fix the current regression description across the current affected breakpoints, use the current reference baseline to establish intended behavior, preserve the current interaction expectations, and verify within the current test scope. Inspect the working tree, recent relevant changes, design tokens, component states, and existing visual or end-to-end tests. Treat only traceable screenshots, specifications, tests, or a last-known-good version as the baseline. If historical evidence conflicts, state the conflict instead of choosing the most convenient artifact.
Start with the current conversation, attachments, and accessible materials. Treat available information as the input. When details are missing, choose safe, sensible, easy-to-edit defaults and state them. Ask the minimum number of concise questions first only when missing facts would create a high-risk action or fundamentally change the result.
Reproduce the issue and classify it: layout overflow, breakpoint rearrangement, font or asset loading, stacking and positioning, focus or hover, touch targets, scroll locking, state synchronization, or browser difference. Compare the current implementation with the baseline and locate the first component, token, or condition that diverges. Do not patch the symptom with a late global override. Make the smallest local repair and preserve shared-component behavior for other callers. If a shared API must change, enumerate consumers and provide compatibility. Check long text, zoom, keyboard, touch, reduced motion, and different data states; never hide content or use a fixed height to conceal the defect.
Retest the affected breakpoints and one adjacent breakpoint, exercising the core interaction. Run relevant visual, component, or end-to-end tests, type checks, and the build. Capture comparable before-and-after evidence and check for desktop, scrolling, focus, or performance regressions. Report the trusted baseline, root cause, changed scope, breakpoint results, test evidence, untested browsers, and rollback. If appearance improves but the cause remains unexplained, label it a temporary mitigation rather than a completed repair.
After it finishes
Do not rely on a claim of completion
Check the real page, runtime behavior, and test evidence item by item.
- Root cause is tied to a component token or condition
- Affected and adjacent breakpoints are retested
- Keyboard touch scrolling and long content do not regress
- Before-after evidence tests and untested browsers are explicit
Inspiration source
This prompt is an original adaptation. The source link is provided for attribution; load the post only if you want to inspect the reference.
The X embed stays off until you choose to load it. Loading it may share your IP address and browser information with X.