Frontend Design Review
This conducts comprehensive frontend design reviews covering UI/UX quality, design system compliance, accessibility, and responsive patterns. You'd use it when evaluating Figma files, validating component libraries, or auditing designs before implementation. It walks through visual design assessment, WCAG 2.1 AA compliance checks, design token validation, and component architecture review. The workflow is thorough, maybe more structured than you need for quick reviews, but the severity rating system (critical to low) and the accessibility quick reference with specific contrast ratios are genuinely useful. Best for teams that want documented design reviews with actionable findings rather than quick feedback sessions.
- skills.sh installs
- 463
- GitHub stars
- 18
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dauquangthanh/hanoi-rainbow --skill frontend-design-review --agent claude-codeInstalls into .claude/skills of the current project.
Files
Frontend Design Review
Overview
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.
Core Capabilities
1. UI/UX Design Quality Review
- Visual design assessment (typography, color, spacing, layout, visual hierarchy)
- User experience evaluation (flows, interactions, navigation, usability)
- Design consistency verification across screens and journeys
- Brand alignment and visual identity validation
- Cognitive load analysis
2. Design System Validation
- Component library review (design, variants, states, reusability)
- Design tokens validation (colors, typography, spacing)
- Pattern library assessment for consistency
- Documentation quality evaluation
- Design system governance assessment
3. Accessibility Compliance
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dauquangthanh/hanoi-rainbow
- Categories
- Frontend Development, Git & Pull Requests, Code Review & Quality, Design & UI/UX
- First seen
- Jun 3, 2026
More from dauquangthanh/hanoi-rainbow
All 3Recommended
More Frontend Development
shadcn-layoutsjwynia/agent-skillsGenerate correct shadcn/Tailwind layouts by applying CSS mental models. This skill should be used when the user asks to 'create a shadcn layout', 'fix layout is460skills.sh installs
frontend-routingaj-geddes/useful-ai-promptsImplement client-side routing using React Router, Vue Router, and Angular Router. Use when building multi-page applications with navigation and route protection454skills.sh installspwa-developmentjwynia/agent-skillsImplement Progressive Web App features for React and Svelte projects. This skill should be used when the user asks to 'make a PWA', 'add offline support', 'crea447skills.sh installs
shadcn-inertiainertia-rails/skillsshadcn/ui component integration for Inertia Rails React (NOT Next.js): forms, dialogs, tables, toasts, dark mode, command palette, and more. Use when building U436skills.sh installs
modern-frontend-designdeveshpunjabi/modern-frontend-skillHow to design and build modern, premium-quality frontend interfaces that look like high-end SaaS products, modern AI tools, and award-winning design websites — 432skills.sh installs
shadcn-uibobmatnyc/claude-mpm-skillsshadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership421skills.sh installs