skills.rest
beratcelik1
beratcelik1COMMUNITY
Explore all skills by this author →
Website𝕏@beratcelik0GitHub

frontend-patterns

Catalog reusable frontend patterns for React and Next.js development.

1|Updated Mar 5, 2026
Search Tags:#accessibility#frontend#react#patterns#nextjs#state-management#ui-patterns
One-click install
npx skills add https://github.com/beratcelik1/compound-claude --skill frontend-patterns-beratcelik1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/beratcelik1/compound-claude/tree/main/skills/frontend-patterns
Command: npx skills add https://github.com/beratcelik1/compound-claude --skill frontend-patterns-beratcelik1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often reinvent common UI patterns, leading to inconsistent experiences and slower delivery. This skill provides a curated catalog of reusable patterns and concrete implementations to accelerate development and promote consistency across projects.

Core Features & Use Cases

  • Composition patterns: building flexible, reusable components through composition.
  • State and data flow: patterns for shared state, context, and data fetching strategies.
  • Performance & accessibility: patterns for memoization, virtualization, and keyboard-focused accessibility.
  • Use Case: standardize a tabbed interface, form handling, and pattern-driven UI audits across a React/Next.js app.

Quick Start

Create a small React component using the Compound Components pattern to compose a tabbed interface.

Frequently Asked Questions about frontend-patterns

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

FAQPage Schema
What are reusable React patterns for standardizing UI development?▼

Reusable React patterns standardize UI development by providing a curated catalog of composition, state management, and accessibility implementations to accelerate consistent project delivery.

How do I build a flexible tabbed interface using the Compound Components pattern?▼

Build a tabbed interface using the Compound Components pattern by composing multiple standardized UI elements together, allowing flexible component reuse without rigid prop drilling in your React application.

Does this frontend pattern catalog support Next.js projects?▼

Yes, this frontend pattern catalog supports Next.js projects, providing concrete implementations and best practices for data fetching, performance optimization, and shared state across your application.

What is the best way to manage shared state and data fetching in React?▼

Manage shared state and data fetching in React by applying standardized patterns for context usage and data flow strategies, ensuring consistent data handling across your component library.

How do I implement keyboard-focused accessibility and performance patterns?▼

Implement keyboard-focused accessibility and performance patterns by applying curated techniques for memoization and virtualization, ensuring your UI components remain accessible and highly performant.

Can I use these patterns to audit an existing React codebase?▼

Yes, you can use these patterns to audit an existing React codebase, utilizing the provided guidance to integrate best practices and standardize component structures into your current implementation.

Related Skills

Explore More Software Engineering Skills→
Eng0AIEng0AI
15

chrome-extension-boilerplate-react-vite

Scaffold Chrome extensions with React, Vite, and TypeScript.

Official
Intermediate
tillysosotillysoso

ui-design

Standardize web UI visual language and design tokens for dashboards and marketing sites.

Community
Intermediate
tonone-aitonone-ai
69

prism-recon

Map component trees, routing, and state management in frontend projects.

Official
Advanced
suhwansuhwan

phase-3-mockup

Generate HTML/CSS/JS mockups with a Next.js conversion plan.

Community
Advanced