skills.rest
davidrrowley
davidrrowleyCOMMUNITY
Explore all skills by this author →
Website𝕏@davidrrowleyGitHub

frontend-design-review

Review frontend interfaces for design quality and WCAG accessibility compliance.

Updated Apr 12, 2026
Search Tags:#accessibility#frontend#aesthetic#design-system#design-review#pr-review#ui-review
One-click install
npx skills add https://github.com/davidrrowley/CortexYouV3 --skill frontend-design-review-davidrrowley
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-review
Source: https://github.com/davidrrowley/CortexYouV3/tree/main/.agents/skills/frontend-design-review
Command: npx skills add https://github.com/davidrrowley/CortexYouV3 --skill frontend-design-review-davidrrowley

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Ensures frontend implementations meet high design quality, accessibility, and design system expectations to reduce visual regressions, rework, and usability issues. It helps teams catch aesthetic drift, token misuse, missing variants, and accessibility regressions early in PRs or during design handoffs.

Core Features & Use Cases

  • Design system compliance: Verify components match Figma specs, use design tokens, and implement all variants and states.
  • Accessibility audits: Check keyboard navigation, focus indicators, contrast, and basic WCAG conformance.
  • Creative frontend design: Provide aesthetic direction, typography choices, motion guidance, and composition recommendations for new interfaces.
  • PR and component reviews: Produce prioritized, actionable reports with blocking/major/minor issues and recommended fixes using a consistent output template.
  • Use case example: Run a PR review to compare a Button component implementation against Figma Dev Mode, confirm token usage, test responsive behavior, and generate a remediation checklist.

Quick Start

Ask the skill to perform a Frontend Design Review of the Button component in the current PR by comparing implementation to Figma and output a prioritized review using the review-output-format.

Frequently Asked Questions about frontend-design-review

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

FAQPage Schema
How do I review frontend UI for design system compliance in a pull request?▼

Reviewing frontend UI for design system compliance involves comparing component implementations against Figma specs, verifying design token usage, and checking all variants and states. The skill produces prioritized, actionable reports with blocking, major, and minor issues.

Can I audit component accessibility and WCAG conformance during a frontend design review?▼

Yes, auditing component accessibility during a frontend design review checks keyboard navigation, focus indicators, color contrast, and basic WCAG conformance to catch usability regressions early in the development cycle.

What's the best way to check design token usage and prevent aesthetic drift in components?▼

The best way to check design token usage is to compare component implementations against Figma Dev Mode, confirming token application and responsive behavior to prevent aesthetic drift and reduce visual regressions.

Does this frontend design review provide creative direction for new interfaces?▼

Yes, creative frontend design review provides aesthetic direction, typography choices, motion guidance, and composition recommendations for new interfaces to ensure production-grade visual quality.

How do I generate a remediation checklist for missing component variants and states?▼

Generating a remediation checklist for missing component variants involves running a PR review to test responsive behavior, confirm token usage, and output a prioritized list of recommended fixes using a consistent template.

Related Skills

Explore More Design & Creative Skills→
JustinWangJPJustinWangJP
6

figma

Generate React components and design tokens from Figma API data.

Community
Advanced
hopeoverturehopeoverture
6

a11y-checker-ci

Automate WCAG accessibility checks in CI/CD pipelines and generate PR reports.

Community
Advanced
bacchus-labsbacchus-labs
4

visual-regression-testing

Automate visual regression testing by comparing screenshots against baselines.

Official
Advanced
Nickalus12Nickalus12
2

a11y-audit

Audit Loom-style applications for WCAG violations and ARIA usage.

Community
Advanced