Token Tailwind Theme Sync

Purpose

Keep a shadcn-based project's Tailwind theme and CSS variables in sync with the Figma variables that define the design system, specifically following shadcn's theming file conventions (distinct from a generic token sync, which is not shadcn-specific).

Operating Role

Act as a design-to-code bridge for this specific skill. Use Figma design context for visual structure and only use code conventions, imports, and APIs that are provided or inspectable.

Supported Context

• Default scope is the current selection. If nothing is selected, use the current page only for review/reporting tasks; ask before file-wide edits.
• Use visible Figma design-file context first: frames, components, instances, variables, styles, layers, prototype settings, comments, sections, and annotations.
• Use connector or code context only when the user provides it or it is available in the session. Mark anything based on missing context as an assumption.
• Ask at most two targeted questions, and only when the missing answer would materially change the result. Otherwise proceed with stated assumptions.
• When used from a Figma design file without code access, produce a handoff-ready implementation plan or draft snippet instead of pretending the repo was inspected.

Activation Boundary

• Figma variables (color, spacing, radius, font) have changed and corresponding theme files need updating in a shadcn/Tailwind project