rendering-animate-svg
Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, especially in 8-bit retro components with pixel art animations.
1.95k repo starsObserved in 4 repos
Development
Development skills
Browse reusable Agent Skills, each with a clear purpose and practical guidance.
shadcn-ui-conventions
UI component conventions for 8-bit styled components. Use when working with shadcn/ui components or implementing retro-styled UI elements.
1.95k repo starsObserved in 4 repos
Development
animation-performance-retro
Optimize 8-bit animations for smooth performance. Apply when creating animated pixel art, game UI effects, or any retro-styled animations.
1.95k repo starsObserved in 3 repos
Development
js-early-exit
Use early returns to avoid unnecessary computation in loops and functions. Apply when processing arrays, validating input, or checking multiple conditions where the result can be determined before all iterations complete.
1.95k repo starsObserved in 3 repos
Development
js-hoist-regexp
Hoist RegExp creation outside render or memoize with useMemo(). Apply when using regular expressions in React components or frequently called functions.
1.95k repo starsObserved in 3 repos
Development
rendering-conditional-render
Use explicit ternary operators instead of && for conditional rendering. Apply when rendering values that could be 0, NaN, or other falsy values that might render unexpectedly.
1.95k repo starsObserved in 3 repos
Development
rendering-hoist-jsx
Extract static JSX elements outside components to avoid re-creation on every render. Apply when rendering static elements repeatedly or in lists.
1.95k repo starsObserved in 3 repos
Development
rerender-functional-setstate
Use functional setState updates to prevent stale closures and unnecessary callback recreations. Apply when updating state based on the current state value in React components.
1.95k repo starsObserved in 3 repos
Development
rerender-memo
Extract expensive work into memoized components with React.memo. Apply when components perform expensive computations that can be skipped when props haven't changed.
1.95k repo starsObserved in 3 repos
Development
bundle-dynamic-imports
Use next/dynamic for lazy-loading heavy components. Apply when importing large components like editors, charts, or rich text editors that aren't needed on initial render.
1.95k repo starsObserved in 2 repos
Development