component-design

Provide frontend component design guidelines for props, slots, and composability.

Updated Mar 8, 2026

Search Tags:#best practices #frontend #react #vue #component design #ui development

Ready to run

npx skills add https://github.com/messeb/skills --skill component-design-messeb

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: component-design
Source: https://github.com/messeb/skills/tree/main/plugins/frontend-developer/skills/component-design
Command: npx skills add https://github.com/messeb/skills --skill component-design-messeb

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides best practices and patterns for designing reusable, maintainable, and scalable frontend components, addressing common pitfalls in prop design, communication, and architecture.

Core Features & Use Cases

Component Granularity: Guidance on Atomic Design principles for structuring components from atoms to pages.
Props API Design: Strategies for creating explicit, type-safe, and minimal prop interfaces, avoiding boolean traps and deep props.
Communication Patterns: Best practices for component communication using props, slots, events, and state management solutions like provide/inject or Context.
Use Case: Refactor a complex, monolithic UI component into smaller, more manageable, and reusable pieces by applying the principles of Atomic Design and clear prop/slot definitions.

Quick Start

Review the component design checklist to identify potential areas for improvement in your current codebase.

Frequently Asked Questions about component-design

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

FAQPage Schema

What is the best way to design reusable React and Vue components?▼

Designing reusable components requires explicit interfaces, clear prop APIs, and single responsibility. Apply Atomic Design patterns to structure UI elements from atoms to pages, ensuring maintainable and scalable frontend architecture across React and Vue frameworks.

How do I avoid prop drilling when building frontend components?▼

Avoid prop drilling by adopting robust component communication patterns using slots, events, and state management solutions like provide/inject or Context. Designing explicit interfaces and utilizing compound components limits deep props and enforces single responsibility boundaries.

How do I refactor a monolithic UI component into smaller pieces?▼

Refactor monolithic UI components by applying Atomic Design principles and defining clear prop and slot interfaces. Break down complex structures into smaller, manageable, and reusable pieces by enforcing single responsibility and explicit component boundaries.

What are the best practices for type-safe props API design?▼

Props API design best practices involve creating explicit, type-safe, and minimal prop interfaces. Avoid boolean traps and deep props by enforcing principles of single responsibility and explicit communication boundaries for frontend UI development.

Does this component design approach work for both Vue and React frameworks?▼

Yes, these component design guidelines support both Vue and React frameworks. The patterns address framework-agnostic concepts like props, slots, composability, and communication, while mapping to specific implementations like provide/inject or Context.