Does this skill provide guidance on performance optimization?

Yes, it includes detailed patterns for useMemo, useCallback, React.memo, code splitting, lazy loading, and long-list virtualization using TanStack Virtual.

Can this skill help with complex UI animations?

Absolutely, it includes specific implementation patterns for Framer Motion, covering list animations and modal transitions.

What frontend frameworks are covered by this skill?

This skill focuses primarily on React and Next.js, providing patterns for hooks, components, and state management within these ecosystems.

Is the documentation available in Traditional Chinese?

Yes, all guidance, code comments, and best practices within this skill are localized for Traditional Chinese (zh-TW) users.

How does it handle state management?

The skill demonstrates the Context + useReducer pattern, which is ideal for managing complex state without needing external heavy-weight libraries.

Frontend Design Patterns (zh-TW)

Name: Frontend Design Patterns (zh-TW)
Author: Fabio29T

byFabio29T

0•

设计工具

Implements production-grade React and Next.js patterns with best practices for performance, state management, and accessibility.

This skill provides a comprehensive library of modern frontend development patterns specifically optimized for the React and Next.js ecosystems, documented in Traditional Chinese (zh-TW). It guides developers through advanced component architecture, including composition and compound components, custom hook implementation for async data and debouncing, and sophisticated state management strategies. Additionally, it offers actionable patterns for performance optimization such as list virtualization and lazy loading, as well as accessible UI components and fluid animations with Framer Motion, ensuring high-quality, scalable user interface development.

主要功能

01Custom React Hooks for State, Async Data Fetching, and Debouncing

02Accessible UI Implementation with Error Boundaries and Framer Motion

03Advanced React Component Composition and Compound Components

04Robust State Management using Context API and useReducer Patterns

050 GitHub stars

06Performance Optimization via Memoization, Virtualization, and Code Splitting

使用场景

01Building scalable design systems and reusable component libraries

02Implementing complex form validation and keyboard-accessible navigation

03Optimizing performance in data-heavy React applications with virtualization

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fabio29t/everything-claude frontend-patterns

For use in Claude.ai and ChatGPT

主要功能

01Custom React Hooks for State, Async Data Fetching, and Debouncing

02Accessible UI Implementation with Error Boundaries and Framer Motion

03Advanced React Component Composition and Compound Components

04Robust State Management using Context API and useReducer Patterns

050 GitHub stars

06Performance Optimization via Memoization, Virtualization, and Code Splitting

使用场景

01Building scalable design systems and reusable component libraries

02Implementing complex form validation and keyboard-accessible navigation

03Optimizing performance in data-heavy React applications with virtualization

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fabio29t/everything-claude frontend-patterns

For use in Claude.ai and ChatGPT