Agent skill
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, フロントエンドパターン, コンポーネント設計.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/applying-frontend-patterns
SKILL.md
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 |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?