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, フロントエンドパターン, コンポーネント設計.
安装与使用
请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。
查看来源 ↗使用指南技能说明
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 |
使用示例
查看来源仓库中的使用示例与配置说明。
查看来源 ↗来源历史
- 收录时间
- 2026-01-20
- 索引更新时间
- 2026-01-26
- Branch
- main
收录与同步日期属于本站记录。源码修改历史请查看来源仓库。
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!