# Web UI Lib

> (ePost) Use when referencing klara-theme component APIs, props, variants, spacing tokens, or theme provider patterns

- Skill: `majiayu000/web-ui-lib` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/web-ui-lib`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/web-ui-lib/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/web-ui-lib

---


# klara-theme Knowledge

## Before Using This Skill — Load Live KB (Mandatory)

klara-theme has a structured knowledge base in `libs/klara-theme/docs/`. Always start here — these docs are authoritative and agent-indexed.

**Step 1 — Read the KB registry:**
```
libs/klara-theme/docs/index.json
```
Parse `entries[]`. Each entry has an `agentHint` field that tells you exactly when to load it.

**Step 2 — Load docs by task type:**

| Task | Load these entries |
|------|--------------------|
| Component lookup / REUSE check | **FEAT-0001** — 76-component catalog |
| Component structure audit | **CONV-0001** — required files, directory rules |
| Props / naming audit | **CONV-0003** — IProps naming, vocab, JSDoc |
| Token / styling audit | **CONV-0006** — semantic tokens, styles file rule |
| Business isolation audit | **CONV-0007** — no domain types, no data fetching |
| A11Y audit | **CONV-0004** — theme-ui-label, useId, Radix, focus ring |
| New component / dev workflow | **CONV-0002** — nx commands, Storybook, test execution |
| Architecture understanding | **ARCH-0001** — atomic design, module structure |
| Adding dependencies / build | **ARCH-0002** — stack, Radix UI, Tailwind, Jest setup |

If `index.json` is missing, fall back to: `Glob libs/klara-theme/docs/**/*.md` then read files directly.

## Aspects (Static Reference — supplement live KB)

| Aspect | File | Purpose |
|--------|------|---------|
| Components | references/components.md | Component API reference, RAG query patterns, Glob fallback |
| Design System | references/design-system.md | Spacing, colors, typography, token system |
| Integration | references/integration.md | Theme provider, composition, state patterns |
| Contributing | references/contributing.md | Proposing components back to MUJI |
| Component Authoring | references/component-authoring.md | Conventions for building klara-theme components |