Component Library
The LEGO bricks of your digital product. Accessible, consistent, and strongly-typed to accelerate specialized feature development.
Composition vs. Configuration
I avoid creating God Components - single `Button` with 50 props (`isBig`, `isRed`, `hasIcon`). This leads to unmaintainable spaghetti code.
Instead, I favor composition. By exposing sub-components (like `Card.Header`, `Card.Body`, `Card.Footer`), we give developers the flexibility to construct unique layouts while still adhering to the strict styling rules of the individual parts.
The "Strict Mode" Approach
- ●TypeScript First: Props are the contract. We use strict types (e.g., `size: 'sm' | 'md' | 'lg'`) to prevent misuse (no arbitrary pixel values).
- ●Accessibility (a11y): Components handle ARIA roles, keyboard navigation, and focus management internally, so every feature built with them is accessible by default.
- ●Utility Props: We restrict ad-hoc styling. You can't just adding `margin-top: 13px`. You must use the spacing scale (`mt=2`).
Modern Tooling
React & TypeScript
The industry standard for building declarative, type-safe UI.
Headless UI
Using unstyled, accessible primitives for complex interactions and applying our own Design Tokens on top.
Testing
Unit tests for logic and Interaction tests for visual states.
