Logoskills for everything
Agent Skill
2/7/2026

applying-frontend-patterns

フレームワーク非依存のフロントエンドコンポーネント設計パターン。 React/Vue/Angularコンポーネント設計、Container/Presentationalパターン適用、または component patterns, フロントエンドパターン, コンポーネント設計 に言及した時に使用。

T
thkt
4GitHub Stars
1Views
npx skills add thkt/claude-config

SKILL.md

Nameapplying-frontend-patterns
Descriptionフレームワーク非依存のフロントエンドコンポーネント設計パターン。 React/Vue/Angularコンポーネント設計、Container/Presentationalパターン適用、または component patterns, フロントエンドパターン, コンポーネント設計 に言及した時に使用。

name: applying-frontend-patterns description: > フレームワーク非依存のフロントエンドコンポーネント設計パターン。 React/Vue/Angularコンポーネント設計、Container/Presentationalパターン適用、または component patterns, フロントエンドパターン, コンポーネント設計 に言及した時に使用。 allowed-tools: [Read, Grep, Glob, Task] user-invocable: false

フロントエンドパターン

コアパターン

パターン使用タイミング
Container/Presentationalデータ取得 + 表示
Custom Hooks共有ビヘイビア
Composition柔軟なコンポーネント
State ManagementLocal → Shared → Global

Container/Presentational

Container (ロジック)Presentational (UI)
データ取得propsでデータ受取
状態管理ステートレス（理想）
イベント処理コールバックprops呼出
スタイルなし全スタイルはここ

状態管理

スコープツール例
LocaluseStateフォーム入力、トグル
SharedContextテーマ、認証状態
GlobalZustand/Reduxアプリ全体キャッシュ

使わない場合

シンプルな一回限りのコンポーネント、プロトタイプ（YAGNI）、再利用の見込みなし。

参照

トピックファイル
Container/Presentationreferences/container-presentational.md
Skills Info
Original Name:applying-frontend-patternsAuthor:thkt
Download
View on GitHub