frontend-design-review

Evaluate frontend interfaces for design system compliance and accessibility.

2|Updated Jan 23, 2026
One-click install
npx skills add https://github.com/yunmoxinghe/Docked-AI --skill frontend-design-review-yunmoxinghe
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design-review
Source: https://github.com/yunmoxinghe/Docked-AI/tree/main/.kiro/skills/frontend-design-review
Command: npx skills add https://github.com/yunmoxinghe/Docked-AI --skill frontend-design-review-yunmoxinghe

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of ensuring high-quality, compliant frontend design in UI development, streamlining design reviews and creating distinctive interfaces.

Core Features & Use Cases

  • Design Review Mode: Evaluate existing UI for compliance with design systems, accessibility, and quality standards.
  • Creative Design Mode: Develop unique frontend interfaces with a focus on aesthetic direction, typography, color schemes, and motion design.
  • Use Case: Utilize this Skill to perform a detailed review of a UI component or to design a new interface from scratch, ensuring it meets the required design and functionality criteria.

Quick Start

Start a design review by running the frontend-design-review skill with the specific component or feature you want to evaluate.

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

To perform a design review for accessibility, evaluate your UI components against functional accessibility standards alongside aesthetic quality and design system compliance. This process identifies barriers in your interface and ensures it meets required accessibility criteria.

What is the best way to create a frontend interface that follows a design system?

The best way to create a frontend interface following a design system is to focus on aesthetic direction, typography, color schemes, and motion design. This ensures your new UI components meet required design and functionality criteria from the start.

Can I evaluate responsive design and accessibility at the same time?

Yes, you can evaluate responsive design and accessibility simultaneously by reviewing UI components for both functional accessibility and design system compliance. This integrated design review ensures your interface maintains quality standards across different screen sizes and user needs.

Do I need to understand UI principles to use a design review process?

Yes, an understanding of design systems and UI principles is required to effectively review frontend interfaces. This foundational knowledge allows you to accurately assess UI components for aesthetic quality, accessibility, and compliance during the evaluation process.

Why does my frontend development lack design system compliance?

Frontend development often lacks design system compliance when UI components are not evaluated for aesthetic quality and functional accessibility. Without a structured design review, interfaces may deviate from established typography, color schemes, and motion design standards.