From frontend
Guides framework upgrades, API migrations, and major dependency bumps ensuring zero regressions via git baselines, Playwright screenshots, research, and regression tests.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend:migrationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Framework upgrades, major dep bumps, config migrations. The core challenge is proving zero regressions — which requires baselines captured on the TRUE pre-change state.
Framework upgrades, major dep bumps, config migrations. The core challenge is proving zero regressions — which requires baselines captured on the TRUE pre-change state.
Before planning, researching, or writing anything:
git status
git diff package.json
If package.json is already modified — deps may already be upgraded. Baselines taken now reflect post-upgrade state and are WORTHLESS for comparison. You must restore old deps before capturing baselines (see Phase 3a).
If package.json is clean — capture all baselines before touching it.
This is non-negotiable. Baselines on upgraded deps cannot prove zero regressions. Ask yourself: "What state was the code in BEFORE any migration work started?" That is the state you baseline against.
REQUIRED: Use agent:research skill. All four channels — local investigation, docs/MCPs, online research, verify and synthesize.
For each breaking change found in the migration guide, grep the codebase to check if it applies. Don't assume — verify.
Output: A list of concrete changes needed, with file paths and line numbers.
Do NOT assume version numbers (.nvmrc, TypeScript, etc.), which config blocks to keep or remove, or whether a deprecated pattern should be cleaned up. ASK.
git stash
pnpm install
# verify project builds with OLD deps
<loc> URL to flat listfrontend:pixel-perfect: getBoundingClientRect() on every visible section, save as JSONgit stash pop
pnpm install
Existing tests probably don't cover all routes. Write new tests that:
Run new tests — they must pass on current state BEFORE any migration edits.
Per frontend:validate: edit ONE file, validate (build + lint + type-check), confirm 0 new errors, then next file. Never batch edits without validating between them.
Per agent:done:
frontend:pixel-perfect, report diff table, 0px diff requiredNot optional during migration:
agent:research — Phase 1frontend:pixel-perfect — Phase 3b and 6 measurementsfrontend:validate — Phase 5 per-file validationagent:done — Phase 6 completion checklistfrontend:playwright — all browser verificationThese are real failures from an actual migration attempt:
| Failure | Why It's Wrong |
|---|---|
| Taking "before" baselines after deps upgraded | Baselines reflect post-upgrade state — comparison is meaningless |
| Assuming version numbers instead of asking | User wanted Node 24, not 22. ASK. |
| "Run build and check browser" as verification | Proves nothing about regressions without baselines to compare against |
| Not using sitemap as route source of truth | Guessing at routes misses pages |
| Not writing new tests before migration | If existing tests don't cover all routes, regressions slip through |
| Batch-editing files without validating between | Impossible to tell which change broke what |
| Skipping section measurements | Screenshots alone prove nothing per pixel-perfect |
Not checking git status first | Led to worthless baselines |
# Astro 6 Migration Plan
**Current state (from `git diff package.json`):**
- package.json is MODIFIED but NOT committed
- Old (committed): Astro 5.17.3, TS 5.9.3, Svelte 5.53, vite-plugin-svelte 6.2.4
- New (working tree): Astro 6.1.2, TS 6.0.2, Svelte 5.55.1, vite-plugin-svelte 7.0.0
- pnpm-lock.yaml also modified
**Implication:** Baselines MUST be captured after git stash restores old deps.
### Task 0: Restore old deps for baseline capture
- [ ] git stash (save upgraded package.json + lockfile)
- [ ] pnpm install (restore old lockfile)
- [ ] pnpm astro build — verify project builds with old deps
### Task 1: Capture baselines on OLD deps
- [ ] Build: save full log, record exact page count
- [ ] Sitemap: copy all XML files, extract every <loc> URL to flat list
- [ ] Screenshots: every sitemap URL via Playwright, assert no console errors
- [ ] Sections: measure every visible section via getBoundingClientRect(), save JSON
- [ ] Tests: run existing tests, save output, record pass/fail counts
### Task 2: Restore upgraded deps
- [ ] git stash pop
- [ ] pnpm install
- [ ] pnpm astro build (verify still works)
### Task 3: Write regression tests BEFORE code changes
- [ ] tests/routes.spec.ts — sitemap-driven, every URL, assert loads with content
- [ ] tests/sections.spec.ts — homepage sections + detail pages (DE+EN)
- [ ] Run all tests — must pass before any migration edits
### Task 4-7: Code changes (one file, validate after each)
- .nvmrc: update version (ASK which — don't assume)
- content.config.ts: z import from astro:content → astro/zod
- content.config.ts: deprecated Zod validators → Zod 4 equivalents
- astro.config.mjs: remove stale config blocks (ASK which — don't assume)
### Task 8: Post-migration verification
- [ ] Build: page count matches baseline exactly
- [ ] Sitemap diff: identical to baseline URL list
- [ ] All tests pass (old + new)
- [ ] Screenshot every route, compare to baseline
- [ ] Measure sections, compare to baseline (0px diff required)
- [ ] Full validation (lint, type-check, svelte-check) exits 0
- [ ] Report with proof: exit codes, page counts, sitemap diff, test results, measurement table
Provides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
npx claudepluginhub fubits1/svelte-skills --plugin frontend