skills.rest
cjrain-12505614
cjrain-12505614COMMUNITY
Explore all skills by this author →
GitHub

solo-figma-make-reviewer

Validates Figma Make UI outputs against screen design specifications and generates review reports.

Updated Apr 23, 2026
Search Tags:#figma#mcp#design tokens#design review#ui validation#wireframe#screen coverage
One-click install
npx skills add https://github.com/cjrain-12505614/solo-forge-marketplace --skill solo-figma-make-reviewer-cjrain-12505614
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: solo-figma-make-reviewer
Source: https://github.com/cjrain-12505614/solo-forge-marketplace/tree/main/solo-forge-v0.6.0/skills/solo-figma-make-reviewer
Command: npx skills add https://github.com/cjrain-12505614/solo-forge-marketplace --skill solo-figma-make-reviewer-cjrain-12505614

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually comparing Figma Make generated UI screens against screen design specifications is slow and error-prone, making it hard to confirm screen coverage, component consistency, and design token compliance before development begins. ## Core Features & Use Cases - Screen Coverage Verification: Maps screens defined in feature specs and wireframes (SCR-XXX-YYY) to Figma Make pages and frames, then calculates coverage percentage. - Per-Screen Detailed Inspection: Checks layout, typography, color tokens, spacing, shared components, interaction states, responsiveness, and accessibility for each screen. - Structured Review Reports: Produces a dated figma_review report with PASS / CONDITIONAL PASS / FAIL verdicts, issue classification, design token extraction, and next-step recommendations. - Use Case: A PL receives a Figma Make URL from a designer, runs this skill to compare the output against feature_spec and wireframe documents, and delivers a coverage and issue report to the PM for approval decisions. ## Quick Start Share a Figma Make URL and ask the assistant to verify the design output against the screen design specifications and produce a review report.

Frequently Asked Questions about solo-figma-make-reviewer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I verify Figma Make output against design specifications?▼

Provide the Figma Make URL and the skill parses the fileKey, reads the page structure via get_metadata, maps spec screens (SCR-XXX-YYY) to Figma frames, and checks each screen for layout, typography, color, and component consistency.

What does a Figma design review report include?▼

The report includes screen coverage percentage, per-screen verification details, common component analysis, extracted design tokens (color, spacing, typography, radius), classified issues, and a final PASS, CONDITIONAL PASS, or FAIL verdict.

Can this skill edit Figma Make files directly?▼

No, Figma Make access is read-only through the MCP tools. Detected issues are reported to the PM, and the designer applies corrections directly in the Figma web interface.

What Figma MCP tools are required for design verification?▼

The workflow uses get_metadata for page and node structure, get_screenshot for visual inspection, get_design_context for code and assets, and get_variable_defs for design token extraction.

How are design review issues classified?▼

Issues are classified as FAIL for blockers like missing required screens, CONDITIONAL PASS for minor spacing or missing optional states, and PASS when screens match specs with complete component and interaction state definitions.

Related Skills

Explore More Design & Creative Skills→
nesnilnehcnesnilnehc
7

analyze-requirements

Convert vague ideas into validated requirements with acceptance criteria.

Community
Advanced
LerianStudioLerianStudio
4

ring:dev-validation

Automate Gate 5 validation requiring explicit human approval and auditable evidence collection.

Official
Basic
ericmilton711ericmilton711

project-management

Manage projects, tasks, milestones, and documentation through structured templates and workflows.

Community
Advanced
FutureAtomsFutureAtoms
1

react-native-2026-figma-to-code

Convert Figma designs into React Native code using Locofy.ai and Builder.io.

Community
Intermediate