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 |
1---2name: web-ui-lib3description: (ePost) Use when referencing klara-theme component APIs, props, variants, spacing tokens, or theme provider patterns4---5
6# klara-theme Knowledge
7
8## Before Using This Skill — Load Live KB (Mandatory)
9
10klara-theme has a structured knowledge base in `libs/klara-theme/docs/`. Always start here — these docs are authoritative and agent-indexed.
11
12**Step 1 — Read the KB registry:**
13```
14libs/klara-theme/docs/index.json
15```
16Parse `entries[]`. Each entry has an `agentHint` field that tells you exactly when to load it.
17
18**Step 2 — Load docs by task type:**
19
20| Task | Load these entries |
21|------|--------------------|
22| Component lookup / REUSE check | **FEAT-0001** — 76-component catalog |
23| Component structure audit | **CONV-0001** — required files, directory rules |
24| Props / naming audit | **CONV-0003** — IProps naming, vocab, JSDoc |
25| Token / styling audit | **CONV-0006** — semantic tokens, styles file rule |
26| Business isolation audit | **CONV-0007** — no domain types, no data fetching |
27| A11Y audit | **CONV-0004** — theme-ui-label, useId, Radix, focus ring |
28| New component / dev workflow | **CONV-0002** — nx commands, Storybook, test execution |
29| Architecture understanding | **ARCH-0001** — atomic design, module structure |
30| Adding dependencies / build | **ARCH-0002** — stack, Radix UI, Tailwind, Jest setup |
31
32If `index.json` is missing, fall back to: `Glob libs/klara-theme/docs/**/*.md` then read files directly.
33
34## Aspects (Static Reference — supplement live KB)
35
36| Aspect | File | Purpose |
37|--------|------|---------|
38| Components | references/components.md | Component API reference, RAG query patterns, Glob fallback |
39| Design System | references/design-system.md | Spacing, colors, typography, token system |
40| Integration | references/integration.md | Theme provider, composition, state patterns |
41| Contributing | references/contributing.md | Proposing components back to MUJI |
42| Component Authoring | references/component-authoring.md | Conventions for building klara-theme components |
majiayu000