From harness-claude
Builds multi-part React components (e.g., Tabs/Tab, Modal/Header) that share state via context for flexible composition without prop-drilling.
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeThis skill uses the workspace's default tool permissions.
> Build multi-part components that share state implicitly via context
Implements React component patterns: compound components with context, render props, HOCs, custom hooks, provider with reducer, controlled/uncontrolled, prop getters, state reducer.
Provides React patterns like compound components, render props, custom hooks, and HOCs for scalable frontend apps. Use for component design, state management, and best practices.
Provides React composition patterns for refactoring boolean prop-heavy components, building compound components, context providers, and scalable APIs.
Share bugs, ideas, or general feedback.
Build multi-part components that share state implicitly via context
useState or useReducer.Parent.Child = Child).const FlyOutContext = createContext<{ open: boolean; toggle: () => void } | null>(null);
function FlyOut({ children }: { children: React.ReactNode }) {
const [open, setOpen] = useState(false);
return (
<FlyOutContext.Provider value={{ open, toggle: () => setOpen((o) => !o) }}>
<div className="flyout">{children}</div>
</FlyOutContext.Provider>
);
}
function Toggle() {
const ctx = useContext(FlyOutContext)!;
return <button onClick={ctx.toggle}>Toggle</button>;
}
function List({ children }: { children: React.ReactNode }) {
const ctx = useContext(FlyOutContext)!;
return ctx.open ? <ul>{children}</ul> : null;
}
FlyOut.Toggle = Toggle;
FlyOut.List = List;
The compound pattern addresses a common pain point: component APIs that grow to have dozens of props as every variant is added. By inverting control to the consumer (they choose the composition), the parent component stays lean and the API stays readable.
Trade-offs:
Common examples in the wild:
<select> / <option> is the canonical compound componenthttps://patterns.dev/react/compound-pattern