Which frameworks does this skill support?

This skill supports major frontend frameworks including React, Vue, and Angular, providing specific implementation rules and comparative patterns for each.

What is the primary benefit of the Container/Presentational pattern?

The primary benefit is the separation of concerns, where logic and data fetching are isolated from the UI rendering, making components easier to test, reuse, and style.

Does this skill help with React Hooks optimization?

Yes, it includes specific guidelines for useEffect dependencies, memoization with useMemo and useCallback, and best practices for creating custom hooks.

When should I avoid using these patterns?

Patterns should be avoided for simple one-off components, rapid prototyping (YAGNI), or any situation where the added complexity doesn't solve an existing maintenance pain point.

Frontend Design Patterns

Name: Frontend Design Patterns
Author: thkt

bythkt

•

Design Tools

Implement framework-agnostic component design patterns to build maintainable and scalable frontend architectures.

This skill equips Claude with specialized knowledge of universal frontend design patterns, enabling the creation of clean, modular codebases. It provides structured guidance on the Container/Presentational pattern, Custom Hooks, component composition, and state management strategies across major frameworks like React, Vue, and Angular. By applying these patterns, developers can effectively separate business logic from UI concerns, leading to better testability and long-term code maintainability.

Key Features

01Framework-specific guidance for React Hooks and Vue Composition API

02Scalable state management strategies from local to global scope

03Cross-framework pattern comparisons and migration rules

04Implementation of Container/Presentational component separation

05Modular component architecture using composition and slots

063 GitHub stars

Use Cases

01Optimizing React application performance through efficient hook usage

02Refactoring bloated components into maintainable logic and UI layers

03Standardizing component architecture across a large frontend team

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