frontend-react-best-practices

Malicious tool definition detected

Tool: SKILL.md [1/2] Description: --- name: frontend-react-best-practices description: React performance optimization guidelines. Use when writing, reviewing, or refactoring React components to ensure optimal rendering and bundle patterns.

Tool: SKILL.md [2/2] Description: for scroll/touch.

Malicious tool definition detected

Tool: rules/bundle-barrel-imports.md Description: --- title: Avoid Barrel File Imports impact: CRITICAL impactDescription: 200-800ms import cost, slow builds tags: bundle, imports, tree-shaking, barrel-files, performance --- ## Avoid Barrel File Imports Import directly from source files instead of barrel files to avoid loading thousands of unused modules.

Malicious tool definition detected

Tool: rules/bundle-conditional.md Description: --- title: Conditional Module Loading impact: HIGH impactDescription: loads large data only when needed tags: bundle, conditional-loading, lazy-loading --- ## Conditional Module Loading Load large data or modules only when a feature is activated.

Malicious tool definition detected

Tool: rules/bundle-preload.md Description: --- title: Preload Based on User Intent impact: MEDIUM impactDescription: reduces perceived latency tags: bundle, preload, user-intent, hover --- ## Preload Based on User Intent Preload heavy bundles before they're needed to reduce perceived latency.

Malicious tool definition detected

Tool: rules/client-localstorage-schema.md Description: --- title: Version and Minimize localStorage Data impact: MEDIUM impactDescription: prevents schema conflicts, reduces storage size tags: client, localStorage, storage, versioning, data-minimization --- ## Version and Minimize localStorage Data Add version prefix to keys and store only needed fields.

Malicious tool definition detected

Tool: rules/client-passive-event-listeners.md Description: --- title: Use Passive Event Listeners for Scrolling Performance impact: MEDIUM impactDescription: eliminates scroll delay caused by event listeners tags: client, event-listeners, scrolling, performance, touch, wheel --- ## Use Passive Event Listeners for Scrolling Performance Add `{ passive: true }` to touch and wheel event listeners to enable immediate scrolling.

Malicious tool definition detected

Tool: rules/composition-avoid-boolean-props.md Description: --- title: Avoid Boolean Prop Proliferation impact: HIGH tags: [composition, props, architecture] --- # Avoid Boolean Prop Proliferation Don't add boolean props like `isThread`, `isEditing`, `isDMThread` to customize component behavior.

Malicious tool definition detected

Tool: rules/composition-avoid-overabstraction.md Description: --- title: Avoid Over-Abstracting Component APIs impact: HIGH tags: [composition, api, components] --- # Avoid Over-Abstracting Component APIs Prefer composable, element-like APIs over rigid configuration objects.

Malicious tool definition detected

Tool: rules/composition-children-over-render-props.md Description: --- title: Prefer Children Over Render Props impact: MEDIUM tags: [composition, render-props, children] --- # Prefer Children Over Render Props Use `children` for composition instead of `renderX` props.

Malicious tool definition detected

Tool: rules/composition-compound-components.md Description: --- title: Use Compound Components impact: HIGH tags: [composition, compound-components, architecture] --- # Use Compound Components Structure complex components as compound components with shared context.

Malicious tool definition detected

Tool: rules/composition-explicit-variants.md Description: --- title: Create Explicit Component Variants impact: MEDIUM tags: [composition, variants, architecture] --- # Create Explicit Component Variants Instead of one component with many boolean props, create explicit variant components.

Malicious tool definition detected

Tool: rules/composition-state-provider.md Description: --- title: Lift State into Provider Components impact: HIGH tags: [composition, state, provider, architecture] --- # Lift State into Provider Components Move state management into dedicated provider components.

Malicious tool definition detected

Tool: rules/composition-typescript-namespaces.md Description: --- title: Use TypeScript Namespaces for Component Types impact: LOW tags: [typescript, components, patterns] --- # Use TypeScript Namespaces for Component Types Combine a component and its related types using TypeScript namespaces for cleaner imports.

Malicious tool definition detected

