UI Design Patterns & Principles

A comprehensive guide to professional UI design, covering hierarchy, spacing, accessibility, and usability patterns based on Refactoring UI and Practical UI.

triggers:ui designlayout polishvisual hierarchyspacing systemaccessibility audit

GitHub SKILL.md

What it does

This skill transforms an agent into a UI design expert. It provides concrete, logical rules for creating polished web interfaces without requiring deep graphic design training. It focuses on reducing cognitive load and interaction cost while ensuring accessibility.

When to use it

Use this skill when designing new features, reviewing existing layouts, polishing CSS/UI components, or establishing a consistent design system for web projects.

What's included

Instructions: Detailed guidelines on visual hierarchy, color contrast, spacing systems, and layout logic.
References: Links to comprehensive guides and external resources like WCAG 2.1 AA standards.
Frameworks: Application of Fitts's Law, Jakob's Law, and the 80/20 rule in UI contexts.

Compatible agents

Ideally suited for coding agents integrated into IDEs (e.g., Cursor, Claude Code) that can directly modify CSS, Tailwind configurations, or TSX/HTML components.

Not yet audited

This skill has not been reviewed by our automated audit pipeline yet.

Information

Repository: webconsulting-skills
Stars: 32

More from webconsulting-skills

Analytics Tracking & Measurement

Expert guidance for setting up, auditing, and improving web analytics tracking using GA4, GTM, Mixpanel, and Segment.

Related Skills

Scientific Schematics & Diagrams

Generate publication-quality scientific diagrams via AI with iterative quality review and smart regeneration for journal, conference, poster, and presentation o

Clerk Vue Patterns

Vue 3 integration patterns for Clerk: composables, router guards, and Pinia auth store integration.

Colorize (Strategic UI Color)

Introduce purposeful color into monochromatic or dull interfaces to improve hierarchy, meaning, and emotional warmth while preserving accessibility.

OpenTestAI

Automated, high-confidence AI testing: bug detection, persona feedback, and prioritized test-case generation using many specialized tester profiles.

Shopify Store Audit

Structured, page-by-page audit of Shopify storefronts to find conversion blockers and prioritized fixes for copy, UX, trust signals, and checkout friction.

Cognitive Accessibility Specialist

Audits content, forms and authentication flows for cognitive accessibility (WCAG 2.2 / COGA) and gives prioritized remediation and plain-language guidance.

Agent Browser — Core

Core usage guide for agent-browser: snapshot-and-ref browser automation to navigate pages, interact with elements, extract data, take screenshots, manage sessio

React Development Expert

Provides authoritative React guidance on hooks, state patterns, Server Components, performance optimization, and common architectural patterns.

MCP App Store

UI Design Patterns & Principles

What it does

When to use it

What's included

Compatible agents