Install the "modern-web-guidance" agent skill from https://github.com/JetBrains/skills/tree/main/modern-web-guidance into .claude/skills/modern-web-guidance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "modern-web-guidance", then confirm the skill loads.
Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
skills CLI
$ npx skills add JetBrains/skills --skill modern-web-guidance -a codex
Project install goes to .agents/skills/; add -g for ~/.codex/skills/.
Install the "modern-web-guidance" agent skill from https://github.com/JetBrains/skills/tree/main/modern-web-guidance into .agents/skills/modern-web-guidance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "modern-web-guidance", then confirm the skill loads.
Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
skills CLI
$ npx skills add JetBrains/skills --skill modern-web-guidance -a cursor
Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.
Install the "modern-web-guidance" agent skill from https://github.com/JetBrains/skills/tree/main/modern-web-guidance into .cursor/skills/modern-web-guidance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "modern-web-guidance", then confirm the skill loads.
Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
skills CLI
$ npx skills add JetBrains/skills --skill modern-web-guidance -a gemini-cli
Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.
Install the "modern-web-guidance" agent skill from https://github.com/JetBrains/skills/tree/main/modern-web-guidance into .gemini/skills/modern-web-guidance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "modern-web-guidance", then confirm the skill loads.
Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
skills CLI
$ npx skills add JetBrains/skills --skill modern-web-guidance -a github-copilot
Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.
Install the "modern-web-guidance" agent skill from https://github.com/JetBrains/skills/tree/main/modern-web-guidance into .github/skills/modern-web-guidance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "modern-web-guidance", then confirm the skill loads.
GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
skills CLI
$ npx skills add JetBrains/skills --skill modern-web-guidance -a opencode
OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
Install the "modern-web-guidance" agent skill from https://github.com/JetBrains/skills/tree/main/modern-web-guidance into .opencode/skills/modern-web-guidance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "modern-web-guidance", then confirm the skill loads.
OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
Skill name
modern-web-guidance
GitHub stars
366
Used in
3 other repos
Token cost
~1.4k tokens
SKILL.md length
531 words
Files
146
Skills in repo
76
Repo updated
First seen
Licence
Apache-2.0
At a glance
Search tool for modern web development best practices. An agent skill from JetBrains/skills.
Works in 2 steps: Search Use Cases → Retrieve Best Practices
Immediately for: - UI/Layout: Modals
SKILL.md covers When to use, Usage Instructions, Using npx and Guidelines, plus 1 more section
Calls npx
What it does
Modern Web Guidance is an agent skill from JetBrains/skills, published by the product's own GitHub organization. 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: - UI/Layout: Modals, dialogs, popovers, Glassmorphism/backdrop-filters, anchor positioning, container queries, :has(), :user-valid. - Scroll/Motion: View Transitions, Scroll-driven animations, scroll parallax/reveals. - Performance: CWV (LCP, INP), content-visibility, Fetch Priority…
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 151 other files (for example `guides/accessibility/accessibility.md`, `guides/accessibility/accessible-error-announcement.md` and `guides/built-in-ai/language-detection.md`).
It sits in DevOps & Cloud, covering Web performance, Linting and formatting and Realtime and WebSockets. It works with Docker, ESLint, Git and Angular. The repository describes itself as: Curated agent skills collection verified by JetBrains. The licence is Apache-2.0.
When your agent uses it
Immediately for: - UI/Layout: Modals
Glassmorphism/backdrop-filters
Anchor positioning
Container queries
Example prompts
“/modern-web-guidance”
Requirements
Node.js
Docker
Workflow steps
2 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit e0f258b. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Modern Web Guidance loads about 1.4k tokens when it runs. Until then it costs about 247 tokens; SKILL.md has 531 words of instructions outside code blocks.
Always· name and description, kept in context so the agent knows when to use it
~247
When it runs· the whole SKILL.md, loaded when a task matches
~1.4k
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
Download SKILL.mdSave it as .claude/skills/modern-web-guidance/SKILL.md (or your agent's skills folder). This skill also uses 145 other files; get the full folder from GitHub.
name
modern-web-guidance
description
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:
- UI/Layout: Modals, dialogs, popovers, Glassmorphism/backdrop-filters, anchor positioning, container queries, `:has()`, `:user-valid`.
- Scroll/Motion: View Transitions, Scroll-driven animations, scroll parallax/reveals.
- Performance: CWV (LCP, INP), content-visibility, Fetch Priority, image optimization.
- System/APIs: Local filesystem access, WebUSB, WebSockets sync, WebAssembly widgets.
- Frameworks: Adapting layout/styles in React, Vue, Angular.
- General Frontend: Forms, autofill, advanced inputs, custom scrollbars, modern component states, etc.
DO NOT trigger for:
- Backend: Database SQL, ORMs, Express API routes.
- Pipelines: CI/CD deployment, Docker, Actions.
- Generic: Local scripts (Python/Go tools), ESLint, Git.
[
{
"id": "optimize-image-priority",
"description": "Optimize the loading priority of Largest Contentful Paint (LCP) candidate images.",
"category": "performance",
"featuresUsed": [ "Fetch priority" ],
"tokenCount": 985,
"similarity": 0.7289
},
{
"id": "defer-rendering-heavy-content",
"description": "Reduce rendering times in content-heavy web pages by deferring rendering for offscreen content.",
"category": "performance",
"featuresUsed": [ "content-visibility", "hidden=\"until-found\"" ],
"tokenCount": 1250,
"similarity": 0.6961
}
]
Note: If search results are vague, return no matches, or show low similarity scores, run the list command to browse all guides:
sh
npx -y modern-web-guidance@latest list
Step 2. Retrieve Best Practices
Once you have a relevant id from the search results, call this script using the retrieve command to get the full guide. You can pass multiple IDs separated by commas.
sh
npx -y modern-web-guidance@latest retrieve "<id>"
Example Output:
The markdown content of the guide describing implementation steps...
Using npx
IMPORTANT: on Windows, using npx may fail. Use npx.cmd ... instead.
Network access is required for fetching npm packages needed by the task.
If the npx -y modern-web-guidance… command hangs, you may be offline. Try running again in offline
mode: npx --offline ….
The --skill-version flag is used to determine if this SKILL.md is out of date. If it is, a warning
message is logged to stderr.
Guidelines
Always search first to find the most relevant guides.
These guides are usually framework-agnostic; adapt them correctly to your setup.
Do not hallucinate guides or ignore them; they represent the preferred local standard for the user's project.
Show full SKILL.md (266 more words)Show less
Interpreting Browser Support & Fallbacks
Default Behavior: All guides assume Baseline Widely available features are safe to use without fallbacks. For features that are not Baseline widely available, you MUST follow the fallback recommendations in the guide, unless the user has specified a custom browser support policy.
Custom Policies: If the user has already defined explicit browser support requirements, use the browser compatibility data in the guide to determine if a fallback can be safely ignored.
For Baseline YYYY targets, a feature satisfies this target if its "Baseline since" date is <= YYYY.
Policy Examples:
"Do not implement feature fallbacks." (for exploratory prototypes of the cutting-edge web)
"Never recommend or implement polyfills; if a Baseline Newly Available feature is required for core functionality, provide a lightweight custom fallback or redesign the approach." (to minimize bundle size and avoid technical debt)
"Assume a modern execution environment where Baseline Newly Available features can be used natively, provided they are strictly feature-detected and degrade gracefully." (for progressive enhancement strategies)
Reactive Policy Discovery: Watch for environmental cues to suggest documenting a policy in CLAUDE.md or AGENTS.md. Suggest this if the developer:
Mentions building for a restricted runtime (e.g., Electron or Tauri).
Explicitly excludes specific targets (e.g., "we don't support Desktop Chrome").
Expresses hesitation about polyfill complexity, bundle size, or performance cost.
Questions if a feature is safe to use without fallbacks.
No defined policy format. This is an example: **Browser Support:** Allow Newly Available features, but only adopt custom fallback code that adds <= 20 lines and does not require external dependencies.
We found 3 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 3 other GitHub owners. This page covers the copy in JetBrains/skills, which our catalogue first saw on October 7, 2026.
Modern Web Guidance next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
Bootstrap, develop, and design modern WinUI 3 desktop applications with C and the Windows App SDK using official Microsoft guidance, WinUI Gallery patterns, Windows App SDK samples, and…
A skill your agent uses when the task requires automating a real browser from the terminal (navigation, form filling, snapshots, screenshots, data extraction, UI-flow debugging) via playwright-cli…
A skill your agent uses when the user asks to generate or edit images via the OpenAI Image API (for example: generate image, edit/inpaint/mask, background removal or replacement, transparent…
A skill your agent uses when the user asks for text-to-speech narration or voiceover, accessibility reads, audio prompts, or batch speech generation via the OpenAI Audio API; run the bundled CLI…
A skill your agent uses when the user explicitly asks for a desktop or system screenshot (full screen, specific app or window, or a pixel region), or when tool-specific capture capabilities are…
Search tool for modern web development best practices. An agent skill from JetBrains/skills. Modern Web Guidance is an agent skill from JetBrains/skills, published by the product's own GitHub organization. Search tool for modern web development best practices.
When should I use Modern Web Guidance?
Modern Web Guidance fits situations like: immediately for: - UI/Layout: Modals; glassmorphism/backdrop-filters; anchor positioning; container queries.
How do I install Modern Web Guidance in Claude Code?
Run `npx skills add JetBrains/skills --skill modern-web-guidance -a claude-code`. Or copy the skill folder (modern-web-guidance in JetBrains/skills) into .claude/skills/modern-web-guidance in your project. Claude Code loads it when a task matches its description.
How do I install Modern Web Guidance in Codex?
Run `npx skills add JetBrains/skills --skill modern-web-guidance -a codex`. Or copy the skill folder (modern-web-guidance in JetBrains/skills) into .agents/skills/modern-web-guidance in your project. Codex loads it when a task matches its description.
Can I use Modern Web Guidance in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add JetBrains/skills --skill modern-web-guidance -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/modern-web-guidance, .gemini/skills/modern-web-guidance, .github/skills/modern-web-guidance and .opencode/skills/modern-web-guidance in your project.
What does Modern Web Guidance need to run?
Going by SKILL.md and its folder, Modern Web Guidance needs the command-line tools its instructions call (npx). Our summary lists: Node.js; Docker.
Does Modern Web Guidance access the network?
SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Modern Web Guidance safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Modern Web Guidance use?
Modern Web Guidance is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Modern Web Guidance use?
About 1.4k tokens (SKILL.md is roughly 5.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Modern Web Guidance?
Skills that share tags, products or a category with Modern Web Guidance: Winui App (LanceMcCarthy/DevOpsExamples, 172 stars), Configure Telerik Nuget (LanceMcCarthy/DevOpsExamples, 172 stars), GitHub Actions Failure Debugging (LanceMcCarthy/DevOpsExamples, 172 stars) and Configuration Generator (ArabelaTso/Skills-4-SE, 253 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Modern Web Guidance?
JetBrains (a GitHub organization, an official publisher) maintains it in JetBrains/skills, which has 366 GitHub stars. The repository holds 76 skills in this directory. The repository was last updated on June 29, 2026.
Source: JetBrains/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.
