How does the multi-agent workflow improve component design?

It triggers three specialized agents to explore your specific codebase context, research the latest patterns, and run a final 'sniper' validation to ensure the implementation is flawless.

Does it support TypeScript?

Yes, it includes deep support for TypeScript, providing proper prop definitions, generic types for polymorphic components, and ref forwarding types.

What React version does this skill support?

This skill is specifically optimized for React 19 patterns and best practices, though many patterns are backwards compatible with React 18.

What composition patterns can I implement?

The skill covers the Children pattern, Named Slots, Compound Components (using Context), Render Props, and Polymorphic 'as' components.

React Component Composition Expert

Name: React Component Composition Expert
Author: fusengine

byfusengine

•

デザインツール

Architects scalable, reusable React components using advanced composition patterns like slots, compound components, and render props.

This skill enables Claude to design and implement sophisticated component architectures specifically optimized for React 19. By utilizing a specialized multi-agent workflow, it ensures that new components align with existing codebase patterns while leveraging modern best practices such as polymorphic elements, named slots, and the compound component pattern. It is an essential tool for developers building design systems, UI libraries, or complex application hierarchies that require flexible, type-safe, and maintainable component APIs.

主な機能

012 GitHub stars

02Implements advanced React 19 composition patterns including slots and compound components.

03Provides built-in validation for prop typing, ref forwarding, and nesting depth constraints.

04Creates type-safe polymorphic components for maximum UI flexibility and accessibility.

05Automates codebase exploration to maintain consistency with existing design patterns.

06Generates clean, reusable component APIs that significantly reduce code duplication.

ユースケース

01Creating highly flexible layout containers using named slots and children patterns for complex dashboards.

02Building a standardized UI library or design system with consistent, extensible component APIs.

03Refactoring monolithic components into modular, composable sub-components to improve maintainability.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fusengine/agents component-composition

For use in Claude.ai and ChatGPT

主な機能

012 GitHub stars

02Implements advanced React 19 composition patterns including slots and compound components.

03Provides built-in validation for prop typing, ref forwarding, and nesting depth constraints.

04Creates type-safe polymorphic components for maximum UI flexibility and accessibility.

05Automates codebase exploration to maintain consistency with existing design patterns.

06Generates clean, reusable component APIs that significantly reduce code duplication.

ユースケース

01Creating highly flexible layout containers using named slots and children patterns for complex dashboards.

02Building a standardized UI library or design system with consistent, extensible component APIs.

03Refactoring monolithic components into modular, composable sub-components to improve maintainability.