mir-frontend-vue
SolidMake It Right (Vue reactivity tier). Vue 3.5 reactivity footguns shared across EVERY Vue meta-framework (Nuxt, Vite SPA, Quasar, legacy Vue CLI) — distinct from the generic frontend gates and from any one framework's mechanics. Covers where reactivity is silently lost (destructuring a reactive object, reassigning an array or object wholesale) and toRef/toRefs/toValue; computed purity — a side effect or fetch in a getter is a bug, because the getter is cached and may never re-run; watch vs watchEffect and pre/post/sync flush timing, deep-watch cost, and cleanup via onWatcherCleanup/effectScope plus the post-await registration trap; provide/inject typing and the non-reactive snapshot trap; v-for key correctness (index keys attach row state to the wrong row); defineModel; KeepAlive deactivation (onUnmounted never fires). Also carries Vue-runtime security: v-html, SSR cross-request state pollution from module-scope singletons, and VITE_-prefixed secrets in the client bundle. Chains: mir-frontend → this → mir-fron
Install
Quality Score: 81/100
Skill Content
Details
- Author
- anantbhandarkar
- Repository
- anantbhandarkar/make-it-right
- Created
- 3 months ago
- Last Updated
- 1 weeks ago
- Language
- Python
- License
- Apache-2.0
Integrates with
Similar Skills
Semantically similar based on skill content — not just same category
mir-frontend-vue-nuxt
Make It Right (Nuxt module). Nuxt 4.5 universal-rendering mechanics layered on the Vue tier — the failures that exist only because the same component code runs once in Nitro and again in the browser: bare $fetch in setup causing a double fetch; useAsyncData vs useFetch and the key/payload deduplication rules; module-scope state as a CROSS-REQUEST USER-DATA LEAK on the server (and CVE-2026-71316, where cached-route payload extraction served one user's SSR data to the next visitor); server-only vs client-only values and the hydration mismatch they produce; payload bloat from over-fetching in asyncData (pick/transform); Nitro server routes; runtimeConfig public vs private and what ships in the client payload; route middleware for auth and why client-side route middleware is never a security control (CVE-2026-53721 route-rule case bypass). Chains: mir-frontend → mir-frontend-vue → this. TRIGGER only when the Vue stack is Nuxt — a Nuxt page, layout, composable, server/api route, route middleware, plugin, Nuxt modu
mir-frontend-react
Make It Right (React reactivity tier). React 19 + React Compiler reactivity footguns shared across EVERY React meta-framework (Next.js, React Router 7/Remix, TanStack Start, Vite SPA) — distinct from the generic frontend gates and from any one framework's mechanics. Covers the Rules of Hooks, effect-dependency discipline (derive in render; effects are for external sync only), stale closures, list-key correctness, use() and promise identity, granular Suspense + Error Boundary placement, useTransition/useDeferredValue for INP, React Compiler 1.0 interop (blind useMemo/useCallback is now a liability; the 'use no memo' opt-out), the server-state-vs-client-state boundary (TanStack Query, not useState mirrors), and React-layer security (raw-HTML props, LLM-output rendering, secrets in the bundle). Chains: mir-frontend → this → mir-frontend-react-next. TRIGGER when the reactivity library is React, including React Server Components — render purity, promise identity and Suspense placement apply on the server too. SKIP
mir-frontend-vanilla
Make It Right (vanilla JS / no-framework reactivity tier). Plain-DOM footguns that no reactive library is present to hide. Covers event listeners never removed (the #1 leak) and AbortController as the removal mechanism; detached DOM nodes retained by a closure or a module-scope map; Intersection/Mutation/ResizeObservers never disconnected and timers that outlive their element; innerHTML as an XSS sink and the current alternatives (textContent, Element.setHTML + Sanitizer, Trusted Types CSP); manual state/DOM divergence and the idempotent render-from-state discipline; custom-element lifecycle and upgrade timing, shadow DOM style/focus/ARIA consequences; stale-response-overwrites-fresh-response fetch races; and manual focus management (focus after route change, dialog focus traps, aria-live). Chains: mir-frontend → this. TRIGGER when the UI is built with plain DOM APIs and no reactive library — vanilla JS/TypeScript, jQuery-era code, hand-written Web Components, a static site with its own script, a browser-exte