jeltehomminga
UserTwo composable Claude Code skills for design-to-code fidelity: extract exact specs from Figma, then verify the running web or mobile app matches them.
Categories
Indexed Skills (2)
design-fidelity-verify
Prove a running app matches its design spec by measuring rendered values, not eyeballing a screenshot. Use when the user says "verify the design", "is this pixel-perfect", "check against Figma", "does the app match the design", "design QA", or after building with figma-design-extract. Runs a bounded vision+numeric loop (about 3 iterations) for web and mobile - web reads getComputedStyle and getBoundingClientRect via a browser/Playwright MCP; mobile reads native view props (color, bounds, cornerRadius, font) via Argent or similar at scale 1.0. Walks every spec row to PASS/FAIL plus delta, records a repeatable navigation flow, and reports residuals honestly. Tool-agnostic. Consumes the figma-design-extract spec table.
figma-design-extract
Extract exact design values from a Figma node into a build-ready spec table, instead of eyeballing a screenshot. Use when the user shares a figma.com node URL, or says "implement this Figma design", "build this component from Figma", "extract the Figma values", or "match the Figma". Reads structured data via the Figma MCP - get_design_context (structure), get_variable_defs (tokens, the source of truth), get_metadata (sizes), get_screenshot (visual reference only, never measured). Maps each Figma variable to your repo's own design tokens, reuses existing components, and logs token drift instead of hardcoding. Produces the spec table that design-fidelity-verify consumes. Stack-agnostic; Tailwind/NativeWind/Restyle/CSS-vars are examples to adapt.
Bio shown is the top-scored skill's repo description as a fallback — real GitHub bios land in a future update.