skills.rest
GiorgioBertolotti
GiorgioBertolottiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-patterns

Provide reusable React and Next.js frontend architecture patterns with TypeScript examples.

11|2|Updated Mar 18, 2018
Search Tags:#typescript#architecture#performance#react#ui-patterns#frontend-patterns#component-patterns
One-click install
npx skills add https://github.com/GiorgioBertolotti/dotfiles --skill frontend-patterns-giorgiobertolotti
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/GiorgioBertolotti/dotfiles/tree/main/claude/skills/frontend-patterns
Command: npx skills add https://github.com/GiorgioBertolotti/dotfiles --skill frontend-patterns-giorgiobertolotti

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a guided collection of proven frontend patterns for React and Next.js, with practical code examples to improve maintainability, reusability, and performance.

Core Features & Use Cases

  • Composition Over Inheritance: reuse card patterns and layout primitives to build complex UI.
  • Compound Components, Render Props, and Custom Hooks: flexible, composable API surfaces for dynamic UIs.
  • Performance & Accessibility: memoization, code splitting, virtualization, and accessible keyboard navigation.
  • Real-world Scenarios: building component libraries, dashboards, forms, and responsive UIs with consistent UX.

Quick Start

Review the patterns and implement a sample Card component using composition and slots in your React project.

Frequently Asked Questions about frontend-patterns

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

FAQPage Schema
How do I build scalable React components using composition patterns?▼

Compound components in React let you build flexible, composable API surfaces for dynamic UIs by grouping related components, sharing implicit state through context, and providing customizable rendering structures without rigid prop hierarchies.

What's the best way to handle React performance optimizations in a TypeScript dashboard?▼

React performance optimizations for dashboards involve applying memoization, code splitting, and virtualization techniques. These patterns prevent unnecessary re-renders and keep large data-heavy interfaces responsive under heavy user interaction.

When do I need custom hooks versus render props for React UI patterns?▼

Custom hooks are needed for reusable stateful logic, while render props suit dynamic component rendering. Both UI patterns offer flexible composition, but hooks separate logic from presentation more cleanly in modern React applications.

Can I use these frontend architecture patterns for Next.js web apps?▼

These frontend architecture patterns apply directly to Next.js web apps. They include TypeScript examples for component composition, accessibility, error handling, and performance optimizations suitable for React-based dashboards and component libraries.

How do I implement accessible keyboard navigation in a React component library?▼

Accessible keyboard navigation in a React component library requires applying frontend patterns that enforce focus management, semantic HTML structure, and ARIA attributes, ensuring consistent UX across responsive interfaces and dynamic forms.

Related Skills

Explore More Software Engineering Skills→
EmeaAppGbbEmeaAppGbb

build-check

Validate Next.js and TypeScript service builds for API and Web.

Official
Intermediate
msichtermanmsichterman

vercel-composition-patterns

Refactor React component libraries by replacing boolean props with composition patterns.

Community
Advanced
PatkikPatkik

frontend-patterns

Organize React and Next.js frontend patterns with TypeScript example code.

Community
Advanced
monch1962monch1962
3

frontend-patterns

Provides reusable React and Next.js frontend patterns for UI architecture.

Community
Intermediate