← ClaudeAtlas

vue-improvelisted

Vue 3 + TypeScript + Vite + Pinia frontend code improvement. Covers component design, setup TDZ pitfalls, watchEffect traps, Pinia store patterns, Vite build optimization, chunk hash deployment. Triggers: Vue, component, Pinia, Vite, setup, watch, watchEffect, ref, routing, bundle, chunk, TypeScript, TS, frontend, SPA, reactivity
ebziw/repo-medic · ★ 0 · Web & Frontend · score 75
Install: claude install-skill ebziw/repo-medic
# vue-improve — Vue 3 Frontend Code Improvement Self-contained skill. First-version skeleton; references pending (contributions welcome). ## 🛑 MANDATORY WORKFLOW — check all before declaring done ### Phase 0: Reconnaissance - [ ] **Read the existing Vue project structure**: `package.json` + `vite.config.*` + `tsconfig.json` + `src/` layout - [ ] **List components**: `find src -name "*.vue" | head -50` to gauge scale - [ ] **List stores** (Pinia): `find src/stores -name "*.ts" 2>/dev/null` - [ ] **List routes**: `find src/router -name "*.ts" 2>/dev/null` - [ ] **Current bundle size**: `pnpm build && du -sh dist/` or `npm run build` - [ ] 🛑 **GATE**: enter Phase 1 only once the scale is known (skip heavy optimization for small projects with < 50 components) ### Phase 1: Anti-pattern scan - [ ] **setup TDZ late-declared binding references**: `rg "watch\(.*\)" src/ | head -20` to find potential TDZ risks - [ ] **watchEffect writing its own dependency source**: `rg "watchEffect" src/`; manually review each callback - [ ] **One-shot consume flag leaks**: `rg "let .* = true" src/ | rg -v "test"` to find watch flags - [ ] **Destructuring shadowing an outer ref**: `rg "const \[.*\] = .*await Promise.all" src/` - [ ] **Pinia store destructure losing reactivity**: `rg "const \{.*\} = use\w+Store\(\)" src/` (should be `storeToRefs`) - [ ] **Missed selector-root scope checks**: worker / instance sharing in third-party libraries (pdf.js / ECharts) (see the Known pitfalls section be