القائمة
Sync CSS variables from Figma plugin export to globals.css. Use when updating design tokens/colors from Figma.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
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;