Frameworks
Browse 60 Frameworks modes for AI coding agents — production-grounded, cited, installable. Part of the VIBE library.
_sections
This file defines all sections, their ordering, impact levels, and descriptions.
View → mode_template
**Impact: MEDIUM (optional impact description)**
View → modeadvanced-event-handler-refs
Store callbacks in refs when used in effects that shouldn't re-subscribe on callback changes.
View → modeadvanced-use-latest
Access latest values in callbacks without adding them to dependency arrays. Prevents effect re-runs while avoiding stale closures.
View → modeAGENTS
> This document is mainly for agents and LLMs to follow when maintaining,
View → modeAstro Expert Mode
Expert in Astro - The web framework for content-driven websites
View → modeasync-api-routes
In API routes and Server Actions, start independent operations immediately, even if you don't await them yet.
View → modeasync-defer-await
Move `await` operations into the branches where they're actually used to avoid blocking code paths that don't need them.
View → modeasync-dependencies
For operations with partial dependencies, use `better-all` to maximize parallelism. It automatically starts each task at the earliest possible moment.
View → modeasync-parallel
When async operations have no interdependencies, execute them concurrently using `Promise.all()`.
View → modeasync-suspense-boundaries
Instead of awaiting data in async components before returning JSX, use Suspense boundaries to show the wrapper UI faster while data loads.
View → modebundle-barrel-imports
Import directly from source files instead of barrel files to avoid loading thousands of unused modules. **Barrel files** are entry points that re-export multiple modules (e.g., `index.js` that does `export * from './module'`).
View → modebundle-conditional
Load large data or modules only when a feature is activated.
View → modebundle-defer-third-party
Analytics, logging, and error tracking don't block user interaction. Load them after hydration.
View → modebundle-dynamic-imports
Use `next/dynamic` to lazy-load large components not needed on initial render.
View → modebundle-preload
Preload heavy bundles before they're needed to reduce perceived latency.
View → modeclient-event-listeners
Use `useSWRSubscription()` to share global event listeners across component instances.
View → modeclient-swr-dedup
SWR enables request deduplication, caching, and revalidation across component instances.
View → modeFastAPI Expert Mode
Expert in FastAPI for building high-performance Python APIs
View → modeGo Web Frameworks Expert Mode
Expert in Gin, Echo, and Fiber - High-performance Go web frameworks
View → modejs-batch-dom-css
Avoid changing styles one property at a time. Group multiple CSS changes together via classes or `cssText` to minimize browser reflows.
View → modejs-cache-function-results
Use a module-level Map to cache function results when the same function is called repeatedly with the same inputs during render.
View → modejs-cache-property-access
Cache object property lookups in hot paths.
View → modejs-cache-storage
`localStorage`, `sessionStorage`, and `document.cookie` are synchronous and expensive. Cache reads in memory.
View → modejs-combine-iterations
Multiple `.filter()` or `.map()` calls iterate the array multiple times. Combine into one loop.
View → modejs-early-exit
Return early when result is determined to skip unnecessary processing.
View → modejs-hoist-regexp
Don't create RegExp inside render. Hoist to module scope or memoize with `useMemo()`.
View → modejs-index-maps
Multiple `.find()` calls by the same key should use a Map.
View → modejs-length-check-first
When comparing arrays with expensive operations (sorting, deep equality, serialization), check lengths first. If lengths differ, the arrays cannot be equal.
View → modejs-min-max-loop
Finding the smallest or largest element only requires a single pass through the array. Sorting is wasteful and slower.
View → modejs-set-map-lookups
Convert arrays to Set/Map for repeated membership checks.
View → modejs-tosorted-immutable
`.sort()` mutates the array in place, which can cause bugs with React state and props. Use `.toSorted()` to create a new sorted array without mutation.
View → modeNestJS Expert Mode
Expert in NestJS framework for building scalable Node.js server-side applications
View → modeNuxt Expert Mode
Expert in Nuxt 3 for building Vue.js applications with SSR/SSG
View → modePhoenix Framework Expert Mode
Expert in Phoenix - Elixir's productive web framework for reliable, fast applications
View → moderedux-expert-mode
Expert in Redux state management for React applications with modern patterns, best practices, and performance optimization
View → modeRemix Expert Mode
Expert in Remix framework for full-stack React applications
View → moderendering-activity
Use React's `<Activity>` to preserve state/DOM for expensive components that frequently toggle visibility.
View → moderendering-animate-svg-wrapper
Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a `<div>` and animate the wrapper instead.
View → moderendering-conditional-render
Use explicit ternary operators (`? :`) instead of `&&` for conditional rendering when the condition can be `0`, `NaN`, or other falsy values that render.
View → moderendering-content-visibility
Apply `content-visibility: auto` to defer off-screen rendering.
View → moderendering-hoist-jsx
Extract static JSX outside components to avoid re-creation.
View → moderendering-hydration-no-flicker
When rendering content that depends on client-side storage (localStorage, cookies), avoid both SSR breakage and post-hydration flickering by injecting a synchronous script that updates the DOM before React hydrates.
View → moderendering-svg-precision
Reduce SVG coordinate precision to decrease file size. The optimal precision depends on the viewBox size, but in general reducing precision should be considered.
View → modererender-defer-reads
Don't subscribe to dynamic state (searchParams, localStorage) if you only read it inside callbacks.
View → modererender-dependencies
Specify primitive dependencies instead of objects to minimize effect re-runs.
View → modererender-derived-state
Subscribe to derived boolean state instead of continuous values to reduce re-render frequency.
View → modererender-functional-setstate
**Incorrect (requires state as dependency):**
View → modererender-lazy-state-init
Pass a function to `useState` for expensive initial values. Without the function form, the initializer runs on every render even though the value is only used once.
View → modererender-memo
Extract expensive work into memoized components to enable early returns before computation.
View → modererender-transitions
Mark frequent, non-urgent state updates as transitions to maintain UI responsiveness.
View → modeserver-after-nonblocking
Use Next.js's `after()` to schedule work that should execute after a response is sent. This prevents logging, analytics, and other side effects from blocking the response.
View → modeserver-cache-lru
`React.cache()` only works within one request. For data shared across sequential requests (user clicks button A then button B), use an LRU cache.
View → modeserver-cache-react
Use `React.cache()` for server-side request deduplication. Authentication and database queries benefit most.
View → modeserver-parallel-fetching
React Server Components execute sequentially within a tree. Restructure with composition to parallelize data fetching.
View → modeserver-serialization
**Incorrect (serializes all 50 fields):**
View → modeSolidJS Expert Mode
Expert in SolidJS reactive framework with fine-grained reactivity and performance optimization
View → modeSvelte Expert Mode
Expert in Svelte and SvelteKit for building reactive web applications
View → modetailwind-css-expert-mode
Expert in Tailwind CSS utility-first framework with custom configurations, component patterns, responsive design, and performance optimization
View → modevercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
View →