// Sync CSS variables from Figma plugin export to globals.css. Use when updating design tokens/colors from Figma.
| 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;
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.