UI Component Architecture

Encapsulation shouldn't require a framework. This skill provides a pattern for building reusable components that are easy to drop into any project.

The Component Pattern

1. The Template: A function that returns HTML as a template literal.
2. The Styles: Encapsulated CSS (often using scoped selectors or Shadow DOM).
3. The Logic: An init function that sets up listeners and internal state.

Folder Structure

components/
└── Card/
    ├── index.js     # Component logic & template
    └── style.css    # Scoped styles