Modern Web Guidance
JetBrainsOfficialCreated by Google ChromeDistributed by JetBrains
- Skill
- Tool integration
- Software development
- Apache-2.0
- Low risk
AutoGineer summary
Written by AutoGineer from the skill’s own files, not by the author
This skill provides a structured way to access up-to-date web development patterns, ensuring that implementations follow modern standards rather than relying on potentially outdated training data. It covers a wide range of frontend topics including UI components, performance optimization, browser APIs, and form handling. By integrating this tool, developers can search for specific use cases and retrieve detailed, framework-agnostic guides that include browser support and fallback recommendations.
What it does
- Searches for standardized web development patterns and best practices.
- Retrieves detailed implementation guides for specific frontend use cases.
- Provides guidance on browser compatibility and necessary fallbacks.
- Helps avoid ad-hoc solutions and unnecessary dependency bloat.
- Supports modern web features like container queries, view transitions, and performance APIs.
When to use it
- At the beginning of any frontend feature implementation.
- Before creating new components to check for existing standardized patterns.
- When evaluating the browser support requirements for modern web features.
- When needing to implement performance optimizations like LCP or content-visibility.
Advantages
- Ensures use of current, recommended web development practices.
- Reduces technical debt by discouraging ad-hoc implementations.
- Provides clear guidance on handling browser compatibility and fallbacks.
- Promotes the use of native browser capabilities over heavy external dependencies.
Usage examples
- “I need to implement a modal using modern web standards. What is the best approach?”
- The agent searches for modal-related guides and retrieves the recommended implementation pattern, including any necessary browser fallbacks.
- “How can I optimize the loading priority of my LCP images?”
- The agent searches for image optimization guides and retrieves the specific instructions for using fetch priority to improve performance.
Install
Download the skill as a ZIP:
https://autogineer.com/agent-skills/jetbrains/modern-web-guidance/downloadUnzip it into the cross-client skills folder of your project:
mkdir -p .agents/skills && unzip modern-web-guidance.zip -d .agents/skills
Documentation by Google Chrome
Modern Web Guidance
A skill to search for specific web development use cases and retrieve their corresponding best practice guides.
When to use
Must use this skill:
At the start of implementing any web feature.
Before creating a new component, to check if a standardized pattern already exists.
To avoid implementing ad-hoc solutions or loading large dependencies unnecessarily.
Usage Instructions
Step 1. Search Use Cases
Search with an action-oriented query summarizing what you want to achieve using the search command. Run modern-web-guidance directly with npx.
npx -y modern-web-guidance@latest search "<query>" --skill-version 2026_05_16-c5e7870Example Output:
[
{
"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
listcommand to browse all guides: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.
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
npxmay fail. Usenpx.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-versionflag 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.
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)
"Safari 17.4+" (for internal tools targeting macOS or Tauri-based desktop apps)
"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.
Files
- ATTRIBUTION.mdAdded by AutoGineer939 B
- LICENSE11.1 KiB
- SKILL.md5.7 KiB
- guides/accessibility/accessibility.md24.0 KiB
- guides/accessibility/accessible-error-announcement.md6.9 KiB
- guides/built-in-ai/language-detection.md3.5 KiB
- guides/built-in-ai/language-model.md7.1 KiB
- guides/built-in-ai/summarizer.md5.9 KiB
- guides/built-in-ai/translator.md5.3 KiB
- guides/css-layout/css-layout.md19.5 KiB
- guides/css/css.md27.0 KiB
- guides/css/highlight-text-ranges.md5.4 KiB
- guides/forms/animated-select-picker.md7.8 KiB
- guides/forms/autofill-address-form.md4.1 KiB
- guides/forms/autofill-highlight-inputs.md2.3 KiB
- guides/forms/autofill-payment-form.md8.5 KiB
- guides/forms/autofill-sign-in-form.md9.9 KiB
- guides/forms/autofill-sign-up-form.md11.0 KiB
- guides/forms/brand-consistent-forms.md8.3 KiB
- guides/forms/branded-select-styling.md5.5 KiB
- guides/forms/custom-select-picker-layouts.md5.0 KiB
- guides/forms/form-fields-automatically-fit-contents.md5.8 KiB
- guides/forms/forms.md13.8 KiB
- guides/forms/required-field-feedback.md6.8 KiB
- guides/forms/rich-media-picker.md6.6 KiB
- guides/forms/select-menu-interaction.md5.6 KiB
- guides/forms/validate-input-after-interaction.md8.6 KiB
- guides/html/html.md17.5 KiB
- guides/passkeys/passkey-authentication.md9.7 KiB
- guides/passkeys/passkey-conditional-create.md6.5 KiB
- guides/passkeys/passkey-management.md9.3 KiB
- guides/passkeys/passkey-reauthentication.md4.9 KiB
- guides/passkeys/passkey-registration.md9.3 KiB
- guides/passkeys/passkeys.md4.2 KiB
- guides/performance/batch-analytics-events.md6.4 KiB
- guides/performance/break-up-long-tasks.md2.1 KiB
- guides/performance/calculate-total-foreground-time.md2.9 KiB
- guides/performance/conditional-async-dependencies.md3.6 KiB
- guides/performance/defer-rendering-heavy-content.md6.3 KiB
- guides/performance/defer-work-until-scroll-ends.md3.3 KiB
- guides/performance/deprioritize-background-fetches.md1.8 KiB
- guides/performance/detect-initial-visibility-state.md4.5 KiB
- guides/performance/efficient-background-processing.md5.0 KiB
- guides/performance/faster-spa-view-transitions.md3.4 KiB
- guides/performance/full-session-analytics.md5.7 KiB
- guides/performance/identify-heavy-scripts.md4.2 KiB
- guides/performance/identify-inp-causes.md5.4 KiB
- guides/performance/improve-next-page-load-performance.md7.1 KiB
- guides/performance/interactions-in-complex-layouts.md3.4 KiB
- guides/performance/optimize-image-priority.md4.0 KiB
- guides/performance/optimize-preload-priority.md3.3 KiB
- guides/performance/optimize-script-priority.md2.6 KiB
- guides/performance/performance.md17.9 KiB
- guides/performance/resolution-optimized-pseudo-elements.md2.3 KiB
- guides/performance/schedule-tasks-by-priority.md2.2 KiB
- guides/performance/sequence-distributed-events.md3.5 KiB
- guides/privacy/privacy.md11.0 KiB
- guides/security/security.md25.2 KiB
- guides/user-experience/adapt-scrollbar-to-contrast-preferences.md3.5 KiB
- guides/user-experience/anchor-positioning-tab-underline.md2.9 KiB
- guides/user-experience/animate-element-entry-exit.md5.0 KiB
- guides/user-experience/animate-to-from-top-layer.md5.5 KiB
- guides/user-experience/animate-to-intrinsic-sizes.md5.3 KiB
- guides/user-experience/apply-webgl-shaders.md9.9 KiB
- guides/user-experience/calculate-event-differentials.md4.4 KiB
- guides/user-experience/calculate-with-intrinsic-sizes.md9.6 KiB
- guides/user-experience/capture-location-agnostic-data.md3.6 KiB
- guides/user-experience/carousel-slide-effects.md8.1 KiB
- guides/user-experience/carousel-snap-highlights.md5.7 KiB
- guides/user-experience/child-state-based-styling.md4.8 KiB
- guides/user-experience/complex-shapes.md3.5 KiB
- guides/user-experience/component-specific-light-dark-theme.md9.3 KiB
- guides/user-experience/consistent-cross-document-transitions.md11.8 KiB
- guides/user-experience/content-based-styling.md5.2 KiB
- guides/user-experience/coordinate-global-events.md3.5 KiB
- guides/user-experience/cross-document-transitions.md4.4 KiB
- guides/user-experience/customize-scrollbar-color-and-thickness.md2.4 KiB
- guides/user-experience/dark-mode.md15.2 KiB
- guides/user-experience/declarative-button-actions.md5.4 KiB
- guides/user-experience/declarative-dialog-popover-control.md9.2 KiB
- guides/user-experience/deliver-optimized-decorative-images.md2.8 KiB
- guides/user-experience/design-token-reactivity.md5.7 KiB
- guides/user-experience/directional-navigation-transitions.md4.9 KiB
- guides/user-experience/dynamic-sibling-animations.md2.6 KiB
- guides/user-experience/dynamic-sibling-styling.md3.6 KiB
- guides/user-experience/export-html-media-from-canvas.md11.2 KiB
- guides/user-experience/expose-canvas-content-to-browser-features.md14.1 KiB
- guides/user-experience/flicker-free-client-side-ab-testing.md8.5 KiB
- guides/user-experience/fluid-scaling.md3.0 KiB
- guides/user-experience/format-human-readable-durations.md4.2 KiB
- guides/user-experience/group-element-transitions.md5.0 KiB
- guides/user-experience/improve-text-layout-and-legibility.md5.1 KiB
- guides/user-experience/individual-transform-properties.md3.6 KiB
- guides/user-experience/interactive-content-in-3d-scenes.md13.3 KiB
- guides/user-experience/interactive-content-reveal.md5.1 KiB
- guides/user-experience/interest-triggered-action-previews.md4.1 KiB
- guides/user-experience/interest-triggered-tooltips.md6.8 KiB
- guides/user-experience/light-dismiss-a-dialog.md3.6 KiB
- guides/user-experience/manage-recurring-intervals.md3.3 KiB
- guides/user-experience/model-partial-time-concepts.md4.2 KiB
- guides/user-experience/move-dom-element-without-losing-state.md2.5 KiB
- guides/user-experience/navigation-drawer.md15.7 KiB
- guides/user-experience/overflow-clipping-control.md8.0 KiB
- guides/user-experience/parallax-scroll-effects.md8.8 KiB
- guides/user-experience/persistent-app-tours.md3.9 KiB
- guides/user-experience/persistent-toast-notifications.md1.8 KiB
- guides/user-experience/persistent-top-layer-ui.md2.2 KiB
- guides/user-experience/physics-based-easing.md5.8 KiB
- guides/user-experience/platform-controls-dismiss-dialog.md2.6 KiB
- guides/user-experience/position-aware-tooltips.md5.9 KiB
- guides/user-experience/precise-text-alignment.md4.7 KiB
- guides/user-experience/prevent-text-wrapping.md2.4 KiB
- guides/user-experience/pull-to-reveal.md4.7 KiB
- guides/user-experience/reduce-style-repetition.md3.9 KiB
- guides/user-experience/resilient-context-menus-and-nested-dropdowns.md4.9 KiB
- guides/user-experience/same-document-transitions.md8.3 KiB
- guides/user-experience/scroll-entry-exit-effects.md7.8 KiB
- guides/user-experience/scroll-position-aware-elements.md3.6 KiB
- guides/user-experience/scroll-progress-indicator.md6.7 KiB
- guides/user-experience/scroll-snap-realtime-feedback.md6.7 KiB
- guides/user-experience/scroll-snap-state-sync.md3.9 KiB
- guides/user-experience/scroll-target-on-load.md3.3 KiB
- guides/user-experience/scrollability-affordance-hints.md3.6 KiB
- guides/user-experience/scrollytelling.md8.3 KiB
- guides/user-experience/search-hidden-content.md6.7 KiB
- guides/user-experience/shaped-cutouts.md7.0 KiB
- guides/user-experience/shrinking-header-on-scroll.md6.3 KiB
- guides/user-experience/size-aware-styling.md2.9 KiB
- guides/user-experience/soft-edge-content-fade.md2.6 KiB
- guides/user-experience/stabilize-reactive-state.md3.5 KiB
- guides/user-experience/stack-drill-down.md32.9 KiB
- guides/user-experience/style-parent-with-has.md6.0 KiB
- guides/user-experience/support-global-calendar-systems.md5.7 KiB
- guides/user-experience/swipe-to-remove.md26.2 KiB
- guides/user-experience/visually-stable-font-fallbacks.md2.9 KiB
- guides/user-experience/visually-stable-mixed-fonts.md2.8 KiB
- guides/user-experience/visually-texture-content.md3.7 KiB
- guides/webmcp/agentic-forms.md5.0 KiB
- guides/webmcp/agentic-javascript-tools.md4.1 KiB
- guides/webmcp/webmcp.md3.7 KiB
guides/built-in-ai/summarizer.md
The Summarizer API allows web developers to offer local, AI-powered text distillation directly within the browser using Gemini Nano in Chrome or Phi in Edge. This API supports various formats, including key points, headlines, and TL;DRs, while operating entirely on-device to ensure user privacy.
Getting Started
The Summarizer API is available starting in Chrome and Edge 138. It requires a one-time model download of Gemini Nano or Phi (respectively).
Hardware & Software Requirements
OS: Windows 10/11, macOS 13+, Linux, or ChromeOS (Chromebook Plus).
Storage: 22GB free space for the profile volume.
RAM/CPU: 16GB+ RAM and 4+ CPU cores.
VRAM: 4GB+ (if using GPU).
Model Download and Availability
Check if the model is ready, needs downloading, or is unavailable.
Mandatory Options Passing: You must pass the identical configuration options object to both Summarizer.availability(options) and Summarizer.create(options). Do NOT use the deprecated window.ai.summarizer API surface.
Mandatory Progress Monitoring: You MUST implement a monitor for model download progress by providing a monitor(m) callback to Summarizer.create() and adding a listener for the downloadprogress event.
User Gesture Requirement: When availability is 'downloadable' or 'downloading', triggering the actual download via Summarizer.create() requires a user gesture (such as a user click). You must place the creation call inside an event listener rather than calling it unconditionally on page load to prevent NotAllowedError.
const options = {
type: 'key-points',
format: 'plain-text',
length: 'medium'
};
const availability = await Summarizer.availability(options);
if (availability === 'available') {
const summarizer = await Summarizer.create(options);
// Ready to use immediately
} else if (availability === 'downloadable') {
// A user gesture is strictly required to start the download
document.getElementById('start-download-btn').addEventListener('click', async () => {
const summarizer = await Summarizer.create({
...options,
monitor(m) {
m.addEventListener('downloadprogress', (e) => {
console.log(`Downloaded ${Math.round((e.loaded / e.total) * 100)}%`);
});
},
});
});
}API Functions & Configuration
When creating a summarizer via Summarizer.create(options), you can customize
the output:
| Parameter | Options | Description |
|---|---|---|
type | key-points, tldr, teaser, headline | Defines the summary strategy. |
format | markdown, plain-text | Output syntax style. |
length | short, medium, long | Target length (e.g., 1 vs 5 sentences). |
preference | auto, speed, capability | Balances latency vs. quality. |
Example Configuration
const options = {
sharedContext: 'This is a scientific article',
type: 'key-points',
format: 'markdown',
length: 'medium',
};
if (navigator.userActivation.isActive) {
const summarizer = await Summarizer.create(options);
}Language Support
You can specify expected languages to ensure the browser can handle the specific summary request.
const summarizer = await Summarizer.create({
type: 'key-points',
expectedInputLanguages: ['en', 'ja'],
outputLanguage: 'es',
});Summarization Methods
1. Batch Summarization
Processes the entire text at once and returns the result.
const longText = document.querySelector('article').innerText;
const summary = await summarizer.summarize(longText, {
context: 'This article is intended for a tech-savvy audience.',
});
console.log(summary);2. Stream Summarization
Returns results in real-time as the model generates them, providing a more responsive UI.
const stream = summarizer.summarizeStreaming(longText);
for await (const chunk of stream) {
console.log(chunk);
}Security and Permissions
Data Privacy: No data is sent to Google; processing happens on the local device.
Cross-Origin: Access can be granted to iframes using the Permission Policy.
<iframe src="https://example.com/" allow="summarizer"></iframe>Web Workers: Currently not supported.
Fallback Strategy
Summarizer has limited availability. Supported by: Chrome 138 (Jun 2025). Unsupported in: Edge, Firefox, and Safari.
Before initializing or querying availability, check if the browser supports the Summarizer API:
if ('Summarizer' in self) {
// The Summarizer API is supported.
} else {
// Execute fallback strategy
}If the Summarizer API is unsupported or availability checks return 'unavailable', you must gracefully fall back.
Recommended options:
Remote API Fallback: Direct the distillation request to a server endpoint or remote API (such as the Vertex AI Gemini API) so that users still get summaries.
Graceful Degradation: Visually disable the summarization controls in the UI, or hide the button while displaying a friendly message (e.g.,
"Local summarization is currently unsupported in this browser"). Do not allow interaction to trigger generic unhandled runtime exceptions.Polyfill Fallback: You can use community-maintained polyfills like
built-in-ai-task-apis-polyfillsorprompt-api-polyfillto emulate the API surface using remote services with models in the cloud or on-device inference with local models.
Privacy and Cost Implications: These polyfills possibly proxy requests to remote servers (such as Gemini API over the cloud). This completely nullifies the on-device privacy guarantees of the native Built-in AI APIs and will incur server-side API usage costs.
Requirements and compatibility
Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta
“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.
Needs: Needs Node.js
Security
What our scanner noticed· Low risk
- Instructions that use the network
A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.
Attribution and licence
- Created by
- Google Chrome
- Publisher
- JetBrains (Official)
- Distributed by
- JetBrains
- Source
- JetBrains/skills · modern-web-guidance · commit 3f53782
- Licence
- Apache License 2.0 (redistribution allowed)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
AutoGineer is not affiliated with or endorsed by Google Chrome or JetBrains.
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download modern-web-guidance.zip