# 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, フロントエンドパターン, コンポーネント設計.

- Skill: `majiayu000/applying-frontend-patterns` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/applying-frontend-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/applying-frontend-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/applying-frontend-patterns

---


# 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` |