vercel-labs/agent-skills

Vercel's official collection of agent skills

https://skillcdn.ai/gh/vercel-labs/agent-skills

Connect this address to your AI to use these skills. How to connect

Unverified
Default branchmain
Commit1a2c79d
LicenseNone declared
Searchwords and meaning

View on GitHub

Explore this repository

Searches the original text of skills and documents by words and by meaning; display translations are not searched.

Documents

SectionsThis file defines all sections, their ordering, impact levels, and descriptions. The section ID (in parentheses) is the filename prefix used to group rules.skills/react-best-practices/rules/_sections.md
Rule Title HereImpact: MEDIUM (optional impact description)skills/react-best-practices/rules/_template.md
Do Not Put Effect Events in Dependency ArraysEffect Event functions do not have a stable identity. Their identity intentionally changes on every render. Do not include the function returned by useEffectEvent in a useEffect dependency array. Kee…skills/react-best-practices/rules/advanced-effect-event-deps.md
Store Event Handlers in RefsStore callbacks in refs when used in effects that shouldn't re-subscribe on callback changes.skills/react-best-practices/rules/advanced-event-handler-refs.md
Initialize App Once, Not Per MountDo not put app-wide initialization that must run once per app load inside useEffect([]) of a component. Components can remount and effects will re-run. Use a module-level guard or top-level init in t…skills/react-best-practices/rules/advanced-init-once.md
useEffectEvent for Stable Callback RefsAccess latest values in callbacks without adding them to dependency arrays. Prevents effect re-runs while avoiding stale closures.skills/react-best-practices/rules/advanced-use-latest.md
Prevent Waterfall Chains in API RoutesIn API routes and Server Actions, start independent operations immediately, even if you don't await them yet.skills/react-best-practices/rules/async-api-routes.md
Check Cheap Conditions Before Async FlagsWhen a branch uses await for a flag or remote value and also requires a cheap synchronous condition (local props, request metadata, already-loaded state), evaluate the cheap condition first. Otherwis…skills/react-best-practices/rules/async-cheap-condition-before-await.md
Defer Await Until NeededMove await operations into the branches where they're actually used to avoid blocking code paths that don't need them.skills/react-best-practices/rules/async-defer-await.md
Dependency-Based ParallelizationFor operations with partial dependencies, use better-all to maximize parallelism. It automatically starts each task at the earliest possible moment.skills/react-best-practices/rules/async-dependencies.md
Promise.all() for Independent OperationsWhen async operations have no interdependencies, execute them concurrently using Promise.all().skills/react-best-practices/rules/async-parallel.md
Strategic Suspense BoundariesInstead of awaiting data in async components before returning JSX, use Suspense boundaries to show the wrapper UI faster while data loads.skills/react-best-practices/rules/async-suspense-boundaries.md
Prefer Statically Analyzable PathsBuild tools work best when import and file-system paths are obvious at build time. If you hide the real path inside a variable or compose it too dynamically, the tool either has to include a broad se…skills/react-best-practices/rules/bundle-analyzable-paths.md
Avoid Barrel File ImportsImport 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…skills/react-best-practices/rules/bundle-barrel-imports.md
Conditional Module LoadingLoad large data or modules only when a feature is activated.skills/react-best-practices/rules/bundle-conditional.md
Defer Non-Critical Third-Party LibrariesAnalytics, logging, and error tracking don't block user interaction. Load them after hydration.skills/react-best-practices/rules/bundle-defer-third-party.md
Dynamic Imports for Heavy ComponentsUse next/dynamic to lazy-load large components not needed on initial render.skills/react-best-practices/rules/bundle-dynamic-imports.md
Preload Based on User IntentPreload heavy bundles before they're needed to reduce perceived latency.skills/react-best-practices/rules/bundle-preload.md
Deduplicate Global Event ListenersUse useSWRSubscription() to share global event listeners across component instances.skills/react-best-practices/rules/client-event-listeners.md
Version and Minimize localStorage DataAdd version prefix to keys and store only needed fields. Prevents schema conflicts and accidental storage of sensitive data.skills/react-best-practices/rules/client-localstorage-schema.md
Use Passive Event Listeners for Scrolling PerformanceAdd { passive: true } to touch and wheel event listeners to enable immediate scrolling. Browsers normally wait for listeners to finish to check if preventDefault() is called, causing scroll delay.skills/react-best-practices/rules/client-passive-event-listeners.md
Use SWR for Automatic DeduplicationSWR enables request deduplication, caching, and revalidation across component instances.skills/react-best-practices/rules/client-swr-dedup.md
Avoid Layout ThrashingAvoid interleaving style writes with layout reads. When you read a layout property (like offsetWidth, getBoundingClientRect(), or getComputedStyle()) between style changes, the browser is forced to t…skills/react-best-practices/rules/js-batch-dom-css.md
Cache Repeated Function CallsUse a module-level Map to cache function results when the same function is called repeatedly with the same inputs during render.skills/react-best-practices/rules/js-cache-function-results.md
Cache Property Access in LoopsCache object property lookups in hot paths.skills/react-best-practices/rules/js-cache-property-access.md
Cache Storage API CallslocalStorage, sessionStorage, and document.cookie are synchronous and expensive. Cache reads in memory.skills/react-best-practices/rules/js-cache-storage.md
Combine Multiple Array IterationsMultiple .filter() or .map() calls iterate the array multiple times. Combine into one loop.skills/react-best-practices/rules/js-combine-iterations.md
Early Return from FunctionsReturn early when result is determined to skip unnecessary processing.skills/react-best-practices/rules/js-early-exit.md
Use flatMap to Map and Filter in One PassImpact: LOW-MEDIUM (eliminates intermediate array)skills/react-best-practices/rules/js-flatmap-filter.md
Hoist RegExp CreationDon't create RegExp inside render. Hoist to module scope or memoize with useMemo().skills/react-best-practices/rules/js-hoist-regexp.md
Build Index Maps for Repeated LookupsMultiple .find() calls by the same key should use a Map.skills/react-best-practices/rules/js-index-maps.md
Early Length Check for Array ComparisonsWhen comparing arrays with expensive operations (sorting, deep equality, serialization), check lengths first. If lengths differ, the arrays cannot be equal.skills/react-best-practices/rules/js-length-check-first.md
Use Loop for Min/Max Instead of SortFinding the smallest or largest element only requires a single pass through the array. Sorting is wasteful and slower.skills/react-best-practices/rules/js-min-max-loop.md
Defer Non-Critical Work with requestIdleCallbackImpact: MEDIUM (keeps UI responsive during background tasks)skills/react-best-practices/rules/js-request-idle-callback.md
Use Set/Map for O(1) LookupsConvert arrays to Set/Map for repeated membership checks.skills/react-best-practices/rules/js-set-map-lookups.md
Use toSorted() Instead of sort() for Immutability.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.skills/react-best-practices/rules/js-tosorted-immutable.md
Use Activity Component for Show/HideUse React's <Activity> to preserve state/DOM for expensive components that frequently toggle visibility.skills/react-best-practices/rules/rendering-activity.md
Animate SVG Wrapper Instead of SVG ElementMany browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a <div> and animate the wrapper instead.skills/react-best-practices/rules/rendering-animate-svg-wrapper.md
Use Explicit Conditional RenderingUse explicit ternary operators (? :) instead of && for conditional rendering when the condition can be 0, NaN, or other falsy values that render.skills/react-best-practices/rules/rendering-conditional-render.md
CSS content-visibility for Long ListsApply content-visibility: auto to defer off-screen rendering.skills/react-best-practices/rules/rendering-content-visibility.md
Hoist Static JSX ElementsExtract static JSX outside components to avoid re-creation.skills/react-best-practices/rules/rendering-hoist-jsx.md
Prevent Hydration Mismatch Without FlickeringWhen 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…skills/react-best-practices/rules/rendering-hydration-no-flicker.md
Suppress Expected Hydration MismatchesIn SSR frameworks (e.g., Next.js), some values are intentionally different on server vs client (random IDs, dates, locale/timezone formatting). For these expected mismatches, wrap the dynamic text in…skills/react-best-practices/rules/rendering-hydration-suppress-warning.md
Use React DOM Resource HintsImpact: HIGH (reduces load time for critical resources)skills/react-best-practices/rules/rendering-resource-hints.md
Use defer or async on Script TagsImpact: HIGH (eliminates render-blocking)skills/react-best-practices/rules/rendering-script-defer-async.md
Optimize SVG PrecisionReduce SVG coordinate precision to decrease file size. The optimal precision depends on the viewBox size, but in general reducing precision should be considered.skills/react-best-practices/rules/rendering-svg-precision.md
Use useTransition Over Manual Loading StatesUse useTransition instead of manual useState for loading states. This provides built-in isPending state and automatically manages transitions.skills/react-best-practices/rules/rendering-usetransition-loading.md
Defer State Reads to Usage PointDon't subscribe to dynamic state (searchParams, localStorage) if you only read it inside callbacks.skills/react-best-practices/rules/rerender-defer-reads.md
Narrow Effect DependenciesSpecify primitive dependencies instead of objects to minimize effect re-runs.skills/react-best-practices/rules/rerender-dependencies.md
Calculate Derived State During RenderingIf a value can be computed from current props/state, do not store it in state or update it in an effect. Derive it during render to avoid extra renders and state drift. Do not set state in effects so…skills/react-best-practices/rules/rerender-derived-state-no-effect.md

Skipped (2)

These manifests were not served. Fix them and push: the next commit is indexed again.

skills/react-best-practices/AGENTS.mdlink_missing3 links name no file of the repository (./async-defer-await.md, ./async-cheap-condition-before-await.md, ./server-hoist-static-io.md)
skills/react-view-transitions/AGENTS.mdlink_missing20 links name no file of the repository (css-recipes.md, css-recipes.md#persistent-element-isolation, css-recipes.md#backdrop-blur-workaround, ...)