skills.rest
aaddrick
aaddrickCOMMUNITY
Explore all skills by this author →
GitHub

ui-design-fundamentals

Analyze UI screens for color, spacing, typography, and layout weaknesses.

125|16|Updated Feb 6, 2026
Search Tags:#typography#design#accessibility#layout#UI#color#spacing
One-click install
npx skills add https://github.com/aaddrick/claude-pipeline --skill ui-design-fundamentals
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-fundamentals
Source: https://github.com/aaddrick/claude-pipeline/tree/main/.claude/skills/ui-design-fundamentals
Command: npx skills add https://github.com/aaddrick/claude-pipeline --skill ui-design-fundamentals

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill consolidates essential UI design guidance to help teams create accessible, balanced interfaces without re-reading multiple documents.

Core Features & Use Cases

  • Accessibility-first principles covering color contrast, typography, spacing, tap targets, and responsive layouts.
  • Comprehensive reference material for grids, components, forms, navigation, cards, and patterns.
  • Use cases include auditing existing interfaces, guiding new component design, and communicating design decisions to cross-functional teams.

Quick Start

Review a UI screen and summarize 5-7 concrete improvements, then provide a prioritized action plan with quick wins and rationale.

Frequently Asked Questions about ui-design-fundamentals

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I identify UI design weaknesses in an existing app screen?▼

Analyze color contrast, spacing, typography, and layout to detect readability and visual hierarchy issues. This isolates accessibility flaws in real-world interfaces and generates concrete, actionable improvements for rapid iteration.

What are the most important accessibility principles for interface layout?▼

Essential accessibility principles for interface layout require evaluating color contrast ratios, readable typography, consistent spacing, adequate tap targets, and responsive grid structures. Applying these baseline rules ensures balanced interfaces and improves overall readability for users navigating real-world apps.

How do I audit a user interface for visual hierarchy and color contrast?▼

Auditing visual hierarchy and color contrast involves checking element spacing, typography scales, and layout balance against accessibility-first principles. This review identifies design weaknesses and produces a prioritized action plan with quick wins and clear rationale.

Can I use these UI fundamentals to guide new component design?▼

Yes, these UI fundamentals guide new component design. Reference material covers grids, forms, navigation, and card patterns, providing accessibility-first principles to structure components with proper spacing, tap targets, and responsive layouts.

What is the best way to communicate UI design decisions to cross-functional teams?▼

Provide actionable steps and rationales based on accessibility-first principles. Consolidating guidance on color, spacing, and typography helps cross-functional teams align on improvements without re-reading multiple documents.

Related Skills

Explore More Design & Creative Skills→
gauravb4875-uxgauravb4875-ux

recreate-screenshot

Recreate UI screens from screenshots with pixel-level color and typography matching.

Community
Advanced
julianromlijulianromli

quieter

Reduce visual intensity in branding, UI, and marketing designs.

Community
Advanced
dralgorhythmdralgorhythm
111

interface-design

Designs web and mobile UI layouts and specifications with navigation, forms, and feedback patterns.

Community
Intermediate
AerisG222AerisG222

android-accessibility

Audit Android Jetpack Compose UI for WCAG accessibility compliance.

Community
Basic