home / skills / pproenca / dot-skills / ui-design

ui-design skill

safe

This skill helps you apply UI UX and frontend design best practices to build accessible, fast, and user-friendly interfaces.

npx playbooks add skill pproenca/dot-skills --skill ui-design

Review the files below or copy the command above to add this skill to your agents.

Files (48)

SKILL.md

4.9 KB

---
name: ui-design
description: 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.
---

# 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

| 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
- `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)

Overview

This skill provides concise UI/UX and frontend design best-practice guidelines to ensure accessible, performant, and usable interfaces. It prioritizes rules across accessibility, Core Web Vitals, layout, responsiveness, typography, color, forms, and animation. Use it to align frontend code and design decisions with measurable outcomes. The guidance is actionable and targeted at developers, designers, and reviewers.

How this skill works

The skill inspects HTML structure, CSS patterns, responsive layout choices, form UX, image/font loading, and animation usage to surface prioritized recommendations. It maps common issues to specific rules (accessibility first, then performance and visual design) and suggests concrete fixes like semantic elements, responsive images, critical CSS, and proper ARIA usage. Use it as a checklist when writing or reviewing frontend code to reduce accessibility barriers and improve Core Web Vitals.

When to use it

Writing or refactoring HTML to improve semantics and screen reader support
Creating or reviewing CSS for responsive layouts and visual hierarchy
Optimizing images, fonts, and critical CSS for Core Web Vitals
Designing forms, validation flows, and error messaging
Adding animations or interactive elements where performance or motion preference matters

Best practices

Prioritize accessibility: use semantic HTML, keyboard navigation, visible focus states, and meaningful alt text
Optimize for Core Web Vitals: serve responsive images, lazy-load offscreen media, and inline critical CSS
Design mobile-first with fluid typography, adequate touch targets, and container queries for components
Establish clear visual hierarchy with grid systems, whitespace, and a single primary CTA per view
Load fonts responsibly: use font-display, preload critical fonts, and fall back to system stacks
Respect user preferences and performance: reduce motion, animate GPU properties, and limit will-change usage

Example use cases

Code review checklist to catch accessibility regressions and CLS causes
Sprint task: convert a desktop layout to mobile-first with fluid type and container queries
Performance audit: reduce LCP and INP by optimizing images and inlining critical CSS
Form redesign: implement inline validation, above-field labels, and proper autocomplete attributes
Animation update: switch heavy JS effects to CSS GPU-accelerated properties and honor reduced-motion

FAQ

Which rules are highest priority?

Accessibility and Core Web Vitals are highest priority—fix semantic HTML, keyboard access, LCP, CLS, and INP first.

How do I balance visuals with performance?

Establish visual hierarchy and brand while deferring noncritical assets: preload only essential fonts, lazy-load offscreen images, and inline critical CSS so visuals appear fast without sacrificing accessibility.