frontend-design-review

SKILL.md

This skill provides expert guidance for conducting thorough frontend design reviews, covering UI/UX design quality, design system consistency, accessibility compliance, and responsive design patterns. The skill helps identify design issues early in the development lifecycle, ensuring designs meet quality standards, accessibility requirements, and business objectives before implementation.

2. Create Detailed Findings Report See design-review-report-template.md for comprehensive report structure

Be Specific: Don't say "improve contrast". Say "Body text on blue background has 3.8:1 contrast, needs 4.5:1. Darken text to #1a1a1a or lighten background."

UI/UX デザインの品質、デザイン システムの検証、アクセシビリティ コンプライアンス、レスポンシブ デザイン パターン、コンポーネント ライブラリ アーキテクチャ、ビジュアル デザインの一貫性を含む、包括的なフロントエンド デザイン レビューを実施します。デザイン仕様、Figma/Sketch ファイル、デザイン トークン、インタラクション パターン、ユーザー エクスペリエンス フローを評価します。ユーザビリティの問題、アクセシビリティ違反、設計システムの逸脱を特定し、改善のための実用的な推奨事項を提供します。重大度別に評価された調査結果、視覚的な例、実装ガイドラインを含む詳細な設計レビュー レポートを作成します。フロントエンド デザインのレビュー、デザイン システムの検証、アクセシビリティ コンプライアンスの確保、コンポーネント ライブラリの評価、レスポンシブ デザインの評価を行う場合、またはユーザーがデザイン レビュー、UI/UX レビュー、Figma レビュー、デザイン システムの検証、アクセシビリティ監査、またはフロントエンド デザインの品質について言及する場合に使用します。 ソース: dauquangthanh/hanoi-rainbow。

原文を見る