Does this skill help with web performance?

Yes, it includes specific implementation patterns for React.memo, useMemo, code splitting, and virtualization for long lists to ensure high performance.

Are the code examples type-safe?

Yes, all patterns provided by this skill are written in TypeScript to ensure type safety and better developer experience.

Can I use this for state management?

Absolutely. It provides standardized patterns for using React Context with useReducer and custom hooks for managing complex application states.

What frameworks are supported by this skill?

This skill is primarily designed for React and Next.js, focusing on functional components and modern TypeScript-based frontend development.

Does it include UI animation guidance?

Yes, it features declarative animation patterns specifically for Framer Motion to handle list transitions and modal interactions.

Frontend Development Patterns

Name: Frontend Development Patterns
Author: Ying-Kai-Liao

byYing-Kai-Liao

•

Design Tools

Implements modern React and Next.js architectural patterns to build performant, scalable, and maintainable user interfaces.

This skill serves as a comprehensive guide and implementation tool for modern frontend architecture, specifically targeting React and Next.js ecosystems. It provides standardized patterns for component composition, compound components, and render props, alongside sophisticated custom hooks for state management and data fetching. By leveraging this skill, developers can automatically apply performance optimizations like memoization, list virtualization, and code splitting, ensuring that web applications remain fast and responsive. It is particularly useful when refactoring legacy codebases, designing complex UI systems, or establishing best practices in a new frontend project.

Key Features

01Comprehensive performance optimizations using memoization and TanStack Virtual

02Production-ready animation patterns using Framer Motion and declarative transitions

03Pre-configured custom hooks for async data fetching, debouncing, and state logic

04Standardized form handling with integrated validation and error state management

051 GitHub stars

06Advanced UI patterns including Composition, Compound Components, and Render Props

Use Cases

01Implementing robust global state management using the Context + Reducer pattern

02Optimizing application performance through code splitting and list virtualization

03Refactoring complex React components into modular, composable UI patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ying-kai-liao/touchstone frontend-patterns

For use in Claude.ai and ChatGPT

Download Skill