web-static

Name: web-static
Author: AdamBien

40stars10forks

How to install web-static?

adambien/airails/web-static

$npx -y skills add AdamBien/airails --skill web-static

Installs into the current project.

Summary

Build modern static websites using semantic HTML and CSS without external dependencies or build systems. Also owns the verification loop for such sites — drives the rendered pages through Chrome DevTools MCP (console, accessibility snapshot, viewport resize, dark/reduced-motion e

Files · 1

View on GitHub

SKILL.md

1	Build or maintain a static website using $ARGUMENTS. Apply all rules below strictly.
2
3	## Composition
4
5	Compose with `/web-conventions` — it provides the baseline rules for semantic HTML, accessibility,
6	modern CSS, design tokens, and the Baseline browser-support policy. Rules in this skill override it.
7	For applications that need client-side state, routing, or JavaScript, use `/web-components` instead.
8
9	## Hard Constraints
10
11	- No JavaScript — no `<script>` tags, no inline event handlers, no `.js` files
12	- No external dependencies — no frameworks, libraries, CDNs, or package managers
13	- No build systems — no transpilation, bundling, preprocessing, Sass, Less, or Tailwind
14	- No inline styles — all CSS in separate `.css` files
15	- Baseline compliance — CSS features per the `/web-conventions` Baseline policy, enforced by the verification loop below
16
17	## HTML Rules
18
19	HTML semantics, heading hierarchy, labels, and skip links follow `/web-conventions`.
20
21	## CSS Rules
22
23	Design tokens, logical properties, modern CSS features, accessibility, and the Baseline policy
24	follow `/web-conventions`. This stack adds:
25
26	- Mobile-first responsive design with `min-width` breakpoints
27	- Use `content-visibility: auto` for off-screen sections
28
29	## CSS Reset Baseline
30
31	Every project starts with:
32
33	```css
34	* { box-sizing: border-box; margin: 0; padding: 0; }
35	body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; }
36	```
37
38	## Interactive Patterns (CSS-Only)
39
40	When interactivity is needed, use these approaches — never JavaScript:
41
42	- Accordion: `<details>`/`<summary>`
43	- Modal: `:target` pseudo-class with anchor links
44	- Tabs: hidden radio buttons with `:checked` + sibling selectors
45	- Dropdown menu: `:hover` + `:focus-within`
46	- Mobile hamburger: hidden checkbox with `:checked` + sibling selectors
47	- Form styling: `appearance: none` to customize native controls
48	- Form validation: standard input types plus constraint attributes (`required`, `pattern`, `min`/`max`) — the browser validates and blocks submission without any JavaScript; style feedback with `:user-invalid`/`:user-valid` (see `web-conventions` Form Rules)
49
50	## Page Transitions (Cross-Document View Transitions)
51
52	For multipage sites, animate navigation between pages with cross-document view transitions —
53	pure CSS, no JavaScript:
54
55	```css
56	@media (prefers-reduced-motion: no-preference) {
57	@view-transition { navigation: auto; }
58	}
59	```
60
61	- Opt in on every page (both the outgoing and incoming page must carry the rule)
62	- Always inside `prefers-reduced-motion: no-preference` — reduced motion means instant navigation
63	- Give recurring elements (site header, logo) a `view-transition-name` for continuity across pages;
64	each name must be unique per page
65	- Keep transitions subtle and fast; never let them delay content
66
67	Baseline exception: cross-document view transitions are Limited availability, which the
68	`/web-conventions` Baseline policy normally forbids. They are exempt because the failure mode is
69	total graceful degradation — a browser that doesn't understand `@view-transition` ignores the
70	at-rule and navigates instantly, losing nothing. No `@supports` wrapper is needed. The exception
71	covers exactly the `@view-transition` at-rule, `view-transition-name`, and the
72	`::view-transition-*` pseudo-elements — nothing else, and never anything JavaScript-driven
73	(`document.startViewTransition` stays forbidden by the no-JavaScript constraint).
74
75	## Performance
76
77	- `loading="lazy"` on below-fold images
78	- `<picture>` with WebP sources for responsive images
79	- Preload critical CSS and fonts
80	- `contain: layout style paint` on repeated components
81
82	## Project Structure
83
84	```
85	project/
86	├── index.html
87	├── css/
88	│ └── style.css
89	├── images/
90	├── fonts/
91	└── icons/
92	```
93
94	For small sites, a flat structure (HTML + single `style.css` + `images/`) is acceptable.
95
96	## Verification Loop (Chrome DevTools MCP)
97
98	The site ships with zero tooling, so verification happens from the outside: drive a real browser
99	through the Chrome DevTools MCP tools (`chrome-devtools`) and assert aga

People who liked this also viewed

6 picks

Type

web-static

40stars10forks

View on GitHub

How to install web-static?

adambien/airails/web-static

$npx -y skills add AdamBien/airails --skill web-static

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	Build or maintain a static website using $ARGUMENTS. Apply all rules below strictly.
2
3	## Composition
4
5	Compose with `/web-conventions` — it provides the baseline rules for semantic HTML, accessibility,
6	modern CSS, design tokens, and the Baseline browser-support policy. Rules in this skill override it.
7	For applications that need client-side state, routing, or JavaScript, use `/web-components` instead.
8
9	## Hard Constraints
10
11	- No JavaScript — no `<script>` tags, no inline event handlers, no `.js` files
12	- No external dependencies — no frameworks, libraries, CDNs, or package managers
13	- No build systems — no transpilation, bundling, preprocessing, Sass, Less, or Tailwind
14	- No inline styles — all CSS in separate `.css` files
15	- Baseline compliance — CSS features per the `/web-conventions` Baseline policy, enforced by the verification loop below
16
17	## HTML Rules
18
19	HTML semantics, heading hierarchy, labels, and skip links follow `/web-conventions`.
20
21	## CSS Rules
22
23	Design tokens, logical properties, modern CSS features, accessibility, and the Baseline policy
24	follow `/web-conventions`. This stack adds:
25
26	- Mobile-first responsive design with `min-width` breakpoints
27	- Use `content-visibility: auto` for off-screen sections
28
29	## CSS Reset Baseline
30
31	Every project starts with:
32
33	```css
34	* { box-sizing: border-box; margin: 0; padding: 0; }
35	body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; }
36	```
37
38	## Interactive Patterns (CSS-Only)
39
40	When interactivity is needed, use these approaches — never JavaScript:
41
42	- Accordion: `<details>`/`<summary>`
43	- Modal: `:target` pseudo-class with anchor links
44	- Tabs: hidden radio buttons with `:checked` + sibling selectors
45	- Dropdown menu: `:hover` + `:focus-within`
46	- Mobile hamburger: hidden checkbox with `:checked` + sibling selectors
47	- Form styling: `appearance: none` to customize native controls
48	- Form validation: standard input types plus constraint attributes (`required`, `pattern`, `min`/`max`) — the browser validates and blocks submission without any JavaScript; style feedback with `:user-invalid`/`:user-valid` (see `web-conventions` Form Rules)
49
50	## Page Transitions (Cross-Document View Transitions)
51
52	For multipage sites, animate navigation between pages with cross-document view transitions —
53	pure CSS, no JavaScript:
54
55	```css
56	@media (prefers-reduced-motion: no-preference) {
57	@view-transition { navigation: auto; }
58	}
59	```
60
61	- Opt in on every page (both the outgoing and incoming page must carry the rule)
62	- Always inside `prefers-reduced-motion: no-preference` — reduced motion means instant navigation
63	- Give recurring elements (site header, logo) a `view-transition-name` for continuity across pages;
64	each name must be unique per page
65	- Keep transitions subtle and fast; never let them delay content
66
67	Baseline exception: cross-document view transitions are Limited availability, which the
68	`/web-conventions` Baseline policy normally forbids. They are exempt because the failure mode is
69	total graceful degradation — a browser that doesn't understand `@view-transition` ignores the
70	at-rule and navigates instantly, losing nothing. No `@supports` wrapper is needed. The exception
71	covers exactly the `@view-transition` at-rule, `view-transition-name`, and the
72	`::view-transition-*` pseudo-elements — nothing else, and never anything JavaScript-driven
73	(`document.startViewTransition` stays forbidden by the no-JavaScript constraint).
74
75	## Performance
76
77	- `loading="lazy"` on below-fold images
78	- `<picture>` with WebP sources for responsive images
79	- Preload critical CSS and fonts
80	- `contain: layout style paint` on repeated components
81
82	## Project Structure
83
84	```
85	project/
86	├── index.html
87	├── css/
88	│ └── style.css
89	├── images/
90	├── fonts/
91	└── icons/
92	```
93
94	For small sites, a flat structure (HTML + single `style.css` + `images/`) is acceptable.
95
96	## Verification Loop (Chrome DevTools MCP)
97
98	The site ships with zero tooling, so verification happens from the outside: drive a real browser
99	through the Chrome DevTools MCP tools (`chrome-devtools`) and assert aga

People who liked this also viewed

6 picks

Type