metabase-ui-component-from-figma

Fetch the Linear issue to get the Figma link and branch, map all existing call sites, build a Storybook showcase matrix before changing styles, then apply exact tokens from the Figma Dev Mode MCP server. Commit and migrate call sites only after the user approves the result.

Enumerate every variant, size, and state from the component's API, then render a CSS-grid matrix with state labels down the left and one column per variant-size combination. Use storybook-addon-pseudo-states to force hover and pressed states, and drive light/dark via the global Storybook theme toggle.

The get_variable_defs and get_design_context tools read the current selection in the Figma desktop app via the Dev Mode MCP server. Enable the server in Figma's Dev Mode MCP section and select the relevant layer before retrying.

No. Every color must be a semantic --mb-color-* token mapped from the Figma variable names. If the spec binds a primitive ramp value directly to a property, stop and flag it to the user as a design-side gap rather than hardcoding a value.

Add behavior-locking unit tests only when the component has custom interactive logic such as event handlers, state, or keyboard wiring. Skip tests for thin Mantine wrappers and pure visual restyles, which are covered by the showcase and Loki visual regression.

Update mode restyles an existing component with call sites, so it maps usage and builds the showcase before styling to catch regressions. Create mode scaffolds a new component, so it implements and styles first, then builds the showcase afterward since nothing exists to render yet.