applying-frontend-patterns
Framework-agnostic frontend component design patterns. Use when designing React/Vue/Angular components, applying Container/Presentational pattern, or when user mentions component patterns, フロントエンドパターン, コンポーネント設計.
Installation
Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.
View source ↗GuidesSkill instructions
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 |
Examples
Read the usage examples in the source repository.
View source ↗Source history
- Indexed on
- 2026-01-20
- Index updated
- 2026-01-26
- Branch
- main
Index and sync dates describe this directory. View the source repository for code history.
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!