Tool: rules/fault-tolerant-error-boundaries.md Description: --- title: Place Error Boundaries at Feature Boundaries impact: HIGH tags: [errors, boundaries, resilience] --- # Place Error Boundaries at Feature Boundaries Add error boundaries around independent features, not just at the top and not around every leaf.

Malicious tool definition detected

Tool: rules/hooks-limit-useeffect.md Description: --- title: Limit useEffect Usage impact: HIGH impactDescription: prevents bugs and improves performance tags: react, hooks, useEffect, patterns --- ## Limit useEffect Usage Use `useEffect` only when absolutely necessary.

Malicious tool definition detected

Tool: rules/hooks-useeffect-named-functions.md Description: --- title: Name useEffect Functions impact: MEDIUM tags: [hooks, useEffect, debugging, readability] --- # Name useEffect Functions Use named function declarations instead of arrow functions in `useEffect`.

Malicious tool definition detected

Tool: rules/rendering-animate-svg-wrapper.md Description: --- title: Animate SVG Wrapper Instead of SVG Element impact: LOW impactDescription: enables hardware acceleration tags: rendering, svg, css, animation, performance --- ## Animate SVG Wrapper Instead of SVG Element Many browsers don't have hardware acceleration for CSS3 animations on SVG elements.

Malicious tool definition detected

Tool: rules/rendering-client-only.md Description: --- title: Use ClientOnly for Browser-Only UI impact: MEDIUM tags: [rendering, hydration] --- # Use ClientOnly for Browser-Only UI Render browser-only components on the client with a stable SSR fallback.

Malicious tool definition detected

Tool: rules/rendering-conditional-render.md Description: --- title: Use Explicit Conditional Rendering impact: LOW impactDescription: prevents rendering 0 or NaN tags: rendering, conditional, jsx, falsy-values --- ## Use Explicit Conditional Rendering Use explicit ternary operators (`?

Malicious tool definition detected

Tool: rules/rendering-content-visibility.md Description: --- title: CSS content-visibility for Long Lists impact: HIGH impactDescription: faster initial render tags: rendering, css, content-visibility, long-lists --- ## CSS content-visibility for Long Lists Apply `content-visibility: auto` to defer off-screen rendering.

Malicious tool definition detected

Tool: rules/rendering-hoist-jsx.md Description: --- title: Hoist Static JSX Elements impact: LOW impactDescription: avoids re-creation tags: rendering, jsx, static, optimization --- ## Hoist Static JSX Elements Extract static JSX outside components to avoid re-creation.

Malicious tool definition detected

Tool: rules/rendering-hydration-no-flicker.md Description: --- title: Prevent Hydration Mismatch Without Flickering impact: MEDIUM impactDescription: avoids visual flicker and hydration errors tags: rendering, ssr, hydration, localStorage, flicker --- ## Prevent Hydration Mismatch Without Flickering 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

Malicious tool definition detected

Tool: rules/rendering-hydration-suppress-warning.md Description: --- title: Suppress Expected Hydration Mismatches impact: LOW-MEDIUM impactDescription: avoids noisy hydration warnings for known differences tags: rendering, hydration, ssr --- ## Suppress Expected Hydration Mismatches In SSR frameworks, some values are intentionally different on server vs client (random IDs, dates, locale/timezone formatting).

Malicious tool definition detected

Tool: rules/rendering-svg-precision.md Description: --- title: Optimize SVG Precision impact: LOW impactDescription: reduces file size tags: rendering, svg, optimization, svgo --- ## Optimize SVG Precision Reduce SVG coordinate precision to decrease file size.

Malicious tool definition detected

Tool: rules/rendering-use-hydrated.md Description: --- title: Use useHydrated for SSR/CSR Divergence impact: MEDIUM tags: [rendering, hydration] --- # Use useHydrated for SSR/CSR Divergence Use `useHydrated` to render safe SSR fallbacks without mismatches.

Malicious tool definition detected

Tool: rules/rendering-usetransition-loading.md Description: --- title: Use useTransition Over Manual Loading States impact: LOW impactDescription: reduces re-renders and improves code clarity tags: rendering, transitions, useTransition, loading, state --- ## Use useTransition Over Manual Loading States Use `useTransition` instead of manual `useState` for loading states.

