skills.rest
nroze22
nroze22COMMUNITY
Explore all skills by this author →
GitHub

design-qa

Compare UI implementation code against Figma design specifications for WCAG 2.1 AA compliance.

1|1|Updated Feb 24, 2026
Search Tags:#accessibility#figma#wcag#edc#ui implementation#design qa
One-click install
npx skills add https://github.com/nroze22/TalosixSkills --skill design-qa-nroze22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-qa
Source: https://github.com/nroze22/TalosixSkills/tree/main/.claude/skills/design-qa
Command: npx skills add https://github.com/nroze22/TalosixSkills --skill design-qa-nroze22

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates the tedious and error-prone process of manually comparing UI implementation code against design specifications in Figma, catching visual regressions and accessibility issues early.

Core Features & Use Cases

  • Automated Visual QA: Compares spacing, colors, typography, and responsive behavior against Figma designs.
  • Accessibility Auditing: Checks for WCAG 2.1 AA compliance, including color contrast, keyboard navigation, and screen reader compatibility.
  • EDC-Specific Checks: Validates UI elements critical for clinical trial Electronic Data Capture (EDC) systems, such as form clarity, error visibility, and regulatory compliance patterns.
  • Use Case: A developer implements a new form component. They provide the Figma link and the code path to this Skill, which then generates a detailed report highlighting any discrepancies in spacing, color, accessibility, or EDC-specific requirements, allowing for quick fixes before review.

Quick Start

Run the design-qa skill with the Figma URL and the path to your implementation code.

Frequently Asked Questions about design-qa

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

FAQPage Schema
How do I automate visual QA comparing UI implementation code against Figma design specs?▼

Automated design QA compares your UI implementation code directly against Figma design specifications by reading the codebase and validating spacing, colors, typography, and responsive behavior to detect visual discrepancies.

Can I check my UI implementation for WCAG 2.1 AA accessibility compliance automatically?▼

Yes, automated accessibility auditing checks your UI implementation for WCAG 2.1 AA compliance, validating color contrast ratios, keyboard navigation flows, and screen reader compatibility against the design source.

How do I validate clinical trial Electronic Data Capture (EDC) UI patterns in my codebase?▼

EDC-specific UI checks validate clinical trial Electronic Data Capture patterns by analyzing your codebase for form clarity, error visibility, and regulatory compliance requirements extracted from the Figma design specifications.

Do I need a Figma MCP server to run automated design QA on my codebase?▼

Yes, performing automated design QA requires Figma MCP server access to retrieve design specifications, alongside codebase analysis tools like Read, Grep, and Bash to compare the implemented UI against the source.

What is the best way to catch visual regressions and spacing discrepancies between Figma and code?▼

The best way to catch visual regressions is automated design QA, which cross-references exact spacing, typography, and color tokens from Figma designs with your implemented UI components to generate a detailed discrepancy report.

Why does my UI implementation fail design QA even when the colors match Figma?▼

Design QA failures occur beyond color matching because the process also validates responsive behavior, WCAG 2.1 AA accessibility contrast, keyboard navigation, and EDC-specific clinical trial UI patterns against the design specs.

Related Skills

Explore More Design & Creative Skills→
OpenCovenOpenCoven
20

figma

Extract design context and specifications from Figma files via MCP.

Official
Intermediate
cmbayscmbays
1

quality-gate

Audit code quality across ten UI categories and verify build integrity.

Community
Advanced
betaTridentbetaTrident

browser-qa

Automate visual regression testing and UI interaction verification for web applications.

Community
Advanced
nroze22nroze22
1

talosix-design-system

Defines design tokens, component patterns, and accessibility standards for the Talosix EDC platform.

Community
Advanced