Framework-agnostic frontend component design patterns with rich React implementation examples. Use when working with React, Vue, or Angular components (コンポーネント), discussing patterns (パターン), hooks or custom hooks (カスタムフック), container/presentational separation (分離), state management (状態管理), composition, HOC, render props, or frontend architecture. Covers Container/Presentational separation, React Hooks patterns (useEffect, useMemo, useCallback), custom hooks design, state management strategies, and component composition. Essential for design-pattern-reviewer agent and frontend implementations.
Limited to specific tools
Additional assets for this skill
This skill is limited to using the following tools:
references/container-presentational.mdFramework-agnostic component design patterns with emphasis on React implementations. Covers:
Keywords that activate this skill:
For guaranteed activation:
/code commanddesign-pattern-reviewer agentConcept (Framework-agnostic): Separate logic (data fetching, state) from UI (presentation).
Benefits:
React Implementation:
// ❌ Avoid: Mixed concerns
export const UserProfile = () => {
const [user, setUser] = useState(null)
useEffect(() => {
fetch('/api/user').then(setUser)
}, [])
return <div>{user?.name}</div>
}
// ✅ Good: Separated
// Container (logic)
export const UserProfileContainer = () => {
const [user, setUser] = useState(null)
useEffect(() => {
fetch('/api/user').then(setUser)
}, [])
return <UserProfile user={user} />
}
// Presentational (UI only)
export const UserProfile = ({ user }) => (
<div>{user?.name}</div>
)
Vue Implementation (for reference):
<!-- Container -->
<script setup>
import { ref, onMounted } from 'vue'
const user = ref(null)
onMounted(() => fetch('/api/user').then(u => user.value = u))
</script>
<!-- Presentational -->
<script setup>
defineProps(['user'])
</script>
<template><div>{{ user?.name }}</div></template>
useEffect Dependencies:
// ❌ Avoid: Missing dependencies
useEffect(() => {
fetchData(userId)
}, []) // Missing userId
// ✅ Good: Complete dependencies
useEffect(() => {
fetchData(userId)
}, [userId])
useMemo for Expensive Computations:
// ❌ Avoid: Recalculated every render
const filtered = items.filter(item => item.active)
// ✅ Good: Memoized
const filtered = useMemo(
() => items.filter(item => item.active),
[items]
)
useCallback for Stable Functions:
// ❌ Avoid: New function every render
<Child onClick={() => handleClick(id)} />
// ✅ Good: Stable reference
const handleClickCallback = useCallback(
() => handleClick(id),
[id]
)
<Child onClick={handleClickCallback} />
Naming Convention: Always start with use
// ✅ Good: Reusable data fetching
function useFetchUser(userId) {
const [user, setUser] = useState(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
fetch(`/api/users/${userId}`)
.then(setUser)
.finally(() => setLoading(false))
}, [userId])
return { user, loading }
}
// Usage
const { user, loading } = useFetchUser(userId)
Concept (Universal):
React Implementation:
// Local state (useState)
const [count, setCount] = useState(0)
// Shared state (Context)
const ThemeContext = createContext()
// Provider
<ThemeContext.Provider value={theme}>
// Global state (Context + custom hook)
function useAuth() {
const context = useContext(AuthContext)
return context
}
State Granularity:
// ❌ Avoid: Large state object
const [state, setState] = useState({
user, posts, comments, settings
})
// ✅ Good: Separate state
const [user, setUser] = useState()
const [posts, setPosts] = useState()
const [comments, setComments] = useState()
Concept (Universal): Build complex components from simple ones.
React Patterns:
// 1. Children pattern
const Card = ({ children }) => (
<div className="card">{children}</div>
)
// 2. Render props
const DataProvider = ({ render, data }) => (
<div>{render(data)}</div>
)
// 3. HOC (Higher-Order Component)
const withAuth = (Component) => (props) => {
const user = useAuth()
return user ? <Component {...props} /> : <Login />
}
# In agent YAML frontmatter
dependencies: [frontend-patterns]
Or explicit reference:
[@~/.claude/skills/frontend-patterns/SKILL.md]
| Pattern | React | Vue | Angular |
|---|---|---|---|
| Container/Presentational | Separate components | Composition API | Smart/Dumb components |
| State | useState, Context | ref, reactive | Services, RxJS |
| Effects | useEffect | onMounted, watch | ngOnInit, rxjs |
| Composition | children, render props | slots, scoped slots | ng-content, directives |
Key Insight: Patterns are universal, implementations differ.
Skip complex patterns for:
Rule: Measure complexity. Add patterns when pain is felt, not anticipated.
Patterns are working when:
container-presentational.md - Detailed Container/Presentational guideCurrently empty (knowledge-only skill)
Currently empty (knowledge-only skill)