How does this skill improve component performance?

It provides best practices for React's memoization hooks (useMemo and useCallback), ensuring that components only re-render when necessary and dependencies are correctly managed.

What state management patterns are included?

The skill covers local state with useState, shared state using the Context API and Custom Hooks, and high-level strategies for organizing application-wide global state.

Can I use this for automated code reviews?

Yes, this skill is designed to integrate with review agents to help identify architectural anti-patterns, missing hook dependencies, and opportunities for logic extraction.

Does this skill only work for React projects?

While the skill features extensive React implementation examples, the core architectural patterns (like Container/Presentational separation) are framework-agnostic and applicable to Vue, Angular, and vanilla JavaScript.

Applying Frontend Patterns

Name: Applying Frontend Patterns
Author: thkt

bythkt

•

Design Tools

Implements industry-standard frontend component architectures and React design patterns for scalable web development.

This skill equips Claude with a robust framework for designing and implementing frontend components, focusing on React best practices while remaining framework-aware. It provides specific guidance on separating business logic from UI through the Container/Presentational pattern, optimizing performance with React hooks (useMemo, useCallback), and creating reusable logic via Custom Hooks. Ideal for developers architecting new systems or refactoring legacy code, it ensures high-quality component composition, efficient state management, and adherence to modern frontend architectural standards.

Key Features

01Custom hook design patterns for modular logic extraction

02Advanced React hook optimization for useEffect, useMemo, and useCallback

03Scalable state management strategies for local, shared, and global data

04Flexible component composition using HOCs and render props

053 GitHub stars

06Container/Presentational logic separation for enhanced reusability

Use Cases

01Refactoring monolithic components into modular and maintainable units

02Ensuring architectural consistency during automated code reviews

03Architecting scalable and testable React component structures

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thkt/claude-config applying-frontend-patterns

For use in Claude.ai and ChatGPT

Download Skill