ui-design
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 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 readersaccess-keyboard-navigation- Ensure full keyboard navigationaccess-focus-indicators- Provide visible focus indicatorsaccess-alt-text- Provide meaningful alt text for imagesaccess-aria-labels- Use ARIA labels for icon-only controlsaccess-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.5scwv-minimize-cls- Minimize Cumulative Layout Shift under 0.1cwv-improve-inp- Improve Interaction to Next Paint under 200mscwv-responsive-images- Serve responsive images with srcsetcwv-lazy-load-offscreen- Lazy load offscreen images and iframescwv-critical-css- Inline critical CSS and defer the rest
3. Visual Hierarchy & Layout (HIGH)
layout-visual-hierarchy- Establish clear visual hierarchylayout-whitespace- Use whitespace to improve readabilitylayout-f-pattern- Design for F-pattern reading behaviorlayout-grid-system- Use a consistent grid systemlayout-single-cta- Limit to one primary CTA per screenlayout-proximity-grouping- Group related elements with proximity
4. Responsive & Mobile-First Design (HIGH)
resp-mobile-first- Design mobile-first with min-width queriesresp-fluid-typography- Use fluid typography with clamp()resp-container-queries- Use container queries for componentsresp-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 behaviortypo-preload-fonts- Preload critical web fontstypo-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 informationcolor-dark-mode- Support dark mode with prefers-color-schemecolor-semantic-palette- Use semantic color names in design tokens
7. Forms & Validation UX (MEDIUM)
form-inline-validation- Use inline validation after field blurform-error-messages- Write actionable error messagesform-labels-above- Place labels above input fieldsform-input-types- Use correct HTML input types for mobileform-autocomplete- Enable browser autocomplete with correct attributes
8. Animation & Performance (LOW-MEDIUM)
anim-gpu-properties- Animate only GPU-accelerated propertiesanim-will-change- Use will-change sparingly for animation hintsanim-reduced-motion- Respect user motion preferencesanim-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
You Might Also Like
Related Skills
cache-components
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
vercel
component-refactoring
Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when `pnpm analyze-component` warns to refactor before testing; avoid for simple/well-structured components, third-party wrappers, or when the user explicitly wants testing without refactoring.
langgenius
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
anthropicsfrontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
anthropics
react-modernization
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
wshobsontailwind-design-system
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
wshobson