web-design-guidelines

Name: web-design-guidelines
Author: sabahattink

27stars9forks

How to install web-design-guidelines?

sabahattink/antigravity-fullstack-hq/web-design-guidelines

$npx -y skills add sabahattink/antigravity-fullstack-hq --skill web-design-guidelines

Installs into the current project.

Summary

Web design best practices, accessibility, responsive layout, color contrast. Use when auditing a UI for a11y compliance, designing responsive layouts, or establishing design standards across a web app.

Files · 1

View on GitHub

SKILL.md

1	# Web Design Guidelines
2
3	## Accessibility (WCAG 2.1 AA)
4
5	### Color Contrast Requirements
6	- Normal text (< 18pt): minimum 4.5:1 contrast ratio
7	- Large text (≥ 18pt or 14pt bold): minimum 3:1
8	- UI components and graphical objects: minimum 3:1
9
10	```tsx
11	// Use a utility to check contrast at runtime in dev
12	// Install: npm i color2k
13
14	import { parseToRgb, getLuminance } from 'color2k'
15
16	function getContrastRatio(fg: string, bg: string): number {
17	const l1 = getLuminance(fg)
18	const l2 = getLuminance(bg)
19	const lighter = Math.max(l1, l2)
20	const darker = Math.min(l1, l2)
21	return (lighter + 0.05) / (darker + 0.05)
22	}
23
24	// In Storybook stories or tests:
25	// expect(getContrastRatio('#2563eb', '#ffffff')).toBeGreaterThan(4.5)
26	```
27
28	### Semantic HTML
29	```tsx
30	// Good: semantic structure
31	export function PageLayout() {
32	return (
33	<>
34	<header role="banner">
35	<nav aria-label="Main navigation">
36	<ul role="list">
37	<li><a href="/">Home</a></li>
38	<li><a href="/about">About</a></li>
39	</ul>
40	</nav>
41	</header>
42
43	<main id="main-content" tabIndex={-1}>
44	<h1>Page Title</h1>
45	{/* Skip-to-main link target */}
46	</main>
47
48	<aside aria-label="Related content">
49	{/* Sidebar */}
50	</aside>
51
52	<footer role="contentinfo">
53	{/* Footer */}
54	</footer>
55	</>
56	)
57	}
58
59	// Skip link — must be the very first focusable element
60	function SkipToMain() {
61	return (
62	<a
63	href="#main-content"
64	className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-white focus:text-blue-600 focus:rounded-lg focus:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
65	>
66	Skip to main content
67	</a>
68	)
69	}
70	```
71
72	### Keyboard Navigation
73	```tsx
74	// All interactive elements must be keyboard-operable
75	function DropdownMenu({ items }: { items: MenuItem[] }) {
76	const [open, setOpen] = React.useState(false)
77	const [activeIndex, setActiveIndex] = React.useState(-1)
78
79	const handleKeyDown = (e: React.KeyboardEvent) => {
80	switch (e.key) {
81	case 'ArrowDown':
82	e.preventDefault()
83	setActiveIndex(i => Math.min(i + 1, items.length - 1))
84	break
85	case 'ArrowUp':
86	e.preventDefault()
87	setActiveIndex(i => Math.max(i - 1, 0))
88	break
89	case 'Escape':
90	setOpen(false)
91	break
92	case 'Enter':
93	case ' ':
94	if (activeIndex >= 0) items[activeIndex].action()
95	break
96	}
97	}
98
99	return (
100	<div role="navigation" aria-label="Actions menu">
101	<button
102	aria-haspopup="true"
103	aria-expanded={open}
104	onClick={() => setOpen(o => !o)}
105	>
106	Actions
107	</button>
108	{open && (
109	<ul
110	role="menu"
111	onKeyDown={handleKeyDown}
112	className="..."
113	>
114	{items.map((item, i) => (
115	<li key={item.id} role="menuitem" tabIndex={i === activeIndex ? 0 : -1}>
116	<button onClick={item.action}>{item.label}</button>
117	</li>
118	))}
119	</ul>
120	)}
121	</div>
122	)
123	}
124	```
125
126	### ARIA Labels
127	```tsx
128	// Always label icon-only buttons
129	<button aria-label="Close dialog" onClick={onClose}>
130	<XIcon aria-hidden="true" className="h-5 w-5" />
131	</button>
132
133	// Images
134	<img src={product.image} alt={`${product.name} — front view`} />
135	// Decorative images get empty alt
136	<img src="/divider.svg" alt="" role="presentation" />
137
138	// Live regions for dynamic content
139	<div aria-live="polite" aria-atomic="true" className="sr-only">
140	{statusMessage}
141	</div>
142	```
143
144	## Responsive Layout
145
146	### Mobile-First Approach
147	```css
148	/* Write base styles for mobile, then progressively enhance */
149	.card {
150	padding: 1rem; /* mobile */
151	}
152
153	@media (min-width: 640px) { /* sm */
154	.card { padding: 1.5rem; }
155	}
156
157	@media (min-width: 1024px) { /* lg */
158	.card { padding: 2rem; }
159	}
160	```
161
162	```tsx
163	// Tailwind mobile-first
164	<div className="px-4 sm:px-6 lg:px-8">
165	<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
166	{items.map(item => <Item key={item.id} {...item} />)}
167	</div>
168	</div>
169	```
170
171	### Fluid Typography
172	```css
173	/* clamp(min, preferred, max) — scales smoothly between viewport sizes */
174	:root {
175	--text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
176	--text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.375rem);
177	--text-xl: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
178	--text-2xl: clamp(1.5rem, 1rem + 2.5vw, 2.25rem);
179	--text-4xl: clamp(2rem, 1rem + 5vw, 4rem);
180	}
181	```
182
183	### Container Queries
184	```css
185	/* Style based on parent width, not viewport width */
186	.card-grid {
187	container-type: inline-size;
188	container-name: card-grid;
189	}
190
191	@container card-grid (min-width: 480px) {
192	.product-

People who liked this also viewed

6 picks

Type

web-design-guidelines

27stars9forks

View on GitHub

How to install web-design-guidelines?

sabahattink/antigravity-fullstack-hq/web-design-guidelines

$npx -y skills add sabahattink/antigravity-fullstack-hq --skill web-design-guidelines

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Web Design Guidelines
2
3	## Accessibility (WCAG 2.1 AA)
4
5	### Color Contrast Requirements
6	- Normal text (< 18pt): minimum 4.5:1 contrast ratio
7	- Large text (≥ 18pt or 14pt bold): minimum 3:1
8	- UI components and graphical objects: minimum 3:1
9
10	```tsx
11	// Use a utility to check contrast at runtime in dev
12	// Install: npm i color2k
13
14	import { parseToRgb, getLuminance } from 'color2k'
15
16	function getContrastRatio(fg: string, bg: string): number {
17	const l1 = getLuminance(fg)
18	const l2 = getLuminance(bg)
19	const lighter = Math.max(l1, l2)
20	const darker = Math.min(l1, l2)
21	return (lighter + 0.05) / (darker + 0.05)
22	}
23
24	// In Storybook stories or tests:
25	// expect(getContrastRatio('#2563eb', '#ffffff')).toBeGreaterThan(4.5)
26	```
27
28	### Semantic HTML
29	```tsx
30	// Good: semantic structure
31	export function PageLayout() {
32	return (
33	<>
34	<header role="banner">
35	<nav aria-label="Main navigation">
36	<ul role="list">
37	<li><a href="/">Home</a></li>
38	<li><a href="/about">About</a></li>
39	</ul>
40	</nav>
41	</header>
42
43	<main id="main-content" tabIndex={-1}>
44	<h1>Page Title</h1>
45	{/* Skip-to-main link target */}
46	</main>
47
48	<aside aria-label="Related content">
49	{/* Sidebar */}
50	</aside>
51
52	<footer role="contentinfo">
53	{/* Footer */}
54	</footer>
55	</>
56	)
57	}
58
59	// Skip link — must be the very first focusable element
60	function SkipToMain() {
61	return (
62	<a
63	href="#main-content"
64	className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-white focus:text-blue-600 focus:rounded-lg focus:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
65	>
66	Skip to main content
67	</a>
68	)
69	}
70	```
71
72	### Keyboard Navigation
73	```tsx
74	// All interactive elements must be keyboard-operable
75	function DropdownMenu({ items }: { items: MenuItem[] }) {
76	const [open, setOpen] = React.useState(false)
77	const [activeIndex, setActiveIndex] = React.useState(-1)
78
79	const handleKeyDown = (e: React.KeyboardEvent) => {
80	switch (e.key) {
81	case 'ArrowDown':
82	e.preventDefault()
83	setActiveIndex(i => Math.min(i + 1, items.length - 1))
84	break
85	case 'ArrowUp':
86	e.preventDefault()
87	setActiveIndex(i => Math.max(i - 1, 0))
88	break
89	case 'Escape':
90	setOpen(false)
91	break
92	case 'Enter':
93	case ' ':
94	if (activeIndex >= 0) items[activeIndex].action()
95	break
96	}
97	}
98
99	return (
100	<div role="navigation" aria-label="Actions menu">
101	<button
102	aria-haspopup="true"
103	aria-expanded={open}
104	onClick={() => setOpen(o => !o)}
105	>
106	Actions
107	</button>
108	{open && (
109	<ul
110	role="menu"
111	onKeyDown={handleKeyDown}
112	className="..."
113	>
114	{items.map((item, i) => (
115	<li key={item.id} role="menuitem" tabIndex={i === activeIndex ? 0 : -1}>
116	<button onClick={item.action}>{item.label}</button>
117	</li>
118	))}
119	</ul>
120	)}
121	</div>
122	)
123	}
124	```
125
126	### ARIA Labels
127	```tsx
128	// Always label icon-only buttons
129	<button aria-label="Close dialog" onClick={onClose}>
130	<XIcon aria-hidden="true" className="h-5 w-5" />
131	</button>
132
133	// Images
134	<img src={product.image} alt={`${product.name} — front view`} />
135	// Decorative images get empty alt
136	<img src="/divider.svg" alt="" role="presentation" />
137
138	// Live regions for dynamic content
139	<div aria-live="polite" aria-atomic="true" className="sr-only">
140	{statusMessage}
141	</div>
142	```
143
144	## Responsive Layout
145
146	### Mobile-First Approach
147	```css
148	/* Write base styles for mobile, then progressively enhance */
149	.card {
150	padding: 1rem; /* mobile */
151	}
152
153	@media (min-width: 640px) { /* sm */
154	.card { padding: 1.5rem; }
155	}
156
157	@media (min-width: 1024px) { /* lg */
158	.card { padding: 2rem; }
159	}
160	```
161
162	```tsx
163	// Tailwind mobile-first
164	<div className="px-4 sm:px-6 lg:px-8">
165	<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
166	{items.map(item => <Item key={item.id} {...item} />)}
167	</div>
168	</div>
169	```
170
171	### Fluid Typography
172	```css
173	/* clamp(min, preferred, max) — scales smoothly between viewport sizes */
174	:root {
175	--text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
176	--text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.375rem);
177	--text-xl: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
178	--text-2xl: clamp(1.5rem, 1rem + 2.5vw, 2.25rem);
179	--text-4xl: clamp(2rem, 1rem + 5vw, 4rem);
180	}
181	```
182
183	### Container Queries
184	```css
185	/* Style based on parent width, not viewport width */
186	.card-grid {
187	container-type: inline-size;
188	container-name: card-grid;
189	}
190
191	@container card-grid (min-width: 480px) {
192	.product-

People who liked this also viewed

6 picks

Type