[BUG] Code quality issues caused avoidable rework and client billable hours

Preflight Checklist

• [x] I have searched existing issues and this hasn't been reported yet
• [x] This is a single bug report (please file separate reports for different bugs)
• [x] I am using the latest version of Claude Code

What's Wrong?

During a web development session, Claude was asked to implement two features on a Laravel/PHP website:

A Table of Contents (TOC) for blog posts
A contextual eSIM popup on blog pages
Claude implemented both features but made the following mistakes:

Mistake 1 — CSS placed inline instead of in the stylesheet
The popup CSS was written directly inside the Blade template file as a <style> block instead of being added to the existing single_featured_post.css stylesheet. A developer had to manually refactor this afterwards.

Mistake 2 — TOC scroll and navigation bugs not caught before pushing
The TOC had two bugs that Claude did not catch: clicking a TOC link caused a full page navigation instead of smooth scrolling, and the scroll position tracking highlighted the wrong heading while reading. Both required a separate developer to diagnose and fix.

Impact:
These mistakes required ~3.5 hours of additional developer time at $20/hour, costing the client approximately $70 in avoidable billable hours.

What Should Happen?

Expected behaviour:
Claude should write production-ready code from the first attempt — CSS in proper stylesheets, JavaScript tested for scroll and navigation edge cases before being marked as complete.

Suggestion:
When implementing frontend features, Claude should follow a checklist before pushing: CSS belongs in stylesheets, JS scroll/navigation interactions should be verified, and inline styles in templates should be avoided unless explicitly requested.

Error Messages/Logs

Steps to Reproduce

Steps to Reproduce:

Ask Claude to implement a frontend feature involving CSS styling (e.g. a popup or sidebar component) on an existing website with a dedicated stylesheet already in place
Ask Claude to implement a JavaScript scroll-based interaction (e.g. a Table of Contents with active state highlighting and smooth scroll navigation)
Review the output — Claude places CSS inline in the template file instead of the existing stylesheet
Test the JavaScript interaction — scroll tracking and link navigation contain bugs that Claude did not catch before pushing
A second developer must spend additional time refactoring the CSS and fixing the JS bugs
Expected: Claude writes CSS into the existing stylesheet and verifies JS interactions work correctly before marking the task complete

Actual: CSS is placed inline in the template, JS has undetected scroll and navigation bugs — both require a separate developer to fix at additional cost

Claude Model

Sonnet (default)

Is this a regression?

I don't know

Last Working Version

_No response_

Claude Code Version

Claude Code 2.1.183

Platform

AWS Bedrock

Operating System

macOS

Terminal/Shell

Terminal.app (macOS)

Additional Information

_No response_