skills.rest
andrescardonas7
andrescardonas7COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/andrescardonas7/salchipapa-web --skill frontend-patterns-andrescardonas7
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
LuohaothuLuohaothu
24

frontend-patterns

Provide React and Next.js templates for component composition, hooks, and state management.

Community
Advanced
anaghkanungo7anaghkanungo7
1

react-performance-patterns

Optimize React applications using memoization, code splitting, and virtualization.

Community
Advanced
belokonmbelokonm
8

react-specialist

Provide expert React 18+ patterns, hooks, and state management guidance.

Community
Advanced
FaisalAlqarniFaisalAlqarni
5

frontend-patterns

Provide framework-agnostic UI development patterns for component composition and state management.

Community
Intermediate