skills.rest
songkg7
songkg7COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-patterns

Your complete guide to writing with AI-assistive, responsive, and reusable React components and beyond. Master the craft of building scalable interfaces with practical, production-ready code — starting with YOURNAME.

6|Updated Mar 25, 2023
Search Tags:#performance#accessibility#state management#react#next.js#component patterns#frontend-patterns
One-click install
npx skills add https://github.com/songkg7/dotfiles --skill frontend-patterns-songkg7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/songkg7/dotfiles/tree/main/dot_claude/skills/frontend-patterns
Command: npx skills add https://github.com/songkg7/dotfiles --skill frontend-patterns-songkg7

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers need standardized frontend patterns to build scalable, maintainable React and Next.js interfaces without reinventing common UI structures.

Core Features & Use Cases

  • Component patterns: Composition over inheritance, compound components, and render props for reusable UI building blocks.
  • Custom hooks: Practical hooks like useToggle, useQuery, and useDebounce to simplify state and data flows.
  • State management patterns: Context + Reducer patterns for predictable app-wide state management.
  • Performance optimization: Memoization, code splitting, and virtualization to keep interfaces fast on large or dynamic datasets.
  • Accessibility and animation: Keyboard navigation, focus management, and motion patterns with Framer Motion.
  • Use Case: Build a dashboard with reusable Card and Tabs components, a data list with optimistic updates, and accessible controls.

Quick Start

Create a new React project and implement the patterns from this guide by adding sample components (Card, Tabs, Market list) and wiring them up in a small UI to see the patterns in action.

Frequently Asked Questions about frontend-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add optimistic updates to a data list using custom hooks in React?▼

Optimistic updates in a React data list use custom hooks like useQuery and useDebounce to simplify data flows and state transitions. These hooks manage request states and local cache updates so the UI reflects changes immediately.

How do I build scalable React components without repeating UI code?▼

Scalable React components use composition over inheritance, compound components, and render props to create reusable building blocks. These patterns let you assemble complex interfaces from small, independent pieces without duplicating logic across your UI.

What's the best way to manage app-wide state in Next.js without external libraries?▼

App-wide state management in Next.js can use the Context and Reducer pattern for predictable updates. This approach centralizes state logic and dispatch actions, keeping data flows consistent without adding external state management dependencies.

How do I optimize React performance for large data lists and virtualization?▼

Performance optimization for large React data lists uses memoization, code splitting, and virtualization. Virtualization renders only visible rows, while memoization prevents unnecessary re-renders, keeping interfaces fast on dynamic datasets.

Can I implement accessible keyboard navigation and focus management in a React dashboard?▼

Accessible React dashboards implement keyboard navigation and focus management patterns to ensure controls are operable without a mouse. These patterns cover focus trapping, tab order, and screen-reader compatibility for inclusive interfaces.

How do I add optimistic updates to a data list using custom hooks in React?▼

Optimistic updates in a React data list use custom hooks like useQuery and useDebounce to simplify data flows and state transitions. These hooks manage request states and local cache updates so the UI reflects changes immediately.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
tonehqtonehq
11

ui

Document reusable frontend UI components and utilities for the Tone interface.

Official
Intermediate
toddmoytoddmoy
1

animate

Design performant UI animations with CSS and Framer Motion.

Community
Advanced
memorysavermemorysaver

vercel-composition-patterns

Replace boolean props with explicit variant components and shared context in React.

Community
Basic