skills.rest
moughamir
moughamirCOMMUNITY
Explore all skills by this author →
Website𝕏@omnizyaGitHub

ui-design

Audit and refactor HTML, CSS, JS, and React interfaces for accessibility, performance, and usability.

Updated Mar 26, 2026
Search Tags:#accessibility#ui-ux#responsive-design#core-web-vitals#form-validation#performance-optimization#frontend-code-review
One-click install
npx skills add https://github.com/moughamir/justwaitit-review --skill ui-design-moughamir
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/moughamir/justwaitit-review/tree/main/.agents/skills/ui-design
Command: npx skills add https://github.com/moughamir/justwaitit-review --skill ui-design-moughamir

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill solves the problem of inaccessible or slow web interfaces by enforcing practical, repeatable UI/UX rules that improve usability, performance, and compliance across common frontend patterns.

Core Features & Use Cases

  • Accessibility & semantic structure: Guides correct keyboard navigation, focus visibility, ARIA labeling for icon-only controls, heading hierarchy, and meaningful alt text.
  • Core Web Vitals performance: Provides actionable techniques to improve LCP, INP, and CLS through optimized loading, responsive media, and layout stability.
  • Design-system level UI quality: Covers hierarchy, spacing/whitespace, responsive behavior (mobile-first, fluid typography, container queries), typography, color contrast/dark mode, form UX, and animation performance.

Quick Start

Ask an AI agent to review a React/Next.js page for accessibility, Core Web Vitals risks, responsive layout issues, and form/animation best practices using this skill’s 42-rule checklist.

Frequently Asked Questions about ui-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit my React interface for accessibility and Core Web Vitals?▼

You can audit React interfaces by applying a 42-rule checklist covering WCAG semantics, keyboard navigation, focus visibility, and Core Web Vitals targets like LCP, INP, and CLS to identify and resolve usability and performance issues.

What's the best way to improve form validation UX and accessibility?▼

Improve form validation UX by enforcing meaningful ARIA labeling, correct heading hierarchy, safe UI interactions like non-blocking updates, and clear focus styles to ensure keyboard navigation and accessible error handling.

How do I optimize responsive design and fluid typography for mobile-first layouts?▼

Optimize responsive design by applying mobile-first patterns, fluid typography, container queries, and responsive media loading to ensure layout stability and adaptability across different screen sizes.

Does this approach support animation behavior and reduced-motion handling?▼

Yes, animation behavior is supported by enforcing safe UI interactions that include reduced-motion handling, ensuring animations do not block updates and respect user accessibility preferences.

How do I fix layout shift and improve LCP for frontend performance optimization?▼

Fix layout shift and improve LCP by applying actionable performance techniques for optimized loading, responsive media, and layout stability to meet measurable Core Web Vitals targets.

Can I use this UI review process for plain HTML, CSS, and JavaScript?▼

Yes, the UI review process supports audits and refactors of HTML, CSS, and JavaScript interfaces, applying semantic structure, color contrast, and dark mode rules alongside React and Next.js environments.

Related Skills

Explore More Design & Creative Skills→
tarrragontarrragon

Frontend with Playwright — SKILL 入口

Validate frontend DOM/CSS/JS interactions using Playwright across vanilla and frameworks.

Community
Advanced
mauriciodelriomauriciodelrio
3

a11y-rules

Audit React and Next.js components for WCAG 2.2 AA accessibility violations.

Community
Intermediate
TheGreatLTheGreatL

ui-visual-validator

Validate UI modifications for visual regressions, design compliance, and accessibility.

Community
Advanced
hschnehschne
1

a11y

Audit web pages for WCAG 2.2 AA violations using axe-core and Lighthouse.

Community
Intermediate