claude-code - 💡(How to fix) Fix Feedback: Claude should observe existing layout structure before adding fixed/static UI elements

Feedback from a user session

Session context: Working on a Next.js 16 project — adding branding and fixing logos across a multi-page app.

What happened

Claude added a scrolling footer to a landing page without first observing that the page already had an existing fixed UI slot — the Next.js dev indicator occupying position: fixed; bottom-left. The result was two competing footer-style elements at the bottom of the page. The user had to explicitly point this out and instruct Claude to:

1. Remove the footer it added
2. Disable the framework indicator (devIndicators: false in next.config.ts)
3. Inject a branded replacement at the same existing fixed slot in layout.tsx

The lesson

Before adding any fixed, sticky, or absolute-positioned UI element, Claude should:

• Take a screenshot and scroll the full page to identify what already occupies layout slots
• When a static/fixed element already exists in a position (e.g. bottom-left), work within that slot — replace or restyle it — rather than adding a new element alongside it
• In Next.js projects, the dev indicator occupies bottom-left by default; check devIndicators config before assuming a corner is empty
• General principle: observe existing layout structure first, then design and build around it

User's words

"The right thing is observe the layout and structure 1st the design and build around the existing structure since it already exists."

Suggested improvement

Claude could be prompted or trained to always take a full-page screenshot and check for existing fixed/sticky elements before inserting new ones at common anchor positions (corners, edges).

Submitted via Claude Code session on behalf of user [email protected]