Use when implementing or updating a component from a Figma link — how to turn the Figma design variables into code tokens, on both platforms: Tailwind classnames for libs/ui-react and themeJS (`t.*`) paths for libs/ui-rnative. For the full token catalogues and styling mechanics, see component-styling.
The English summary is being prepared. Showing the original description.
Review the instructions the agent will receive before you install.
Use the Figma MCP server to read the design. This skill covers only the
variable → token derivation — the part that is specific to extracting from
Figma. For the full token lists, cva, useStyleSheet and the rest, see
component-styling.
Route by the lib you're implementing in (see the Libraries table in
AGENTS.md): web → the Tailwind mapping; React Native → the themeJS mapping.
libs/ui-react) — Figma variable → Tailwind classCombine the Tailwind prefix for the CSS property with the unique part of the token name (the segment after the last hyphen of the CSS variable).
| Figma shows | Prefix | Write | Not |
|---|---|---|---|
background-color: var(--background-base) | bg- | bg-base | bg-background-base |
color: var(--text-on-accent) | text- | text-on-accent | text-text-on-accent |
border-color: var(--border-muted) | border- | border-muted | border-border-muted |
padding: var(--spacing-4) | p- | p-4 | p-spacing-4 |
border-radius: var(--radius-lg) | rounded- | rounded-lg | rounded-radius-lg |
border-width: var(--border-width) | border | border | border-width |
border-width: var(--border-width-active) | border | border-2 | border-width-active |
/* body/3 */. No prefix
— replace / with -: body-3./* box-shadow/sm */. Prefix shadow-, take the
unique part after the last -: shadow-sm. Values: shadow-sm…shadow-2xl.libs/ui-rnative) — Figma variable → themeJS pathThere are no classnames on RN. The same Figma variable maps to a path on the
t object inside useStyleSheet((t) => …) (same token vocabulary as web, JS
object shape — see component-styling/references/rnative.md).
| Figma shows | themeJS path |
|---|---|
var(--background-base) | t.colors.bg.base |
var(--text-on-accent) | t.colors.text.onAccent |
var(--border-muted) | t.colors.border.muted |
var(--spacing-4) | t.spacings.s4 |
var(--radius-lg) | t.borderRadius.lg |
typography /* body/3 */ | t.typographies.body3 |
bg / text / border), and
kebab segments become camelCase keys (on-accent → onAccent).s-prefixed by pixel value: --spacing-4 →
t.spacings.s4, --spacing-16 → t.spacings.s16; sizes likewise
(t.sizes.s112, plus t.sizes.full for 100%).none, xs, sm, md,
lg, xl, 2xl, full (so t.borderRadius['2xl']).body/3 → t.typographies.body3,
body/2-semi-bold → t.typographies.body2SemiBold.libs/design-core/src/lib/themes/js/primitives/primitives.others.ts (spacings,
sizes, borderRadius) and the per-brand theme.*.ts colour objects. Confirm a
key there rather than inventing one.112 for Figma's 108, 96 for 90).// ✅ Web — closest token, documented
<Tile className='w-112' size='md' /> // 112px (closest to Figma's 108px)
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
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.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.
Use when writing or editing Storybook MDX docs (*.mdx) — the two-tab Overview/Implementation structure, story-backed `<Source>` examples, and doc table guidelines.
The English summary is being prepared. Showing the original description.
Use when creating or editing Storybook stories (*.stories.tsx, React or React Native) — story layout, controls, and export naming conventions.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.