skills.rest
yogvidwankhede
yogvidwankhedeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

component-architecture

Guide React component library architecture with design patterns and API optimization.

1|Updated Jul 26, 2026
Search Tags:#typescript#architecture#frontend#react#components#api-design
One-click install
npx skills add https://github.com/yogvidwankhede/vishwakarma --skill component-architecture-yogvidwankhede
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-architecture
Source: https://github.com/yogvidwankhede/vishwakarma/tree/main/.claude/skills/component-architecture
Command: npx skills add https://github.com/yogvidwankhede/vishwakarma --skill component-architecture-yogvidwankhede

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the common failures in component library design, such as prop explosion, inconsistent API surfaces, and poor separation between behavior and appearance.

Core Features & Use Cases

  • API Design Patterns: Implements compound components, headless logic, and controlled/uncontrolled state management to ensure flexibility and type safety.
  • Design Contracts: Provides a structured approach to component architecture that prevents common pitfalls like prop drilling and mid-lifecycle state resets.
  • Use Case: Use this when refactoring a complex UI component that has become difficult to maintain, or when designing a new shared component library to ensure it remains extensible and accessible.

Quick Start

Use the component-architecture skill to review my current component API and suggest improvements for better composition and state management.

Frequently Asked Questions about component-architecture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a scalable React component API?▼

Design a scalable React component API by implementing compound components, headless logic separation, and controlled/uncontrolled state management to ensure flexibility, type safety, and consistent prop naming across your library.

What is the best way to prevent prop drilling in React component libraries?▼

Prevent prop drilling in React component libraries by applying structured architectural design contracts that separate behavior from appearance, ensuring robust state handling and a consistent API surface.

When do I need headless logic separation in frontend architecture?▼

You need headless logic separation in frontend architecture when building shared UI systems or refactoring complex components to decouple behavior from appearance, preventing prop explosion and mid-lifecycle state resets.

How do I refactor a complex React component to improve maintainability?▼

Refactor a complex React component to improve maintainability by reviewing its API surface and applying compound component patterns and controlled state management to optimize extensibility and accessibility.

How does headless logic work in React component design?▼

Headless logic in React component design works by isolating state handling and behavior from presentation, allowing developers to build flexible, type-safe components without coupling business logic to specific visual structures.

Can I use TypeScript to enforce consistent prop naming in a shared UI system?▼

Use TypeScript to enforce consistent prop naming in a shared UI system by applying type-safe design contracts and controlled state management, which prevents API surface inconsistencies and ensures robust component architecture.

Related Skills

Explore More Software Engineering Skills→
kangmominkangmomin
1

default-conventions-hd

Enforce React/Next.js component structure, prop naming, and TypeScript interface conventions.

Community
Advanced
quanngynxquanngynx

react-composition-2026

Refactor React components by replacing boolean props with compound composition patterns.

Community
Intermediate
dinoudondinoudon

component-library

Create reusable UI components with React and Storybook.

Community
Advanced
b4r7xb4r7x

react-design-patterns

Guide React component design pattern selection with a decision guide.

Community
Intermediate