# UI Component Architecture

> A blueprint for building reusable, encapsulated UI components using Vanilla JavaScript.

- Skill: `jcorpac/ui-component-architecture` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jcorpac/ui-component-architecture`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jcorpac/ui-component-architecture/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: jcorpac (https://skillmd.com/u/jcorpac)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jcorpac/ui-component-architecture

---


# 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
```text
components/
└── Card/
    ├── index.js     # Component logic & template
    └── style.css    # Scoped styles
```

## Best Practices
- **Props**: Pass data into components via function arguments.
- **Events**: Components should communicate with the app by dispatching custom events.
- **Cleanup**: Provide a way to "destroy" or "unmount" a component to prevent memory leaks.