Component Architecture

Guide UI component decomposition by responsibility with clear prop and event contracts.

Updated Feb 15, 2026

Search Tags:#frontend #maintainability #composition #reusability #ui development #component architecture

Ready to run

npx skills add https://github.com/ftnilsson/agent-cli --skill component-architecture-ftnilsson

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Component Architecture
Source: https://github.com/ftnilsson/agent-cli/tree/main/frontend/skills/01-component-architecture
Command: npx skills add https://github.com/ftnilsson/agent-cli --skill component-architecture-ftnilsson

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers design, compose, and organize UI components effectively, ensuring maintainability and reusability across different frameworks.

Core Features & Use Cases

Decomposition: Breaks down complex UIs into single-responsibility components using a three-bucket heuristic (Layout, Feature, UI).
Clear Contracts: Defines robust prop and event interfaces for predictable component interaction.
Composition: Encourages building UIs by combining smaller, independent components rather than relying on complex configurations.
Separation of Concerns: Guides the extraction of business logic from presentation layers for better testability and portability.
Use Case: When starting a new feature, use this skill to guide the decomposition of the UI into logical, reusable components like UserProfileCard, NavigationBar, and Button.

Quick Start

Decompose the current page into components by responsibility, defining clear contracts for props and events.

Frequently Asked Questions about Component Architecture

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

FAQPage Schema

How do I decompose a complex UI into maintainable and reusable components?▼

To decompose a complex UI, break it down into single-responsibility components using a three-bucket heuristic that categorizes elements into Layout, Feature, and UI buckets. This approach ensures maintainability and reusability across different frameworks by enforcing clear boundaries.

What is the best way to define contracts for UI component interaction?▼

The best way to define UI component contracts is by establishing robust prop and event interfaces. Clear contract definition ensures predictable component interaction and easier maintainability when composing scalable user interfaces across various frameworks.

Does this component architecture approach work with any frontend framework?▼

Yes, this component architecture approach is explicitly framework-agnostic. It provides principles and best practices for designing and organizing UI components that ensure maintainability and reusability regardless of the specific frontend framework chosen.

Why should I use composition over configuration for UI development?▼

You should use composition over configuration because it encourages building UIs by combining smaller, independent components rather than relying on complex configurations. This methodology directly improves component reusability and overall architectural maintainability across projects.

How do I separate business logic from presentation layers in frontend development?▼

To separate business logic from presentation layers, extract the logic from the UI components entirely. This separation of concerns guides better testability and portability while maintaining clear contracts for props and events between the independent layers.