dsh-modern-web-guidance 0.3.1 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/NOTICE +13 -10
- package/README.md +234 -38
- package/README.ru.md +232 -39
- package/README.zh.md +222 -38
- package/client.js +45 -1
- package/data/corpus.json +3 -3
- package/data/guides/accessibility/accessible-error-announcement.md +170 -76
- package/data/guides/built-in-ai/language-detection.md +3 -0
- package/data/guides/built-in-ai/language-model.md +46 -12
- package/data/guides/built-in-ai/summarizer.md +5 -1
- package/data/guides/css/animate-to-intrinsic-sizes.md +12 -6
- package/data/guides/css/atrule-support-conditionals.md +1 -3
- package/data/guides/css/calculate-with-intrinsic-sizes.md +13 -3
- package/data/guides/css/child-state-based-styling.md +2 -2
- package/data/guides/css/css-layout.md +2 -0
- package/data/guides/css/fluid-scaling.md +2 -0
- package/data/guides/css/responsive-design.md +1 -1
- package/data/guides/css/style-parent-with-has.md +184 -39
- package/data/guides/forms/animated-select-picker.md +13 -7
- package/data/guides/forms/autofill-address-form.md +6 -2
- package/data/guides/forms/autofill-highlight-inputs.md +45 -27
- package/data/guides/forms/autofill-payment-form.md +6 -2
- package/data/guides/forms/autofill-sign-in-form.md +8 -4
- package/data/guides/forms/autofill-sign-up-form.md +8 -4
- package/data/guides/forms/brand-consistent-forms.md +1 -1
- package/data/guides/forms/branded-select-styling.md +1 -1
- package/data/guides/forms/custom-select-picker-layouts.md +6 -7
- package/data/guides/forms/forms.md +75 -40
- package/data/guides/forms/required-field-feedback.md +154 -51
- package/data/guides/forms/rich-media-picker.md +55 -4
- package/data/guides/forms/select-menu-interaction.md +152 -20
- package/data/guides/forms/validate-input-after-interaction.md +169 -21
- package/data/guides/html/form-associated-custom-elements.md +10 -0
- package/data/guides/html/html.md +44 -25
- package/data/guides/html/web-components.md +1 -1
- package/data/guides/performance/break-up-long-tasks.md +1 -1
- package/data/guides/performance/out-of-order-html-streaming.md +43 -20
- package/data/guides/performance/performance.md +1 -1
- package/data/guides/pwa/install-web-app.md +400 -0
- package/data/guides/pwa/migrate-web-app-origin.md +6 -8
- package/data/guides/security/passkey-authentication.md +28 -15
- package/data/guides/security/passkey-conditional-create.md +18 -13
- package/data/guides/security/passkey-management.md +113 -39
- package/data/guides/security/passkey-reauthentication.md +24 -10
- package/data/guides/security/passkey-registration.md +18 -13
- package/data/guides/security/passkeys.md +1 -1
- package/data/guides/security/quick-sign-ins.md +18 -12
- package/data/guides/security/restrict-outbound-connections.md +1 -1
- package/data/guides/security/security.md +3 -3
- package/data/guides/ui-atoms/carousel-slide-effects.md +41 -21
- package/data/guides/ui-atoms/component-specific-light-dark-theme.md +5 -0
- package/data/guides/ui-atoms/icons.md +2 -1
- package/data/guides/ui-atoms/position-aware-tooltips.md +31 -16
- package/data/guides/ui-atoms/pull-to-reveal.md +1 -0
- package/data/guides/ui-atoms/responsive-table.md +1 -0
- package/data/guides/ui-atoms/scroll-position-aware-elements.md +1 -1
- package/data/guides/ui-atoms/scroll-progress-indicator.md +4 -6
- package/data/guides/ui-atoms/scrollability-affordance-hints.md +218 -66
- package/data/guides/ui-atoms/shrinking-header-on-scroll.md +4 -3
- package/data/guides/ui-atoms/single-line-overflow.md +393 -0
- package/data/guides/ui-atoms/state-aware-sticky-headers.md +11 -2
- package/data/guides/ui-atoms/viewport-aware-dropdowns.md +66 -22
- package/data/guides/ui-behaviors/2d-panning.md +8 -6
- package/data/guides/ui-behaviors/anchor-positioning-tab-underline.md +3 -4
- package/data/guides/ui-behaviors/animate-element-entry-exit.md +5 -4
- package/data/guides/ui-behaviors/animate-to-from-top-layer.md +35 -33
- package/data/guides/ui-behaviors/carousel-snap-highlights.md +15 -6
- package/data/guides/ui-behaviors/custom-button-actions.md +7 -1
- package/data/guides/ui-behaviors/declarative-dialog-popover-control.md +9 -91
- package/data/guides/ui-behaviors/directional-navigation-transitions.md +1 -1
- package/data/guides/ui-behaviors/drag-and-drop.md +106 -0
- package/data/guides/ui-behaviors/drag.md +39 -5
- package/data/guides/ui-behaviors/dynamic-sort.md +129 -0
- package/data/guides/ui-behaviors/group-element-transitions.md +103 -91
- package/data/guides/ui-behaviors/highlight-text-ranges.md +20 -11
- package/data/guides/ui-behaviors/interactive-content-reveal.md +12 -5
- package/data/guides/ui-behaviors/interest-triggered-action-previews.md +2 -2
- package/data/guides/ui-behaviors/interest-triggered-tooltips.md +150 -40
- package/data/guides/ui-behaviors/light-dismiss-a-dialog.md +3 -0
- package/data/guides/ui-behaviors/motion.md +30 -35
- package/data/guides/ui-behaviors/move-dom-element-without-losing-state.md +15 -5
- package/data/guides/ui-behaviors/parallax-scroll-effects.md +8 -5
- package/data/guides/ui-behaviors/scroll-completion-effects.md +6 -0
- package/data/guides/ui-behaviors/scroll-entry-exit-effects.md +43 -12
- package/data/guides/ui-behaviors/scroll-snap-realtime-feedback.md +64 -1
- package/data/guides/ui-behaviors/scroll-snap-state-sync.md +10 -1
- package/data/guides/ui-behaviors/scrollytelling.md +37 -33
- package/data/guides/ui-behaviors/sortable-table.md +140 -0
- package/data/guides/ui-behaviors/spatial-navigation.md +10 -1
- package/data/guides/ui-behaviors/swipe-to-remove.md +125 -27
- package/data/guides/ui-behaviors/swipe-to-reveal.md +78 -18
- package/data/guides/ui-components/accordion.md +343 -0
- package/data/guides/ui-components/app-menus.md +216 -0
- package/data/guides/ui-components/breadcrumbs.md +168 -0
- package/data/guides/ui-components/carousel.md +176 -0
- package/data/guides/ui-components/checkbox.md +2 -0
- package/data/guides/ui-components/copy-button.md +219 -0
- package/data/guides/ui-components/dialog.md +5 -13
- package/data/guides/ui-components/hovercard.md +126 -22
- package/data/guides/ui-components/menu.md +113 -108
- package/data/guides/ui-components/navbar.md +281 -0
- package/data/guides/ui-components/navigation-drawer.md +119 -55
- package/data/guides/ui-components/persistent-app-tours.md +92 -45
- package/data/guides/ui-components/persistent-toast-notifications.md +138 -17
- package/data/guides/ui-components/progress-ring.md +20 -8
- package/data/guides/ui-components/scrollspy.md +19 -4
- package/data/guides/ui-components/spinner.md +14 -4
- package/data/guides/ui-components/stack-drill-down.md +60 -17
- package/data/guides/ui-components/tabs.md +371 -0
- package/data/guides/ui-components/toolbar.md +277 -0
- package/data/guides/user-experience/content-first-noise-reduction.md +6 -14
- package/data/guides/user-experience/form-factor-adaptation.md +108 -0
- package/data/guides/user-experience/natural-interactions.md +155 -0
- package/data/guides/visual-design/adapt-scrollbar-to-contrast-preferences.md +5 -6
- package/data/guides/visual-design/apply-webgl-shaders.md +1 -1
- package/data/guides/visual-design/browser-ui-theming.md +6 -2
- package/data/guides/visual-design/color.md +8 -8
- package/data/guides/visual-design/contrast-color.md +8 -19
- package/data/guides/visual-design/custom-text-decorations.md +2 -1
- package/data/guides/visual-design/customize-scrollbar-color-and-thickness.md +2 -0
- package/data/guides/visual-design/dark-mode.md +7 -1
- package/data/guides/visual-design/export-html-media-from-canvas.md +1 -1
- package/data/guides/visual-design/expose-canvas-content-to-browser-features.md +1 -1
- package/data/guides/visual-design/interactive-content-in-3d-scenes.md +1 -1
- package/data/guides/visual-design/shaped-cutouts.md +5 -3
- package/data/guides/visual-design/typography.md +5 -4
- package/data/guides.json +496 -207
- package/data/skills/modern-web-guidance/SKILL.md +25 -8
- package/index.js +21 -5
- package/lib/guidance.js +50 -4
- package/locale/zh.json +6 -0
- package/package.json +3 -3
package/NOTICE
CHANGED
|
@@ -7,11 +7,12 @@ This package bundles and adapts material from GoogleChrome/modern-web-guidance
|
|
|
7
7
|
licensed under the Apache License, Version 2.0.
|
|
8
8
|
|
|
9
9
|
Bundled without modification:
|
|
10
|
-
- data/guides.json and data/guides/**/*.md — the Modern Web Guidance
|
|
11
|
-
(version 0.0
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
index
|
|
10
|
+
- data/guides.json and data/guides/**/*.md — the Modern Web Guidance corpus
|
|
11
|
+
(version 1.0.0, skill version 2026_11_09-5bcc021b). data/guides.json is upstream's
|
|
12
|
+
gen/guides.json, copied unchanged; the guides are the files that index lists. One upstream
|
|
13
|
+
file, data/guides/built-in-ai/prompt-api.md, is not shipped: it is a byte-identical duplicate
|
|
14
|
+
of language-model.md and is absent from the upstream index, so the corpus is 208 files for
|
|
15
|
+
208 index entries (the upstream package itself carries 209 guide files).
|
|
15
16
|
- data/skills/chrome-extensions/** — the Chrome extensions skill
|
|
16
17
|
(skill version 2026_08_06-8570fe7c)
|
|
17
18
|
|
|
@@ -20,12 +21,14 @@ Adapted:
|
|
|
20
21
|
the agent to call the plugin's local tools instead of the upstream `npx` CLI, and it
|
|
21
22
|
drops the upstream CLI workflow and network-approval sections. The guidance content itself
|
|
22
23
|
is unchanged. The file carries an in-header modification notice.
|
|
23
|
-
- Cross-references inside the guide bodies are rewritten at load time, not on disk: the
|
|
24
|
-
occurrences of `npx -y modern-web-guidance@latest retrieve "id"` across
|
|
24
|
+
- Cross-references inside the guide bodies are rewritten at load time, not on disk: the 197
|
|
25
|
+
occurrences of `npx -y modern-web-guidance@latest retrieve "id"` across 64 guides become
|
|
25
26
|
`web_guidance_retrieve({"ids":["id"]})`, so a retrieved guide never tells an agent to fetch and
|
|
26
27
|
execute an unpinned remote package. The markdown files keep matching the pinned upstream
|
|
27
28
|
snapshot byte for byte.
|
|
28
29
|
|
|
29
|
-
Removed: the upstream `modern-web-guidance` CLI (search.mjs, modern-web.mjs
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
Removed: the upstream `modern-web-guidance` CLI (search.mjs, modern-web.mjs, legacy-scan.mjs and the
|
|
31
|
+
TypeScript-based scan engine it embeds), the precomputed semantic-search tables under `gen/`
|
|
32
|
+
(query-words.*, guide-chunks.*) and the Google Clearcut telemetry watchdog (`watchdog/`). The 0.x
|
|
33
|
+
packages bundled a TensorFlow.js MiniLM embedder instead of those tables; neither is shipped here.
|
|
34
|
+
This package performs local lexical search instead and sends no telemetry.
|
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
</p>
|
|
11
11
|
|
|
12
12
|
<p align="center">
|
|
13
|
-
|
|
13
|
+
208 Baseline-aware guides · 3 tools · 2 skills · zero dependencies · local counters only
|
|
14
14
|
</p>
|
|
15
15
|
|
|
16
16
|
<p align="center">
|
|
@@ -25,21 +25,38 @@
|
|
|
25
25
|
<a href="#security-and-limits"><img alt="Telemetry" src="https://img.shields.io/badge/telemetry-local--only-brightgreen"></a>
|
|
26
26
|
<a href="https://github.com/metapeka/dsh-modern-web-guidance/actions/workflows/test.yml"><img alt="tests" src="https://github.com/metapeka/dsh-modern-web-guidance/actions/workflows/test.yml/badge.svg"></a>
|
|
27
27
|
<a href="https://www.npmjs.com/package/dsh-modern-web-guidance"><img alt="npm" src="https://img.shields.io/npm/v/dsh-modern-web-guidance"></a>
|
|
28
|
-
<img alt="Guides" src="https://img.shields.io/badge/guides-
|
|
28
|
+
<img alt="Guides" src="https://img.shields.io/badge/guides-208-2563eb">
|
|
29
29
|
<img alt="DSH plugin" src="https://img.shields.io/badge/DSH-plugin-0d9488">
|
|
30
|
+
<a href="https://www.npmjs.com/package/dsh-modern-web-guidance"><img alt="npm downloads" src="https://img.shields.io/npm/dm/dsh-modern-web-guidance"></a>
|
|
31
|
+
<a href="https://github.com/metapeka/dsh-modern-web-guidance/releases"><img alt="release" src="https://img.shields.io/github/v/release/metapeka/dsh-modern-web-guidance?label=release"></a>
|
|
30
32
|
</p>
|
|
31
33
|
|
|
34
|
+
<details>
|
|
35
|
+
<summary>📑 Contents</summary>
|
|
36
|
+
|
|
37
|
+
**Start here** · [What you get](#what-you-get) · [Install](#install) · [How to use](#how-to-use) · [Which tool when](#which-tool-when)
|
|
38
|
+
|
|
39
|
+
**Understand it** · [vs Google's package](#vs-google) · [How search works](#how-search-works) · [Catalog map](#catalog-map) · [Experimental guides](#experimental-guides)
|
|
40
|
+
|
|
41
|
+
**Operate it** · [Security and limits](#security-and-limits) · [Usage stats](#usage-stats) · [Sidebar panel](#sidebar-panel) · [Configuration](#configuration) · [Updating the corpus](#updating-the-guide-corpus)
|
|
42
|
+
|
|
43
|
+
**Everything else** · [FAQ](#faq) · [Roadmap](#roadmap) · [Docs map](#docs-map) · [Development](#development) · [Publishing](#publishing) · [License](#attribution-and-license)
|
|
44
|
+
|
|
45
|
+
</details>
|
|
46
|
+
|
|
32
47
|
---
|
|
33
48
|
|
|
34
|
-
Coding models default to legacy web patterns because that is what their training data contains. This plugin puts
|
|
49
|
+
Coding models default to legacy web patterns because that is what their training data contains. This plugin puts 208
|
|
35
50
|
curated, token-efficient guides in front of the agent, plus an offline search tool, so it reaches for the current
|
|
36
51
|
platform API (native `<dialog>`/popover, anchor positioning, container queries, view transitions, scroll-driven
|
|
37
52
|
effects, `:has()`, passkeys, `fetchpriority`, …) instead of a JavaScript workaround or a library.
|
|
38
53
|
|
|
39
54
|
Everything runs locally: the guides ship inside the package, search is computed in-process, and there are no network
|
|
40
|
-
calls. Usage counters
|
|
55
|
+
calls. Usage counters have existed since 0.2.0, but they never leave the machine — see [Usage stats](#usage-stats).
|
|
41
56
|
|
|
42
|
-
|
|
57
|
+
<a id="what-you-get"></a>
|
|
58
|
+
|
|
59
|
+
## 🧰 What you get
|
|
43
60
|
|
|
44
61
|
| Kind | Name | Description |
|
|
45
62
|
|---|---|---|
|
|
@@ -52,7 +69,9 @@ calls. Usage counters do exist in 0.2.0, but they never leave the machine — se
|
|
|
52
69
|
The catalog covers `css`, `ui-atoms`, `ui-components`, `ui-behaviors`, `forms`, `html`, `js`, `accessibility`,
|
|
53
70
|
`visual-design`, `security`, `performance`, `built-in-ai`, `pwa`, `wasm`, `webmcp`, `privacy`, and `user-experience`.
|
|
54
71
|
|
|
55
|
-
|
|
72
|
+
<a id="install"></a>
|
|
73
|
+
|
|
74
|
+
## 🚀 Install
|
|
56
75
|
|
|
57
76
|
Published on npm:
|
|
58
77
|
|
|
@@ -76,14 +95,27 @@ From an agent session, `plugin_manager` with `action: "install_bundle"` and the
|
|
|
76
95
|
does the same thing. The bundle inserts one row (`modern-web-guidance`) and needs no build step, no dependencies, and no
|
|
77
96
|
native modules.
|
|
78
97
|
|
|
79
|
-
|
|
98
|
+
<a id="how-to-use"></a>
|
|
99
|
+
|
|
100
|
+
## 🧭 How to use
|
|
80
101
|
|
|
81
102
|
Nothing has to be wired up: the plugin registers itself, and the `modern-web-guidance` skill tells the agent when to
|
|
82
103
|
reach for it. There are three ways to work with it.
|
|
83
104
|
|
|
105
|
+
<a id="which-tool-when"></a>
|
|
106
|
+
|
|
107
|
+
### Which tool when
|
|
108
|
+
|
|
109
|
+
| You want | Call | Comes back |
|
|
110
|
+
| --- | --- | --- |
|
|
111
|
+
| "how is this done today?" | `web_guidance_search` | ranked guide ids for a 2–5 word capability query, optional category filter |
|
|
112
|
+
| "show me the guide" | `web_guidance_retrieve` | full markdown, up to 10 guides or 120 000 characters per call |
|
|
113
|
+
| "what is even in here?" | `web_guidance_list` | counts per category, or ids and titles for one category |
|
|
114
|
+
| "is the catalog actually being used?" | `/guidance-stats` | the local report as text; `--json` is what the panel reads |
|
|
115
|
+
|
|
84
116
|
### 1. Just ask for web work (default)
|
|
85
117
|
|
|
86
|
-
The skill's routing description is "search
|
|
118
|
+
The skill's routing description is "search 208 use-case guides before writing HTML, CSS or client-side JavaScript", so
|
|
87
119
|
a normal request is enough — the agent searches, retrieves what it needs, and writes code against the current platform
|
|
88
120
|
API instead of a workaround:
|
|
89
121
|
|
|
@@ -110,7 +142,7 @@ Use this when you want the guarantee, or when the agent skipped the lookup on a
|
|
|
110
142
|
`web_guidance_list` answers "what is even in here" without spending a retrieval:
|
|
111
143
|
|
|
112
144
|
```text
|
|
113
|
-
web_guidance_list({}) →
|
|
145
|
+
web_guidance_list({}) → 208 guides across 17 categories
|
|
114
146
|
web_guidance_list({"category": "css"}) → the 18 CSS guides by id and title
|
|
115
147
|
web_guidance_search({"query": "view transition"}) → ranked shortlist before you retrieve
|
|
116
148
|
```
|
|
@@ -128,13 +160,43 @@ ones instead of an empty result.
|
|
|
128
160
|
| Light/dark theme switching | `dark mode toggle` | `dark-mode-toggle` |
|
|
129
161
|
| Sliding tab indicator without JavaScript | `anchor positioning` | `anchor-positioning-tab-underline` |
|
|
130
162
|
| Inline validation that doesn't nag while typing | `form validation after interaction` | `validate-input-after-interaction` |
|
|
131
|
-
| Passwordless sign-in | `passkey
|
|
163
|
+
| Passwordless sign-in | `passkey registration` | `passkey-registration` |
|
|
132
164
|
| Faster LCP | `prioritize hero image` | `fetchpriority` guides |
|
|
133
165
|
| A Manifest V3 extension | (skill) `chrome-extensions` | extension skill references |
|
|
134
166
|
|
|
135
|
-
|
|
167
|
+
<a id="vs-google"></a>
|
|
168
|
+
|
|
169
|
+
## 🆚 vs Google's package
|
|
170
|
+
|
|
171
|
+
This plugin **vendors Google's corpus** — the same 208 guides, byte-identical — and adds the layer
|
|
172
|
+
DeepSeek Harness needs: model-facing tools, a sidebar panel and no runtime dependencies. It does not
|
|
173
|
+
reimplement their agent, and it deliberately drops the engines that would not survive a plugin's size
|
|
174
|
+
and security budget. The honest split:
|
|
175
|
+
|
|
176
|
+
| | Google `modern-web-guidance` | This plugin |
|
|
177
|
+
| --- | --- | --- |
|
|
178
|
+
| Shape | npm package: a CLI plus skills, run as `npx -y modern-web-guidance@latest …` | DSH plugin: 3 tools, 2 skills, a sidebar panel |
|
|
179
|
+
| Audience | any agent that can run a shell command | DeepSeek Harness sessions |
|
|
180
|
+
| Guide corpus | 208 indexed guides (209 `.md` files, one byte-identical duplicate) | the same 208, byte-identical, snapshot `2026_11_09-5bcc021b` |
|
|
181
|
+
| Lookup | precomputed assets in `gen/` — quantized word vectors (`query-words.i8`, 7.47 MB) and chunk embeddings, 9.16 MB together | BM25 built in-process from `guides.json` and the guide bodies: no assets, no model download (measured 29/30 top-1 on a 30-query probe) |
|
|
182
|
+
| Runtime dependencies | Node plus the CLI engines shipped in the package | none |
|
|
183
|
+
| Network | `npx` fetches the package, then works locally | never — the corpus is inside the package |
|
|
184
|
+
| Legacy scan | a 4.99 MB `legacy-scan` engine with a four-step scan → verify → report → modernize workflow | not shipped; planned as a dependency-free, report-only regex scanner in 0.5.0 |
|
|
185
|
+
| Experimental guides | gated inside the CLI | `[experimental]` marker in `web_guidance_search`, warning banner in `web_guidance_retrieve` |
|
|
186
|
+
| Usage insight | none | local counters, `/guidance-stats`, and the sidebar panel |
|
|
187
|
+
| Languages | English guides | the same guides; docs in EN/RU/ZH, panel in EN/RU/ZH |
|
|
188
|
+
| Size | — | 254 files, 854 kB packed, 2.5 MB unpacked |
|
|
136
189
|
|
|
137
|
-
|
|
190
|
+
What this means in practice: if you work outside DeepSeek Harness, use their package — it is the
|
|
191
|
+
reference implementation and it owns the corpus. Inside Harness you want the tools in the model's tool
|
|
192
|
+
list, an install with no build step and no network, and a panel that says whether the guides are being
|
|
193
|
+
used; that is this plugin.
|
|
194
|
+
|
|
195
|
+
<a id="how-search-works"></a>
|
|
196
|
+
|
|
197
|
+
## 🧠 How search works
|
|
198
|
+
|
|
199
|
+
`lib/guidance.js` builds a BM25 index over the bundled corpus at first use (~1.9 MB of markdown, indexed in a few
|
|
138
200
|
hundred milliseconds and cached): title, id, description, `featuresUsed`, headings and body, with stopword filtering,
|
|
139
201
|
a small English stemmer, prefix expansion, and exact id/title containment bonuses. No embeddings, no bundled model, no
|
|
140
202
|
TensorFlow.js — the package stays small and every result is explainable.
|
|
@@ -143,14 +205,73 @@ Compared with the upstream semantic search, phrase-like queries (`"light dismiss
|
|
|
143
205
|
the specific guide first; broad topical queries can differ in ordering. If a search misses, `web_guidance_list` shows
|
|
144
206
|
what the catalog contains.
|
|
145
207
|
|
|
146
|
-
|
|
208
|
+
<a id="catalog-map"></a>
|
|
209
|
+
|
|
210
|
+
## 🗺 Catalog map
|
|
211
|
+
|
|
212
|
+
Everything is local, so the catalog is only as useful as the agent's ability to find the right guide.
|
|
213
|
+
`web_guidance_list` prints these counts at runtime; this is what they look like at snapshot
|
|
214
|
+
`2026_11_09-5bcc021b`.
|
|
215
|
+
|
|
216
|
+
<details>
|
|
217
|
+
<summary>Counts per category (208 guides, 17 categories)</summary>
|
|
218
|
+
|
|
219
|
+
| Category | Guides | Category | Guides |
|
|
220
|
+
| --- | --- | --- | --- |
|
|
221
|
+
| `ui-behaviors` | 40 | `html` | 8 |
|
|
222
|
+
| `performance` | 26 | `js` | 5 |
|
|
223
|
+
| `ui-components` | 22 | `accessibility` | 4 |
|
|
224
|
+
| `visual-design` | 22 | `built-in-ai` | 4 |
|
|
225
|
+
| `forms` | 19 | `user-experience` | 3 |
|
|
226
|
+
| `css` | 18 | `webmcp` | 3 |
|
|
227
|
+
| `security` | 17 | `pwa` | 2 |
|
|
228
|
+
| `ui-atoms` | 13 | `privacy` · `wasm` | 1 · 1 |
|
|
229
|
+
| | | **total** | **208** |
|
|
230
|
+
|
|
231
|
+
</details>
|
|
232
|
+
|
|
233
|
+
<a id="experimental-guides"></a>
|
|
234
|
+
|
|
235
|
+
## 🧪 Experimental guides
|
|
236
|
+
|
|
237
|
+
Eighteen of the 208 guides describe platform features that are not safe to assume: eight sit behind an
|
|
238
|
+
Origin Trial in Chrome, and ten are volatile in a single engine. Upstream flags them in its index; this
|
|
239
|
+
plugin surfaces the flag where the agent will actually see it:
|
|
240
|
+
|
|
241
|
+
- `web_guidance_search` appends `[experimental]` to the hit;
|
|
242
|
+
- `web_guidance_retrieve` opens the guide with a `> [!WARNING]` banner naming the reason;
|
|
243
|
+
- the guide body itself is untouched — byte-identical to upstream — and the banner counts against the
|
|
244
|
+
120 000-character budget, not against the 10-guide limit.
|
|
245
|
+
|
|
246
|
+
<details>
|
|
247
|
+
<summary>The 18 flagged guides</summary>
|
|
248
|
+
|
|
249
|
+
**Origin Trial (8)** — the feature ships behind a trial token: `verify-email-ownership`,
|
|
250
|
+
`apply-webgl-shaders`, `export-html-media-from-canvas`, `expose-canvas-content-to-browser-features`,
|
|
251
|
+
`interactive-content-in-3d-scenes`, `agentic-forms`, `agentic-javascript-tools`, `webmcp`.
|
|
252
|
+
|
|
253
|
+
**Volatile in one engine (10)** — one engine implements it, or the API is still moving:
|
|
254
|
+
`language-detection`, `language-model`, `summarizer`, `translator`, `out-of-order-html-streaming`,
|
|
255
|
+
`client-side-encryption`, `digital-signatures`, `restrict-outbound-connections`, `2d-panning`,
|
|
256
|
+
`custom-text-decorations`.
|
|
257
|
+
|
|
258
|
+
</details>
|
|
259
|
+
|
|
260
|
+
Treat a flagged guide as "the shape of the solution, not a guarantee". Feature-detect what it
|
|
261
|
+
describes, and tell the user which part is behind a flag before shipping it.
|
|
262
|
+
|
|
263
|
+
<a id="skills"></a>
|
|
264
|
+
|
|
265
|
+
## 🪄 Skills
|
|
147
266
|
|
|
148
267
|
The `modern-web-guidance` skill body is adapted from upstream: it tells the agent to call this plugin's tools instead
|
|
149
268
|
of the `npx` CLI, keeps the framework/SSR/DOM notes and the Baseline fallback policy, drops the CLI and telemetry
|
|
150
269
|
sections, and states the trust boundary — retrieved guides are reference material, not instructions. The
|
|
151
270
|
`chrome-extensions` skill is bundled unchanged and loads its `references/` files from the skill directory.
|
|
152
271
|
|
|
153
|
-
|
|
272
|
+
<a id="security-and-limits"></a>
|
|
273
|
+
|
|
274
|
+
## 🛡 Security and limits
|
|
154
275
|
|
|
155
276
|
The corpus is third-party text that ends up in a model's context, and tool arguments come from that model, so both
|
|
156
277
|
sides are bounded:
|
|
@@ -159,12 +280,12 @@ sides are bounded:
|
|
|
159
280
|
has no dependencies and no lifecycle scripts, so nothing is fetched or run at install time. The only file it writes is
|
|
160
281
|
its own counters file (see [Usage stats](#usage-stats)).
|
|
161
282
|
- **Guides cannot smuggle commands.** Upstream's guide bodies cross-reference each other with
|
|
162
|
-
`npx -y modern-web-guidance@latest retrieve "…"` (
|
|
283
|
+
`npx -y modern-web-guidance@latest retrieve "…"` (197 occurrences in 64 guides). Those references are rewritten to
|
|
163
284
|
`web_guidance_retrieve({"ids":["…"]})` when the index loads, so nothing a model reads from the catalog asks it to
|
|
164
285
|
install and execute an unpinned remote package. The files on disk stay byte-identical to the pinned snapshot.
|
|
165
286
|
- **`web_guidance_retrieve` is bounded**: at most 10 guides and 120 000 characters per call, duplicate ids collapse, the
|
|
166
287
|
unknown-id echo stops at 10, and the renderer says explicitly what was not returned and to request it separately.
|
|
167
|
-
Retrieving all
|
|
288
|
+
Retrieving all 208 guides would hand back 1.9 MB (~475k tokens) in one result.
|
|
168
289
|
- **`web_guidance_search` is bounded**: the query is capped at 512 characters and 24 distinct terms before the lexical
|
|
169
290
|
scan. A 137 KB query used to block the host's event loop for seconds; the same shape now costs milliseconds.
|
|
170
291
|
- **The catalog cannot reach outside the package**: entry ids and categories must be slugs, and every resolved path is
|
|
@@ -176,10 +297,12 @@ Both properties are covered by `test/hardening.test.mjs`, which fails on the pre
|
|
|
176
297
|
reports plus runnable repros — lives in [`audit/`](audit/), and the repro scripts under `audit/repro/` exit non-zero
|
|
177
298
|
while a defect is live.
|
|
178
299
|
|
|
179
|
-
|
|
300
|
+
<a id="usage-stats"></a>
|
|
301
|
+
|
|
302
|
+
## 📊 Usage stats
|
|
180
303
|
|
|
181
|
-
0.2.0 records what the three tools are actually asked for. The counters are local: no endpoint, no
|
|
182
|
-
third-party SDK, and nothing leaves the machine.
|
|
304
|
+
Since 0.2.0 the plugin records what the three tools are actually asked for. The counters are local: no endpoint, no
|
|
305
|
+
analytics service, no third-party SDK, and nothing leaves the machine.
|
|
183
306
|
|
|
184
307
|
The report is a human slash command, not a tool the agent can call:
|
|
185
308
|
|
|
@@ -199,14 +322,16 @@ defaults to 90 days, and `--reset --yes` erases it.
|
|
|
199
322
|
|
|
200
323
|
Turn it off: set `enabled: false` in the plugin config — no listener is registered and no file is written.
|
|
201
324
|
|
|
202
|
-
|
|
325
|
+
<a id="sidebar-panel"></a>
|
|
203
326
|
|
|
204
|
-
|
|
205
|
-
|
|
327
|
+
## 🖥 Sidebar panel
|
|
328
|
+
|
|
329
|
+
The plugin adds a client half: a guidance icon in the left rail opens **Guidance Insights** in the central area. It
|
|
330
|
+
shows the same counters `/guidance-stats` prints, as a view:
|
|
206
331
|
|
|
207
332
|
- total calls and hit rate for the last 7 days
|
|
208
333
|
- the most frequent queries, with hit and miss counts
|
|
209
|
-
- category coverage — retrieved guides against the
|
|
334
|
+
- category coverage — retrieved guides against the 208 in the corpus
|
|
210
335
|
- the queries that found nothing
|
|
211
336
|
- how many guides were never retrieved
|
|
212
337
|
|
|
@@ -216,47 +341,118 @@ The panel is read-only. It never changes a counter, never leaves the machine, an
|
|
|
216
341
|
tools — the same three tools stay exactly three. `/guidance-stats` remains the text and `--json` version for the
|
|
217
342
|
terminal and for the agent; the panel is that report as a view.
|
|
218
343
|
|
|
219
|
-
|
|
344
|
+
<a id="configuration"></a>
|
|
345
|
+
|
|
346
|
+
## ⚙️ Configuration
|
|
220
347
|
|
|
221
348
|
The plugin needs no configuration to work. It registers its tools and skills on the host context and is inert when the
|
|
222
349
|
profile has no `tools` or `skills` service. The one setting is `enabled` on the plugin row: `false` turns the local
|
|
223
350
|
counters off (see [Usage stats](#usage-stats)).
|
|
224
351
|
|
|
225
|
-
|
|
352
|
+
<a id="updating-the-guide-corpus"></a>
|
|
226
353
|
|
|
227
|
-
|
|
228
|
-
(skill version `2026_10_30-58d055df`). To refresh it:
|
|
354
|
+
## 🔄 Updating the guide corpus
|
|
229
355
|
|
|
230
|
-
|
|
231
|
-
|
|
356
|
+
The corpus is a pinned snapshot of upstream `modern-web-guidance@1.0.0`
|
|
357
|
+
(skill version `2026_11_09-5bcc021b`). To refresh it:
|
|
358
|
+
|
|
359
|
+
1. Download the upstream npm tarball. The index lives in `gen/`, not at the package root: copy
|
|
360
|
+
`package/skills/modern-web-guidance/gen/guides.json` to `data/guides.json` and
|
|
361
|
+
`package/skills/modern-web-guidance/guides/` to `data/guides/`. Ship only the guides listed in that index
|
|
362
|
+
(208 of the 209 files; `built-in-ai/prompt-api.md` is a byte-identical duplicate of `language-model.md` and
|
|
363
|
+
is not indexed). Copy `package/skills/chrome-extensions` to `data/skills/`.
|
|
232
364
|
2. Keep `data/skills/modern-web-guidance/SKILL.md` (this plugin's adapted version) — do not overwrite it with the
|
|
233
365
|
upstream CLI-oriented file.
|
|
234
366
|
3. Run `npm test` to confirm the corpus still loads and the smoke queries still rank correctly. The tests also fail if
|
|
235
367
|
any served guide tells the agent to run the upstream CLI, so a refreshed corpus needs no manual de-CLI pass — the
|
|
236
368
|
rewrite happens at load time (`lib/guidance.js`, `CLI_REFERENCE`).
|
|
237
369
|
|
|
238
|
-
|
|
370
|
+
<a id="faq"></a>
|
|
371
|
+
|
|
372
|
+
## ❓ FAQ
|
|
373
|
+
|
|
374
|
+
**The plugin is installed but I see nothing.** The bundle inserts one row (`modern-web-guidance`) and
|
|
375
|
+
needs no build step. Restart DSH after `dsh plugin --profile desktop add …`; the tools appear in the
|
|
376
|
+
next session's tool list, and the panel as an icon in the left rail.
|
|
377
|
+
|
|
378
|
+
**Search returns nothing useful.** Queries are 2–5 words describing a capability ("light dismiss
|
|
379
|
+
dialog", "view transition", "container query"), not sentences. If a query still misses, call
|
|
380
|
+
`web_guidance_list` for the category overview and retrieve by id from there.
|
|
381
|
+
|
|
382
|
+
**Why did a result say `[experimental]`?** The guide's platform feature is behind an Origin Trial or
|
|
383
|
+
is volatile in one engine — see [Experimental guides](#experimental-guides). The guide is still the
|
|
384
|
+
right shape; feature-detect it before shipping.
|
|
385
|
+
|
|
386
|
+
**Does anything leave my machine?** No. The corpus is inside the package, search is computed
|
|
387
|
+
in-process, and there are no network calls. The usage counters are local files and can be switched off
|
|
388
|
+
with `enabled: false` — see [Security and limits](#security-and-limits) and [ADR 0001](docs/adr/0001-local-telemetry.md).
|
|
389
|
+
|
|
390
|
+
**Google says 203 use cases. Why does this say 208?** Upstream's own count is 203 *use-case* guides;
|
|
391
|
+
the index has 208 entries, the extra five being the discipline overviews (`accessibility`, `forms`,
|
|
392
|
+
`html`, `performance`, `security`). This plugin ships what the index ships.
|
|
393
|
+
|
|
394
|
+
**Which DSH versions work?** `engines.dsh` is `>=0.2.0-rc.1 <0.3.0-0` and Node `>=22.19.0`. The tools
|
|
395
|
+
work on their own; the panel additionally needs the host's `slots`, `locale` and `remote` services.
|
|
396
|
+
|
|
397
|
+
<a id="roadmap"></a>
|
|
398
|
+
|
|
399
|
+
## 🚦 Roadmap
|
|
400
|
+
|
|
401
|
+
| Release | State | What it is |
|
|
402
|
+
| --- | --- | --- |
|
|
403
|
+
| 0.4.0 | shipped | the upstream v1.0.0 corpus (208 guides) plus experimental marking |
|
|
404
|
+
| 0.4.1 | this pass | docs: navigation, the comparison, the catalog map |
|
|
405
|
+
| 0.5.0 | next | `legacy-scan` as a fourth tool: 30–35 regex rules ported from upstream's engine, explicit paths only, report-only output. Design and verdict: [docs/notes/legacy-scan-feasibility.md](docs/notes/legacy-scan-feasibility.md) |
|
|
406
|
+
|
|
407
|
+
Deliberately **not** planned: shipping upstream's 9.16 MB embedding tables, or its 4.99 MB
|
|
408
|
+
`legacy-scan` engine with a bundled TypeScript compiler. Both would break "zero runtime dependencies,
|
|
409
|
+
no network, no code generation" for a gain the lexical index does not show.
|
|
410
|
+
|
|
411
|
+
<a id="docs-map"></a>
|
|
412
|
+
|
|
413
|
+
## 📚 Docs map
|
|
414
|
+
|
|
415
|
+
| Document | Read it when |
|
|
416
|
+
| --- | --- |
|
|
417
|
+
| [`docs/README.md`](docs/README.md) | you want the full map of this repository |
|
|
418
|
+
| [`PUBLISHING.md`](PUBLISHING.md) | you are releasing: npm rules, trusted publishing, the release ritual |
|
|
419
|
+
| [`docs/releases/README.md`](docs/releases/README.md) | you are writing release notes — the house style lives here |
|
|
420
|
+
| [`AGENTS.md`](AGENTS.md) | you are an agent working in this repo: CI, client half, conventions |
|
|
421
|
+
| [`GLOSSARY.md`](GLOSSARY.md) | a term in this codebase is unclear |
|
|
422
|
+
| [`NOTICE`](NOTICE) | attribution: what came from upstream and what was left out, and why |
|
|
423
|
+
| [`audit/`](audit) | you want the 0.1.x security, corpus and bug audits as they were written |
|
|
424
|
+
| [`docs/adr/`](docs/adr) | you want the decisions: local telemetry, and what followed |
|
|
425
|
+
| [`docs/notes/`](docs/notes) | you want the research behind a release (upstream diffs, feasibility studies, plans) |
|
|
426
|
+
|
|
427
|
+
<a id="development"></a>
|
|
428
|
+
|
|
429
|
+
## 🧑💻 Development
|
|
239
430
|
|
|
240
431
|
```shell
|
|
241
432
|
npm test
|
|
242
433
|
```
|
|
243
434
|
|
|
244
|
-
|
|
245
|
-
`plugin.test.mjs`
|
|
246
|
-
|
|
247
|
-
`
|
|
435
|
+
`npm test` runs the suite: `guidance.test.mjs` covers the index, ranking, retrieval and the stemmer;
|
|
436
|
+
`plugin.test.mjs` mounts the plugin against a fake Cordis context; `hardening.test.mjs` guards the
|
|
437
|
+
security invariants; `report.test.mjs`, `stats.test.mjs`, `store.test.mjs` and `telemetry.test.mjs`
|
|
438
|
+
cover the counter pipeline; `client-locales.test.mjs` keeps the panel's three dictionaries in sync. In a
|
|
248
439
|
sandbox that forbids child processes, run the files directly (`node test/hardening.test.mjs`).
|
|
249
440
|
|
|
250
|
-
|
|
441
|
+
<a id="publishing"></a>
|
|
442
|
+
|
|
443
|
+
## 📦 Publishing
|
|
251
444
|
|
|
252
445
|
Marketplace submission and npm steps are documented in [PUBLISHING.md](PUBLISHING.md); the prepared awesome-dsh-plugin
|
|
253
446
|
entry lives in [`market/awesome-dsh-plugin.yml`](market/awesome-dsh-plugin.yml).
|
|
254
447
|
|
|
255
|
-
|
|
448
|
+
<a id="attribution-and-license"></a>
|
|
449
|
+
|
|
450
|
+
## ⚖️ Attribution and license
|
|
256
451
|
|
|
257
452
|
Apache-2.0. The guide corpus, the `chrome-extensions` skill, and the source of the adapted `SKILL.md` come from
|
|
258
453
|
[GoogleChrome/modern-web-guidance](https://github.com/GoogleChrome/modern-web-guidance) (Copyright Google LLC,
|
|
259
454
|
Apache-2.0). See [NOTICE](NOTICE) for exactly what was copied, adapted, or removed.
|
|
260
455
|
|
|
261
|
-
This plugin is not an official Google product. It removes the upstream CLI
|
|
262
|
-
Clearcut telemetry watchdog the
|
|
456
|
+
This plugin is not an official Google product. It removes the upstream CLI (`modern-web.mjs`, `search.mjs`,
|
|
457
|
+
`legacy-scan.mjs`), the precomputed semantic-search tables under `gen/` and the Clearcut telemetry watchdog the
|
|
458
|
+
upstream CLI ships (0.x packages bundled a TensorFlow.js MiniLM model instead of those tables).
|