Skill

react-component-library

React component library with Storybook. TypeScript interfaces, Jest/Testing Library tests, compound components. [EXPLICIT]

From jm-adk

Install

Run in your terminal

npx claudepluginhub javimontano/jm-adk-alfa

Tool Access

This skill uses the workspace's default tool permissions.

Supporting Assets

View in Repository

agents/guardian.md

agents/lead.md

agents/specialist.md

agents/support.md

evals/evals.json

knowledge/body-of-knowledge.md

knowledge/knowledge-graph.md

prompts/meta.md

prompts/primary.md

prompts/variations/deep.md

prompts/variations/quick.md

templates/output.docx.md

templates/output.html

Skill Content

Similar Skills

skill-lookup

Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.

prompts.chat

157.5k

prompt-lookup

Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.

prompts.chat

157.5k

agent-eval

Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.

everything-claude-code

139.2k

Stats

Stars1

Forks0

Last CommitMar 28, 2026

Actions

View Source View Plugin View on GitHub View README

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

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