Update to 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.",
  "included_files": [
    {
      "relative_path": "guides/accessibility/accessibility.md",
      "size_in_bytes": 24640
    },
    {
      "relative_path": "guides/accessibility/accessible-error-announcement.md",
      "size_in_bytes": 7200
    },
    {
      "relative_path": "guides/built-in-ai/language-detection.md",
      "size_in_bytes": 3641
    },
    {
      "relative_path": "guides/built-in-ai/language-model.md",
      "size_in_bytes": 16693
    },
    {
      "relative_path": "guides/built-in-ai/prompt-api.md",
      "size_in_bytes": 16693
    },
    {
      "relative_path": "guides/built-in-ai/summarizer.md",
      "size_in_bytes": 6082
    },
    {
      "relative_path": "guides/built-in-ai/translator.md",
      "size_in_bytes": 7385
    },
    {
      "relative_path": "guides/css/animate-to-intrinsic-sizes.md",
      "size_in_bytes": 5429
    },
    {
      "relative_path": "guides/css/calculate-with-intrinsic-sizes.md",
      "size_in_bytes": 9910
    },
    {
      "relative_path": "guides/css/child-state-based-styling.md",
      "size_in_bytes": 4971
    },
    {
      "relative_path": "guides/css/content-based-styling.md",
      "size_in_bytes": 5341
    },
    {
      "relative_path": "guides/css/css-layout.md",
      "size_in_bytes": 20380
    },
    {
      "relative_path": "guides/css/css.md",
      "size_in_bytes": 27634
    },
    {
      "relative_path": "guides/css/design-token-reactivity.md",
      "size_in_bytes": 5922
    },
    {
      "relative_path": "guides/css/dynamic-sibling-styling.md",
      "size_in_bytes": 3678
    },
    {
      "relative_path": "guides/css/fluid-scaling.md",
      "size_in_bytes": 3088
    },
    {
      "relative_path": "guides/css/individual-transform-properties.md",
      "size_in_bytes": 3693
    },
    {
      "relative_path": "guides/css/overflow-clipping-control.md",
      "size_in_bytes": 8231
    },
    {
      "relative_path": "guides/css/reduce-style-repetition.md",
      "size_in_bytes": 3994
    },
    {
      "relative_path": "guides/css/size-aware-styling.md",
      "size_in_bytes": 2986
    },
    {
      "relative_path": "guides/css/style-parent-with-has.md",
      "size_in_bytes": 6190
    },
    {
      "relative_path": "guides/css/usage-aware-component-variations.md",
      "size_in_bytes": 5270
    },
    {
      "relative_path": "guides/forms/animated-select-picker.md",
      "size_in_bytes": 8003
    },
    {
      "relative_path": "guides/forms/autofill-address-form.md",
      "size_in_bytes": 4192
    },
    {
      "relative_path": "guides/forms/autofill-highlight-inputs.md",
      "size_in_bytes": 2353
    },
    {
      "relative_path": "guides/forms/autofill-payment-form.md",
      "size_in_bytes": 8681
    },
    {
      "relative_path": "guides/forms/autofill-sign-in-form.md",
      "size_in_bytes": 10094
    },
    {
      "relative_path": "guides/forms/autofill-sign-up-form.md",
      "size_in_bytes": 11294
    },
    {
      "relative_path": "guides/forms/brand-consistent-forms.md",
      "size_in_bytes": 8496
    },
    {
      "relative_path": "guides/forms/branded-select-styling.md",
      "size_in_bytes": 5629
    },
    {
      "relative_path": "guides/forms/custom-select-picker-layouts.md",
      "size_in_bytes": 5169
    },
    {
      "relative_path": "guides/forms/form-fields-automatically-fit-contents.md",
      "size_in_bytes": 6042
    },
    {
      "relative_path": "guides/forms/forms.md",
      "size_in_bytes": 14370
    },
    {
      "relative_path": "guides/forms/ime-safe-enter-submit.md",
      "size_in_bytes": 5379
    },
    {
      "relative_path": "guides/forms/required-field-feedback.md",
      "size_in_bytes": 6961
    },
    {
      "relative_path": "guides/forms/rich-media-picker.md",
      "size_in_bytes": 6709
    },
    {
      "relative_path": "guides/forms/select-menu-interaction.md",
      "size_in_bytes": 5573
    },
    {
      "relative_path": "guides/forms/validate-input-after-interaction.md",
      "size_in_bytes": 8823
    },
    {
      "relative_path": "guides/html/html.md",
      "size_in_bytes": 17935
    },
    {
      "relative_path": "guides/js/calculate-event-differentials.md",
      "size_in_bytes": 4545
    },
    {
      "relative_path": "guides/js/capture-location-agnostic-data.md",
      "size_in_bytes": 3668
    },
    {
      "relative_path": "guides/js/coordinate-global-events.md",
      "size_in_bytes": 3562
    },
    {
      "relative_path": "guides/js/format-human-readable-durations.md",
      "size_in_bytes": 4313
    },
    {
      "relative_path": "guides/js/manage-recurring-intervals.md",
      "size_in_bytes": 3363
    },
    {
      "relative_path": "guides/js/model-partial-time-concepts.md",
      "size_in_bytes": 4337
    },
    {
      "relative_path": "guides/js/stabilize-reactive-state.md",
      "size_in_bytes": 3552
    },
    {
      "relative_path": "guides/js/support-global-calendar-systems.md",
      "size_in_bytes": 5800
    },
    {
      "relative_path": "guides/performance/batch-analytics-events.md",
      "size_in_bytes": 6519
    },
    {
      "relative_path": "guides/performance/break-up-long-tasks.md",
      "size_in_bytes": 2222
    },
    {
      "relative_path": "guides/performance/calculate-total-foreground-time.md",
      "size_in_bytes": 2941
    },
    {
      "relative_path": "guides/performance/conditional-async-dependencies.md",
      "size_in_bytes": 3686
    },
    {
      "relative_path": "guides/performance/defer-rendering-heavy-content.md",
      "size_in_bytes": 6418
    },
    {
      "relative_path": "guides/performance/defer-work-until-scroll-ends.md",
      "size_in_bytes": 3382
    },
    {
      "relative_path": "guides/performance/deliver-optimized-decorative-images.md",
      "size_in_bytes": 2918
    },
    {
      "relative_path": "guides/performance/deprioritize-background-fetches.md",
      "size_in_bytes": 1870
    },
    {
      "relative_path": "guides/performance/detect-initial-visibility-state.md",
      "size_in_bytes": 4638
    },
    {
      "relative_path": "guides/performance/efficient-background-processing.md",
      "size_in_bytes": 5139
    },
    {
      "relative_path": "guides/performance/faster-spa-view-transitions.md",
      "size_in_bytes": 3532
    },
    {
      "relative_path": "guides/performance/flicker-free-client-side-ab-testing.md",
      "size_in_bytes": 8654
    },
    {
      "relative_path": "guides/performance/full-session-analytics.md",
      "size_in_bytes": 5800
    },
    {
      "relative_path": "guides/performance/identify-heavy-scripts.md",
      "size_in_bytes": 4296
    },
    {
      "relative_path": "guides/performance/identify-inp-causes.md",
      "size_in_bytes": 5516
    },
    {
      "relative_path": "guides/performance/improve-next-page-load-performance.md",
      "size_in_bytes": 7320
    },
    {
      "relative_path": "guides/performance/interactions-in-complex-layouts.md",
      "size_in_bytes": 3432
    },
    {
      "relative_path": "guides/performance/optimize-image-priority.md",
      "size_in_bytes": 4592
    },
    {
      "relative_path": "guides/performance/optimize-preload-priority.md",
      "size_in_bytes": 3357
    },
    {
      "relative_path": "guides/performance/optimize-script-priority.md",
      "size_in_bytes": 2650
    },
    {
      "relative_path": "guides/performance/performance.md",
      "size_in_bytes": 20229
    },
    {
      "relative_path": "guides/performance/resolution-optimized-pseudo-elements.md",
      "size_in_bytes": 2378
    },
    {
      "relative_path": "guides/performance/schedule-tasks-by-priority.md",
      "size_in_bytes": 2298
    },
    {
      "relative_path": "guides/performance/sequence-distributed-events.md",
      "size_in_bytes": 3552
    },
    {
      "relative_path": "guides/privacy/privacy.md",
      "size_in_bytes": 11213
    },
    {
      "relative_path": "guides/security/passkey-authentication.md",
      "size_in_bytes": 9887
    },
    {
      "relative_path": "guides/security/passkey-conditional-create.md",
      "size_in_bytes": 6698
    },
    {
      "relative_path": "guides/security/passkey-management.md",
      "size_in_bytes": 9506
    },
    {
      "relative_path": "guides/security/passkey-reauthentication.md",
      "size_in_bytes": 5055
    },
    {
      "relative_path": "guides/security/passkey-registration.md",
      "size_in_bytes": 9515
    },
    {
      "relative_path": "guides/security/passkeys.md",
      "size_in_bytes": 4305
    },
    {
      "relative_path": "guides/security/security.md",
      "size_in_bytes": 25812
    },
    {
      "relative_path": "guides/ui-atoms/carousel-slide-effects.md",
      "size_in_bytes": 8312
    },
    {
      "relative_path": "guides/ui-atoms/component-specific-light-dark-theme.md",
      "size_in_bytes": 9526
    },
    {
      "relative_path": "guides/ui-atoms/position-aware-tooltips.md",
      "size_in_bytes": 6584
    },
    {
      "relative_path": "guides/ui-atoms/pull-to-reveal.md",
      "size_in_bytes": 4794
    },
    {
      "relative_path": "guides/ui-atoms/resilient-context-menus-and-nested-dropdowns.md",
      "size_in_bytes": 6504
    },
    {
      "relative_path": "guides/ui-atoms/scroll-position-aware-elements.md",
      "size_in_bytes": 3701
    },
    {
      "relative_path": "guides/ui-atoms/scroll-progress-indicator.md",
      "size_in_bytes": 6901
    },
    {
      "relative_path": "guides/ui-atoms/scrollability-affordance-hints.md",
      "size_in_bytes": 3762
    },
    {
      "relative_path": "guides/ui-atoms/shrinking-header-on-scroll.md",
      "size_in_bytes": 6499
    },
    {
      "relative_path": "guides/ui-atoms/state-aware-sticky-headers.md",
      "size_in_bytes": 6412
    },
    {
      "relative_path": "guides/ui-behaviors/anchor-positioning-tab-underline.md",
      "size_in_bytes": 2956
    },
    {
      "relative_path": "guides/ui-behaviors/animate-element-entry-exit.md",
      "size_in_bytes": 5200
    },
    {
      "relative_path": "guides/ui-behaviors/animate-to-from-top-layer.md",
      "size_in_bytes": 6945
    },
    {
      "relative_path": "guides/ui-behaviors/carousel-snap-highlights.md",
      "size_in_bytes": 5838
    },
    {
      "relative_path": "guides/ui-behaviors/consistent-cross-document-transitions.md",
      "size_in_bytes": 12090
    },
    {
      "relative_path": "guides/ui-behaviors/cross-document-transitions.md",
      "size_in_bytes": 4538
    },
    {
      "relative_path": "guides/ui-behaviors/custom-button-actions.md",
      "size_in_bytes": 7388
    },
    {
      "relative_path": "guides/ui-behaviors/declarative-dialog-popover-control.md",
      "size_in_bytes": 10523
    },
    {
      "relative_path": "guides/ui-behaviors/directional-navigation-transitions.md",
      "size_in_bytes": 5026
    },
    {
      "relative_path": "guides/ui-behaviors/dynamic-sibling-animations.md",
      "size_in_bytes": 2670
    },
    {
      "relative_path": "guides/ui-behaviors/group-element-transitions.md",
      "size_in_bytes": 5158
    },
    {
      "relative_path": "guides/ui-behaviors/highlight-text-ranges.md",
      "size_in_bytes": 5574
    },
    {
      "relative_path": "guides/ui-behaviors/interactive-content-reveal.md",
      "size_in_bytes": 5218
    },
    {
      "relative_path": "guides/ui-behaviors/interest-triggered-action-previews.md",
      "size_in_bytes": 4288
    },
    {
      "relative_path": "guides/ui-behaviors/interest-triggered-tooltips.md",
      "size_in_bytes": 8368
    },
    {
      "relative_path": "guides/ui-behaviors/light-dismiss-a-dialog.md",
      "size_in_bytes": 3676
    },
    {
      "relative_path": "guides/ui-behaviors/move-dom-element-without-losing-state.md",
      "size_in_bytes": 2617
    },
    {
      "relative_path": "guides/ui-behaviors/parallax-scroll-effects.md",
      "size_in_bytes": 9047
    },
    {
      "relative_path": "guides/ui-behaviors/persistent-top-layer-ui.md",
      "size_in_bytes": 2328
    },
    {
      "relative_path": "guides/ui-behaviors/physics-based-easing.md",
      "size_in_bytes": 5954
    },
    {
      "relative_path": "guides/ui-behaviors/platform-controls-dismiss-dialog.md",
      "size_in_bytes": 2663
    },
    {
      "relative_path": "guides/ui-behaviors/same-document-transitions.md",
      "size_in_bytes": 8490
    },
    {
      "relative_path": "guides/ui-behaviors/scroll-entry-exit-effects.md",
      "size_in_bytes": 8035
    },
    {
      "relative_path": "guides/ui-behaviors/scroll-snap-realtime-feedback.md",
      "size_in_bytes": 6854
    },
    {
      "relative_path": "guides/ui-behaviors/scroll-snap-state-sync.md",
      "size_in_bytes": 4033
    },
    {
      "relative_path": "guides/ui-behaviors/scroll-target-on-load.md",
      "size_in_bytes": 3422
    },
    {
      "relative_path": "guides/ui-behaviors/scrollytelling.md",
      "size_in_bytes": 8465
    },
    {
      "relative_path": "guides/ui-behaviors/search-hidden-content.md",
      "size_in_bytes": 6950
    },
    {
      "relative_path": "guides/ui-behaviors/swipe-to-remove.md",
      "size_in_bytes": 27541
    },
    {
      "relative_path": "guides/ui-components/navigation-drawer.md",
      "size_in_bytes": 16340
    },
    {
      "relative_path": "guides/ui-components/persistent-app-tours.md",
      "size_in_bytes": 5284
    },
    {
      "relative_path": "guides/ui-components/persistent-toast-notifications.md",
      "size_in_bytes": 3618
    },
    {
      "relative_path": "guides/ui-components/progress-ring.md",
      "size_in_bytes": 6034
    },
    {
      "relative_path": "guides/ui-components/scrollspy.md",
      "size_in_bytes": 5937
    },
    {
      "relative_path": "guides/ui-components/spinner.md",
      "size_in_bytes": 5312
    },
    {
      "relative_path": "guides/ui-components/stack-drill-down.md",
      "size_in_bytes": 34158
    },
    {
      "relative_path": "guides/visual-design/adapt-scrollbar-to-contrast-preferences.md",
      "size_in_bytes": 3611
    },
    {
      "relative_path": "guides/visual-design/apply-webgl-shaders.md",
      "size_in_bytes": 10195
    },
    {
      "relative_path": "guides/visual-design/complex-shapes.md",
      "size_in_bytes": 3592
    },
    {
      "relative_path": "guides/visual-design/customize-scrollbar-color-and-thickness.md",
      "size_in_bytes": 2483
    },
    {
      "relative_path": "guides/visual-design/dark-mode.md",
      "size_in_bytes": 15613
    },
    {
      "relative_path": "guides/visual-design/export-html-media-from-canvas.md",
      "size_in_bytes": 11766
    },
    {
      "relative_path": "guides/visual-design/expose-canvas-content-to-browser-features.md",
      "size_in_bytes": 15057
    },
    {
      "relative_path": "guides/visual-design/improve-text-layout-and-legibility.md",
      "size_in_bytes": 5192
    },
    {
      "relative_path": "guides/visual-design/interactive-content-in-3d-scenes.md",
      "size_in_bytes": 14228
    },
    {
      "relative_path": "guides/visual-design/precise-text-alignment.md",
      "size_in_bytes": 4855
    },
    {
      "relative_path": "guides/visual-design/prevent-text-wrapping.md",
      "size_in_bytes": 2446
    },
    {
      "relative_path": "guides/visual-design/shaped-cutouts.md",
      "size_in_bytes": 7179
    },
    {
      "relative_path": "guides/visual-design/soft-edge-content-fade.md",
      "size_in_bytes": 2659
    },
    {
      "relative_path": "guides/visual-design/visually-stable-font-fallbacks.md",
      "size_in_bytes": 2978
    },
    {
      "relative_path": "guides/visual-design/visually-stable-mixed-fonts.md",
      "size_in_bytes": 2914
    },
    {
      "relative_path": "guides/visual-design/visually-texture-content.md",
      "size_in_bytes": 3814
    },
    {
      "relative_path": "guides/webmcp/agentic-forms.md",
      "size_in_bytes": 5146
    },
    {
      "relative_path": "guides/webmcp/agentic-javascript-tools.md",
      "size_in_bytes": 4372
    },
    {
      "relative_path": "guides/webmcp/webmcp.md",
      "size_in_bytes": 3762
    }
  ],
  "name": "modern-web-guidance",
  "skill_md_contents": "---\nname: modern-web-guidance\ndescription: |\n  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.\n\n  Trigger immediately for:\n  - UI/Layout: Modals, dialogs, popovers, Glassmorphism/backdrop-filters, anchor positioning, container queries, `:has()`, `:user-valid`.\n  - Scroll/Motion: View Transitions, Scroll-driven animations, scroll parallax/reveals.\n  - Performance: CWV (LCP, INP), content-visibility, Fetch Priority, image optimization.\n  - System/APIs: Local filesystem access, WebUSB, WebSockets sync, WebAssembly widgets.\n  - Frameworks: Adapting layout/styles in React, Vue, Angular.\n  - General Frontend: Forms, autofill, advanced inputs, custom scrollbars, modern component states, etc.\n\n  DO NOT trigger for:\n  - Backend: Database SQL, ORMs, Express API routes.\n  - Pipelines: CI/CD deployment, Docker, Actions.\n  - Generic: Local scripts (Python/Go tools), ESLint, Git.\n---\n\n# Modern Web Guidance\n\nA skill to search for specific web development use cases and retrieve their corresponding best practice guides.\n\n## When to use\n\nMust use this skill:\n- At the **start** of implementing any web feature.\n- Before creating a new component, to check if a standardized pattern already exists.\n- To avoid implementing ad-hoc solutions or loading large dependencies unnecessarily.\n\n## Usage Instructions\n\n### Step 1. Search Use Cases\n\nSearch with an action-oriented query summarizing what you want to achieve using the `search` command. Run `modern-web-guidance` directly with `npx`.\n\n```sh\nnpx -y modern-web-guidance@latest search \"<query>\" --skill-version 2026_09_04-7de96777\n```\n\n**Example Output**:\n```json\n[\n  {\n    \"id\": \"optimize-image-priority\",\n    \"description\": \"Optimize the loading priority of Largest Contentful Paint (LCP) candidate images.\",\n    \"category\": \"performance\",\n    \"featuresUsed\": [ \"Fetch priority\" ],\n    \"tokenCount\": 985,\n    \"similarity\": 0.7289\n  },\n  {\n    \"id\": \"defer-rendering-heavy-content\",\n    \"description\": \"Reduce rendering times in content-heavy web pages by deferring rendering for offscreen content.\",\n    \"category\": \"performance\",\n    \"featuresUsed\": [ \"content-visibility\", \"hidden=\\\"until-found\\\"\" ],\n    \"tokenCount\": 1250,\n    \"similarity\": 0.6961\n  }\n]\n```\n\n> **Note**: If search results are vague, return no matches, or show low similarity scores, run the `list` command to browse all guides:\n> ```sh\n> npx -y modern-web-guidance@latest list\n> ```\n\n---\n\n### Step 2. Retrieve Best Practices\n\nOnce 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.\n\n```sh\nnpx -y modern-web-guidance@latest retrieve \"<id>\"\n```\n\nIf the output is truncated, you must repeat the command but redirect to a file and read that file.\n\n**Example Output**:\n`The markdown content of the guide describing implementation steps...`\n\n---\n\n### Step 3. Verify Guidance Compliance\n\nWhen generating or modifying code, cross-check the implementation against the retrieved guide before concluding:\n- **Applicable Guidance & Fallbacks**: Ensure the relevant modern patterns and necessary fallback strategies from the guide are correctly applied, without forcing unrequested features.\n- **Task Fulfillment**: Confirm that the implementation fully satisfies the user's request.\n\n## Using npx / pnpx\n\n- Prefer `pnpx` over `npx` if `pnpm` is available (note: `pnpx` does not use the `-y` flag).\n- When requesting tool permissions, allowlist `npx -y modern-web-guidance@latest *` specifically (or `pnpx modern-web-guidance@latest *`), never bare `npx *` or `pnpx *`.\n- IMPORTANT: on Windows, using `npx` may fail. Use `npx.cmd ...` instead.\n- Fetching and running `modern-web-guidance` requires outbound network access. If running in a sandboxed, permission-gated, or approval-based environment (e.g., Codex, Claude Code), **proactively request approval/allowlisting for the command with network access BEFORE executing it the first time**, avoiding sandbox network timeouts.\n- In sandboxed environments where `~/.npm` is read-only or restricted, set `NPM_CONFIG_CACHE=/tmp/npm-cache`.\n- If the command hangs due to being offline, try running again in offline mode: `npx --offline …`.\n- 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.\n\n## Guidelines\n\n- Always search **first** to find the most relevant guides.\n- These guides are usually framework-agnostic; adapt them correctly to your setup.\n- Do not hallucinate guides or ignore them; they represent the preferred local standard for the user's project.\n\n## Interpreting Browser Support & Fallbacks\n\n* **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.\n* **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.\n  - For Baseline YYYY targets, a feature satisfies this target if its \"Baseline since\" date is <= YYYY.\n  - **Policy Examples**:\n    - _\"Do not implement feature fallbacks.\"_ (for exploratory prototypes of the cutting-edge web)\n    - _\"Safari 17.4+\"_ (for internal tools targeting macOS or Tauri-based desktop apps)\n    - _\"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)\n    - _\"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)\n* **Reactive Policy Discovery**: Watch for environmental cues to suggest documenting a policy in CLAUDE.md or AGENTS.md. Suggest this if the developer:\n  - Mentions building for a restricted runtime (e.g., Electron or Tauri).\n  - Explicitly excludes specific targets (e.g., \"we don't support Desktop Chrome\").\n  - Expresses hesitation about polyfill complexity, bundle size, or performance cost.\n  - Questions if a feature is safe to use without fallbacks.\n\n  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.`\n"
}