Menu
Sync CSS variables from Figma plugin export to globals.css. Use when updating design tokens/colors from Figma.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Write or refactor Cypress E2E tests following Page Object Model, action/assertion separation, and project conventions. Use when creating new tests, refactoring existing ones, or adding page object functions.
Implement a Figma design using shadcn/ui components. Use when converting Figma URLs to React code.
Creates a Storybook UI prototype from a PRD-style input using existing shadcn/ui components, subtle visual tone, and a clear hierarchy. Use when the user invokes /design.prototype or asks for a prototype Storybook story.
Sync a UI component from Figma to code using the component sync workflow. Use when updating components to match Figma designs.
Verify Figma implementation is pixel-perfect. Use after implementing Figma designs to catch and fix discrepancies.
| name | design.sync-variables |
| description | Sync CSS variables from Figma plugin export to globals.css. Use when updating design tokens/colors from Figma. |
| disable-model-invocation | true |
| allowed-tools | ["Read","Edit","Bash","Grep"] |
Sync CSS variables from Figma plugin variables2css export to globals.css.
apps/web/src/styles/globals.cssglobals.css existing variablesyarn workspace @safe-global/web type-check| Figma Export | CSS Variable |
|---|---|
--general-background | --background |
--general-foreground | --foreground |
--general-primary | --primary |
--general-primary-foreground | --primary-foreground |
--general-secondary | --secondary |
--general-secondary-foreground | --secondary-foreground |
--general-muted | --muted |
--general-muted-foreground | --muted-foreground |
--general-accent | --accent |
--general-accent-foreground | --accent-foreground |
--general-destructive | --destructive |
--general-border | --border |
--general-input | --input |
--card-card | --card |
--card-card-foreground | --card-foreground |
--popover-popover | --popover |
--popover-popover-foreground | --popover-foreground |
--focus-ring | --ring |
--sidebar-sidebar | --sidebar |
--sidebar-sidebar-foreground | --sidebar-foreground |
--sidebar-sidebar-primary | --sidebar-primary |
--sidebar-sidebar-primary-foreground | --sidebar-primary-foreground |
--sidebar-sidebar-accent | --sidebar-accent |
--sidebar-sidebar-accent-foreground | --sidebar-accent-foreground |
--sidebar-sidebar-border | --sidebar-border |
--sidebar-sidebar-ring | --sidebar-ring |
User provides export:
--general-background: #ffffff;
--general-primary: #12ff80;
Update in globals.css:
--background: #ffffff;
--primary: #12ff80;