Frontend Components

Design reusable UI components by defining single-responsibility components with explicit props, clear naming conventions, and encapsulated state. Document your API with prop types and usage examples, then export composed subcomponents to enable flexible composition patterns across React, Vue, Svelte, or web components.

Yes. Composition patterns let you build complex UI by combining single-responsibility components into larger structures. Define base components with minimal, explicit props, then compose them into cards, buttons, modals, and other patterns while maintaining clear interfaces and reusability across your component library.

Structure TypeScript components with single responsibility, explicit prop interfaces, and clear encapsulation. Use minimal required props, descriptive naming, and documented APIs. Keep state management disciplined and export subcomponents to enable composition, making components reusable across different contexts and frameworks.

Document component APIs by defining clear prop interfaces with TypeScript types, adding usage examples showing common composition patterns, and explaining the component's single responsibility. Make documentation consumable by showing concrete examples of how to compose and configure each component.

Yes. The core principles—single responsibility, explicit interfaces, encapsulation, and composition—apply across React, Vue, Svelte, and web components. File types vary (.jsx, .tsx, .vue, .svelte) but the design guidance for reusable, well-documented components remains consistent.

Avoid implicit props, unclear naming, and over-coupling components to specific use cases. Don't neglect documentation or API clarity, as this breaks reusability. Resist adding too many configuration options; keep props minimal and focused on single responsibility to maintain clarity and composability.