What is the 'Iron Law' of this skill?

The Iron Law dictates that no UI design should be performed before the user flow is completely understood and mapped.

Can it help with responsive design?

Yes, it includes a responsive design checklist to ensure touch targets, layout adaptations, and content readability across all screen sizes.

How does it improve the code review process?

It provides a standardized output format for reviews that categorizes issues by severity (BLOCKS, IMPAIRS, MINOR) across UX, Accessibility, and Visual Design.

Does this skill help with accessibility compliance?

Yes, it includes a detailed checklist for WCAG 2.1 AA compliance, including keyboard navigation, focus states, and color contrast ratios.

Frontend Patterns & UX Review

Name: Frontend Patterns & UX Review
Author: romiluz13

byromiluz13

•

디자인 도구

Enforces user-centric design principles, accessibility standards, and robust UI component patterns during the frontend development process.

This skill provides a rigorous framework for building and reviewing high-quality user interfaces by prioritizing user flows over aesthetic preferences. It ensures every UI decision follows the 'Iron Law' of understanding user goals first, while enforcing strict accessibility (WCAG 2.1 AA) compliance, responsive design checklists, and standardized patterns for forms, loading states, and error handling. It is an essential tool for developers and reviewers who want to maintain professional UX standards and catch usability issues before they reach production.

주요 기능

01User flow mapping and requirement validation framework

02Comprehensive accessibility (WCAG 2.1 AA) compliance checklists

03Structured UX review methodology with severity-based impact reporting

0418 GitHub stars

05Standardized UI component patterns for React/TSX environments

06Responsive design verification for mobile, tablet, and desktop breakpoints

사용 사례

01Reviewing frontend pull requests for accessibility and UX best practices

02Refactoring legacy forms to include proper validation, loading, and error states

03Defining step-by-step user flows before starting new UI implementation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add romiluz13/cc10x frontend-patterns

For use in Claude.ai and ChatGPT

Download Skill