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.

2026-04-20577

designfigma-to-code

safe-global/safe-wallet-monorepo

Implement a Figma design using shadcn/ui components. Use when converting Figma URLs to React code.

2026-03-19577

designprototype

safe-global/safe-wallet-monorepo

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.

2026-02-27577

designsync-component

safe-global/safe-wallet-monorepo

Sync a UI component from Figma to code using the component sync workflow. Use when updating components to match Figma designs.

2026-02-27577

designverify

safe-global/safe-wallet-monorepo

Verify Figma implementation is pixel-perfect. Use after implementing Figma designs to catch and fix discrepancies.

2026-02-27577

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 Variables from Figma

Sync CSS variables from Figma plugin variables2css export to globals.css.

Rules

Only update existing variables - Never add new variables
Keep code order - Only change values, not structure
Direct mappings only - Only update if Figma has a matching variable
Use Figma plugin export - Do NOT use Figma MCP for variables (incomplete data)

Source Files

Source of truth: Figma plugin export (user provides)
Target: apps/web/src/styles/globals.css

Process

Ask user for Figma CSS Variables plugin export
Compare Figma values vs globals.css existing variables
Update only values that differ (use direct hex values)
Verify: yarn workspace @safe-global/web type-check

Variable Mapping

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`

Example

User provides export:

--general-background: #ffffff;
--general-primary: #12ff80;

Update in globals.css:

--background: #ffffff;
--primary: #12ff80;