← スキル一覧に戻る
applying-frontend-patterns
by thkt
⭐ 3🍴 0📅 2026年1月24日
Manusで実行SKILL.md
name: applying-frontend-patterns description: Framework-agnostic frontend component design patterns. allowed-tools: [Read, Grep, Glob, Task] user-invocable: false
フロントエンドパターン
コアパターン
| パターン | 使用タイミング |
|---|---|
| Container/Presentational | データ取得 + 表示 |
| カスタムフック | 共有する振る舞い |
| コンポジション | 柔軟なコンポーネント |
| 状態管理 | ローカル → 共有 → グローバル |
Container/Presentational
| Container（ロジック） | Presentational（UI） |
|---|---|
| データを取得 | propsでデータを受け取る |
| 状態を管理 | ステートレス（理想） |
| イベントを処理 | コールバックpropsを呼ぶ |
| スタイリングなし | すべてのスタイリングがここ |
状態管理
| スコープ | ツール | 例 |
|---|---|---|
| ローカル | useState | フォーム入力、トグル |
| 共有 | Context | テーマ、認証状態 |
| グローバル | Zustand/Redux | アプリ全体のキャッシュ |
使わないとき
シンプルな一回限りのコンポーネント、プロトタイプ（YAGNI）、再利用が期待されない。
参考
| トピック | ファイル |
|---|---|
| Container/Presentational | references/container-presentational.md |
スコア
総合スコア
50/100
リポジトリの品質指標に基づく評価
✓SKILL.md
SKILL.mdファイルが含まれている
+20
○LICENSE
ライセンスが設定されている
0/10
○説明文
100文字以上の説明がある
0/10
○人気
GitHub Stars 100以上
0/15
○最近の活動
3ヶ月以内に更新がある
0/10
○フォーク
10回以上フォークされている
0/5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
○タグ
1つ以上のタグが設定されている
0/5
レビュー
💬
レビュー機能は近日公開予定です