A solid reference for React and Next.js patterns that covers the fundamentals you actually reach for: composition patterns, custom hooks for common scenarios like debouncing and async state, and performance tricks like memoization and virtualization. The examples are TypeScript based and follow modern conventions. Worth installing if you're tired of re-googling "how to implement compound components" or want consistent patterns for form validation and error boundaries. The accessibility section on keyboard navigation and focus management is a nice touch. It won't teach you frontend from scratch, but it's a good baseline for teams wanting to standardize their React architecture without bikeshedding every component.

skills.sh installs
638
GitHub stars
33.2K
last updated
Aug 21, 2026

Install

$ npx -y skills add davila7/claude-code-templates --skill frontend-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

A solid reference for React and Next.js patterns that covers the fundamentals you actually reach for: composition patterns, custom hooks for common scenarios like debouncing and async state, and performance tricks like memoization and virtualization. The examples are TypeScript based and follow modern conventions. Worth installing if you're tired of re-googling "how to implement compound components" or want consistent patterns for form validation and error boundaries. The accessibility section on keyboard navigation and focus management is a nice touch. It won't teach you frontend from scratch, but it's a good baseline for teams wanting to standardize their React architecture without bikeshedding every component.

Browse the repository on GitHub

Sponsors

Details

Repository
github.com/davila7/claude-code-templates
Categories
Frontend Development, Debugging
First seen
May 16, 2026

More from davila7/claude-code-templates

All 618
1plugin87 avatardesign-componentplugin87/ux-ui-agent-skillsDesign a UI component spec to the house quality bar — anatomy, variants, sizes, the 8 states, token mapping, and accessibility. Use when the user wants to desig565skills.sh installs
2bnd-1 avatardesign-taste-frontendbnd-1/taste-skillSenior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acce557skills.sh installs
3bobmatnyc avatarzustandbobmatnyc/claude-mpm-skillsMinimal, unopinionated state management library for React with simple hook-based API, no providers, and minimal boilerplate for global state without Redux compl496skills.sh installs
4pproenca avatarreactpproenca/dot-skillsReact 19/19.2 modern patterns for concurrent rendering, Server Components, actions, ref-as-prop, document metadata, resource hints, hooks, and memoization — plu496skills.sh installs
5aj-geddes avatarfrontend-state-managementaj-geddes/useful-ai-promptsManage application state using Redux, MobX, Zustand, and Context API. Use when centralizing state for complex applications with multiple components.485skills.sh installs
6josiahsiegel avatartailwindcss-responsive-darkmodejosiahsiegel/claude-plugin-marketplaceTailwind CSS responsive design and dark mode patterns (2025-2026). PROACTIVELY activate for: (1) dark mode setup (class-based vs media-query, dark: variant), (2478skills.sh installs