--- title: "Modern Web Guidance: review, setup & limitations · Undominated.ai" canonical: https://undominated.ai/skills/jetbrains-modern-web-guidance/ description: "Routes HTML, CSS and client-side JavaScript work through a searchable corpus of Chrome-authored best-practice guides — container queries, dialogs and popovers, view transitions, scroll-driven animation, forms and autofill, image priority — with Baseline browser-support policy rules for fallbacks." --- # Modern Web Guidance: review, setup & limitations · Undominated.ai > Routes HTML, CSS and client-side JavaScript work through a searchable corpus of Chrome-authored best-practice guides — container queries, dialogs and popovers, view transitions, scroll-driven animation, forms and autofill, image priority — with Baseline browser-support policy rules for fallbacks. [← Explore all skills](/skills/) WEB DEVELOPMENT / JetBrains # Modern Web Guidance Routes HTML, CSS and client-side JavaScript work through a searchable corpus of Chrome-authored best-practice guides — container queries, dialogs and popovers, view transitions, scroll-driven animation, forms and autofill, image priority — with Baseline browser-support policy rules for fallbacks. [See setup guidance ↓](#setup)[Original source ↗](https://github.com/JetBrains/skills/tree/e0f258b5cfed145015cb3e48da9a97947f7c4ed7/modern-web-guidance) SOURCE REVIEW Reviewed 2026-10-07 Evidence 6 linked sources Publisher JetBrains Licence [Apache-2.0 ↗](https://github.com/JetBrains/skills/blob/e0f258b5cfed145015cb3e48da9a97947f7c4ed7/modern-web-guidance/LICENSE) Revision e0f258b5cfed [Read what was—and wasn’t—checked ↓](#review) “Search tool for modern web development best practices. MANDATORY: Execute FIRST for all HTML/CSS and clientside JS tasks.” [JetBrains · upstream description ↗](https://github.com/JetBrains/skills/blob/e0f258b5cfed145015cb3e48da9a97947f7c4ed7/modern-web-guidance/SKILL.md) Our analysis follows below. 01 / THE REASONING ## Why this made the selection. - Turns modern-CSS and forms guidance into a queryable corpus instead of a fixed checklist: the agent searches an action-oriented phrase, gets scored matches with token counts, then retrieves only the guide it needs. - Encodes a browser-support policy discipline — Baseline widely-available features need no fallback, everything else must follow the guide's fallback recommendation unless the project declares its own policy — which is the decision agents most often get wrong. - The mirror bundles the guide corpus in twelve category directories (css, css-layout, forms, html, performance, security, accessibility, passkeys, privacy, user-experience, webmcp, built-in-ai), so the material travels with the SKILL.md and not only through the npm search tool. ### A good fit for - Deciding whether container queries, :has(), anchor positioning, dialogs or scroll-driven animations can be used without a fallback - Checking whether a standardized pattern already exists before hand-rolling a modal, popover, form or custom scrollbar - Writing down a browser-support policy for a project instead of making ad-hoc per-feature guesses ### Weigh up before choosing - The search workflow shells out to the modern-web-guidance npm package at runtime, so it needs network access and Node; the --skill-version flag only warns when the SKILL.md is stale, it does not pin the package version. - Chrome-authored: guidance is weighted toward Chromium behaviour and the Baseline data reflects availability dating, not your users' actual browser mix. - The mirror carries the corpus as of the pinned revision; upstream GoogleChrome/modern-web-guidance continues to move and the mirror does not track it automatically. 02 / THE REVIEW RECORD ## What we actually inspected. Source review has boundaries. A clear record is more useful than a “safe” badge. ### Material inspected - modern-web-guidance/SKILL.md (JetBrains mirror, complete, 119 lines) - modern-web-guidance/guides directory listing (12 category directories) - modern-web-guidance/LICENSE (skill-local, Apache-2.0) - upstream GoogleChrome/modern-web-guidance skill definition and LICENSE - JetBrains/skills README mirror policy ### Our findings - The search-retrieve workflow is concrete: an action-oriented query returns scored matches with id, category, featuresUsed and tokenCount, retrieve accepts multiple ids, and a list fallback exists for vague queries. - The browser-support section converts Baseline status into an explicit fallback policy with worked policy examples (Safari 17.4+, no-polyfill, feature-detected newly-available) and pushes the project to write its policy down. - The mirror's skill-local LICENSE is Apache-2.0, matching the upstream GoogleChrome repository, and the front matter credits that upstream with a pinned skill version 0.0.166. ### Not established by this review - No npx search or retrieve command was executed; the workflow was read, not run. - No guide was applied to a live layout or forms task. The review applies to the material and revision named here. A newer upstream release can change its behavior. 03 / PUT IT TO WORK ## Add a skill to your workflow. [Upstream setup instructions ↗](https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/README.md) DOCUMENTED COMMAND npx skills add JetBrains/skills/modern-web-guidance --skill modern-web-guidance Copy command ↗ Run in your terminal to choose your AI tools, project or global scope, and installation method. This short command follows the current upstream version; the review covers the revision shown above. Optional: install the reviewed revision Keeps the original source and installer version where recorded, while leaving your AI tools and installation scope for you to choose. npx skills add https://github.com/JetBrains/skills/tree/e0f258b5cfed145015cb3e48da9a97947f7c4ed7/modern-web-guidance --skill modern-web-guidance Copy reviewed-revision command ↗ - Install the complete skill directory; the bundled guides must travel with the SKILL.md or offline use degrades to the npx tool only. - Point the agent at the front-end feature being built and let it search first; keep the runtime Node/npm and network prerequisite in mind. ### Before you start - Node.js/npm for the installer and for the search tool - An agent that supports the Agent Skills format - Network access when using the npx search workflow ### Compatibility Agent Skills-compatible coding agents · Any HTML, CSS or client-side JavaScript codebase · Node.js/npm when using the npx search workflow ### Reads front-end code; runs an npm search tool when invoked - Read HTML, CSS and client-side JavaScript - Write front-end code and browser-support policy notes - Execute the modern-web-guidance npm package, which requires network access ### Cost model Apache-2.0-licensed instruction package and bundled guides; the npx tool fetches an npm package at run time. 04 / FOLLOW THE EVIDENCE ## The source trail. Our notes are separate from the original resource. Check upstream before adopting a new version. - [Skill definition at reviewed revision ↗](https://github.com/JetBrains/skills/blob/e0f258b5cfed145015cb3e48da9a97947f7c4ed7/modern-web-guidance/SKILL.md) Checked 2026-10-07 https://github.com/JetBrains/skills/blob/e0f258b5cfed145015cb3e48da9a97947f7c4ed7/modern-web-guidance/SKILL.md Supports: summary, upstreamDescription, whySelected, bestFor, limitations, review, access - [Bundled guide corpus directory listing (12 categories) ↗](https://github.com/JetBrains/skills/tree/e0f258b5cfed145015cb3e48da9a97947f7c4ed7/modern-web-guidance/guides) Checked 2026-10-07 https://github.com/JetBrains/skills/tree/e0f258b5cfed145015cb3e48da9a97947f7c4ed7/modern-web-guidance/guides Supports: review, whySelected - [Skill-local licence (Apache-2.0) ↗](https://github.com/JetBrains/skills/blob/e0f258b5cfed145015cb3e48da9a97947f7c4ed7/modern-web-guidance/LICENSE) Checked 2026-10-07 https://github.com/JetBrains/skills/blob/e0f258b5cfed145015cb3e48da9a97947f7c4ed7/modern-web-guidance/LICENSE Supports: license - [Upstream skill definition (Google Chrome origin of the mirrored content) ↗](https://github.com/GoogleChrome/modern-web-guidance/blob/a97286845f2baba38988f9e5fe2b2a1351021e50/skills/modern-web-guidance/SKILL.md) Checked 2026-10-07 https://github.com/GoogleChrome/modern-web-guidance/blob/a97286845f2baba38988f9e5fe2b2a1351021e50/skills/modern-web-guidance/SKILL.md Supports: review, limitations - [Mirror policy: JetBrains-filtered, JetBrains-verified snapshot with source links and CI skill scanning ↗](https://github.com/JetBrains/skills/blob/e0f258b5cfed145015cb3e48da9a97947f7c4ed7/README.md) Checked 2026-10-07 https://github.com/JetBrains/skills/blob/e0f258b5cfed145015cb3e48da9a97947f7c4ed7/README.md Supports: review, install - [Skills installer source formats and selective installation ↗](https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/README.md) Checked 2026-10-07 https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/README.md Supports: install KEEP COMPARING ## Other approaches to consider. Related by category or shared topics. These are alternatives to inspect, not a measured quality order. [### Matt Pocock Codebase Design ↗ Evaluates module boundaries through caller complexity, dependency seams and alternative interface designs.](/skills/mattpocock-codebase-design/)[### Vercel React Best Practices ↗ Organizes React and Next.js performance reviews around request waterfalls, bundles, server work and rendering costs.](/skills/vercel-labs-react-best-practices/)[### Vercel React Composition Patterns ↗ Replaces growing boolean-mode APIs with explicit component composition and provider-owned state contracts.](/skills/vercel-labs-composition-patterns/) [AI Tools ↗](/tools/)[Skills ↗](/skills/)[Agents ↗](/agents/)[MCP Servers ↗](/mcp-servers/)[Workflows ↗](/workflows/) ## Continue your investigation - [Choose a toolkit](/tools/) - [Inspect execution hosts](/agents/) - [Check tool access](/mcp-servers/) - [Check project dependencies](/check-repo/)