Imports missing SVG icons from a Figma file into the SSA UI Kit icon system. Use this skill whenever the user provides a Figma URL and asks to add, import, or create icons — even if they say "add these icons", "bring in from Figma", "we're missing X icon", or just pastes a Figma link with a list of icon names. Also trigger if the user says they want to sync icons from design or asks why an icon is missing from Storybook. Never skip this skill when a Figma URL and icon names appear together in the same request.
Compares an existing SSA UI Kit component's live implementation (a Storybook story) against its Figma design, and brings the code in line — colors, spacing, typography, states, and design-token usage. Use this whenever the user asks to "align", "check", "audit", "match", or "sync" a component against Figma; asks why a component "looks different from the design"; wants a component to "use our design tokens properly"; or wants to "bring [a component] up to date with the design system". Trigger this even if the user supplies only a Figma link, only a Storybook link, or neither (just a component name) — the skill itself asks for whatever's missing rather than being skipped. Do NOT use this for building a brand-new screen in Figma from code, or implementing a component in code for the first time from a design that has no existing implementation yet — those belong to figma-generate-design / figma-use. This skill is specifically for auditing and fixing something that already exists in this codebase.