frontend-design-review

Analyze frontend UI implementations for design system compliance and accessibility.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/javi2481/proyecto-data-x --skill frontend-design-review-javi2481
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design-review
Source: https://github.com/javi2481/proyecto-data-x/tree/main/.claude/skills/frontend-design-review
Command: npx skills add https://github.com/javi2481/proyecto-data-x --skill frontend-design-review-javi2481

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Review UI implementations for design system compliance, visual quality, and accessible front-end craftsmanship.

Core Features & Use Cases

  • Evaluate UI implementations against design tokens, spacing, typography, and accessibility guidelines.
  • Perform design-system-aware reviews for PRs, design audits, and component-level feedback.
  • Provide actionable recommendations and documentation to align with design system principles.

Quick Start

Initiate a design-review pass on a UI component or PR to generate a comprehensive report.

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 UI implementations for design system compliance?

To review UI implementations for design system compliance, analyze the component against design tokens, spacing, typography, and accessibility guidelines to ensure consistent aesthetics and usable interactions. This generates a comprehensive report with actionable recommendations and documentation for any deviations.

Can I evaluate frontend accessibility and visual quality in a PR review?

Yes, you can evaluate frontend accessibility and visual quality during a PR review by performing design-system-aware checks. This verifies design-token usage, responsiveness, and clear accessibility standards to align the PR with design system principles.

What is the best way to audit web interfaces for design token usage?

The best way to audit web interfaces for design token usage is to perform a component-level review that verifies token application across spacing and typography. This ensures consistent UI aesthetics and satisfies design system requirements while documenting necessary deviations.

Does a frontend design review check responsiveness and documented deviations?

Yes, a frontend design review includes clear accessibility and responsiveness checks while verifying design-token usage. It ensures that any necessary deviations from the design system are properly documented to maintain overall visual quality and compliance.