tomevault-io react-component-library {Frontend} (v1.0)
"Ship pixels that perform, accessible by default."
Purpose
React component library with Storybook. TypeScript interfaces, Jest/Testing Library tests, compound components. [EXPLICIT] When to use: Frontend development within the Firebase/Google/Hostinger stack.
Core Principles
- Law of Semantics: HTML first, CSS second, JS third. Semantic markup is non-negotiable. [EXPLICIT]
- Law of Performance: Lighthouse > 90. Lazy load images. Code-split routes. Critical CSS inline. [EXPLICIT]
- Law of Accessibility: WCAG 2.1 AA minimum. Keyboard navigable. Screen reader tested. ARIA where needed. [EXPLICIT]
Core Process
Phase 1: Structure
- Define page/component structure with semantic HTML5. [EXPLICIT]
- Apply design tokens from
.agent/.shared/design-tokens.md. [EXPLICIT] - Configure responsive breakpoints (mobile-first). [EXPLICIT]
Phase 2: Build
- Implement with framework (React/Angular) or vanilla HTML/CSS/JS. [EXPLICIT]
- Integrate Firebase services (Auth, Firestore listeners, Storage). [EXPLICIT]
- Add loading/error states for async operations. [EXPLICIT]
Phase 3: Validate
- Run Lighthouse audit (> 90 on all categories). [EXPLICIT]
- Run accessibility audit (axe-core). [EXPLICIT]
- Test on mobile, tablet, desktop breakpoints. [EXPLICIT]
3. Inputs / Outputs
| Input | Type | Required | Description |
|---|---|---|---|
| Requirements/spec | Text/File | Yes | What to build |
| Output | Type | Description | |
| -------- | ------ | ------------- | |
| Source files | HTML/CSS/JS/TSX | Production-ready code |
Validation Gate
- Semantic HTML5 structure
- Responsive on all breakpoints
- Lighthouse > 90
- WCAG 2.1 AA compliant
- Firebase integration working
5. Self-Correction Triggers
[!WARNING] IF using div soup without semantic elements THEN refactor to semantic HTML5. IF Lighthouse < 90 THEN optimize before shipping.
Usage
Example invocations:
- "/react-component-library" — Run the full react component library workflow
- "react component library on this project" — Apply to current context
Assumptions & Limits
- Assumes access to project artifacts (code, docs, configs) [EXPLICIT]
- Requires English-language output unless otherwise specified [EXPLICIT]
- Does not replace domain expert judgment for final decisions [EXPLICIT]
Edge Cases
| Scenario | Handling |
|---|---|
| Empty or minimal input | Request clarification before proceeding |
| Conflicting requirements | Flag conflicts explicitly, propose resolution |
| Out-of-scope request | Redirect to appropriate skill or escalate |
Source: JaviMontano/jm-adk-alfa — distributed by TomeVault.