Use when building or styling a component in libs/ui-react or libs/ui-rnative — the cross-platform styling principles, plus routing to the platform mechanics: Tailwind + cva + cn on web, useStyleSheet + themeJS + lx on React Native. Load this before writing component styles.
中文简介正在准备中。当前显示原文说明。
查看安装方法安装前可以查看交给 AI 代理的指令内容。
Lumen ships the same components on web and React Native. The vocabulary of
design tokens is shared across both (bg-muted ↔ t.colors.bg.muted); the
mechanism is not. This skill states the principles that hold on both platforms,
then routes you to the platform mechanics.
Derive the touched lib from the path (see the Libraries table in AGENTS.md),
then read the matching reference:
| Lib | Read |
|---|---|
libs/ui-react | references/react.md (Tailwind + cva + cn) |
libs/ui-rnative | references/rnative.md (useStyleSheet + themeJS + lx) |
Never apply one platform's mechanics to the other lib. A className on an RN
file or a useStyleSheet call on a web file is always wrong.
These hold regardless of mechanism — the references show how each realises them.
references/*.ref, className,
or style), give it a distinct name (contentClassName, inputStyle) rather
than overloading the top-level prop.cva on web, Record<Variant, value>
inside useStyleSheet on RN), never assembled ad hoc in the render body.text-${color} and its RN
equivalents are wrong — use complete token strings and a merge helper (cn on
web, StyleSheet.flatten on RN).Rules verifiable from a diff. Lint already covers unknown/invalid Tailwind
classnames, banned imports and formatting — see the "already enforced" list in
pr-review; don't raise those here.
| Check | Applies to | Detect | Skip |
|---|---|---|---|
| Raw Tailwind value instead of a token | react | text-gray-, bg-blue-, font-bold, text-sm, w-[, h-[ | .mdx doc-table markup |
| Dynamic classname built by concatenation | react | className={`...${ ` | — |
Classnames in a bare string variable instead of cn() / cva() | react | const … = 'flex …' outside a cn( / cva( call | strings inlined in className |
cva skipped where variants/many classes exist (or forced for 1–2 classes) | react | inline variant branching in JSX | — |
data-[state=…] on a Base UI primitive (or data-[open] on a Radix one) | react | import source vs attribute form | — |
Hardcoded colour/spacing/size literal instead of a t.* token | rnative | numeric or '#…' inside useStyleSheet | geometry constants under Components/visualization/ |
Large stylesheet inlined in the component body instead of a useXStyles hook | rnative | useStyleSheet call inline in the component | small one-off styles |
Consumer style/lx merged before internal styles (consumer can't win) | rnative | flatten([style, styles.root]) (reversed order) | — |
| Nested override overloads the top-level prop instead of a distinct name | both | one className/style prop feeding an inner element | — |
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Creates and maintains Figma Code Connect files (`*.figma.tsx`) that map Figma components to code via the parser-based `figma.connect()` API. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.tsx files.
中文简介正在准备中。当前显示原文说明。
Use when creating, naming, or placing a file or folder in libs/*, or when modifying or adding a file to an existing component (even when the barrel isn't touched) — component vs utility naming, the one-responsibility-per-file layout, when a folder needs an `index.ts` barrel (public API only), and the required set of files a component needs per lib. Load this before scaffolding or restructuring a component so the layout matches the codebase.
中文简介正在准备中。当前显示原文说明。
Use when designing or changing a component's public API, its composition, or its state model in libs/ui-react or libs/ui-rnative — layering (core vs internal vs primitives), BaseProps/Props splits, converting a component to compound / changing its composition with createSafeContext, controlled/uncontrolled state, prop-naming conventions, and cross-platform API parity. Load this before shaping a new component, changing its props, or refactoring its composition.
中文简介正在准备中。当前显示原文说明。
Use when writing or editing Storybook MDX docs (*.mdx) — the two-tab Overview/Implementation structure, story-backed `<Source>` examples, and doc table guidelines.
中文简介正在准备中。当前显示原文说明。
Use when creating or editing Storybook stories (*.stories.tsx, React or React Native) — story layout, controls, and export naming conventions.
中文简介正在准备中。当前显示原文说明。
Use when writing or editing component tests in libs/ui-react or libs/ui-rnative — shared structure and coverage conventions, plus the per-platform runner: Vitest + React Testing Library on web, Jest + React Native Testing Library on RN. Load this before writing tests.
中文简介正在准备中。当前显示原文说明。