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
Priority
Category
Impact
Prefix
1
Accessibility & WCAG Compliance
CRITICAL
access-
2
Core Web Vitals Optimization
CRITICAL
cwv-
3
Visual Hierarchy & Layout
HIGH
layout-
4
Responsive & Mobile-First Design
HIGH
resp-
5
Typography & Font Loading
MEDIUM-HIGH
typo-
6
Color & Contrast
MEDIUM
color-
7
Forms & Validation UX
MEDIUM
form-
8
Animation & Performance
LOW-MEDIUM
anim-
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
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 - Category structure and impact levels
Rule template - Template for adding new rules
Example: access-semantic-html
Full Compiled Document
For the complete guide with all rules expanded: AGENTS.md
1---2name: ui-design-23description: UI/UX Best Practices Frontend Design4---5# UI/UX Best Practices Frontend Design67Comprehensive 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.89## When to Apply1011Reference these guidelines when:12- Structuring HTML for accessibility and semantics13- Writing CSS for responsive layouts and visual hierarchy14- Optimizing images and fonts for Core Web Vitals15- Designing forms with proper validation and error handling16- Adding animations and interactive elements1718## Rule Categories by Priority1920| Priority | Category | Impact | Prefix |21|----------|----------|--------|--------|22| 1 | Accessibility & WCAG Compliance | CRITICAL | `access-` |23| 2 | Core Web Vitals Optimization | CRITICAL | `cwv-` |24| 3 | Visual Hierarchy & Layout | HIGH | `layout-` |25| 4 | Responsive & Mobile-First Design | HIGH | `resp-` |26| 5 | Typography & Font Loading | MEDIUM-HIGH | `typo-` |27| 6 | Color & Contrast | MEDIUM | `color-` |28| 7 | Forms & Validation UX | MEDIUM | `form-` |29| 8 | Animation & Performance | LOW-MEDIUM | `anim-` |3031## Quick Reference3233### 1. Accessibility & WCAG Compliance (CRITICAL)3435- `access-semantic-html` - Use semantic HTML elements for screen readers36- `access-keyboard-navigation` - Ensure full keyboard navigation37- `access-focus-indicators` - Provide visible focus indicators38- `access-alt-text` - Provide meaningful alt text for images39- `access-aria-labels` - Use ARIA labels for icon-only controls40- `access-target-size` - Ensure minimum touch target size (24×24px)41- `access-heading-hierarchy` - Maintain logical heading hierarchy4243### 2. Core Web Vitals Optimization (CRITICAL)4445- `cwv-optimize-lcp` - Optimize Largest Contentful Paint under 2.5s46- `cwv-minimize-cls` - Minimize Cumulative Layout Shift under 0.147- `cwv-improve-inp` - Improve Interaction to Next Paint under 200ms48- `cwv-responsive-images` - Serve responsive images with srcset49- `cwv-lazy-load-offscreen` - Lazy load offscreen images and iframes50- `cwv-critical-css` - Inline critical CSS and defer the rest5152### 3. Visual Hierarchy & Layout (HIGH)5354- `layout-visual-hierarchy` - Establish clear visual hierarchy55- `layout-whitespace` - Use whitespace to improve readability56- `layout-f-pattern` - Design for F-pattern reading behavior57- `layout-grid-system` - Use a consistent grid system58- `layout-single-cta` - Limit to one primary CTA per screen59- `layout-proximity-grouping` - Group related elements with proximity6061### 4. Responsive & Mobile-First Design (HIGH)6263- `resp-mobile-first` - Design mobile-first with min-width queries64- `resp-fluid-typography` - Use fluid typography with clamp()65- `resp-container-queries` - Use container queries for components66- `resp-touch-targets` - Size touch targets for mobile (44×44px)67- `resp-viewport-meta` - Configure viewport meta tag correctly6869### 5. Typography & Font Loading (MEDIUM-HIGH)7071- `typo-font-display` - Use font-display to control loading behavior72- `typo-preload-fonts` - Preload critical web fonts73- `typo-readable-line-length` - Constrain line length (45-75ch)74- `typo-line-height` - Set appropriate line height (1.5-1.7)75- `typo-system-font-stack` - Use system font stack for UI elements7677### 6. Color & Contrast (MEDIUM)7879- `color-contrast-ratio` - Meet WCAG contrast ratio requirements (4.5:1)80- `color-not-only-indicator` - Never use color alone to convey information81- `color-dark-mode` - Support dark mode with prefers-color-scheme82- `color-semantic-palette` - Use semantic color names in design tokens8384### 7. Forms & Validation UX (MEDIUM)8586- `form-inline-validation` - Use inline validation after field blur87- `form-error-messages` - Write actionable error messages88- `form-labels-above` - Place labels above input fields89- `form-input-types` - Use correct HTML input types for mobile90- `form-autocomplete` - Enable browser autocomplete with correct attributes9192### 8. Animation & Performance (LOW-MEDIUM)9394- `anim-gpu-properties` - Animate only GPU-accelerated properties95- `anim-will-change` - Use will-change sparingly for animation hints96- `anim-reduced-motion` - Respect user motion preferences97- `anim-duration-easing` - Use appropriate animation duration and easing9899## How to Use100101Read individual reference files for detailed explanations and code examples:102103- [Section definitions](references/_sections.md) - Category structure and impact levels104- [Rule template](assets/templates/_template.md) - Template for adding new rules105- Example: [access-semantic-html](references/access-semantic-html.md)106107## Full Compiled Document108109For the complete guide with all rules expanded: [AGENTS.md](AGENTS.md)
Run npx skillmds@latest add comeonoliver/ui-design-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
UI/UX Best Practices Frontend Design It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
ComeOnOliver (@comeonoliver) published this skill. Their other Agent Skills are listed on their SkillMD profile.
ComeOnOliver