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

•

デザインツール

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.

主な機能

Framework-specific guidance for React Hooks and Vue Composition API
Scalable state management strategies from local to global scope
Cross-framework pattern comparisons and migration rules
Implementation of Container/Presentational component separation
Modular component architecture using composition and slots
3 GitHub stars

ユースケース

Optimizing React application performance through efficient hook usage
Refactoring bloated components into maintainable logic and UI layers
Standardizing component architecture across a large frontend team

概要

主な機能

Framework-specific guidance for React Hooks and Vue Composition API
Scalable state management strategies from local to global scope
Cross-framework pattern comparisons and migration rules
Implementation of Container/Presentational component separation
Modular component architecture using composition and slots
3 GitHub stars

ユースケース

Optimizing React application performance through efficient hook usage
Refactoring bloated components into maintainable logic and UI layers
Standardizing component architecture across a large frontend team