{"id":20770,"plugin_id":"plugins_6aa7f81337c481918a5ee55e13498c40","kind":"skill","collection_source":null,"comparison_source":null,"observed_at":"2026-09-30T23:16:29.144Z","digest":"0e6a6abf8e01786f20a84db3fba1da738a4b0e78585b5c8929c63dcb31ff9a05","against":null,"payload":{"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"},"changes":[],"summary":"First saved snapshot. No earlier version is available for comparison.","summary_kind":"deterministic","summary_metadata":{}}