How does this skill improve application performance?

It provides standardized implementations for useMemo, useCallback, list virtualization via TanStack Virtual, and code-splitting strategies.

What frontend frameworks does this skill support?

This skill specifically targets React and Next.js applications, providing patterns optimized for these ecosystems.

Are the code examples provided in TypeScript?

Yes, all patterns and examples are written in TypeScript to ensure type safety and production readiness.

Does it include help for UI animations?

Yes, it includes patterns for Framer Motion, specifically for animating lists and modal transitions.

Frontend Patterns (ZH-TW)

Name: Frontend Patterns (ZH-TW)
Author: affaan-m

byaffaan-m

•

43,117

•

Design Tools

Implements production-grade React and Next.js design patterns, performance optimizations, and UI best practices for modern web development.

This skill provides Claude with a specialized knowledge base of modern frontend development patterns, specifically tailored for React and Next.js environments. It includes battle-tested implementation strategies for advanced component architectures like compound components and render props, custom hooks for state and data fetching, and robust performance optimization techniques such as virtualization and memoization. It also covers essential UI concerns including error boundaries, accessibility, and Framer Motion animations, making it an indispensable resource for building scalable, high-performance user interfaces.

Key Features

0143,117 GitHub stars

02Modern state management patterns using Context and Reducer hooks

03Comprehensive custom hook library for async data, debouncing, and state toggling

04UI best practices for form validation, error handling, and accessible animations

05Advanced React architecture patterns including Compound Components and Render Props

06Performance optimization strategies including memoization and list virtualization

Use Cases

01Implementing complex form logic with robust validation and error management

02Architecting scalable and maintainable React component libraries for design systems

03Optimizing data-heavy dashboards using virtualization and lazy loading

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add affaan-m/everything-claude-code frontend-patterns

For use in Claude.ai and ChatGPT

Download Skill