adilkalam/react-patterns
skills/react-patterns/SKILL.md
Essential React patterns for hooks, components, and state management. Use when building React components, implementing custom hooks, or debugging state management issues. Covers useState, useEffect, useCallback, useMemo, and context patterns.
$ install --global
skillsauthnpx skillsauth add adilkalam/orca react-patternsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 6, 2026, 4:07 AM117.2s1 file scanned
SKILL.md
- name:
- react-patterns
- description:
- >
React Patterns
Custom Hook Patterns
useDebounce
function useDebounce<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => setDebouncedValue(value), delay);
return () => clearTimeout(handler);
}, [value, delay]);
return debouncedValue;
}
useLocalStorage
function useLocalStorage<T>(key: string, initialValue: T) {
const [storedValue, setStoredValue] = useState<T>(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch {
return initialValue;
}
});
const setValue = (value: T | ((val: T) => T)) => {
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
window.localStorage.setItem(key, JSON.stringify(valueToStore));
};
return [storedValue, setValue] as const;
}
Component Patterns
Compound Components
const Tabs = ({ children }: { children: React.ReactNode }) => {
const [activeIndex, setActiveIndex] = useState(0);
return (
<TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
{children}
</TabsContext.Provider>
);
};
Tabs.Tab = ({ index, children }) => {
const { activeIndex, setActiveIndex } = useContext(TabsContext);
return (
<button
onClick={() => setActiveIndex(index)}
data-active={activeIndex === index}
>
{children}
</button>
);
};
Render Props
const MouseTracker = ({ render }: { render: (pos: {x: number, y: number}) => React.ReactNode }) => {
const [position, setPosition] = useState({ x: 0, y: 0 });
useEffect(() => {
const handleMove = (e: MouseEvent) => setPosition({ x: e.clientX, y: e.clientY });
window.addEventListener('mousemove', handleMove);
return () => window.removeEventListener('mousemove', handleMove);
}, []);
return <>{render(position)}</>;
};
Performance Patterns
Memoization
- Use
useMemofor expensive computations - Use
useCallbackfor callback stability - Use
React.memofor component memoization - Always check if memoization is actually needed (profile first)
Code Splitting
const HeavyComponent = lazy(() => import('./HeavyComponent'));
function App() {
return (
<Suspense fallback={<Loading />}>
<HeavyComponent />
</Suspense>
);
}
Anti-Patterns to Avoid
- State in useEffect deps that triggers the effect - leads to infinite loops
- Missing cleanup functions - causes memory leaks
- Deriving state from props without key - use
keyprop to reset - Overusing Context - creates unnecessary re-renders
- useState for derived values - use useMemo instead
Related Skills
adilkalam/ui-quality-audit
testing
VerifiedTrustedCommunity
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
2SKILL.mdUpdated Jun 6, 2026
adilkalam/typeset
tools
VerifiedTrustedCommunity
Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.
2SKILL.mdUpdated Jun 6, 2026
adilkalam/threejs-animation
tools
VerifiedTrustedCommunity
Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
2SKILL.mdUpdated Jun 6, 2026
adilkalam/shape
development
VerifiedTrustedCommunity
Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.
2SKILL.mdUpdated Jun 6, 2026