# Frontend Patterns · yandy-r

> Frontend patterns for React and Next.js — composition, compound components, render props, custom hooks, state management with Context+useReducer, data fetching, performance optimization (React.memo/useMemo/useCallback, lazy/Suspense, virtualization), forms with validation, error boundaries, animation with Framer Motion, and accessibility patterns (keyboard nav, focus management). Use when the user is building React components, asks about useState/useReducer/Context, asks about useMemo/useCallback/React.memo, asks about code splitting with React.lazy and Suspense, asks about long-list virtualization with @tanstack/react-virtual, asks about form validation, error boundaries, custom hooks, Framer Motion animations, keyboard navigation/focus management, or wants modern React/Next.js idioms.

## Facts
- Page: https://tashan.sh/capability/skill-yandy-r-frontend-patterns
- tashan id: skill:yandy-r/frontend-patterns
- Source: https://github.com/yandy-r/claude-plugins
- Type: skill
- Category: design
- tashan score: 42.0 / 100
- Adoption: 17.0
- Upkeep: 61.0
- Freshness: 92.0
- Evidence coverage: 84% of the inputs this score can use
- Health: active
- Instruction depth: not yet graded
- License: MIT
- Official: no

## Install

```sh
cp -r frontend-patterns ~/.claude/skills/
```

## Security audit
Not scanned. We audit npm-published capabilities; this one has no npm package we can resolve, or has not reached the queue. This is not a clean bill of health.

---
Measured 2026-08-16 by tashan (https://tashan.sh) from public evidence. Scorer s5.