Individual skill

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.

skills/.curated/ui-design/SKILL.md

Read pinned source

Source commit cf93c57cac89d6fc3e4194686000411567f5caf3

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: Yes
Observed behavior: Instructions only
Last checked: Nov 5, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 221
Repository last updated: Aug 15, 2026
License: MIT

Observed agent integration: codex

design Derived category
writing Derived category
design-interface Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

AGENTS.mddoc · 8,885 bytes
README.mddoc · 4,729 bytes
SKILL.mdcore · 5,041 bytes
assets/templates/_template.mddoc · 735 bytes
metadata.jsonasset · 930 bytes
references/_sections.mddoc · 1,792 bytes
references/access-alt-text.mddoc · 1,758 bytes
references/access-aria-labels.mddoc · 1,656 bytes
references/access-focus-indicators.mddoc · 1,341 bytes
references/access-heading-hierarchy.mddoc · 1,385 bytes
references/access-keyboard-navigation.mddoc · 1,532 bytes
references/access-semantic-html.mddoc · 1,495 bytes
references/access-target-size.mddoc · 1,370 bytes
references/anim-duration-easing.mddoc · 1,926 bytes
references/anim-gpu-properties.mddoc · 1,814 bytes
references/anim-reduced-motion.mddoc · 2,045 bytes
references/anim-will-change.mddoc · 2,012 bytes
references/color-contrast-ratio.mddoc · 1,716 bytes
references/color-dark-mode.mddoc · 1,804 bytes
references/color-not-only-indicator.mddoc · 2,058 bytes
references/color-semantic-palette.mddoc · 1,985 bytes
references/cwv-critical-css.mddoc · 1,761 bytes
references/cwv-improve-inp.mddoc · 2,026 bytes
references/cwv-lazy-load-offscreen.mddoc · 1,822 bytes
references/cwv-minimize-cls.mddoc · 1,719 bytes
references/cwv-optimize-lcp.mddoc · 1,709 bytes
references/cwv-responsive-images.mddoc · 1,715 bytes
references/form-autocomplete.mddoc · 2,337 bytes
references/form-error-messages.mddoc · 1,749 bytes
references/form-inline-validation.mddoc · 1,998 bytes
references/form-input-types.mddoc · 1,979 bytes
references/form-labels-above.mddoc · 1,731 bytes
references/layout-f-pattern.mddoc · 2,033 bytes
references/layout-grid-system.mddoc · 1,673 bytes
references/layout-proximity-grouping.mddoc · 1,542 bytes
references/layout-single-cta.mddoc · 1,818 bytes
references/layout-visual-hierarchy.mddoc · 1,734 bytes
references/layout-whitespace.mddoc · 1,641 bytes
references/resp-container-queries.mddoc · 1,649 bytes
references/resp-fluid-typography.mddoc · 1,658 bytes
references/resp-mobile-first.mddoc · 1,874 bytes
references/resp-touch-targets.mddoc · 1,640 bytes
references/resp-viewport-meta.mddoc · 1,816 bytes
references/typo-font-display.mddoc · 1,881 bytes
references/typo-line-height.mddoc · 1,560 bytes
references/typo-preload-fonts.mddoc · 1,643 bytes
references/typo-readable-line-length.mddoc · 1,534 bytes
references/typo-system-font-stack.mddoc · 1,849 bytes

Read excerpt


# 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