🎯

ui-design

🎯Skill

from thongdn-it/react-agent-skills

What it does

Guides frontend developers in creating accessible, performant, and user-friendly interfaces by providing comprehensive UI/UX design best practices and optimization rules.

📦

Part of

thongdn-it/react-agent-skills(18 items)

ui-design

Installation

Quick InstallInstall with npx

npx skills add https://github.com/thongdn-it/react-agent-skills --all

Quick InstallInstall with npx

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

Quick InstallInstall with npx

npx skills add https://github.com/thongdn-it/react-agent-skills --skill react nextjs tailwind

📖 Extracted from docs: thongdn-it/react-agent-skills

Need more details? View full documentation on GitHub →

2Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

UI/UX and frontend design best practices guidelines (formerly frontend-design). This skill should be used when writing, reviewing, or designing frontend code to ensure accessibility, performance, and usability. Triggers on tasks involving HTML structure, CSS styling, responsive layouts, form design, animations, or accessibility improvements.

Overview

# UI/UX Best Practices Frontend Design

Comprehensive UI/UX and frontend design best practices guide. Contains 42 rules across 8 categories, prioritized by impact to guide accessible, performant, and user-friendly interface development.

When to Apply

Reference these guidelines when:

Structuring HTML for accessibility and semantics
Writing CSS for responsive layouts and visual hierarchy
Optimizing images and fonts for Core Web Vitals
Designing forms with proper validation and error handling
Adding animations and interactive elements

Rule Categories by Priority

|----------|----------|--------|--------|

| 2 | Core Web Vitals Optimization | CRITICAL | cwv- |

Quick Reference

1. Accessibility & WCAG Compliance (CRITICAL)

access-semantic-html - Use semantic HTML elements for screen readers
access-keyboard-navigation - Ensure full keyboard navigation
access-focus-indicators - Provide visible focus indicators
access-alt-text - Provide meaningful alt text for images
access-aria-labels - Use ARIA labels for icon-only controls
access-target-size - Ensure minimum touch target size (24×24px)
access-heading-hierarchy - Maintain logical heading hierarchy

2. Core Web Vitals Optimization (CRITICAL)

cwv-optimize-lcp - Optimize Largest Contentful Paint under 2.5s
cwv-minimize-cls - Minimize Cumulative Layout Shift under 0.1
cwv-improve-inp - Improve Interaction to Next Paint under 200ms
cwv-responsive-images - Serve responsive images with srcset
cwv-lazy-load-offscreen - Lazy load offscreen images and iframes
cwv-critical-css - Inline critical CSS and defer the rest

3. Visual Hierarchy & Layout (HIGH)

layout-visual-hierarchy - Establish clear visual hierarchy
layout-whitespace - Use whitespace to improve readability
layout-f-pattern - Design for F-pattern reading behavior
layout-grid-system - Use a consistent grid system
layout-single-cta - Limit to one primary CTA per screen
layout-proximity-grouping - Group related elements with proximity

4. Responsive & Mobile-First Design (HIGH)

resp-mobile-first - Design mobile-first with min-width queries
resp-fluid-typography - Use fluid typography with clamp()
resp-container-queries - Use container queries for components
resp-touch-targets - Size touch targets for mobile (44×44px)
resp-viewport-meta - Configure viewport meta tag correctly

5. Typography & Font Loading (MEDIUM-HIGH)

typo-font-display - Use font-display to control loading behavior
typo-preload-fonts - Preload critical web fonts
typo-readable-line-length - Constrain line length (45-75ch)
typo-line-height - Set appropriate line height (1.5-1.7)
typo-system-font-stack - Use system font stack for UI elements

6. Color & Contrast (MEDIUM)

color-contrast-ratio - Meet WCAG contrast ratio requirements (4.5:1)
color-not-only-indicator - Never use color alone to convey information
color-dark-mode - Support dark mode with prefers-color-scheme
color-semantic-palette - Use semantic color names in design tokens

7. Forms & Validation UX (MEDIUM)

form-inline-validation - Use inline validation after field blur
form-error-messages - Write actionable error messages
form-labels-above - Place labels above input fields
form-input-types - Use correct HTML input types for mobile
form-autocomplete - Enable browser autocomplete with correct attributes

8. Animation & Performance (LOW-MEDIUM)

anim-gpu-properties - Animate only GPU-accelerated properties
anim-will-change - Use will-change sparingly for animation hints
anim-reduced-motion - Respect user motion preferences
anim-duration-easing - Use appropriate animation duration and easing

How to Use

Read individual reference files for detailed explanations and code examples:

[Section definitions](references/_sections.md) - Category structure and impact levels
[Rule template](assets/templates/_template.md) - Template for adding new rules
Example: [access-semantic-html](references/access-semantic-html.md)

Full Compiled Document

For the complete guide with all rules expanded: [AGENTS.md](AGENTS.md)

More from this repository10

🎯

vercel-react-best-practices🎯Skill

Provides performance optimization guidelines for React and Next.js, offering 57 rules across 8 categories to improve application speed and efficiency.

🎯

vercel-composition-patterns🎯Skill

Provides React composition patterns to refactor components, build flexible libraries, and improve component architecture through advanced design techniques.

🎯

web-design-guidelines🎯Skill

Provides comprehensive web design guidelines and best practices for creating user-friendly and visually appealing web interfaces.

🎯

typescript🎯Skill

Optimizes TypeScript performance by providing targeted rules for type system, compiler configuration, async patterns, and module organization across 42 best practices.

🎯

nuqs🎯Skill

Manages type-safe URL query state in Next.js, providing best practices and guidelines for implementing, configuring, and optimizing nuqs-based routing and state management.

🎯

vitest🎯Skill

Runs Vitest unit tests for React components and provides testing utilities within the React Agent framework.

🎯

tanstack-query🎯Skill

Simplifies data fetching, caching, and state management in React applications using TanStack Query library.

🎯

tailwind🎯Skill

Optimizes Tailwind CSS v4 performance by providing best practices for configuration, utility classes, responsive design, and CSS generation.

🎯

nextjs🎯Skill

Enables Next.js server-side rendering and routing capabilities within a React Agent workflow, simplifying web application development.

🎯

shadcn🎯Skill

Generates shadcn/ui React components with customizable configurations for rapid UI development in React applications.