Individual skill

ui-design

Accessible, responsive frontend UI and UX design.

skills/ui-design/SKILL.md

Read pinned source

Source commit b210600fdf49441ee1efeca2cbdc05599ec03019

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 6, 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): 42
Repository last updated: Nov 4, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

agent-skills Repository topic
ai-agents Repository topic
ai-coding-assistant Repository topic
claude-code Repository topic
codex Repository topic
cursor Repository topic
frontend Repository topic
nextjs Repository topic
opencode Repository topic
react Repository topic
design 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

SKILL.mdcore · 4,468 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 · 2,016 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,939 bytes
references/typo-line-height.mddoc · 1,579 bytes
references/typo-preload-fonts.mddoc · 1,647 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