From ssep
Reviews implemented UI against design source-of-truth (Figma frames, mockup images, design tokens) for visual fidelity — spacing, typography, color, responsive behavior, interaction states, accessibility. Use when comparing built pages to design specs, when a Figma URL is shared alongside a live URL/screenshot, or for "디자인 검수", "퍼블리싱 검토", "compare with figma", "픽셀 비교", "design QA", "피그마대로 되어있나", "figma vs 현재 화면", "구현이 디자인과 맞는지". Also triggers when a Figma URL is shared with reference to existing implementation. Triggers even when the change appears trivial — single label swap, one CSS rule, one-line JSX edit — because apparent simplicity is the most common skip rationalization, and the skill itself decides scope (full audit vs quick check) faster than the caller can. Captures both sides (Figma + Playwright snapshot), runs structured visual diff, reports gaps by user-visible impact. Distinct from reviewing-spec-and-policy (audits docs) and code review (audits code structure).
How this skill is triggered — by the user, by Claude, or both
Slash command
/ssep:reviewing-design-fidelityThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Implementation drifts from design — silently, in small increments, every sprint. Padding shrinks by 2px to fit a label, a hex code gets approximated, a state variant is forgotten. Each drift is invisible alone; together they erode the brand and the design system. This skill performs side-by-side capture and structured comparison so drift is surfaced concretely, with evidence, before it accumula...
Implementation drifts from design — silently, in small increments, every sprint. Padding shrinks by 2px to fit a label, a hex code gets approximated, a state variant is forgotten. Each drift is invisible alone; together they erode the brand and the design system. This skill performs side-by-side capture and structured comparison so drift is surfaced concretely, with evidence, before it accumulates further.
The skill produces an annotated gap report — not a redesign. It assumes the design is the source of truth and the implementation should match it; if that assumption is wrong (e.g., implementation revealed a design problem), surface that as a separate finding rather than rewriting the design.
reviewing-spec-and-policysuperpowers:requesting-code-reviewBefore capturing anything, confirm:
If either side is missing, pause and ask. A one-sided "review" is just an opinion.
For each frame:
mcp__plugin_figma_figma__get_metadata → confirm frame structure and identify variant setmcp__plugin_figma_figma__get_variable_defs → pull design tokens (color/spacing/typography) referenced by the frame. These are the canonical values; any drift in implementation should be measured against tokens, not against rendered pixel values, when tokens exist.mcp__plugin_figma_figma__get_design_context → structured component data + Code Connect mappings if presentmcp__plugin_figma_figma__get_screenshot → reference image for the frameSee references/figma-extraction.md for tactics on multi-variant frames and Code Connect interpretation.
Use Playwright MCP to capture the live page in matched viewport sizes:
browser_resize to the design's intended viewport (mobile 375, tablet 768, desktop 1440 — or match the Figma frame width)browser_navigate to the page URLbrowser_snapshot for the accessibility tree (text content, ARIA roles, heading structure)browser_take_screenshot for visual comparisonbrowser_hover / browser_click then re-snapshot to capture hover/active/focus visualsbrowser_console_messages once per page — console errors during rendering are themselves fidelity findings (broken images, missing fonts)See references/playwright-capture.md for state coverage and viewport-matrix patterns.
Apply the seven dimensions from references/fidelity-matrix.md:
Each dimension produces zero or more findings.
text-sm/15px)Skip subjective preference findings ("I'd prefer more whitespace"); only flag drift from the documented design.
Use the structure in references/fidelity-report-template.md. Each finding includes:
When the report leads to an actual PR, embed the captured screenshots in the PR body — text-only fidelity reports lose their evidence the moment the temp screenshot files are deleted. See references/fidelity-report-template.md § "Embedding evidence in PRs".
A fidelity review often surfaces gaps that aren't fidelity gaps — empty/error states missing entirely, API contract drift, no integration coverage for the BE change you just discovered. Don't fix them silently inside this skill — invoke the right next-step skill so the work stays auditable. See references/skill-handoff.md for the trigger matrix.
text-sm (15px) is a finding even if visually indistinguishable — the design system contract is what gets re-rendered when tokens change.references/figma-extraction.md — tactics for multi-variant frames, Code Connect mappings, and choosing which frames to reviewreferences/playwright-capture.md — viewport matrix, state-capture checklist, console-error interpretationreferences/fidelity-matrix.md — full descriptions and example findings for the seven dimensionsreferences/fidelity-report-template.md — annotated template with example findings showing artifact references, plus PR-embed guidancereferences/skill-handoff.md — when to invoke improving-feature-completeness, running-integration-tests, or reviewing-spec-and-policy from a fidelity reviewnpx claudepluginhub pacho-h/ssep --plugin ssepGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.