mir-frontend-vanilla
SolidMake 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
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-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-vue
Make 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
mir-frontend-react-next
Make It Right (Next.js module). Next.js 16 App Router mechanics — the footguns that exist only in this meta-framework, not in React generally. Carries the Server/Client Component boundary and how one 'use client' pulls its entire import graph into the browser bundle; Server Actions as public POST endpoints that must re-authenticate and re-authorize on every call (hiding the button is not access control); proxy.ts as an optimistic redirect and never the sole auth gate — this framework has a repeating middleware-bypass advisory class (CVE-2025-29927, CVE-2026-45109); the opt-in caching layers after Next 16 ('use cache', cacheComponents, cacheTag, revalidateTag vs updateTag vs revalidatePath); request waterfalls from sequential awaits in nested layouts; and NEXT_PUBLIC_ vars inlined at build time. Chains: mir-frontend → mir-frontend-react → this. TRIGGER only when the React meta-framework is Next.js — work in app/, page.tsx, layout.tsx, route.ts, proxy.ts or middleware.ts, any 'use server' file, next.config.ts,