Sync processed CSS design tokens with JavaScript theme objects for React Native. Use when aligning tokens after Figma sync, checking token consistency, or updating JS theme files manually.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Keep the processed CSS tokens (from ETL) aligned with the JavaScript theme objects used for React Native.
Pipeline: Figma → JSON → CSS/Tailwind (automated) → JS themes (manual sync).
CSS is the source of truth; the JS theme.dark.ts / theme.light.ts files are
the sync targets.
Brands come and go (today: enterprise, ledger-live, websites — but discover,
don't assume). Always enumerate them from the filesystem so a new brand can't be
silently missed:
bash .claude/skills/figma-token-sync/scripts/discover-themes.sh
This prints the CSS brands, the JS brands, every JS theme file that must be updated together, and warns if the two sides disagree.
For a brand + category, compare CSS coverage against JS and list the token names present in CSS but missing from JS:
bash .claude/skills/figma-token-sync/scripts/compare-tokens.sh <brand> <category>
# e.g. compare-tokens.sh ledger-live background
Run it for each category you touched (background, border, text, …) across
every brand from the discovery step.
// CSS is kebab-case, JS is camelCase
'--color-border-base-inverted' → baseInverted
'--color-background-surface-disabled' → surfaceDisabled
// ✅ reference the primitive
baseInverted: primitiveColorTokens.dark.grey['050']
// ❌ never hardcode
baseInverted: '#ffffff'
npx tsc --noEmit --project libs/design-core/tsconfig.json
npx nx lint @ledgerhq/lumen-design-core --fix
npx nx build @ledgerhq/lumen-design-core
If you touched the ETL rather than the themes, it lives in internals/sync-figma
— see its README.md.
Checklist:
discover-themes.sh was updated (no partial sync)compare-tokens.sh shows no CSS-only tokens for the categories you touchedcompare-tokens.sh to see which token names are
CSS-only.discover-themes.sh — it may be new since the
last sync, or present on only one side (it warns about that).아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
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 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.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.