mcpField
U
ui-design

ui-design

github.com/pymodelDesign & UI40528 installsUpdated 4w ago
Repository

About ui-design

ui-design is a UI/UX and frontend practice guide for designing and implementing interfaces. It organizes 42 prioritized rules across eight categories, including accessibility, Core Web Vitals, responsive layouts, and form experience.

Key features

  1. 01Covers eight design categories
  2. 02Provides 42 rules
  3. 03Focuses on accessibility and WCAG
  4. 04Includes Core Web Vitals guidance
  5. 05Guides responsive layouts and forms

Use cases

  1. 01Check HTML semantics and keyboard navigation
  2. 02Optimize images and page vitals
  3. 03Plan mobile-first responsive layouts
  4. 04Improve form validation and error messages

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/pymodel/react-frontend-skills --skill ui-design

After installing, type/ui-designin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
access-alt-text.md
access-aria-labels.md
access-focus-indicators.md
access-heading-hierarchy.md
access-keyboard-navigation.md
access-semantic-html.md
access-target-size.md
anim-duration-easing.md
anim-gpu-properties.md
anim-reduced-motion.md
anim-will-change.md
color-contrast-ratio.md
color-dark-mode.md
color-not-only-indicator.md
color-semantic-palette.md
cwv-critical-css.md
cwv-improve-inp.md
cwv-lazy-load-offscreen.md
cwv-minimize-cls.md
cwv-optimize-lcp.md
cwv-responsive-images.md
form-autocomplete.md
form-error-messages.md
form-inline-validation.md
form-input-types.md
form-labels-above.md
layout-f-pattern.md
layout-grid-system.md
layout-proximity-grouping.md
layout-single-cta.md

Details

From the project README

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

PriorityCategoryImpactPrefix
1Accessibility & WCAG ComplianceCRITICALaccess-
2Core Web Vitals OptimizationCRITICALcwv-
3Visual Hierarchy & LayoutHIGHlayout-
4Responsive & Mobile-First DesignHIGHresp-
5Typography & Font LoadingMEDIUM-HIGHtypo-
6Color & ContrastMEDIUMcolor-
7Forms & Validation UXMEDIUMform-
8Animation & PerformanceLOW-MEDIUManim-

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 - Establish a clear primary action per task context
  • 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 references/<rule-id>.md for each rule above that matches the task: why it matters, then incorrect vs. correct code.

Comments

Markdown supported