Framework-agnostic frontend component design patterns. Use when: component patterns, Container/Presentational, フロントエンドパターン, コンポーネント設計.
From shipnpx claudepluginhub thkt/dotclaude --plugin toolkitThis skill is limited to using the following tools:
references/container-presentational.mdProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Calculates TAM/SAM/SOM using top-down, bottom-up, and value theory methodologies for market sizing, revenue estimation, and startup validation.
| Pattern | When to Use |
|---|---|
| Container/Presentational | Data fetching + display |
| Custom Hooks | Shared behavior |
| Composition | Flexible components |
| State Management | Local → Shared → Global |
| 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 |
| Scope | Tool | Example |
|---|---|---|
| Local | useState | Form input, toggle |
| Shared | Context | Theme, auth status |
| Global | Zustand/Redux | App-wide cache |
Simple one-off components, prototypes (YAGNI), no reuse expected.
| Topic | File |
|---|---|
| Container/Presentation | ${CLAUDE_SKILL_DIR}/references/container-presentational.md |