component-architecture
Component design patterns including composition, render props, compound components, and design systems. Use for reusable component architecture. Use when this capability is needed.
소스 정보
- 저장소
- tomevault-io/skills-registry
- 최근 소스 활동
- 2026년 4월 28일 22:53
- 감지된 SKILL.md 언어
- 영어
- 스타
- 1
- 포크
- 0
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
파일 탐색기
2 개 파일SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- component-architecture
- description
- Component design patterns including composition, render props, compound components, and design systems. Use for reusable component architecture. Use when this capability is needed.
- metadata
- {"author":"ak-eyther"}
# Component Architecture Patterns
## Composition Pattern
```typescript
function Card({ children }) {
return <div className="card">{children}</div>
}
function CardHeader({ children }) {
return <div className="card-header">{children}</div>
}
function CardBody({ children }) {
return <div className="card-body">{children}</div>
}
// Usage
<Card>
<CardHeader>Title</CardHeader>
<CardBody>Content</CardBody>
</Card>
```
## Compound Components
```typescript
const Tabs = ({ children }) => {
const [activeTab, setActiveTab] = useState(0)
return (
<TabsContext.Provider value={{ activeTab, setActiveTab }}>
{children}
</TabsContext.Provider>
)
}
Tabs.List = ({ children }) => <div className="tabs-list">{children}</div>
Tabs.Tab = ({ index, children }) => {
const { activeTab, setActiveTab } = useTabsContext()
return (
<button
className={activeTab === index ? 'active' : ''}
onClick={() => setActiveTab(index)}
>
{children}
</button>
)
}
Tabs.Panel = ({ index, children }) => {
const { activeTab } = useTabsContext()
return activeTab === index ? <div>{children}</div> : null
}
// Usage
<Tabs>
<Tabs.List>
<Tabs.Tab index={0}>Tab 1</Tabs.Tab>
<Tabs.Tab index={1}>Tab 2</Tabs.Tab>
</Tabs.List>
<Tabs.Panel index={0}>Content 1</Tabs.Panel>
<Tabs.Panel index={1}>Content 2</Tabs.Panel>
</Tabs>
```
## Render Props
```typescript
function DataFetcher({ url, render }) {
const [data, setData] = useState(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(data => {
setData(data)
setLoading(false)
})
}, [url])
return render({ data, loading })
}
// Usage
<DataFetcher
url="/api/users"
render={({ data, loading }) =>
loading ? <div>Loading...</div> : <UserList users={data} />
}
/>
```
## Headless Components
```typescript
function useDropdown() {
const [isOpen, setIsOpen] = useState(false)
const toggle = () => setIsOpen(!isOpen)
const close = () => setIsOpen(false)
return { isOpen, toggle, close }
}
// Usage - completely custom UI
function MyDropdown() {
const { isOpen, toggle, close } = useDropdown()
return (
<div>
<button onClick={toggle}>Toggle</button>
{isOpen && (
<div onClick={close}>
Custom dropdown content
</div>
)}
</div>
)
}
```
---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/ak-eyther) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-14 -->
GitHub에서 보기