Skill

ui-kit-builder

Design-token-driven UI kit. Button, Card, Modal, Table, Nav, Badge, Toast components. Theme switching support. [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

ui-kit-builder {Frontend} (v1.0)

"Ship pixels that perform, accessible by default."

Purpose

Design-token-driven UI kit. Button, Card, Modal, Table, Nav, Badge, Toast components. Theme switching support. [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:

"/ui-kit-builder" — Run the full ui kit builder workflow
"ui kit builder 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

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

138.0k

Stats

Stars1

Forks0

Last CommitMar 28, 2026

Actions

View Source View Plugin View on GitHub View README

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]

Input

Type

Required

Description

Requirements/spec

Text/File

Yes

What to build

Output

Type

Description

--------

------

-------------

Source files

HTML/CSS/JS/TSX

Production-ready code

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