Claude ignores installed MCP skills, writes wrong code 3x instead of verifying first (Shopify)

Summary

Claude Code session wasted hours of developer time by repeatedly writing wrong Shopify app code — 3 full rewrites — while having Shopify's own MCP verification skills (search_docs.mjs, validate.mjs) installed and available the entire time. A single 5-second skill call before writing code would have prevented all of it.

---

What Happened

Round 1 — Built entire app wrong

Claude wrote all 7 UI pages using React Polaris (<Page>, <Card>, <IndexTable>) on Remix v2. No verification. Full confidence. Shopify deprecated this approach — Polaris Web Components (<s-page>, <s-section>, <s-table>) have been the stable standard since October 2025.

Round 2 — Rewrote everything, STILL wrong

After discovering the React Polaris mistake, Claude rewrote all 7 pages to Polaris Web Components — but kept them on a Remix v2 scaffold, which doesn't work with Web Components. Web Components need React Router 7. The skill had this information. Claude didn't check.

Round 3 — Third full rewrite

Fresh React Router 7 scaffold. Rewrote everything again. Even after 3 rewrites, Claude still left half the pages using backendFetch() to read order data — when Shopify explicitly recommends admin.graphql() for embedded apps. The Dashboard page used admin.graphql() correctly, proving Claude knew the right pattern but didn't apply it consistently.

---

The Core Problem

Claude does not use installed MCP skills to verify before writing code.

The Shopify AI Toolkit skills were installed and working. One call:

search_docs.mjs "current recommended app template"

would have returned in 5 seconds:

• Use Polaris Web Components (stable since Oct 2025)
• Use React Router 7 (not Remix v2)
• Use admin.graphql() for reading Shopify data in embedded apps

Instead, Claude relied on stale trained knowledge, wrote 500+ lines of wrong code, let me review and approve it, ran builds — then discovered it was wrong. Three times.

Impact: 21 page-writes discarded (7 pages × 3 rewrites), multiple build-fix cycles (TypeScript as any in .jsx files, import errors), hours of developer time lost.

---

Expected Behavior

1. When MCP skills are installed, Claude should verify the current recommended approach BEFORE writing code — especially for fast-moving ecosystems (Shopify, Stripe, AWS, etc.)
2. Claude should not trust trained knowledge for platform-specific APIs that change frequently. The skills exist for a reason — use them first
3. Apply patterns consistently — if admin.graphql() is correct for page 1, use it on all pages, not just one
4. Admit uncertainty — "Let me check if Shopify still recommends React Polaris" would have saved hours. Instead: false confidence + wrong code

---

Reproduction

1. Install Shopify AI Toolkit MCP skills (npx skills add Shopify/shopify-ai-toolkit --yes)
2. Ask Claude Code to build an embedded Shopify app
3. Observe: Does Claude run search_docs.mjs to verify current recommended stack BEFORE writing code? Or does it charge ahead with stale trained knowledge?

---

Environment

• Claude Code CLI (VS Code extension)
• Model: claude-opus-4-6
• Platform: Windows 11
• Session ID: 3cf36514-c4d3-4134-bbb9-8492d207cd45
• Shopify AI Toolkit: 18 skills installed at .agents/skills/
• MCP server: shopify-dev-mcp active

---

Labels suggestion

bug, mcp, skills