ui-design

Enforce UI/UX frontend best practices across HTML, CSS, and component design.

3|1|Updated Jan 27, 2026

Search Tags:#performance #a11y #frontend #responsive #ui-design #design-systems #ux-best-practices

Ready to run

npx skills add https://github.com/thongdn-it/react-agent-skills --skill ui-design-thongdn-it

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/thongdn-it/react-agent-skills/tree/main/skills/ui-design
Command: npx skills add https://github.com/thongdn-it/react-agent-skills --skill ui-design-thongdn-it

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

The Skill helps teams ensure frontend code adheres to UI/UX best practices, improving accessibility, performance, and usability across projects.

Core Features & Use Cases

Guided rule set: covers accessibility, performance, visual hierarchy, responsive design, typography, color, forms, and animation best practices.
Consistency enforcement: provides consistent guidelines for HTML structure, CSS, and responsive patterns across codebases.
Audit and review scenarios: applies during code reviews, pull requests, and design handoffs to surface issues early.

Quick Start

Run a lightweight audit of a frontend project to surface and address UI/UX gaps across the codebase.

Frequently Asked Questions about ui-design

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

FAQPage Schema

How do I enforce accessibility and responsive design best practices in frontend code?▼

You can enforce accessibility and responsive design by running a guided audit that checks HTML, CSS, and component design against eight UI/UX categories including accessibility, core web vitals, and visual hierarchy. This surfaces issues early during code reviews.

What is the best way to audit a frontend project for UI and UX consistency?▼

The best way to audit UI and UX consistency is to evaluate the codebase against structured guidelines covering typography, color contrast, forms, and animation. This ensures consistent HTML structure and responsive patterns across the project.

Can I use this to check Core Web Vitals and visual hierarchy during a pull request review?▼

Yes, you can use it during pull request reviews to check Core Web Vitals and visual hierarchy. It applies automated checks and human review guidelines to frontend code, covering performance optimization and design-system consistency.

How do I run a lightweight frontend audit to surface UI and UX gaps?▼

To run a lightweight frontend audit, evaluate the project's HTML, CSS, and components against eight UI/UX categories. This process identifies gaps in accessibility, responsive layouts, and performance optimization for immediate addressing.

Does this cover color contrast and typography rules for accessible web design?▼

Yes, it covers color contrast and typography rules for accessible web design. It provides specific guidelines within its eight categories to ensure forms, animation, and visual elements meet UI/UX best practices.

When do I need design-system consistency checks for frontend components?▼

You need design-system consistency checks during coding, review, and design handoffs. Applying these checks ensures HTML structure, CSS, and responsive patterns adhere to UI/UX best practices, improving overall usability and accessibility.