modern-web-guidance
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.
Pinned to revision 7a07e3df018f, so it is the text this page describes rather than whatever the author pushed since.
Files
- skills/modern-web-guidance/SKILL.md
- skills/modern-web-guidance/guides/accessibility/accessibility.md
- skills/modern-web-guidance/guides/accessibility/accessible-error-announcement.md
- skills/modern-web-guidance/guides/built-in-ai/language-detection.md
- skills/modern-web-guidance/guides/built-in-ai/language-model.md
- skills/modern-web-guidance/guides/built-in-ai/prompt-api.md
- skills/modern-web-guidance/guides/built-in-ai/summarizer.md
- skills/modern-web-guidance/guides/built-in-ai/translator.md
- skills/modern-web-guidance/guides/css/animate-to-intrinsic-sizes.md
- skills/modern-web-guidance/guides/css/calculate-with-intrinsic-sizes.md
- skills/modern-web-guidance/guides/css/child-state-based-styling.md
- skills/modern-web-guidance/guides/css/content-based-styling.md
- skills/modern-web-guidance/guides/css/css-layout.md
- skills/modern-web-guidance/guides/css/css.md
- skills/modern-web-guidance/guides/css/design-token-reactivity.md
- skills/modern-web-guidance/guides/css/dynamic-sibling-styling.md
- skills/modern-web-guidance/guides/css/fluid-scaling.md
- skills/modern-web-guidance/guides/css/individual-transform-properties.md
- skills/modern-web-guidance/guides/css/overflow-clipping-control.md
- skills/modern-web-guidance/guides/css/reduce-style-repetition.md
- skills/modern-web-guidance/guides/css/size-aware-styling.md
- skills/modern-web-guidance/guides/css/style-parent-with-has.md
- skills/modern-web-guidance/guides/css/usage-aware-component-variations.md
- skills/modern-web-guidance/guides/forms/animated-select-picker.md
- skills/modern-web-guidance/guides/forms/autofill-address-form.md
- skills/modern-web-guidance/guides/forms/autofill-highlight-inputs.md
- skills/modern-web-guidance/guides/forms/autofill-payment-form.md
- skills/modern-web-guidance/guides/forms/autofill-sign-in-form.md
- skills/modern-web-guidance/guides/forms/autofill-sign-up-form.md
- skills/modern-web-guidance/guides/forms/brand-consistent-forms.md
- skills/modern-web-guidance/guides/forms/branded-select-styling.md
- skills/modern-web-guidance/guides/forms/custom-select-picker-layouts.md
- skills/modern-web-guidance/guides/forms/form-fields-automatically-fit-contents.md
- skills/modern-web-guidance/guides/forms/forms.md
- skills/modern-web-guidance/guides/forms/required-field-feedback.md
- skills/modern-web-guidance/guides/forms/rich-media-picker.md
- skills/modern-web-guidance/guides/forms/select-menu-interaction.md
- skills/modern-web-guidance/guides/forms/validate-input-after-interaction.md
- skills/modern-web-guidance/guides/html/html.md
- skills/modern-web-guidance/guides/js/calculate-event-differentials.md
- skills/modern-web-guidance/guides/js/capture-location-agnostic-data.md
- skills/modern-web-guidance/guides/js/coordinate-global-events.md
- skills/modern-web-guidance/guides/js/format-human-readable-durations.md
- skills/modern-web-guidance/guides/js/manage-recurring-intervals.md
- skills/modern-web-guidance/guides/js/model-partial-time-concepts.md
- skills/modern-web-guidance/guides/js/stabilize-reactive-state.md
- skills/modern-web-guidance/guides/js/support-global-calendar-systems.md
- skills/modern-web-guidance/guides/performance/batch-analytics-events.md
- skills/modern-web-guidance/guides/performance/break-up-long-tasks.md
- skills/modern-web-guidance/guides/performance/calculate-total-foreground-time.md
- skills/modern-web-guidance/guides/performance/conditional-async-dependencies.md
- skills/modern-web-guidance/guides/performance/defer-rendering-heavy-content.md
- skills/modern-web-guidance/guides/performance/defer-work-until-scroll-ends.md
- skills/modern-web-guidance/guides/performance/deliver-optimized-decorative-images.md
- skills/modern-web-guidance/guides/performance/deprioritize-background-fetches.md
- skills/modern-web-guidance/guides/performance/detect-initial-visibility-state.md
- skills/modern-web-guidance/guides/performance/efficient-background-processing.md
- skills/modern-web-guidance/guides/performance/faster-spa-view-transitions.md
- skills/modern-web-guidance/guides/performance/flicker-free-client-side-ab-testing.md
- skills/modern-web-guidance/guides/performance/full-session-analytics.md
- skills/modern-web-guidance/guides/performance/identify-heavy-scripts.md
- skills/modern-web-guidance/guides/performance/identify-inp-causes.md
- skills/modern-web-guidance/guides/performance/improve-next-page-load-performance.md
- skills/modern-web-guidance/guides/performance/interactions-in-complex-layouts.md
- skills/modern-web-guidance/guides/performance/optimize-image-priority.md
- skills/modern-web-guidance/guides/performance/optimize-preload-priority.md
- skills/modern-web-guidance/guides/performance/optimize-script-priority.md
- skills/modern-web-guidance/guides/performance/performance.md
- skills/modern-web-guidance/guides/performance/resolution-optimized-pseudo-elements.md
- skills/modern-web-guidance/guides/performance/schedule-tasks-by-priority.md
- skills/modern-web-guidance/guides/performance/sequence-distributed-events.md
- skills/modern-web-guidance/guides/privacy/privacy.md
- skills/modern-web-guidance/guides/security/passkey-authentication.md
- skills/modern-web-guidance/guides/security/passkey-conditional-create.md
- skills/modern-web-guidance/guides/security/passkey-management.md
- skills/modern-web-guidance/guides/security/passkey-reauthentication.md
- skills/modern-web-guidance/guides/security/passkey-registration.md
- skills/modern-web-guidance/guides/security/passkeys.md
- skills/modern-web-guidance/guides/security/security.md
- skills/modern-web-guidance/guides/ui-atoms/carousel-slide-effects.md
- skills/modern-web-guidance/guides/ui-atoms/component-specific-light-dark-theme.md
- skills/modern-web-guidance/guides/ui-atoms/position-aware-tooltips.md
- skills/modern-web-guidance/guides/ui-atoms/pull-to-reveal.md
- skills/modern-web-guidance/guides/ui-atoms/resilient-context-menus-and-nested-dropdowns.md
- skills/modern-web-guidance/guides/ui-atoms/scroll-position-aware-elements.md
- skills/modern-web-guidance/guides/ui-atoms/scroll-progress-indicator.md
- skills/modern-web-guidance/guides/ui-atoms/scrollability-affordance-hints.md
- skills/modern-web-guidance/guides/ui-atoms/shrinking-header-on-scroll.md
- skills/modern-web-guidance/guides/ui-atoms/state-aware-sticky-headers.md
- skills/modern-web-guidance/guides/ui-behaviors/anchor-positioning-tab-underline.md
- skills/modern-web-guidance/guides/ui-behaviors/animate-element-entry-exit.md
- skills/modern-web-guidance/guides/ui-behaviors/animate-to-from-top-layer.md
- skills/modern-web-guidance/guides/ui-behaviors/carousel-snap-highlights.md
- skills/modern-web-guidance/guides/ui-behaviors/consistent-cross-document-transitions.md
- skills/modern-web-guidance/guides/ui-behaviors/cross-document-transitions.md
- skills/modern-web-guidance/guides/ui-behaviors/custom-button-actions.md
- skills/modern-web-guidance/guides/ui-behaviors/declarative-dialog-popover-control.md
- skills/modern-web-guidance/guides/ui-behaviors/directional-navigation-transitions.md
- skills/modern-web-guidance/guides/ui-behaviors/dynamic-sibling-animations.md
- skills/modern-web-guidance/guides/ui-behaviors/group-element-transitions.md
- skills/modern-web-guidance/guides/ui-behaviors/highlight-text-ranges.md
- skills/modern-web-guidance/guides/ui-behaviors/interactive-content-reveal.md
- skills/modern-web-guidance/guides/ui-behaviors/interest-triggered-action-previews.md
- skills/modern-web-guidance/guides/ui-behaviors/interest-triggered-tooltips.md
- skills/modern-web-guidance/guides/ui-behaviors/light-dismiss-a-dialog.md
- skills/modern-web-guidance/guides/ui-behaviors/move-dom-element-without-losing-state.md
- skills/modern-web-guidance/guides/ui-behaviors/parallax-scroll-effects.md
- skills/modern-web-guidance/guides/ui-behaviors/persistent-top-layer-ui.md
- skills/modern-web-guidance/guides/ui-behaviors/physics-based-easing.md
- skills/modern-web-guidance/guides/ui-behaviors/platform-controls-dismiss-dialog.md
- skills/modern-web-guidance/guides/ui-behaviors/same-document-transitions.md
- skills/modern-web-guidance/guides/ui-behaviors/scroll-entry-exit-effects.md
- skills/modern-web-guidance/guides/ui-behaviors/scroll-snap-realtime-feedback.md
- skills/modern-web-guidance/guides/ui-behaviors/scroll-snap-state-sync.md
- skills/modern-web-guidance/guides/ui-behaviors/scroll-target-on-load.md
- skills/modern-web-guidance/guides/ui-behaviors/scrollytelling.md
- skills/modern-web-guidance/guides/ui-behaviors/search-hidden-content.md
- skills/modern-web-guidance/guides/ui-behaviors/swipe-to-remove.md
- skills/modern-web-guidance/guides/ui-components/navigation-drawer.md
- skills/modern-web-guidance/guides/ui-components/persistent-app-tours.md
- skills/modern-web-guidance/guides/ui-components/persistent-toast-notifications.md
- skills/modern-web-guidance/guides/ui-components/stack-drill-down.md
- skills/modern-web-guidance/guides/visual-design/adapt-scrollbar-to-contrast-preferences.md
- skills/modern-web-guidance/guides/visual-design/apply-webgl-shaders.md
- skills/modern-web-guidance/guides/visual-design/complex-shapes.md
- skills/modern-web-guidance/guides/visual-design/customize-scrollbar-color-and-thickness.md
- skills/modern-web-guidance/guides/visual-design/dark-mode.md
- skills/modern-web-guidance/guides/visual-design/export-html-media-from-canvas.md
- skills/modern-web-guidance/guides/visual-design/expose-canvas-content-to-browser-features.md
- skills/modern-web-guidance/guides/visual-design/improve-text-layout-and-legibility.md
- skills/modern-web-guidance/guides/visual-design/interactive-content-in-3d-scenes.md
- skills/modern-web-guidance/guides/visual-design/precise-text-alignment.md
- skills/modern-web-guidance/guides/visual-design/prevent-text-wrapping.md
- skills/modern-web-guidance/guides/visual-design/shaped-cutouts.md
- skills/modern-web-guidance/guides/visual-design/soft-edge-content-fade.md
- skills/modern-web-guidance/guides/visual-design/visually-stable-font-fallbacks.md
- skills/modern-web-guidance/guides/visual-design/visually-stable-mixed-fonts.md
- skills/modern-web-guidance/guides/visual-design/visually-texture-content.md
- skills/modern-web-guidance/guides/webmcp/agentic-forms.md
- skills/modern-web-guidance/guides/webmcp/agentic-javascript-tools.md
- skills/modern-web-guidance/guides/webmcp/webmcp.md
Every link opens the file at its source, pinned to the revision this page describes.