component-architecture

ak-eyther's avatarfrom ak-eyther

Component design patterns including composition, render props, compound components, and design systems. Use for reusable component architecture.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 6, 2026⬇️2downloads
[Architecture Design]

When & Why to Use This Skill

This Claude skill provides expert guidance and implementation patterns for modern frontend component architecture. It helps developers build scalable, maintainable, and highly reusable UI systems by leveraging advanced design patterns such as composition, compound components, render props, and headless components. By following these industry-standard practices, teams can reduce code duplication and improve the overall robustness of their web applications.

Use Cases

  • Building a comprehensive design system: Creating a library of consistent, reusable UI components like Tabs, Modals, and Cards using compound component patterns.
  • Refactoring monolithic components: Breaking down complex, hard-to-maintain UI code into smaller, composable units to improve readability and testability.
  • Decoupling logic from UI: Implementing headless components or render props to share complex stateful logic across different visual representations.
  • Standardizing frontend architecture: Establishing a unified architectural language and pattern set for development teams to ensure code consistency across large-scale projects.
namecomponent-architecture
descriptionComponent design patterns including composition, render props, compound components, and design systems. Use for reusable component architecture.

Component Architecture Patterns

Composition Pattern

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

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

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

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>
  )
}