Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
57
37%
Does it follow best practices?
Impact
96%
1.31xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/cc-skill-frontend-patterns/SKILL.mdList virtualization and memoization
@tanstack/react-virtual import
100%
100%
estimateSize value
0%
0%
overscan value
0%
100%
Absolute positioning strategy
100%
100%
Total size container
100%
100%
getScrollElement ref
100%
100%
React.memo on item component
0%
100%
useMemo for derived data
100%
100%
useCallback for handler props
0%
100%
virtualRow.index used as key
50%
50%
Fixed container height
100%
100%
Keyboard navigation and ARIA accessibility
ArrowDown handler
100%
100%
ArrowUp handler
100%
100%
Enter key handler
100%
100%
Escape key handler
100%
100%
role=combobox
100%
100%
aria-expanded attribute
100%
100%
aria-haspopup=listbox
100%
100%
Modal role=dialog
100%
100%
Modal aria-modal
100%
100%
Modal tabIndex=-1
0%
100%
Modal focus save
70%
100%
Modal focus restore
100%
100%
Modal Escape close
100%
100%
Context + Reducer state management
Typed Action union
100%
100%
useReducer + Context
100%
100%
Custom hook error throw
100%
100%
Debounce via setTimeout
100%
100%
AnimatePresence usage
0%
100%
motion component animation
0%
100%
List exit animation y direction
0%
100%
transition duration
0%
100%
ErrorBoundary class component
100%
100%
ErrorBoundary reset button
100%
100%
componentDidCatch logging
0%
100%
ErrorBoundary wraps content
100%
100%
Controlled form validation
100%
100%
6a07b83
Table of Contents
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.