Modern Web Guidance

JetBrainsOfficialCreated by Google ChromeDistributed by JetBrains

Skill
Tool integration
Software development
Apache-2.0
Low risk

From the author

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.

— the description by Google Chrome

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://mp-staging.autogineer.com/agent-skills/jetbrains/modern-web-guidance/download

Unzip 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-c5e7870

Example 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 list command 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 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.

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/user-experience/visually-texture-content.md

Overview

To apply realistic weathering or texture patterns (like grunge, noise, or paper texture) to an element, use CSS Masking (mask-image) with a repeating texture image. This allows you to make the content itself appear textured by making parts of it semi-transparent, rather than just overlaying a texture on top. This creates a more realistic physical material appearance.

Implementation

To apply a texture pattern:

Method 1: Using a repeating raster image (Recommended for realistic textures)

This is the most common method for realistic textures.

.weathered-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('grunge-pattern.png');
  -webkit-mask-repeat: repeat; /* Repeat the pattern to fill the area */
  -webkit-mask-size: 300px; /* Control the scale of the texture */

  /* Standard property for modern browsers */
  mask-image: url('grunge-pattern.png');
  mask-repeat: repeat;
  mask-size: 300px;
}

Method 2: Using CSS Gradients for geometric patterns

You can generate patterns using CSS gradients. This is self-contained and does not require external image files.

.patterned-element {
  --checkerboard-gradient: 
    linear-gradient(45deg, #000 25%, transparent 25%), 
    linear-gradient(-45deg, #000 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #000 75%), 
    linear-gradient(-45deg, transparent 75%, #000 75%);

  /* Apply a checkerboard pattern as a mask */
  -webkit-mask-image: var(--checkerboard-gradient);
  -webkit-mask-size: 20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  
  mask-image: var(--checkerboard-gradient);
  mask-size: 20px 20px;
  mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

Alpha vs Luminance Masking Modes

By default, CSS masks use mask-mode: match-source. This means the browser automatically decides whether to use the alpha channel (transparency) or the luminance (brightness) of the mask based on what kind of source you provide:

Mask Source Type	Default Mask Mode	Masking Behavior
Inline SVG `<mask>` element	`luminance`	Opacity is determined by the brightness of colors. White reveals content, black hides it, and gray creates semi-transparency.
Direct Image File (e.g. PNG, SVG file)	`alpha`	Opacity is determined by transparency. Opaque parts reveal content, and transparent parts hide it.
CSS Gradient	`alpha`	Opacity is determined by transparency. Opaque colors (like `black`) reveal content, and transparent colors hide it.

Note: You can explicitly override the default mask mode using the mask-mode CSS property (e.g., mask-mode: luminance; or mask-mode: alpha;).

Fallback strategies

Baseline status for Masks: Newly available. It's been Baseline since 2023-12-07. Supported by: Chrome 120 (Dec 2023), Edge 120 (Dec 2023), Firefox 53 (Apr 2017), and Safari 15.4 (Mar 2022).

If a browser does not support mask-image or the prefixed version:

The element will display without the texture (clean and solid fill).
Ensure the content is still readable without the texture (progressive enhancement).
You can use a background image or an overlay as a fallback to simulate the texture, although it will not affect the transparency of the content itself.

/* Fallback: Use a background image for browsers without mask support */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .weathered-element {
    /* Fallback adds texture on top or behind, depending on implementation */
    background-image: url('grunge-pattern.svg');
    background-color: #fff; /* Ensure background is solid if needed */
  }
}

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

2026-11-08

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

From the author

AutoGineer summary

What it does

When to use it

Advantages

Usage examples

Install

Documentation by Google Chrome

Modern Web Guidance

When to use

Usage Instructions

Step 1. Search Use Cases

Step 2. Retrieve Best Practices

Using npx

Guidelines

Interpreting Browser Support & Fallbacks

Files

guides/user-experience/visually-texture-content.md

Overview

Implementation

Method 1: Using a repeating raster image (Recommended for realistic textures)

Method 2: Using CSS Gradients for geometric patterns

Alpha vs Luminance Masking Modes

Fallback strategies

Requirements and compatibility

Security

Attribution and licence

Related skills

Web Artifacts Builder

Frontend UI Engineering

Ask Sonner

Pick UI Library

Animate Expo

Prototype

Download ZIP