ui-design-fundamentals

Name: ui-design-fundamentals
Author: aaddrick

120stars16forks

How to install ui-design-fundamentals?

aaddrick/claude-pipeline/ui-design-fundamentals

$npx -y skills add aaddrick/claude-pipeline --skill ui-design-fundamentals

Installs into the current project.

Summary

--- name: ui-design-fundamentals description: Use when designing UI components, reviewing frontend code, choosing colors, spacing, typography, or layout. Use when CSS looks off, components feel unbalanced, or accessibility is unclear. ---

Files · 1

View on GitHub

SKILL.md

1	---
2	name: ui-design-fundamentals
3	description: Use when designing UI components, reviewing frontend code, choosing colors, spacing, typography, or layout. Use when CSS looks off, components feel unbalanced, or accessibility is unclear.
4	---
5
6	# UI Design Fundamentals
7
8	## Overview
9
10	Reference guide for designing effective, accessible user interfaces. Core principle: Less is more - every element should serve a purpose.
11
12	## Core Principles
13
14	### 1. The 8-Point Grid
15	All spacing, margins, and dimensions use multiples of 8px. Use 4px for fine control.
16
17	### 2. Visual Hierarchy
18	Guide attention through size, weight, color, and spacing. Most important = largest/boldest.
19
20	### 3. Consistency
21	Same patterns throughout. Create style guide first, then components.
22
23	### 4. Accessibility First
24	- Minimum 4.5:1 contrast for text
25	- 44px minimum tap targets (48px preferred)
26	- Never rely on color alone
27
28	### 5. Mobile First
29	Design smallest screen first. Easier to scale up than down.
30
31	### 6. Grayscale First
32	Focus on layout and hierarchy before adding color.
33
34	## Quick Reference Tables
35
36	### Spacing Scale (8pt grid)
37	\| Value \| Use \|
38	\|-------\|-----\|
39	\| 8px \| Tight gaps, icons \|
40	\| 16px \| Standard padding \|
41	\| 24px \| Related groups \|
42	\| 32px \| Card padding \|
43	\| 48px \| Section gaps \|
44	\| 64-96px \| Major sections \|
45
46	### Contrast Requirements (WCAG)
47	\| Element \| Minimum \|
48	\|---------\|---------\|
49	\| Small text \| 4.5:1 \|
50	\| Large text (>24px) \| 3:1 \|
51	\| UI components \| 3:1 \|
52	\| AAA (ideal) \| 7:1 \|
53
54	### Tap Targets
55	\| Platform \| Minimum \|
56	\|----------\|---------\|
57	\| iOS \| 44x44px \|
58	\| Android \| 48x48px \|
59	\| Desktop \| 32-40px height \|
60
61	### Frame Sizes
62	\| Platform \| Size \|
63	\|----------\|------\|
64	\| iOS \| 375x812 \|
65	\| Android \| 360x800 \|
66	\| Desktop \| 1440x1024 \|
67	\| Large desktop \| 1920x1024 \|
68
69	## Reference Files
70
71	Detailed guidance by topic:
72
73	\| File \| Topics \|
74	\|------\|--------\|
75	\| [grid-and-spacing.md](grid-and-spacing.md) \| 8pt grid, layouts, margins, gutters, box model, alignment \|
76	\| [typography.md](typography.md) \| Type scales, font weights, line heights, hierarchy \|
77	\| [colors.md](colors.md) \| Color theory, WCAG contrast, psychology, tints/shades, dark mode \|
78	\| [shadows-and-depth.md](shadows-and-depth.md) \| Elevation, shadow techniques, gradients \|
79	\| [buttons.md](buttons.md) \| Anatomy, states, hierarchy, icons, placement \|
80	\| [forms.md](forms.md) \| Labels, validation, input types, multi-step, accessibility \|
81	\| [navigation.md](navigation.md) \| Nav bars, sticky headers, mobile tab bars, breadcrumbs \|
82	\| [hero-sections.md](hero-sections.md) \| Above the fold, CTAs, social proof, F/Z patterns \|
83	\| [cards.md](cards.md) \| Anatomy, spacing, types, consistency \|
84	\| [modals-and-dropdowns.md](modals-and-dropdowns.md) \| Modal windows, dialogs, dropdown patterns \|
85	\| [search.md](search.md) \| Search inputs, autocomplete, recent searches, no-results \|
86	\| [pricing.md](pricing.md) \| Pricing sections, psychology, conversion optimization \|
87	\| [style-guides.md](style-guides.md) \| Component libraries, design systems, documentation \|
88
89	## Common Mistakes
90
91	\| Mistake \| Fix \|
92	\|---------\|-----\|
93	\| Random spacing \| Use 8px grid \|
94	\| Low contrast \| Min 4.5:1, use A11y plugin \|
95	\| Tiny tap targets \| 44px minimum \|
96	\| Too many elements \| Remove until it breaks \|
97	\| Inconsistent styles \| Style guide first \|
98	\| Pure black/white \| Tint with primary color \|
99
100	## Design Process
101
102	1. Research - User flows, personas, inspiration
103	2. Grayscale wireframe - Layout and hierarchy only
104	3. Mobile first - Start with smallest screen
105	4. Add color - Apply palette after structure is solid
106	5. Test contrast - Verify accessibility
107	6. Iterate - Refine based on feedback
108
109	## Related Skills
110
111	- bulletproof-frontend — CSS implementation: architecture patterns, BEM naming, accessibility code, responsive CSS, Blade components, Tailwind refactoring
112
113	## Resources
114
115	- iOS: Human Interface Guidelines (developer.apple.com)
116	- Android/Web: Material Design 3 (m3.material.io)
117	- Inspiration: mobbin.com, land-book.com, refero.design
118	- Plugins: A11y Contrast Checker, Beautiful Shadows

