Skip to main content Home Creators nroze22 talosixskills design-qa
design-qa Automated design QA that checks implementation code against Figma design specs. Uses the Figma MCP server to read design data, then compares spacing, colors, typography, and responsive behavior against the codebase. Includes WCAG 2.1 AA accessibility auditing and clinical trial EDC-specific UI checks for form clarity, error visibility, and regulatory compliance patterns.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
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.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/nroze22/TalosixSkills --skill design-qaThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository Related occupations SOC
Based on SOC occupation classification
name design-qa description Automated design QA that checks implementation code against Figma design specs. Uses the Figma MCP server to read design data, then compares spacing, colors, typography, and responsive behavior against the codebase. Includes WCAG 2.1 AA accessibility auditing and clinical trial EDC-specific UI checks for form clarity, error visibility, and regulatory compliance patterns. allowed-tools Read, Grep, Glob, Bash argument-hint [figma-url] [implementation-path]
Design QA
Purpose
Perform systematic quality assurance comparing implemented UI code against Figma design specifications. Catch visual regressions, accessibility violations, and clinical trial UX issues before they reach users. Produce a structured report that designers and developers can act on.
Inputs
Figma URL : Link to the design file or specific frame/component.Implementation path : Path to the implemented component, page, or feature in the codebase.
Workflow
Step 1: Read the Figma Design Spec
Parse the Figma URL to extract file key and node ID.
Use the Figma MCP server to retrieve:
Frame dimensions and layout properties.
Auto-layout: direction, spacing (gap), padding (top, right, bottom, left), alignment.
Fill colors (hex values with opacity).
Stroke: color, weight, dash pattern.
Text properties: font family, size, weight, line height, letter spacing, alignment.
Corner radius values.
Effects: drop shadows (x, y, blur, spread, color), blurs.
Component variants and their property values.
Constraints for responsive behavior.
Organize extracted values into a structured spec document for comparison.
Step 2: Read the Implementation
Read all relevant source files at the implementation path:
React/TSX component files.
CSS/SCSS/Tailwind style files.
Tailwind configuration for custom theme values.
Global stylesheet for base styles.
Extract implemented values:
Tailwind classes and their resolved CSS values.
Inline styles.
CSS custom properties (variables) used.
Responsive breakpoint classes (sm:, md:, lg:, xl:).
Conditional styles (hover, focus, active, disabled states).
Step 3: Visual Specification Comparison Compare Figma spec against implementation for each property category:
Spacing (padding, margin, gap):
Property Figma Value Implementation Status Padding top 16px pt-4 (16px)PASS Padding right 24px pr-4 (16px)FAIL - Expected 24px (pr-6) Gap between items 12px gap-3 (12px)PASS
Tolerance: exact match required for spacing (0px tolerance).
Element Figma Color Implementation Status Background #F9FAFB bg-gray-50 (#F9FAFB)PASS Text #111827 text-gray-900 (#111827)PASS Border #E5E7EB border-gray-300 (#D1D5DB)FAIL - Wrong gray
Tolerance: exact hex match required.
Property Figma Value Implementation Status Font family Inter font-sans (Inter)PASS Font size 14px text-sm (14px)PASS Font weight 600 font-semibold (600)PASS Line height 20px leading-5 (20px)PASS Letter spacing -0.01em not set FAIL - Missing
Element Figma Value Implementation Status Card 8px rounded-lg (8px)PASS Button 6px rounded-md (6px)PASS Input 6px rounded (4px)FAIL - Expected 6px
Element Figma Shadow Implementation Status Card 0 1px 3px rgba(0,0,0,0.1) shadow-smPASS (approximate) Modal 0 25px 50px rgba(0,0,0,0.25) shadow-2xlPASS (approximate)
Shadow tolerance: approximate match acceptable if the visual weight is equivalent.
Element Figma Value Implementation Status Button height 40px h-10 (40px)PASS Icon size 20px w-5 h-5 (20px)PASS Max width 1280px max-w-7xl (1280px)PASS
Step 4: Responsive Behavior Check Compare responsive behavior at each breakpoint:
Mobile: 375px (Figma mobile frame)
Tablet: 768px (md breakpoint)
Desktop: 1024px (lg breakpoint)
Wide: 1280px (xl breakpoint)
For each breakpoint, verify:
Layout direction changes (flex-col to flex-row).
Visibility changes (hidden/shown elements).
Spacing adjustments.
Font size changes.
Column count changes in grids.
Navigation pattern changes (hamburger vs full nav).
Step 5: Accessibility Audit Perform WCAG 2.1 AA compliance checks on the implementation code:
Color Contrast (WCAG 1.4.3 / 1.4.6):
Keyboard Navigation (WCAG 2.1.1 / 2.1.2):
All interactive elements must be reachable via Tab key.
Custom components must have tabIndex and keyboard event handlers.
Focus must be visible (check for focus: or focus-visible: classes).
No keyboard traps (except intentional modal focus traps with Escape exit).
Tab order follows logical reading order (check for tabIndex values > 0).
Screen Reader Compatibility (WCAG 1.1.1 / 4.1.2):
Images have alt attributes (or aria-hidden="true" for decorative).
Form inputs have associated <label> elements or aria-label.
Buttons have accessible text (visible text, aria-label, or aria-labelledby).
ARIA roles are correctly applied.
Live regions (aria-live) for dynamic content updates.
Page landmark regions (<main>, <nav>, <aside>, <header>, <footer>).
Touch Targets (WCAG 2.5.5):
Interactive elements must be at least 44x44px.
Check button and link dimensions.
Check spacing between adjacent touch targets.
Inline links in text blocks are exempt.
Focus Management (WCAG 2.4.3 / 2.4.7):
Focus indicators must be visible (not outline-none without replacement).
Focus must be managed in modals (trap and restore).
Focus must move to new content when dynamically loaded.
Error Identification (WCAG 3.3.1 / 3.3.2):
Form errors must be identified in text (not just color).
Required fields must be indicated.
Error messages must describe the error and suggest correction.
Labels and instructions are provided for form inputs.
Step 6: Clinical Trial EDC-Specific Checks Error Message Visibility:
Action Confirmation Dialogs:
Data Validation Feedback:
Read-Only State Indicators:
Step 7: Generate the QA Report Produce a structured report:
# Design QA Report
**Design** : [Figma URL]
**Implementation** : [File path(s)]
**Date** : [Current date]
**Overall Status** : [PASS / FAIL - N issues found]
## Summary
| Category | Checks | Pass | Fail | Warnings |
|----------|--------|------|------|----------|
| Spacing | 12 | 10 | 2 | 0 |
| Colors | 8 | 7 | 1 | 0 |
| Typography | 10 | 9 | 0 | 1 |
| Borders/Radius | 5 | 5 | 0 | 0 |
| Shadows | 3 | 3 | 0 | 0 |
| Responsive | 8 | 6 | 2 | 0 |
| Accessibility | 15 | 12 | 3 | 0 |
| EDC-Specific | 10 | 8 | 1 | 1 |
| **Total** | **71** | **60** | **9** | **2** |
## Failures (Must Fix)
### 1. Padding mismatch on card component
- **Property** : padding-right
- **Expected (Figma)** : 24px
- **Actual (Code)** : 16px (`pr-4` )
- **Fix** : Change `pr-4` to `pr-6` on line 23 of CardComponent.tsx
- **Severity** : Medium
### 2. Missing ARIA label on icon button
- **Element** : Close button in modal header
- **Issue** : `<button>` contains only an SVG icon with no accessible text
- **Fix** : Add `aria-label="Close dialog"` to the button element
- **Severity** : High (accessibility)
...
## Warnings (Should Fix)
### 1. Letter spacing not set on heading
- **Property** : letter-spacing
- **Expected (Figma)** : -0.01em
- **Actual (Code)** : normal (default)
- **Impact** : Minor visual difference
- **Fix** : Add `tracking-tight` class
...
## Passes (Verified)
[Collapsed list of all passing checks]
Severity Levels
Critical : Blocks usability or regulatory compliance (missing e-signature, broken form validation).High : Accessibility violations, significant visual deviations.Medium : Spacing/color mismatches that affect visual quality.Low : Minor differences unlikely to be noticed by users.
Quality Checklist 