← All skills
modern-web-guidance
77 / 100 · Review before installing
Check before installing. Some of what it can do is expected: a coding skill usually runs build and test commands.
By GoogleChrome/modern-web-guidance (GitHub) · coding · 2,668 stars · scanned at commit 4dd9683
Search tool for modern web development best practices. MANDATORY: Execute FIRST for all HTML/CSS and clientside JS tasks. Do NOT skip — web APIs evolve rapidly and training weights contain obsolete patterns.
Trigger immediately for: modals/dialogs/popovers, tables, dark mode, anchor positioning, container queries, view transitions, scroll-driven animations, parallax/reveals, forms, validation, autofill, accessibility, custom selects, scrollbars, CWV (LCP, INP, CLS), content-visibility, fetch pr…
Works with any agent that supports SKILL.md skills.
What this skill can do
Downloads and installs other software
The author does not mention this.
Found in 169 places.
Show 17 more
- skills/modern-web-guidance/SKILL.md, line 74
- **Runner & Permissions**: Prefer `pnpx` over `npx` if `pnpm` is available (`pnpx` does not use `-y`); on Windows, use `npx.cmd`. When requesting tool permissi - skills/modern-web-guidance/SKILL.md, line 76
- **Offline**: If the command hangs due to being offline, retry with `npx --offline …`. - skills/modern-web-guidance/guides/accessibility/accessibility.md, line 453
- **Alt text for CSS generated content:** Use the alternative text argument of `content` (e.g. `content: url(icon.svg) / "Save";`) and keep meaningful text in t - skills/modern-web-guidance/guides/accessibility/accessibility.md, line 530
See `color` (via `npx -y modern-web-guidance@latest retrieve "color"`) for accessible color (contrast requirements, light and dark color schemes, Forced Colors - skills/modern-web-guidance/guides/accessibility/accessibility.md, line 534
See `typography` (via `npx -y modern-web-guidance@latest retrieve "typography"`) for readable typography. - skills/modern-web-guidance/guides/accessibility/accessibility.md, line 538
See `motion` (via `npx -y modern-web-guidance@latest retrieve "motion"`). - skills/modern-web-guidance/guides/accessibility/respect-os-text-scale.md, line 51
Fluid typography MAY use viewport-relative units such as `vw`, provided that font sizes also include a font-relative component such as `rem` or `em`. For more f - skills/modern-web-guidance/guides/built-in-ai/language-model.md, line 334
- Visual transitions for updates: When translating or rewriting text, use animations, for example, word-morphing. For respecting reduced-motion preferences, see - skills/modern-web-guidance/guides/built-in-ai/prompt-api.md, line 334
- Visual transitions for updates: When translating or rewriting text, use animations, for example, word-morphing. For respecting reduced-motion preferences, see - skills/modern-web-guidance/guides/css/css-layout.md, line 33
- Use logical properties (`inline-size`, `block-size`, `margin-inline`, `padding-block`, `inset-inline-start`) for layout dimensions and spacing — see `css` (vi - skills/modern-web-guidance/guides/css/css-layout.md, line 48
> For `calc-size()` and constraint-aware intrinsic sizing, see `calculate-with-intrinsic-sizes` (via `npx -y modern-web-guidance@latest retrieve "calculate-with - skills/modern-web-guidance/guides/css/css-layout.md, line 208
> For component-driven responsive styling patterns, see `size-aware-styling` (via `npx -y modern-web-guidance@latest retrieve "size-aware-styling"`) and `fluid- - skills/modern-web-guidance/guides/css/css-layout.md, line 235
> For full implementation detail, polyfill strategies, and `popover` value reference, see `declarative-dialog-popover-control` (via `npx -y modern-web-guidance@ - skills/modern-web-guidance/guides/css/css-layout.md, line 253
- For text that must stay on one line (labels, table cells, file names) see `single-line-overflow` (via `npx -y modern-web-guidance@latest retrieve "single-line - skills/modern-web-guidance/guides/css/css-layout.md, line 277
> For `overflow: clip` and `overflow-clip-margin` in depth, see `overflow-clipping-control` (via `npx -y modern-web-guidance@latest retrieve "overflow-clipping- - skills/modern-web-guidance/guides/css/css-layout.md, line 287
> For the responsive design entry point (dynamic viewport units, reserving space for media, fluid typography), see `responsive-design` (via `npx -y modern-web-g - skills/modern-web-guidance/guides/css/css.md, line 58
- **DO** use `:has()` to style parents based on child state instead of managing classes in JS (e.g. `label:has(:checked)` instead of a manual `label.has-checked
and 149 more places
Runs commands on your computer
The author does not mention this. Expected for a coding skill.
Found in 3 places.
Connects to the internet
This is disclosed by the author in the skill's SKILL.md or README.
Found in 34 places.
Show 17 more
- skills/modern-web-guidance/guides/performance/deprioritize-background-fetches.md, line 8
2. **Apply fetch priority**: Add the `priority: 'low'` option to the `fetch()` initialization object. - skills/modern-web-guidance/guides/performance/deprioritize-background-fetches.md, line 14
const criticalData = await fetch('/api/data'); - skills/modern-web-guidance/guides/performance/deprioritize-background-fetches.md, line 17
fetch('/api/analytics', { - skills/modern-web-guidance/guides/performance/flicker-free-client-side-ab-testing.md, line 73
const config = await fetch('/api/experiment?id=homepage-cta') - skills/modern-web-guidance/guides/performance/full-session-analytics.md, line 76
The recommended fallback strategy is to use the polyfill below, which internally handles unsupporting browsers using `fetch()` with `keepalive` or `navigator.se - skills/modern-web-guidance/guides/performance/full-session-analytics.md, line 99
fetch(url, Object.assign({}, init, {keepalive: true})); - skills/modern-web-guidance/guides/performance/interaction-paint-timing.md, line 6
- **`PerformanceEventTiming` and `event` / Interaction to Next Paint (INP)** measures input responsiveness up to the *very next frame* (such as a button active - skills/modern-web-guidance/guides/performance/out-of-order-html-streaming.md, line 125
const response = await fetch('/api/partial-update'); - skills/modern-web-guidance/guides/security/local-network-access.md, line 56
### 2. Declare `targetAddressSpace` in `fetch()` and `Request` - skills/modern-web-guidance/guides/security/local-network-access.md, line 58
When an `https://` page requests an `http://` endpoint on the local network or loopback interface, specify `targetAddressSpace: 'local'` or `targetAddressSpace: - skills/modern-web-guidance/guides/security/local-network-access.md, line 77
const response = await fetch(request); - skills/modern-web-guidance/guides/security/local-network-access.md, line 96
const response = await fetch(request); - skills/modern-web-guidance/guides/security/local-network-access.md, line 119
const socket = new WebSocket(wsUrl, ['v1.telemetry']); - skills/modern-web-guidance/guides/security/local-network-access.md, line 172
3. **Graceful Rejection Handling**: Always wrap `fetch()`, `WebSocket` error events, and `transport.ready` in error handlers that catch `TypeError` / connection - skills/modern-web-guidance/guides/security/passkey-authentication.md, line 80
5. **Call Signal API**: Wrap server verification `fetch()` call in a try/catch block: - skills/modern-web-guidance/guides/security/passkey-reauthentication.md, line 62
const optionsResponse = await fetch("/api/reauth/options", { - skills/modern-web-guidance/guides/security/passkey-reauthentication.md, line 77
const verifyResponse = await fetch("/api/reauth/verify", {
and 14 more places
Safer alternatives
Low-risk skills in the same category (coding) that look related. Check that one does what you need.
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'modern-web-guidance' ] || [ -L ~/.agents/skills/'modern-web-guidance' ]; then echo 'A skill folder named modern-web-guidance already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/GoogleChrome/modern-web-guidance' "$d" && git -C "$d" checkout --quiet '4dd968349e54ca45a05dd5c818fb035c9054b022' -- 'skills/modern-web-guidance' && mkdir -p ~/.agents/skills && cp -R "$d"/'skills/modern-web-guidance' ~/.agents/skills/'modern-web-guidance' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'modern-web-guidance' ~/.claude/skills/'modern-web-guidance' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for GoogleChrome/modern-web-guidance shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/GoogleChrome/modern-web-guidance/)
Score history
| Date | Version | Score |
|---|
| 2026-11-10 | 4dd9683 | 77 |
| 2026-11-08 | 3412685 | 77 |
| 2026-11-06 | 3412685 | 77 |