uikit

Sync design tokens from Figma into the design-tokens package (packages/design-tokens/tiers/*.json). Use when the user asks to update, sync, refresh, or pull design tokens from Figma. Runs a diff-gated pipeline — pulls a snapshot, shows a full diff report, waits for human approval, then emits to tiers/*.json — and never writes tier files without explicit approval.

Local-IDE first-pass review for a GitHub PR against acronis/uikit, tailored to packages/ui-react — not limited to that folder. Non-destructively fetches the PR (no checkout, no branch switch) via a git pull/<n>/head ref, classifies changed files into five tiers (ui-react itself plus its ui-spec companion: full review; the generated-artifact pipeline packages that feed its styling/icons, its other declared dependencies, and consumer apps that render it: impact review; everything else: listed only), statically verifies --ui-* token resolution and repo conventions (no --av-*, no hardcoded colors, tier imports present, changeset present) against the PR's HEAD commit — not just main — using only local tokens-pd/design-tokens data (no Figma value queries), checks whether a source change requires a regeneration command that wasn't run in the same PR (design-tokens → tokens-pd, icons-svg → icons-sprite, a component change → its Storybook VR baselines/spec/Code Connect) so a diff that "looks fine" doesn't silently shi

Read-only pre-flight gate that audits ui-react components for token drift and spec/test completeness BEFORE running /figma-component. Per component it checks that every --ui-* reference resolves in tokens-pd, that each referenced token tier is imported in styles/index.css, that the ui-spec 7-file set is present and conformance passes, that tests exist, and that the Figma link is intact (index.yaml node + a COMPLETE Code Connect). A deep mode adds Figma design parity: structural (variants/states), value-level (each design variable's value == the referenced --ui-* token's resolved value), and an advisory screenshot pixel-diff — via the Figma MCP + bundled scripts. Reports a READY / DRIFT / INCOMPLETE matrix; never edits files. Invoke with /component-readiness [ComponentName | all].

Bring a "ready for dev" component from Figma into the Acronis UI Kit, or update an existing one. Drives the full recipe: read the Figma node, map it to Base UI + --ui-* tokens, implement in packages/ui-react (component, tests, stories, Figma Code Connect), and write/refresh its framework-agnostic spec in packages/ui-spec. Invoke with /figma-component <ComponentName> <figma-url>.

Recreate a first version of a ui-react component from its `packages/ui-legacy` counterpart when a "ready for dev" Figma mockup does not yet exist. Drives the same recipe as /figma-component — implement in packages/ui-react (component, tests, stories), write its framework-agnostic spec in packages/ui-spec, and add a docs page in apps/docs — but reads the legacy source instead of a Figma node, and maps legacy `--av-*` / Radix patterns onto ui-react `--ui-*` tokens + Base UI. Prefers a component's own `--ui-<name>-*` token tier when one already exists, otherwise falls back to semantic/primitive tokens. The Figma Code Connect link is deferred (no node yet). Invoke with /legacy-component <ComponentName> [legacy-name] [--update].

Curate a cross-component grammar rule in packages/ui-spec/grammar — usually born from a discrepancy-ledger finding whose resolution is "new-rule". Drives the full addition: a typed KitRule in grammar/rules/<category>.ts, a 1:1 CHECKLIST.md row, a detector (kit-lint static, screen-audit structural, or an honest stub), a test, and the ledger cross-link. A human ratifies severity — only a person may set `must` (it blocks CI). Invoke with /grammar-rule <ledger-id | description>.

Render a real product screen from its ui-spec descriptor and run the cross-component structural detectors over it — the "complete-screen consistency audit". For each screen it loads screens/<slug>/screen.yaml, opens the assembled-screen Storybook story (the descriptor's `story` id) in light AND dark, captures a serializable snapshot with the screens/audit probe (geometry, computed style, a11y, scrollbar gutters), then runs the pure detectors via `pnpm --filter @acronis-platform/ui-spec screen-audit` — keyed to the grammar's screen/* rules (control-height parity, accessible name, contrast, edge alignment, reserved-gutter clipping, icon-size parity, vertical rhythm), with `must` failing. Detectors first; an optional AI visual review covers the judgment-only rows. Reports findings keyed by checklist id + severity; proposes (never auto-applies) fixes + new grammar rules. Invoke with /screen-audit [screen-slug | all].

Migrate icon imports/usages from @acronis-platform/shadcn-uikit (legacy Acronis names like EditIcon, CustomerIcon, DangerIcon) to @acronis-platform/icons-react (e.g. PencilIcon, BriefcaseIcon). Resolves names authoritatively from the map SHIPPED with icons-react (@acronis-platform/icons-react/legacy-map) — no guessing, no monorepo checkout. Rewrites imports + JSX, dedupes collisions, and holds colored status icons that have no monochrome equivalent. Reusable in any MFE. Use when asked to migrate, swap, or update Acronis icons to icons-react.

Sync design tokens from Figma into the repo end-to-end: pull the Figma variable/style snapshot with the repo's figma-token-exporter plugin (figma-console MCP as fallback), run the orphan-coverage gate, re-emit the canonical tiers/*.json, validate, rebuild tokens-pd, fix any broken downstream consumers (ui-react components + visual baselines), and verify no unexpected drift — then commit. Use when a token/brand/mode changed in Figma, when the repo snapshot looks stale, or when asked to refresh tokens. Invoke with /sync-tokens [optional: what changed].

Use this skill whenever delegating work to subagents — whether a single Task call or a full team via TeamCreate. Guides delegation, task decomposition, agent selection, and coordination. Covers when to spawn architect (design artifacts), researcher (explorations), developer (FEATURE specs and code), ux (user journeys and wireframes), qa (verification), devil-advocate (phase gate review), and tech-writer (validation). Trigger on any subagent spawn, team creation, multi-agent coordination, or parallel work request.

Full development pipeline for Acronis UI Kit work. Orchestrates the specialized agent team through a phase-gated workflow: Design → Plan → Development → QA → Review → Audit. Use for any non-trivial component work, new components, Web Component fixes, or feature additions. For simple single-file edits, skip to Development directly. Invoke with /ui-kit-pipeline <ComponentName or feature description>.