applying-frontend-patterns
Framework-agnostic frontend component design patterns. Triggers: React, Vue, Angular, コンポーネント, パターン, hooks, カスタムフック, container, presentational, 分離, 状態管理, state management, composition, HOC, render props
When & Why to Use This Skill
This Claude skill provides expert guidance on framework-agnostic frontend component design patterns. It helps developers implement scalable and maintainable UI architectures by applying best practices such as the Container/Presentational pattern, custom hooks, and modular composition across popular frameworks like React, Vue, and Angular.
Use Cases
- Refactoring monolithic components: Decoupling complex business logic from UI presentation using the Container/Presentational pattern to improve code readability and testability.
- Designing reusable logic: Creating custom hooks or shared behavioral patterns to eliminate code duplication and standardize functionality across different application modules.
- Architecting state management: Determining the optimal scope for data (Local, Shared, or Global) and selecting appropriate tools like Context API, Zustand, or Redux for efficient data flow.
- Implementing flexible UI composition: Utilizing advanced composition techniques and render props to build highly extensible components that minimize prop drilling.
| name | applying-frontend-patterns |
|---|---|
| description | > |
| allowed-tools | [Read, Grep, Glob, Task] |
| user-invocable | false |
Frontend Patterns
Core Patterns
| Pattern | When to Use |
|---|---|
| Container/Presentational | Data fetching + display |
| Custom Hooks | Shared behavior |
| Composition | Flexible components |
| State Management | Local → Shared → Global |
Container/Presentational
| Container (Logic) | Presentational (UI) |
|---|---|
| Fetches data | Receives data via props |
| Manages state | Stateless (ideally) |
| Handles events | Calls callback props |
| No styling | All styling lives here |
State Management
| Scope | Tool | Example |
|---|---|---|
| Local | useState | Form input, toggle |
| Shared | Context | Theme, auth status |
| Global | Zustand/Redux | App-wide cache |
When NOT to Use
Simple one-off components, prototypes (YAGNI), no reuse expected.
References
| Topic | File |
|---|---|
| Container/Presentation | references/container-presentational.md |