frontend-patterns

Provide curated React and Next.js frontend development patterns with code examples.

Updated Jan 30, 2026

Search Tags:#performance #accessibility #frontend #react #ui/ux #next.js #patterns

Ready to run

npx skills add https://github.com/andrescardonas7/salchipapa-web --skill frontend-patterns-andrescardonas7

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/andrescardonas7/salchipapa-web/tree/main/.cursor/skills/frontend-patterns
Command: npx skills add https://github.com/andrescardonas7/salchipapa-web --skill frontend-patterns-andrescardonas7

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive guide to modern frontend development patterns, helping developers build more maintainable, performant, and accessible React and Next.js applications.

Core Features & Use Cases

Component Patterns: Learn composition, compound components, and render props.
Custom Hooks: Implement reusable logic for state management, data fetching, and more.
State Management: Understand Context API with Reducers for complex state.
Performance: Optimize with memoization, code splitting, and virtualization.
Forms & Errors: Implement controlled forms with robust validation and error handling.
Accessibility: Ensure keyboard navigation and focus management.
Animations: Utilize Framer Motion for engaging UI transitions.
Use Case: A developer looking to refactor a complex React component into smaller, more manageable, and reusable pieces would consult this Skill for patterns like Compound Components or Composition over Inheritance.

Quick Start

Show me examples of the Compound Components pattern in React.

Frequently Asked Questions about frontend-patterns

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

FAQPage Schema

How do I refactor a complex React component into smaller pieces using composition?▼

Custom hooks allow you to extract and reuse stateful logic in React, such as asynchronous data fetching and debouncing. This Skill provides code examples for implementing reusable custom hooks to manage data retrieval and component state efficiently.

What is the best way to manage complex state in Next.js without external libraries?▼

Optimize React performance using memoization, code splitting, and virtualization techniques. This Skill demonstrates how to prevent unnecessary renders and efficiently render large lists to ensure robust and efficient user interfaces.

Do I need Framer Motion to implement UI animations in Next.js?▼

Improve frontend accessibility by implementing proper keyboard navigation and focus management. This Skill covers best practices to ensure your React components meet accessibility standards and provide robust user interactions.

How do I handle form validation and errors in React?▼

Handle forms and errors in React by implementing controlled forms with robust validation and error boundaries. This approach ensures that user input is strictly managed and unexpected UI crashes are gracefully caught.