figma-design-qa
Runs a pre-handoff QA checklist on a Figma design before it goes to engineering. Use when asked to QA a Figma design, do a pre-handoff check, or validate a Figma file is ready to build. Produces a structured QA report covering file hygiene, component usage, accessibility, and handoff readiness with explicit pass/fail status per item. Optimised for Opus 4.7 and newer models.
npx skills add mohitagw15856/pm-claude-skills --skill figma-design-qa --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Figma Design QA Skill Runs a systematic pre-handoff QA check on a Figma design — catching issues that cause engineering back-and-forth before they become expensive. ## Required Inputs Ask the user for these if not provided: - **Feature or screen being QA-d** (describe what has been designed) - **Platform** (iOS / Android / Web) - **Design system** (custom / Material / HIG / None) - **Handoff tool** (Figma Inspect / Zeplin / Storybook / Direct link) - **QA depth** (quick 15 min / standard 30 min / thorough 60 min) ## Output Structure QA Report: [Feature] | [Date] | [Platform] **Overall status:** Ready / Minor fixes needed / Not ready ### Section 1: File Hygiene - All layers named semantically (no "Rectangle 12") - No unused/hidden layers in final frames - Components from library (not detached copies) - All text uses text styles (not manual font settings) - All colours use styles or variables (not hex overrides) - Frames named to match screen map - No leftover prototype wires to wrong frames ### Section 2: Component Usage - All buttons use library component - All inputs use library component - All icons from approved icon library - No custom components that should be in library - V
- Required Inputs
- Output Structure
- Section 1: File Hygiene
- Section 2: Component Usage
- Section 3: Content and Copy
- Section 4: States and Coverage
- Section 5: Accessibility
- Section 6: Handoff Readiness
- Issues Found
- Handoff Decision
- Quality Checks
- Anti-Patterns
- Example Trigger Phrases
What does the figma-design-qa skill do?
Runs a pre-handoff QA checklist on a Figma design before it goes to engineering. Use when asked to QA a Figma design, do a pre-handoff check, or validate a Figma file is ready to build. Produces a structured QA report covering file hygiene, component usage, accessibility, and handoff readiness with explicit pass/fail status per item. Optimised for Opus 4.7 and newer models.
How do I install it?
Run `npx skills add mohitagw15856/pm-claude-skills --skill figma-design-qa --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mohitagw15856/pm-claude-skills, a repository with 1,255 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.