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.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
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)
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
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.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.