People who liked this also viewed

6 picks

Type

ui-design-fundamentals

120stars16forks

View on GitHub

How to install ui-design-fundamentals?

aaddrick/claude-pipeline/ui-design-fundamentals

$npx -y skills add aaddrick/claude-pipeline --skill ui-design-fundamentals

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	---
2	name: ui-design-fundamentals
3	description: Use when designing UI components, reviewing frontend code, choosing colors, spacing, typography, or layout. Use when CSS looks off, components feel unbalanced, or accessibility is unclear.
4	---
5
6	# UI Design Fundamentals
7
8	## Overview
9
10	Reference guide for designing effective, accessible user interfaces. Core principle: Less is more - every element should serve a purpose.
11
12	## Core Principles
13
14	### 1. The 8-Point Grid
15	All spacing, margins, and dimensions use multiples of 8px. Use 4px for fine control.
16
17	### 2. Visual Hierarchy
18	Guide attention through size, weight, color, and spacing. Most important = largest/boldest.
19
20	### 3. Consistency
21	Same patterns throughout. Create style guide first, then components.
22
23	### 4. Accessibility First
24	- Minimum 4.5:1 contrast for text
25	- 44px minimum tap targets (48px preferred)
26	- Never rely on color alone
27
28	### 5. Mobile First
29	Design smallest screen first. Easier to scale up than down.
30
31	### 6. Grayscale First
32	Focus on layout and hierarchy before adding color.
33
34	## Quick Reference Tables
35
36	### Spacing Scale (8pt grid)
37	\| Value \| Use \|
38	\|-------\|-----\|
39	\| 8px \| Tight gaps, icons \|
40	\| 16px \| Standard padding \|
41	\| 24px \| Related groups \|
42	\| 32px \| Card padding \|
43	\| 48px \| Section gaps \|
44	\| 64-96px \| Major sections \|
45
46	### Contrast Requirements (WCAG)
47	\| Element \| Minimum \|
48	\|---------\|---------\|
49	\| Small text \| 4.5:1 \|
50	\| Large text (>24px) \| 3:1 \|
51	\| UI components \| 3:1 \|
52	\| AAA (ideal) \| 7:1 \|
53
54	### Tap Targets
55	\| Platform \| Minimum \|
56	\|----------\|---------\|
57	\| iOS \| 44x44px \|
58	\| Android \| 48x48px \|
59	\| Desktop \| 32-40px height \|
60
61	### Frame Sizes
62	\| Platform \| Size \|
63	\|----------\|------\|
64	\| iOS \| 375x812 \|
65	\| Android \| 360x800 \|
66	\| Desktop \| 1440x1024 \|
67	\| Large desktop \| 1920x1024 \|
68
69	## Reference Files
70
71	Detailed guidance by topic:
72
73	\| File \| Topics \|
74	\|------\|--------\|
75	\| [grid-and-spacing.md](grid-and-spacing.md) \| 8pt grid, layouts, margins, gutters, box model, alignment \|
76	\| [typography.md](typography.md) \| Type scales, font weights, line heights, hierarchy \|
77	\| [colors.md](colors.md) \| Color theory, WCAG contrast, psychology, tints/shades, dark mode \|
78	\| [shadows-and-depth.md](shadows-and-depth.md) \| Elevation, shadow techniques, gradients \|
79	\| [buttons.md](buttons.md) \| Anatomy, states, hierarchy, icons, placement \|
80	\| [forms.md](forms.md) \| Labels, validation, input types, multi-step, accessibility \|
81	\| [navigation.md](navigation.md) \| Nav bars, sticky headers, mobile tab bars, breadcrumbs \|
82	\| [hero-sections.md](hero-sections.md) \| Above the fold, CTAs, social proof, F/Z patterns \|
83	\| [cards.md](cards.md) \| Anatomy, spacing, types, consistency \|
84	\| [modals-and-dropdowns.md](modals-and-dropdowns.md) \| Modal windows, dialogs, dropdown patterns \|
85	\| [search.md](search.md) \| Search inputs, autocomplete, recent searches, no-results \|
86	\| [pricing.md](pricing.md) \| Pricing sections, psychology, conversion optimization \|
87	\| [style-guides.md](style-guides.md) \| Component libraries, design systems, documentation \|
88
89	## Common Mistakes
90
91	\| Mistake \| Fix \|
92	\|---------\|-----\|
93	\| Random spacing \| Use 8px grid \|
94	\| Low contrast \| Min 4.5:1, use A11y plugin \|
95	\| Tiny tap targets \| 44px minimum \|
96	\| Too many elements \| Remove until it breaks \|
97	\| Inconsistent styles \| Style guide first \|
98	\| Pure black/white \| Tint with primary color \|
99
100	## Design Process
101
102	1. Research - User flows, personas, inspiration
103	2. Grayscale wireframe - Layout and hierarchy only
104	3. Mobile first - Start with smallest screen
105	4. Add color - Apply palette after structure is solid
106	5. Test contrast - Verify accessibility
107	6. Iterate - Refine based on feedback
108
109	## Related Skills
110
111	- bulletproof-frontend — CSS implementation: architecture patterns, BEM naming, accessibility code, responsive CSS, Blade components, Tailwind refactoring
112
113	## Resources
114
115	- iOS: Human Interface Guidelines (developer.apple.com)
116	- Android/Web: Material Design 3 (m3.material.io)
117	- Inspiration: mobbin.com, land-book.com, refero.design
118	- Plugins: A11y Contrast Checker, Beautiful Shadows

People who liked this also viewed

6 picks

Type