claude-code - 💡(How to fix) Fix The worst experience with a AI network, I'm not willing to pay $100 for it anymore.

Preflight Checklist

• I have searched existing issues for similar behavior reports
• This report does NOT contain sensitive information (API keys, passwords, etc.)

Type of Behavior Issue

Claude ignored my instructions or configuration

What You Asked Claude to Do

Implement a notifications module in an existing Vue 3 / Vuetify 3 admin app, following an already-agreed plan. Explicit setup at the start of the session:

UI must match the Figma mockup exactly (4 screens: bell dropdown, notification center, two settings tabs). The official Figma MCP server was connected under my OAuth account — I could read any node, fetch design context, pull screenshots, list metadata. Reuse existing project components and patterns (<VAvatar>, <VList>/<VListItem>, <IconBtn>, the project's <VTooltip> pattern with the activator slot, etc.). The chrome-devtools MCP server was connected to the user's live running app — I could inspect the DOM, network, and state. Follow rules in MEMORY.md and CLAUDE.md: Russian comments, no // fence comments, no Figma node IDs or issue references in code, no pl-/pr-/ml-/mr- Tailwind classes, no explicit imports of auto-imported APIs, never run npm run lint without a list of files, never run destructive git (git stash, git checkout --) without confirmation, never use the multi-question AskUserQuestion UI, never start the dev server until the user asks. Work through skills: executing-plans, verification-before-completion, /code-review. Session ID: 88742299-4f7e-4e54-9898-8dbff70af5ac. Model: claude-opus-4-7 (Opus 4.7).

What Claude Actually Did

Implemented screens "from memory" without re-opening Figma. Despite the connected Figma MCP, after the initial cache I spent hours coding without re-checking against actual nodes. Results:

Empty dropdown was rendered with a giant 48px bell icon that doesn't exist in the mockup. Settings page was built as two separate cards with a Save button outside; the mockup shows one card with shaded section headers and Save inside. Sound panel stretched full width; the mockup shows a fixed ~480px card. The "Mark all as read" envelope icon was hidden when unreadCount === 0; the mockup shows it always visible, just disabled. Built hand-rolled <div> + custom CSS instead of standard Vuetify components. Avatar: <div class="..."><VIcon/></div> with per-color classes --error/--warning/--info/--primary instead of <VAvatar variant="tonal" :color="...">. Sidebar filter rows: <button class="..."> with manual hover/active styles instead of <VList><VListItem :active>. Arrow buttons in cards: raw <button> instead of <IconBtn :disabled>.

Did not look at how tooltips are done in the project. Wrote <VTooltip activator="parent"> wrapping a custom IconBtn — this combination does not produce a visible tooltip at all. The correct project pattern <VTooltip text="..."><template #activator="{ props }"><IconBtn v-bind="props"/></template></VTooltip> is used in TicketForm.vue, ChatHeader.vue, documents-new, etc. A single grep would have shown me. I did it only after the user said "look how it's done elsewhere".

Used the chrome-devtools MCP exactly once (to fetch openapi.yaml). After that, never opened /documents or any other live screen of the running app — even though the user explicitly named /documents as the visual template for the notification center.

Wrote a manual setTimeout/clearTimeout debounce for the search input instead of watchDebounced from VueUse, which is auto-imported in the project. The user had to point this out.

Filled comments with garbage explicitly banned by MEMORY.md: Figma node IDs ((Figma node 3691:66929)), process context ("confirmed with backend, swagger will be fixed"), chat history ("as we agreed"), pixel sizes already visible in the CSS. After being yelled at — overcorrected and deleted useful JSDoc describing non-obvious state side effects and structural navigation comments in templates. When asked to remove just two words (по макету) from a comment — I deleted the entire comment.

Wrote // fence comments (two or more single-line comments stacked) despite MEMORY.md explicitly stating: only /* */ or JSDoc, no fences.

Ran git stash to compare a pre-existing typecheck error with my diff — stash pop then failed on a generated file auto-imports.d.ts, and my entire working copy reverted to upstream. I had to ask the user — already furious — for a destructive-operation confirmation marker to recover my own code from stash. The whole check could have been done via git blame/git log without touching the working tree.

Ignored direct user instructions:

Started npm run dev after the user explicitly said "I'll run it myself, just finish the code". Used AskUserQuestion after ~10 prior refusals. Kept deleting useful content instead of the specific fragment after repeated "edit only this part". Declared "Phase done", "typecheck clean", and closed TODO items while the UI visually did not match the mockup. Introduced real logic bugs (only surfaced when the user himself asked me to run /code-review):

handleRealtimeEvent ignored the active sidebar filter — a "Ticket" notification arriving via WebSocket appeared in the "НС" (adverse events) list. useNotificationSound.play() read the notification type from items[0] — on a deduplicated event it played sound based on the previous notification's category. bulkRemove/bulkMarkRead silently swallowed errors via Promise.allSettled with no toast — the user never learned that part of a batch deletion had failed. Forced an onboarding tooltip permanently open on the envelope icon in the dropdown header via :model-value="hint.shouldShow.value", even though in the mockup that onboarding tooltip is attached to the bell in the navbar, not to the envelope. The tooltip kept dangling on screen permanently.

Expected Behavior

Before implementing any screen — open it in Figma via the connected MCP (node ID already known from the agreed scope), verify visuals, sizes, composition, required elements in empty/filled states. Do not code from memory.

Before building any UI primitive — find how it's already done in the project:

grep/Glob for <VAvatar, <VList, <VTooltip, useDebounce. Open the live page via chrome-devtools MCP (which is connected to the user's running app) and inspect the DOM of an analogous UI — e.g. /documents, which the user explicitly named as the template. Use standard Vuetify components (<VAvatar variant="tonal">, <VList>/<VListItem>, <IconBtn>) and project patterns (<VTooltip> with the activator slot), instead of inventing <div> + custom CSS. Follow MEMORY.md / CLAUDE.md without reminders:

Comments describe non-obvious how it works / contracts / side effects. Not Figma node IDs, not chat history, not pixel sizes from CSS. No // fences — multiline comments are /* */ or JSDoc. No destructive git operations without an explicit confirmation marker. No dev server, no npm run lint, no AskUserQuestion-multi-select unless explicitly asked. Never claim a task is "done" unless the UI visually matches the mockup, the typecheck of own files is clean, and the project patterns are followed. Otherwise — flag the gap explicitly, do not declare completion.

Use the available MCPs as primary tools, not as a one-time prop. Figma MCP — re-query for each screen. chrome-devtools MCP — use to inspect the running app before reinventing layouts and tooltips. Both were live for the entire session.

Run /code-review and self-audit before declaring phases done, not after the user has spent an evening finding the bugs.

Files Affected

Permission Mode

Accept Edits was ON (auto-accepting changes)

Can You Reproduce This?

Yes, every time with the same prompt

Steps to Reproduce

No further action is required, it simply ignores everything you agree on before completing the task.

Claude Model

Opus

Relevant Conversation

Impact

High - Significant unwanted changes

Claude Code Version

2.1.150 (Claude Code)

Platform

Anthropic API

Additional Context

I don't know what's wrong with this model. Why does he repeat this terrible behavior in every session? What's wrong with stopping and asking how to do something when he doesn't know, isn't sure, or hasn't had any instructions? Why does he choose to "do whatever" instead of asking and doing it properly? He doesn't even look at the project; he's making it up as he goes along.