web

Name: web
Author: ehmo

462stars26forks

How to install web?

ehmo/platform-design-skills/web

$npx -y skills add ehmo/platform-design-skills --skill web

Installs into the current project.

Summary

Web platform design and accessibility guidelines. Use when building web interfaces, auditing accessibility, implementing responsive layouts, or reviewing web UI code. Triggers on tasks involving HTML, CSS, web components, WCAG compliance, responsive design, or web performance.

Files · 1

View on GitHub

SKILL.md

1	# Web Platform Design Guidelines
2
3	Framework-agnostic rules for accessible, performant, responsive web interfaces. Based on WCAG 2.2, MDN Web Docs, and modern web platform APIs.
4
5	---
6
7	## 1. Accessibility / WCAG [CRITICAL]
8
9	Accessibility is not optional. Most rules in this section map to WCAG 2.2 success criteria at Level A or AA. A small number of best-practice rules (noted inline) target Level AAA or go beyond WCAG.
10
11	### 1.1 Use Semantic HTML Elements
12
13	Use elements for their intended purpose. Semantic structure provides free accessibility, SEO, and reader-mode support.
14
15	\| Element \| Purpose \|
16	\|---------\|---------\|
17	\| `<main>` \| Primary page content (one per page) \|
18	\| `<nav>` \| Navigation blocks \|
19	\| `<header>` \| Introductory content or navigational aids \|
20	\| `<footer>` \| Footer for nearest sectioning content \|
21	\| `<article>` \| Self-contained, independently distributable content \|
22	\| `<section>` \| Thematic grouping with a heading \|
23	\| `<aside>` \| Tangentially related content (sidebars, callouts) \|
24	\| `<figure>` / `<figcaption>` \| Illustrations, diagrams, code listings \|
25	\| `<details>` / `<summary>` \| Expandable/collapsible disclosure widget \|
26	\| `<dialog>` \| Modal or non-modal dialog boxes \|
27	\| `<time>` \| Machine-readable dates/times \|
28	\| `<mark>` \| Highlighted/referenced text \|
29	\| `<address>` \| Contact information for nearest article/body \|
30
31	```html
32	<!-- Good -->
33	<main>
34	<article>
35	<h1>Article Title</h1>
36	<p>Content...</p>
37	</article>
38	<aside>Related links</aside>
39	</main>
40
41	<!-- Bad: div soup -->
42	<div class="main">
43	<div class="article">
44	<div class="title">Article Title</div>
45	<div class="content">Content...</div>
46	</div>
47	</div>
48	```
49
50	Anti-pattern: Using `<div>` or `<span>` for interactive elements. Never write `<div onclick>` when `<button>` exists.
51
52	### 1.2 ARIA Labels on Interactive Elements
53
54	Every interactive element must have an accessible name. Prefer visible text; use `aria-label` or `aria-labelledby` only when visible text is insufficient (SC 4.1.2).
55
56	```html
57	<!-- Icon-only button: needs aria-label -->
58	<button aria-label="Close dialog">
59	<svg aria-hidden="true">...</svg>
60	</button>
61
62	<!-- Linked by labelledby -->
63	<h2 id="section-title">Notifications</h2>
64	<ul aria-labelledby="section-title">...</ul>
65
66	<!-- Redundant: visible text is enough -->
67	<button>Save Changes</button> <!-- No aria-label needed -->
68	```
69
70	### 1.3 Keyboard Navigation
71
72	All interactive elements must be reachable and operable via keyboard (SC 2.1.1).
73
74	- Use native interactive elements (`<button>`, `<a href>`, `<input>`, `<select>`) which are keyboard-accessible by default.
75	- Custom widgets need `tabindex="0"` to enter tab order and keydown handlers for activation.
76	- Never use `tabindex` values greater than 0.
77	- Trap focus inside modals; return focus on close.
78
79	```js
80	// Focus trap for modal
81	dialog.addEventListener('keydown', (e) => {
82	if (e.key === 'Tab') {
83	const focusable = dialog.querySelectorAll(
84	'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
85	);
86	const first = focusable[0];
87	const last = focusable[focusable.length - 1];
88	if (e.shiftKey && document.activeElement === first) {
89	e.preventDefault();
90	last.focus();
91	} else if (!e.shiftKey && document.activeElement === last) {
92	e.preventDefault();
93	first.focus();
94	}
95	}
96	});
97	```
98
99	### 1.4 Visible Focus Indicators
100
101	Never remove focus outlines without providing a visible replacement (SC 2.4.7, enhanced SC 2.4.11 (AA) and SC 2.4.12 (AAA) in WCAG 2.2).
102
103	```css
104	/* Good: custom focus indicator */
105	:focus-visible {
106	outline: 3px solid var(--focus-color, #4A90D9);
107	outline-offset: 2px;
108	}
109
110	/* Remove default only when :focus-visible is supported */
111	:focus:not(:focus-visible) {
112	outline: none;
113	}
114
115	/* Bad: removing all focus styles */
116	/* :focus { outline: none; } /
117	```
118
119	WCAG 2.2 requires focus indicators to have a minimum area of the perimeter of the component times 2px, with 3:1 contrast against adjacent colors.
120
121	### 1.5 Skip Navigation Links
122
123	Provide a mechanism to skip repeated blocks of content (SC 2.4.1).
124
125	```html
126	<body>
127	<a href="#main-content" class="skip-link">Skip to main content</a>
128	<nav>...</nav>
129	<main id="main-content">...</main>
130	</body>
131	```
132
133	```css
134	.skip-link {
135	position: absolute;
136	top: -100%;
137	left: 0;
138	z-index: 1000;
139	padding: 0.75rem 1.5rem;
140	background: var(--color-primary);
141	color: var(--color-on-primary);
142	}
143	.skip-link:focus {
144	top: 0;
145	}
146	```
147
148	### 1.6 Alt Text for Images
149
150	Every `<img>` must have an `alt` attribute (SC 1.1.1).
151
152	- Informative images: describe the content and function. `alt="B

People who liked this also viewed

6 picks

Type

web

462stars26forks

View on GitHub

How to install web?

ehmo/platform-design-skills/web

$npx -y skills add ehmo/platform-design-skills --skill web

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Web Platform Design Guidelines
2
3	Framework-agnostic rules for accessible, performant, responsive web interfaces. Based on WCAG 2.2, MDN Web Docs, and modern web platform APIs.
4
5	---
6
7	## 1. Accessibility / WCAG [CRITICAL]
8
9	Accessibility is not optional. Most rules in this section map to WCAG 2.2 success criteria at Level A or AA. A small number of best-practice rules (noted inline) target Level AAA or go beyond WCAG.
10
11	### 1.1 Use Semantic HTML Elements
12
13	Use elements for their intended purpose. Semantic structure provides free accessibility, SEO, and reader-mode support.
14
15	\| Element \| Purpose \|
16	\|---------\|---------\|
17	\| `<main>` \| Primary page content (one per page) \|
18	\| `<nav>` \| Navigation blocks \|
19	\| `<header>` \| Introductory content or navigational aids \|
20	\| `<footer>` \| Footer for nearest sectioning content \|
21	\| `<article>` \| Self-contained, independently distributable content \|
22	\| `<section>` \| Thematic grouping with a heading \|
23	\| `<aside>` \| Tangentially related content (sidebars, callouts) \|
24	\| `<figure>` / `<figcaption>` \| Illustrations, diagrams, code listings \|
25	\| `<details>` / `<summary>` \| Expandable/collapsible disclosure widget \|
26	\| `<dialog>` \| Modal or non-modal dialog boxes \|
27	\| `<time>` \| Machine-readable dates/times \|
28	\| `<mark>` \| Highlighted/referenced text \|
29	\| `<address>` \| Contact information for nearest article/body \|
30
31	```html
32	<!-- Good -->
33	<main>
34	<article>
35	<h1>Article Title</h1>
36	<p>Content...</p>
37	</article>
38	<aside>Related links</aside>
39	</main>
40
41	<!-- Bad: div soup -->
42	<div class="main">
43	<div class="article">
44	<div class="title">Article Title</div>
45	<div class="content">Content...</div>
46	</div>
47	</div>
48	```
49
50	Anti-pattern: Using `<div>` or `<span>` for interactive elements. Never write `<div onclick>` when `<button>` exists.
51
52	### 1.2 ARIA Labels on Interactive Elements
53
54	Every interactive element must have an accessible name. Prefer visible text; use `aria-label` or `aria-labelledby` only when visible text is insufficient (SC 4.1.2).
55
56	```html
57	<!-- Icon-only button: needs aria-label -->
58	<button aria-label="Close dialog">
59	<svg aria-hidden="true">...</svg>
60	</button>
61
62	<!-- Linked by labelledby -->
63	<h2 id="section-title">Notifications</h2>
64	<ul aria-labelledby="section-title">...</ul>
65
66	<!-- Redundant: visible text is enough -->
67	<button>Save Changes</button> <!-- No aria-label needed -->
68	```
69
70	### 1.3 Keyboard Navigation
71
72	All interactive elements must be reachable and operable via keyboard (SC 2.1.1).
73
74	- Use native interactive elements (`<button>`, `<a href>`, `<input>`, `<select>`) which are keyboard-accessible by default.
75	- Custom widgets need `tabindex="0"` to enter tab order and keydown handlers for activation.
76	- Never use `tabindex` values greater than 0.
77	- Trap focus inside modals; return focus on close.
78
79	```js
80	// Focus trap for modal
81	dialog.addEventListener('keydown', (e) => {
82	if (e.key === 'Tab') {
83	const focusable = dialog.querySelectorAll(
84	'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
85	);
86	const first = focusable[0];
87	const last = focusable[focusable.length - 1];
88	if (e.shiftKey && document.activeElement === first) {
89	e.preventDefault();
90	last.focus();
91	} else if (!e.shiftKey && document.activeElement === last) {
92	e.preventDefault();
93	first.focus();
94	}
95	}
96	});
97	```
98
99	### 1.4 Visible Focus Indicators
100
101	Never remove focus outlines without providing a visible replacement (SC 2.4.7, enhanced SC 2.4.11 (AA) and SC 2.4.12 (AAA) in WCAG 2.2).
102
103	```css
104	/* Good: custom focus indicator */
105	:focus-visible {
106	outline: 3px solid var(--focus-color, #4A90D9);
107	outline-offset: 2px;
108	}
109
110	/* Remove default only when :focus-visible is supported */
111	:focus:not(:focus-visible) {
112	outline: none;
113	}
114
115	/* Bad: removing all focus styles */
116	/* :focus { outline: none; } /
117	```
118
119	WCAG 2.2 requires focus indicators to have a minimum area of the perimeter of the component times 2px, with 3:1 contrast against adjacent colors.
120
121	### 1.5 Skip Navigation Links
122
123	Provide a mechanism to skip repeated blocks of content (SC 2.4.1).
124
125	```html
126	<body>
127	<a href="#main-content" class="skip-link">Skip to main content</a>
128	<nav>...</nav>
129	<main id="main-content">...</main>
130	</body>
131	```
132
133	```css
134	.skip-link {
135	position: absolute;
136	top: -100%;
137	left: 0;
138	z-index: 1000;
139	padding: 0.75rem 1.5rem;
140	background: var(--color-primary);
141	color: var(--color-on-primary);
142	}
143	.skip-link:focus {
144	top: 0;
145	}
146	```
147
148	### 1.6 Alt Text for Images
149
150	Every `<img>` must have an `alt` attribute (SC 1.1.1).
151
152	- Informative images: describe the content and function. `alt="B

People who liked this also viewed

6 picks

Type