# React Component Library

> React component library with Storybook. TypeScript interfaces, Jest/Testing Library tests, compound components. [EXPLICIT] Use when this capability is needed.

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

---

# 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
1. **Law of Semantics:** HTML first, CSS second, JS third. Semantic markup is non-negotiable. [EXPLICIT]
2. **Law of Performance:** Lighthouse > 90. Lazy load images. Code-split routes. Critical CSS inline. [EXPLICIT]
3. **Law of Accessibility:** WCAG 2.1 AA minimum. Keyboard navigable. Screen reader tested. ARIA where needed. [EXPLICIT]
## Core Process
### Phase 1: Structure
1. Define page/component structure with semantic HTML5. [EXPLICIT]
2. Apply design tokens from `.agent/.shared/design-tokens.md`. [EXPLICIT]
3. Configure responsive breakpoints (mobile-first). [EXPLICIT]
### Phase 2: Build
1. Implement with framework (React/Angular) or vanilla HTML/CSS/JS. [EXPLICIT]
2. Integrate Firebase services (Auth, Firestore listeners, Storage). [EXPLICIT]
3. Add loading/error states for async operations. [EXPLICIT]
### Phase 3: Validate
1. Run Lighthouse audit (> 90 on all categories). [EXPLICIT]
2. Run accessibility audit (axe-core). [EXPLICIT]
3. 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](https://github.com/JaviMontano/jm-adk-alfa) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-15 -->