Agent skill · software engineering · metabase
metabase-ui-component-from-figma
Update or build a Metabase design-system component (frontend/src/metabase/ui — Chip, Badge, Alert, Switch, etc.) to match a Figma spec described in a Linear issue. Use when a ticket asks to restyle an existing `metabase/ui` component or implement a new one from Figma. Covers: checking out the issue, mapping the component (usage/blast radius for an existing one, or scaffolding a new one), building a Storybook showcase matrix (before styling for existing components, after for new ones), styling from exact Figma tokens while iterating with the user, and committing + migrating call sites LAST.
Why this skill is useful
Adds specific workflows and commands for integrating Metabase UI components with Figma designs that the AI wouldn't reliably generate on its own.
What it needs
Requires linear account access. About 11k tokens when loaded. Last updated 2026-08-07. 48,568 stars on the source repository.
What this skill does
Metabase UI component from Figma End-to-end workflow for bringing a metabase/ui (Mantine) component in line with a Figma design, driven by a Linear ticket. The golden rule (existing components): build the Storybook showcase before changing any component styles. Build it while the old styles are still in place — so the team can see the current component at a glance and get accustomed to it before the migration, then watch it light up as you restyle. You end up with a visual-regression (Loki) candidate either way. A new component has nothing to render until it's built, so this rule doesn't apply to create mode — there the order flips: implement and style the component first, then build its showcase to present the result. This is a frontend task — also load typescript-write (and typescript-review before handing off). Two modes The ticket is one of two shapes; identify which up front, because Phase 2 differs: Update an existing component — the component already exists with call sites, either in metabase/ui or as a legacy component elsewhere (e.g. frontend/src/metabase/common/components/, possibly Emotion styled-components) that this ticket also migrates into metabase/ui. The risk is regression (call sites, behavior), so you map usage and lock behavior with tests before touching it. Create a new component — nothing equivalent exists anywhere yet. Rarer. The risk is API design, so you scaffold the component and its public surface first. Phases 1, 2, 5 and 6 are shared. The middle two differ in order: update mode builds the showcase (Phase 3) before styling (Phase 4); create mode does the reverse — implement and style first, then build the showcase as the last step — because there's nothing to render until the component exists. --- Phase 1 — Check out the issue 1. Fetch the Linear issue with the Linear MCP getissue. 2. Pull from it: Figma link(s) — extract the node-id (?node-id=250-13588 → 250-13588) and fileKey (the /design/<fileKey>/… segment). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills metabase/metabase-ui-component-from-figma