figma-design-check

Use BEFORE building or editing any website UI — MUI 9 + Emotion components, layout, color/fill/border, spacing, typography, sizing, icons, or interaction states (default/hover/focus-visible/active/disabled/loading/error) — to verify the planned change matches its design reference. Compare against the repo theme tokens (UiColorTheme palette, UiTypography, UiBreakpoints) and the Playwright visual baselines via `make test-visual` / `make test-visual-update`. Run this design-fidelity gate before frontend-component-development and before any `src/features/*` or `src/components/*` UI edit.

Jump to install

Repository: VilnaCRM-Org/website
Last source activity: June 30, 2026 at 22:48
Detected SKILL.md language: English
Stars: 0
Forks: 1

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/VilnaCRM-Org/website --skill figma-design-check

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

2 files

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

Figma Design Check

A lightweight design-fidelity gate: verify every UI change against its design reference before implementing it, then re-verify the rendered result against the repo's Playwright visual baselines. The design is the source of truth for visuals; the implementation must match it (or the user must explicitly approve a deviation).

This is a review workflow, not a tool integration. The repo does not configure a Figma MCP server, so a design reference can be a figma.com file/node URL, an exported screenshot, a design-handoff spec, or the existing visual baseline. If a Figma MCP is available in the session you may pull the node with it (see Reference), but the gate works without one.

When to use (mandatory before UI changes)

Run this before ANY change that affects what the user sees: a new or modified MUI 9 + Emotion component under src/components/ui-* or src/features/<feature>/components/, layout, color, fill, border, radius, spacing, typography, sizing, icons, or any interaction state the design defines (default / hover / focus-visible / active / disabled / loading / error). It runs before frontend-component-development and before any UI edit.

It does NOT apply to pure logic, data-layer (Apollo/GraphQL), i18n-only string, test-only, or non-visual config changes.

Prerequisite: a design reference

You need a design reference for the affected surface. If none is available, — do not silently guess the intended look. When the only reference is the current visual baseline under , treat that baseline as the contract: a change that alters it is a deliberate redesign that must be approved and the baseline regenerated, not a drift.