Malicious tool definition detected

Tool: rules/rerender-dependencies.md Description: --- title: Narrow Effect Dependencies impact: LOW impactDescription: minimizes effect re-runs tags: rerender, useEffect, dependencies, optimization --- ## Narrow Effect Dependencies Specify primitive dependencies instead of objects to minimize effect re-runs.

Malicious tool definition detected

Tool: rules/rerender-derived-state-no-effect.md Description: --- title: Calculate Derived State During Rendering impact: MEDIUM impactDescription: avoids redundant renders and state drift tags: rerender, derived-state, useEffect, state --- ## Calculate Derived State During Rendering If a value can be computed from current props/state, do not store it in state or update it in an effect.

Malicious tool definition detected

Tool: rules/rerender-derived-state.md Description: --- title: Subscribe to Derived State impact: MEDIUM impactDescription: reduces re-render frequency tags: rerender, derived-state, media-query, optimization --- ## Subscribe to Derived State Subscribe to derived boolean state instead of continuous values to reduce re-render frequency.

Malicious tool definition detected

Tool: rules/rerender-functional-setstate.md Description: --- title: Use Functional setState Updates impact: MEDIUM impactDescription: prevents stale closures and unnecessary callback recreations tags: react, hooks, useState, useCallback, callbacks, closures --- ## Use Functional setState Updates When updating state based on the current state value, use the functional update form of setState instead of directly referencing the state variable.

Malicious tool definition detected

Tool: rules/rerender-lazy-state-init.md Description: --- title: Use Lazy State Initialization impact: MEDIUM impactDescription: wasted computation on every render tags: react, hooks, useState, performance, initialization --- ## Use Lazy State Initialization Pass a function to `useState` for expensive initial values.

Malicious tool definition detected

Tool: rules/rerender-memo-with-default-value.md Description: --- title: Extract Default Non-primitive Parameter Value from Memoized Component to Constant impact: MEDIUM impactDescription: restores memoization by using a constant for default value tags: rerender, memo, optimization --- ## Extract Default Non-primitive Parameter Value from Memoized Component to Constant When memoized component has a default value for some non-primitive optional parameter, such as an array, function, or object, cal

Malicious tool definition detected

Tool: rules/rerender-memo.md Description: --- title: Extract to Memoized Components impact: MEDIUM impactDescription: enables early returns tags: rerender, memo, useMemo, optimization --- ## Extract to Memoized Components Extract expensive work into memoized components to enable early returns before computation.

Malicious tool definition detected

Tool: rules/rerender-move-effect-to-event.md Description: --- title: Put Interaction Logic in Event Handlers impact: MEDIUM impactDescription: avoids effect re-runs and duplicate side effects tags: rerender, useEffect, events, side-effects, dependencies --- ## Put Interaction Logic in Event Handlers If a side effect is triggered by a specific user action (submit, click, drag), run it in that event handler.

Malicious tool definition detected

Tool: rules/rerender-simple-expression-in-memo.md Description: --- title: Do not wrap a simple expression with a primitive result type in useMemo impact: LOW-MEDIUM impactDescription: wasted computation on every render tags: rerender, useMemo, optimization --- ## Do not wrap a simple expression with a primitive result type in useMemo When an expression is simple (few logical or arithmetical operators) and has a primitive result type (boolean, number, string), do not wrap it in `useMemo`.

Malicious tool definition detected

Tool: rules/rerender-transitions.md Description: --- title: Use Transitions for Non-Urgent Updates impact: MEDIUM impactDescription: maintains UI responsiveness tags: rerender, transitions, startTransition, performance --- ## Use Transitions for Non-Urgent Updates Mark frequent, non-urgent state updates as transitions to maintain UI responsiveness.

Malicious tool definition detected

Tool: rules/rerender-use-ref-transient-values.md Description: --- title: Use useRef for Transient Values impact: MEDIUM impactDescription: avoids unnecessary re-renders on frequent updates tags: rerender, useref, state, performance --- ## Use useRef for Transient Values When a value changes frequently and you don't want a re-render on every update (e.g., mouse trackers, intervals, transient flags), store it in `useRef` instead of `useState`.