klara-theme Skill
Domain knowledge for the klara-theme UI component library. Provides patterns for the complete Figma-to-code pipeline: planning, implementation, auditing, fixing, and documentation.
Pipeline Overview
plan-feature → implement-component → audit-ui → fix-findings → document-component
Each stage has a dedicated aspect file with detailed steps, inputs, outputs, and success criteria.
Aspect Files
| Aspect |
Purpose |
Key Outputs |
references/plan-feature.md |
Plan a new UI feature from Figma designs |
6 JSON plan artifacts |
references/implement-component.md |
Implement component from plan artifacts |
Component code + Storybook stories |
references/audit-ui.md |
Audit implementation against plan and Figma |
audit-report.json |
references/fix-findings.md |
Resolve audit findings |
PATCH.diff or fix-notes.json |
references/document-component.md |
Document component with Figma data |
.figma.json + .mapping.json |
references/audit-standards.md |
Enforceable klara-theme rules (all sections: KBLOAD, STRUCT, PROPS, TOKEN, BIZ, A11Y, TEST, SEC, PERF, LDRY, EMBED) |
Pass/fail criteria per rule |
references/guidance.md |
Integration consulting workflow, design-code conflict resolution |
Fix suggestions, consumer guidance checklist |
Before Using This Skill — Load Live KB (Mandatory)
klara-theme has a structured knowledge base in libs/klara-theme/docs/. Always read the registry first — each entry has an agentHint that tells you when it applies.
Step 1 — Read the registry:
libs/klara-theme/docs/index.json
Step 2 — Load by pipeline stage:
| Pipeline Stage |
Load these entries |
| Any stage (baseline) |
CONV-0001 component structure, FEAT-0001 component catalog |
| Plan feature |
ARCH-0001 architecture, CONV-0003 props naming, CONV-0006 tokens, CONV-0007 BIZ isolation |
| Implement component |
CONV-0001, CONV-0003, CONV-0005 translations, CONV-0006 tokens |
| Audit UI |
CONV-0001 through CONV-0007 (all conventions), FEAT-0001 catalog |
| Fix findings |
Load the entry that corresponds to the violated convention (use finding ruleId prefix: STRUCT→CONV-0001, PROPS→CONV-0003, TOKEN→CONV-0006, BIZ→CONV-0007, A11Y→CONV-0004) |
| Document component |
FEAT-0001 catalog, CONV-0001 structure |
If index.json is missing, fall back to: Glob libs/klara-theme/docs/**/*.md and read directly.
Quick Reference
Input/Output Directory
All per-feature artifacts live in:
libs/klara-theme/.ai-agents/ui/<feature>/
Key Resources
- Figma extraction:
figma skill
- Token system:
libs/klara-theme/_tokens/ (3-layer: primitives, themes, components)
- Schemas:
libs/klara-theme/figma-data/schema/
Build Commands
- Lint:
nx lint klara-theme
- Test:
nx test klara-theme
- Storybook:
npm run storybook-theme-build
Conventions
- Reuse-first: Always check existing components before creating new ones
- Token-only: No hardcoded values; use design tokens from the 3-layer system
- Storybook coverage: Default, Sizes, Variants, States stories for every component
- forwardRef pattern: All components use
forwardRef with displayName
- TypeScript strict mode: Required for all component code
Related Documents
libs/klara-theme/CLAUDE.md — Component patterns, tokens, conventionsfigma skill — Figma MCP integration
Platform-Specific Pipelines
The pipeline stages apply to all platforms. Platform differences:
| Stage |
Web |
iOS |
Android |
| Source |
libs/klara-theme/ |
ios_theme_ui/ |
android_theme_ui/theme/ |
| Components |
React + TypeScript |
SwiftUI |
Jetpack Compose |
| Tokens |
CSS custom properties |
Swift constants |
Kotlin theme objects |
| Stories/Docs |
Storybook |
Xcode Previews |
Compose Previews |
| Artifacts |
.ai-agents/ui/ |
.ai-agents/ui/ |
.ai-agents/ui/ |
Load platform-specific ui-lib skill (web-ui-lib, ios-ui-lib, android-ui-lib) via skill-discovery for component API reference.
1---2name: ui-lib-dev3description: (ePost) Use when building, auditing, or documenting UI library components through the Figma-to-code pipeline across web, iOS, or Android platforms4---5
6# klara-theme Skill
7
8Domain knowledge for the klara-theme UI component library. Provides patterns for the complete Figma-to-code pipeline: planning, implementation, auditing, fixing, and documentation.
9
10## Pipeline Overview
11
12```
13plan-feature → implement-component → audit-ui → fix-findings → document-component
14```
15
16Each stage has a dedicated aspect file with detailed steps, inputs, outputs, and success criteria.
17
18## Aspect Files
19
20| Aspect | Purpose | Key Outputs |
21|--------|---------|-------------|
22| `references/plan-feature.md` | Plan a new UI feature from Figma designs | 6 JSON plan artifacts |
23| `references/implement-component.md` | Implement component from plan artifacts | Component code + Storybook stories |
24| `references/audit-ui.md` | Audit implementation against plan and Figma | `audit-report.json` |
25| `references/fix-findings.md` | Resolve audit findings | `PATCH.diff` or `fix-notes.json` |
26| `references/document-component.md` | Document component with Figma data | `.figma.json` + `.mapping.json` |
27| `references/audit-standards.md` | Enforceable klara-theme rules (all sections: KBLOAD, STRUCT, PROPS, TOKEN, BIZ, A11Y, TEST, SEC, PERF, LDRY, EMBED) | Pass/fail criteria per rule |
28| `references/guidance.md` | Integration consulting workflow, design-code conflict resolution | Fix suggestions, consumer guidance checklist |
29
30## Before Using This Skill — Load Live KB (Mandatory)
31
32klara-theme has a structured knowledge base in `libs/klara-theme/docs/`. Always read the registry first — each entry has an `agentHint` that tells you when it applies.
33
34**Step 1 — Read the registry:**
35```
36libs/klara-theme/docs/index.json
37```
38
39**Step 2 — Load by pipeline stage:**
40
41| Pipeline Stage | Load these entries |
42|---------------|--------------------|
43| Any stage (baseline) | **CONV-0001** component structure, **FEAT-0001** component catalog |
44| Plan feature | **ARCH-0001** architecture, **CONV-0003** props naming, **CONV-0006** tokens, **CONV-0007** BIZ isolation |
45| Implement component | **CONV-0001**, **CONV-0003**, **CONV-0005** translations, **CONV-0006** tokens |
46| Audit UI | **CONV-0001** through **CONV-0007** (all conventions), **FEAT-0001** catalog |
47| Fix findings | Load the entry that corresponds to the violated convention (use finding `ruleId` prefix: STRUCT→CONV-0001, PROPS→CONV-0003, TOKEN→CONV-0006, BIZ→CONV-0007, A11Y→CONV-0004) |
48| Document component | **FEAT-0001** catalog, **CONV-0001** structure |
49
50If `index.json` is missing, fall back to: `Glob libs/klara-theme/docs/**/*.md` and read directly.
51
52## Quick Reference
53
54### Input/Output Directory
55
56All per-feature artifacts live in:
57```
58libs/klara-theme/.ai-agents/ui/<feature>/
59```
60
61### Key Resources
62
63- **Figma extraction**: `figma` skill
64- **Token system**: `libs/klara-theme/_tokens/` (3-layer: primitives, themes, components)
65- **Schemas**: `libs/klara-theme/figma-data/schema/`
66
67### Build Commands
68
69- Lint: `nx lint klara-theme`
70- Test: `nx test klara-theme`
71- Storybook: `npm run storybook-theme-build`
72
73## Conventions
74
75- **Reuse-first**: Always check existing components before creating new ones
76- **Token-only**: No hardcoded values; use design tokens from the 3-layer system
77- **Storybook coverage**: Default, Sizes, Variants, States stories for every component
78- **forwardRef pattern**: All components use `forwardRef` with `displayName`
79- **TypeScript strict mode**: Required for all component code
80
81## Related Documents
82
83- `libs/klara-theme/CLAUDE.md` — Component patterns, tokens, conventions
84- `figma` skill — Figma MCP integration
85
86## Platform-Specific Pipelines
87
88The pipeline stages apply to all platforms. Platform differences:
89
90| Stage | Web | iOS | Android |
91|-------|-----|-----|---------|
92| Source | `libs/klara-theme/` | `ios_theme_ui/` | `android_theme_ui/theme/` |
93| Components | React + TypeScript | SwiftUI | Jetpack Compose |
94| Tokens | CSS custom properties | Swift constants | Kotlin theme objects |
95| Stories/Docs | Storybook | Xcode Previews | Compose Previews |
96| Artifacts | `.ai-agents/ui/` | `.ai-agents/ui/` | `.ai-agents/ui/` |
97
98Load platform-specific ui-lib skill (web-ui-lib, ios-ui-lib, android-ui-lib) via skill-discovery for component API reference.
majiayu000