Purpose

React component library with Storybook. TypeScript interfaces, Jest/Testing Library tests, compound components. When to use: Frontend development within the Firebase/Google/Hostinger stack.

1. The Physics

Law of Semantics: HTML first, CSS second, JS third. Semantic markup is non-negotiable.
Law of Performance: Lighthouse > 90. Lazy load images. Code-split routes. Critical CSS inline.
Law of Accessibility: WCAG 2.1 AA minimum. Keyboard navigable. Screen reader tested. ARIA where needed.

2. The Protocol

Phase 1: Structure

Define page/component structure with semantic HTML5.

Input	Type	Required	Description
Requirements/spec	Text/File	Yes	What to build
Output	Type	Description
--------	------	-------------
Source files	HTML/CSS/JS/TSX	Production-ready code

React Component Library

Purpose

1. The Physics

2. The Protocol

Phase 1: Structure

React Component Library

Purpose

1. The Physics

2. The Protocol

Phase 1: Structure

Phase 2: Build

Phase 3: Validate

3. Inputs / Outputs

4. Quality Gates

5. Self-Correction Triggers

Extract Errors

Frontend Patterns

Coding Standards

Coding Standards

Coding Standards

Frontend Patterns