Claude Code struggles with multi-file frontend refactoring (Mega Menu implementation)

Summary

I switched from Cursor to Claude Code expecting stronger performance. However, a relatively simple task — adding a Mega Menu dropdown to a static HTML website's navbar — required 3+ failed attempts and complete reverts before I had to fall back to Cursor to fix it.

What went wrong

Task: Add a "Products" Mega Menu to a static HTML website navbar, consolidating 3 existing nav items (美妝PIF, AI Brand Shield, GEO) into a dropdown panel with title + description per item, plus a 4th new item.

Claude Code's failures (repeated 3 times):

1. Modified 12 HTML files unnecessarily instead of following the existing data-driven JS pattern already in the codebase
2. Used display:none/block which blocks CSS transitions — no smooth animation possible
3. CSS selector bug: used .nav ul instead of .nav > ul, causing styles to cascade into nested elements and flattening dropdown items into the main navbar

Each failure required a full revert.

What Cursor did differently (solved in one attempt)

• Kept all 12 HTML files untouched
• Centralized data in site-config.js as a productMenu object
• Built all dropdown DOM dynamically in main.js
• Used opacity/visibility/transform for smooth CSS animation
• Fixed .nav ul → .nav > ul correctly

Impact

Significant developer time wasted. I originally switched from Cursor to Claude Code expecting better results, but this experience damaged my confidence in the tool.

Suggestion

Claude Code should read and understand existing code architecture before making changes, rather than jumping to direct HTML/file modifications. It should recognize data-driven patterns and follow them.