dsh-modern-web-guidance 0.3.0 → 0.4.0
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 +28 -23
- package/README.ru.md +24 -19
- package/README.zh.md +22 -18
- 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/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">
|
|
@@ -24,19 +24,20 @@
|
|
|
24
24
|
<a href="package.json"><img alt="Dependencies" src="https://img.shields.io/badge/dependencies-0-brightgreen"></a>
|
|
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
|
-
<img alt="
|
|
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-208-2563eb">
|
|
28
29
|
<img alt="DSH plugin" src="https://img.shields.io/badge/DSH-plugin-0d9488">
|
|
29
30
|
</p>
|
|
30
31
|
|
|
31
32
|
---
|
|
32
33
|
|
|
33
|
-
Coding models default to legacy web patterns because that is what their training data contains. This plugin puts
|
|
34
|
+
Coding models default to legacy web patterns because that is what their training data contains. This plugin puts 208
|
|
34
35
|
curated, token-efficient guides in front of the agent, plus an offline search tool, so it reaches for the current
|
|
35
36
|
platform API (native `<dialog>`/popover, anchor positioning, container queries, view transitions, scroll-driven
|
|
36
37
|
effects, `:has()`, passkeys, `fetchpriority`, …) instead of a JavaScript workaround or a library.
|
|
37
38
|
|
|
38
39
|
Everything runs locally: the guides ship inside the package, search is computed in-process, and there are no network
|
|
39
|
-
calls. Usage counters
|
|
40
|
+
calls. Usage counters have existed since 0.2.0, but they never leave the machine — see [Usage stats](#usage-stats).
|
|
40
41
|
|
|
41
42
|
## What you get
|
|
42
43
|
|
|
@@ -53,7 +54,7 @@ The catalog covers `css`, `ui-atoms`, `ui-components`, `ui-behaviors`, `forms`,
|
|
|
53
54
|
|
|
54
55
|
## Install
|
|
55
56
|
|
|
56
|
-
Published
|
|
57
|
+
Published on npm:
|
|
57
58
|
|
|
58
59
|
```shell
|
|
59
60
|
dsh plugin --profile desktop add dsh-modern-web-guidance
|
|
@@ -82,7 +83,7 @@ reach for it. There are three ways to work with it.
|
|
|
82
83
|
|
|
83
84
|
### 1. Just ask for web work (default)
|
|
84
85
|
|
|
85
|
-
The skill's routing description is "search
|
|
86
|
+
The skill's routing description is "search 208 use-case guides before writing HTML, CSS or client-side JavaScript", so
|
|
86
87
|
a normal request is enough — the agent searches, retrieves what it needs, and writes code against the current platform
|
|
87
88
|
API instead of a workaround:
|
|
88
89
|
|
|
@@ -109,7 +110,7 @@ Use this when you want the guarantee, or when the agent skipped the lookup on a
|
|
|
109
110
|
`web_guidance_list` answers "what is even in here" without spending a retrieval:
|
|
110
111
|
|
|
111
112
|
```text
|
|
112
|
-
web_guidance_list({}) →
|
|
113
|
+
web_guidance_list({}) → 208 guides across 17 categories
|
|
113
114
|
web_guidance_list({"category": "css"}) → the 18 CSS guides by id and title
|
|
114
115
|
web_guidance_search({"query": "view transition"}) → ranked shortlist before you retrieve
|
|
115
116
|
```
|
|
@@ -127,13 +128,13 @@ ones instead of an empty result.
|
|
|
127
128
|
| Light/dark theme switching | `dark mode toggle` | `dark-mode-toggle` |
|
|
128
129
|
| Sliding tab indicator without JavaScript | `anchor positioning` | `anchor-positioning-tab-underline` |
|
|
129
130
|
| Inline validation that doesn't nag while typing | `form validation after interaction` | `validate-input-after-interaction` |
|
|
130
|
-
| Passwordless sign-in | `passkey
|
|
131
|
+
| Passwordless sign-in | `passkey registration` | `passkey-registration` |
|
|
131
132
|
| Faster LCP | `prioritize hero image` | `fetchpriority` guides |
|
|
132
133
|
| A Manifest V3 extension | (skill) `chrome-extensions` | extension skill references |
|
|
133
134
|
|
|
134
135
|
## How search works
|
|
135
136
|
|
|
136
|
-
`lib/guidance.js` builds a BM25 index over the bundled corpus at first use (~1.
|
|
137
|
+
`lib/guidance.js` builds a BM25 index over the bundled corpus at first use (~1.9 MB of markdown, indexed in a few
|
|
137
138
|
hundred milliseconds and cached): title, id, description, `featuresUsed`, headings and body, with stopword filtering,
|
|
138
139
|
a small English stemmer, prefix expansion, and exact id/title containment bonuses. No embeddings, no bundled model, no
|
|
139
140
|
TensorFlow.js — the package stays small and every result is explainable.
|
|
@@ -158,12 +159,12 @@ sides are bounded:
|
|
|
158
159
|
has no dependencies and no lifecycle scripts, so nothing is fetched or run at install time. The only file it writes is
|
|
159
160
|
its own counters file (see [Usage stats](#usage-stats)).
|
|
160
161
|
- **Guides cannot smuggle commands.** Upstream's guide bodies cross-reference each other with
|
|
161
|
-
`npx -y modern-web-guidance@latest retrieve "…"` (
|
|
162
|
+
`npx -y modern-web-guidance@latest retrieve "…"` (197 occurrences in 64 guides). Those references are rewritten to
|
|
162
163
|
`web_guidance_retrieve({"ids":["…"]})` when the index loads, so nothing a model reads from the catalog asks it to
|
|
163
164
|
install and execute an unpinned remote package. The files on disk stay byte-identical to the pinned snapshot.
|
|
164
165
|
- **`web_guidance_retrieve` is bounded**: at most 10 guides and 120 000 characters per call, duplicate ids collapse, the
|
|
165
166
|
unknown-id echo stops at 10, and the renderer says explicitly what was not returned and to request it separately.
|
|
166
|
-
Retrieving all
|
|
167
|
+
Retrieving all 208 guides would hand back 1.9 MB (~475k tokens) in one result.
|
|
167
168
|
- **`web_guidance_search` is bounded**: the query is capped at 512 characters and 24 distinct terms before the lexical
|
|
168
169
|
scan. A 137 KB query used to block the host's event loop for seconds; the same shape now costs milliseconds.
|
|
169
170
|
- **The catalog cannot reach outside the package**: entry ids and categories must be slugs, and every resolved path is
|
|
@@ -177,8 +178,8 @@ while a defect is live.
|
|
|
177
178
|
|
|
178
179
|
## Usage stats
|
|
179
180
|
|
|
180
|
-
0.2.0 records what the three tools are actually asked for. The counters are local: no endpoint, no
|
|
181
|
-
third-party SDK, and nothing leaves the machine.
|
|
181
|
+
Since 0.2.0 the plugin records what the three tools are actually asked for. The counters are local: no endpoint, no
|
|
182
|
+
analytics service, no third-party SDK, and nothing leaves the machine.
|
|
182
183
|
|
|
183
184
|
The report is a human slash command, not a tool the agent can call:
|
|
184
185
|
|
|
@@ -200,12 +201,12 @@ Turn it off: set `enabled: false` in the plugin config — no listener is regist
|
|
|
200
201
|
|
|
201
202
|
## Sidebar panel
|
|
202
203
|
|
|
203
|
-
|
|
204
|
-
the same counters `/guidance-stats` prints, as a view:
|
|
204
|
+
The plugin adds a client half: a guidance icon in the left rail opens **Guidance Insights** in the central area. It
|
|
205
|
+
shows the same counters `/guidance-stats` prints, as a view:
|
|
205
206
|
|
|
206
207
|
- total calls and hit rate for the last 7 days
|
|
207
208
|
- the most frequent queries, with hit and miss counts
|
|
208
|
-
- category coverage — retrieved guides against the
|
|
209
|
+
- category coverage — retrieved guides against the 208 in the corpus
|
|
209
210
|
- the queries that found nothing
|
|
210
211
|
- how many guides were never retrieved
|
|
211
212
|
|
|
@@ -223,11 +224,14 @@ counters off (see [Usage stats](#usage-stats)).
|
|
|
223
224
|
|
|
224
225
|
## Updating the guide corpus
|
|
225
226
|
|
|
226
|
-
The corpus is a pinned snapshot of upstream `modern-web-guidance@0.0
|
|
227
|
-
(skill version `
|
|
227
|
+
The corpus is a pinned snapshot of upstream `modern-web-guidance@1.0.0`
|
|
228
|
+
(skill version `2026_11_09-5bcc021b`). To refresh it:
|
|
228
229
|
|
|
229
|
-
1. Download the upstream npm tarball
|
|
230
|
-
`
|
|
230
|
+
1. Download the upstream npm tarball. The index lives in `gen/`, not at the package root: copy
|
|
231
|
+
`package/skills/modern-web-guidance/gen/guides.json` to `data/guides.json` and
|
|
232
|
+
`package/skills/modern-web-guidance/guides/` to `data/guides/`. Ship only the guides listed in that index
|
|
233
|
+
(208 of the 209 files; `built-in-ai/prompt-api.md` is a byte-identical duplicate of `language-model.md` and
|
|
234
|
+
is not indexed). Copy `package/skills/chrome-extensions` to `data/skills/`.
|
|
231
235
|
2. Keep `data/skills/modern-web-guidance/SKILL.md` (this plugin's adapted version) — do not overwrite it with the
|
|
232
236
|
upstream CLI-oriented file.
|
|
233
237
|
3. Run `npm test` to confirm the corpus still loads and the smoke queries still rank correctly. The tests also fail if
|
|
@@ -240,7 +244,7 @@ The corpus is a pinned snapshot of upstream `modern-web-guidance@0.0.197`
|
|
|
240
244
|
npm test
|
|
241
245
|
```
|
|
242
246
|
|
|
243
|
-
|
|
247
|
+
68 tests across seven files: `guidance.test.mjs` covers the index, ranking, retrieval and the stemmer;
|
|
244
248
|
`plugin.test.mjs` covers tool and skill registration against a mocked Cordis context; `hardening.test.mjs` covers the
|
|
245
249
|
audit findings and fails on the pre-hardening code; `telemetry.test.mjs`, `report.test.mjs`, `store.test.mjs` and
|
|
246
250
|
`stats.test.mjs` cover the usage counters, their report, the durable store and the `/guidance-stats` wiring. In a
|
|
@@ -257,5 +261,6 @@ Apache-2.0. The guide corpus, the `chrome-extensions` skill, and the source of t
|
|
|
257
261
|
[GoogleChrome/modern-web-guidance](https://github.com/GoogleChrome/modern-web-guidance) (Copyright Google LLC,
|
|
258
262
|
Apache-2.0). See [NOTICE](NOTICE) for exactly what was copied, adapted, or removed.
|
|
259
263
|
|
|
260
|
-
This plugin is not an official Google product. It removes the upstream CLI
|
|
261
|
-
Clearcut telemetry watchdog the
|
|
264
|
+
This plugin is not an official Google product. It removes the upstream CLI (`modern-web.mjs`, `search.mjs`,
|
|
265
|
+
`legacy-scan.mjs`), the precomputed semantic-search tables under `gen/` and the Clearcut telemetry watchdog the
|
|
266
|
+
upstream CLI ships (0.x packages bundled a TensorFlow.js MiniLM model instead of those tables).
|
package/README.ru.md
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
</p>
|
|
11
11
|
|
|
12
12
|
<p align="center">
|
|
13
|
-
|
|
13
|
+
208 гайдов с Baseline-фолбэками · 3 инструмента · 2 скилла · ноль зависимостей · только локальные счётчики
|
|
14
14
|
</p>
|
|
15
15
|
|
|
16
16
|
<p align="center">
|
|
@@ -24,19 +24,20 @@
|
|
|
24
24
|
<a href="package.json"><img alt="Зависимости" src="https://img.shields.io/badge/dependencies-0-brightgreen"></a>
|
|
25
25
|
<a href="#безопасность-и-границы"><img alt="Телеметрия" 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="Тесты" src="https://github.com/metapeka/dsh-modern-web-guidance/actions/workflows/test.yml/badge.svg"></a>
|
|
27
|
-
<img alt="
|
|
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="Гайды" src="https://img.shields.io/badge/guides-208-2563eb">
|
|
28
29
|
<img alt="Плагин DSH" src="https://img.shields.io/badge/DSH-plugin-0d9488">
|
|
29
30
|
</p>
|
|
30
31
|
|
|
31
32
|
---
|
|
32
33
|
|
|
33
34
|
Модели по умолчанию пишут веб-код по своему обучающему срезу — то есть тянут паттерны пятилетней давности. Этот
|
|
34
|
-
плагин кладёт перед агентом
|
|
35
|
+
плагин кладёт перед агентом 208 курируемых, экономных по токенам гайдов и офлайн-поиск по ним, чтобы он брал актуальный
|
|
35
36
|
API платформы (нативные `<dialog>`/popover, anchor positioning, container queries, view transitions, scroll-driven
|
|
36
37
|
эффекты, `:has()`, passkeys, `fetchpriority`, …), а не костыль на JavaScript или библиотеку.
|
|
37
38
|
|
|
38
39
|
Всё работает локально: гайды лежат внутри пакета, поиск считается в процессе, сетевых вызовов нет. Счётчики
|
|
39
|
-
использования
|
|
40
|
+
использования есть с 0.2.0, но они не покидают машину — см. [Статистика использования](#статистика-использования).
|
|
40
41
|
|
|
41
42
|
## Что вы получаете
|
|
42
43
|
|
|
@@ -53,7 +54,7 @@ API платформы (нативные `<dialog>`/popover, anchor positioning,
|
|
|
53
54
|
|
|
54
55
|
## Установка
|
|
55
56
|
|
|
56
|
-
Из опубликованного
|
|
57
|
+
Из опубликованного пакета:
|
|
57
58
|
|
|
58
59
|
```shell
|
|
59
60
|
dsh plugin --profile desktop add dsh-modern-web-guidance
|
|
@@ -81,7 +82,7 @@ dsh plugin --profile desktop add file:E:/path/to/dsh-modern-web-guidance
|
|
|
81
82
|
|
|
82
83
|
### 1. Просто попросить сделать веб-задачу (обычный режим)
|
|
83
84
|
|
|
84
|
-
Описание скилла для роутинга — «искать по
|
|
85
|
+
Описание скилла для роутинга — «искать по 208 гайдам, прежде чем писать HTML, CSS или клиентский JavaScript», так что
|
|
85
86
|
обычного запроса достаточно: агент ищет, достаёт нужное и пишет код под актуальный API платформы вместо костыля:
|
|
86
87
|
|
|
87
88
|
```text
|
|
@@ -107,7 +108,7 @@ dsh plugin --profile desktop add file:E:/path/to/dsh-modern-web-guidance
|
|
|
107
108
|
`web_guidance_list` отвечает на вопрос «что там вообще есть», не тратя вызов на извлечение гайда:
|
|
108
109
|
|
|
109
110
|
```text
|
|
110
|
-
web_guidance_list({}) →
|
|
111
|
+
web_guidance_list({}) → 208 гайдов в 17 категориях
|
|
111
112
|
web_guidance_list({"category": "css"}) → 18 CSS-гайдов по id и заголовкам
|
|
112
113
|
web_guidance_search({"query": "view transition"}) → ранжированный список до извлечения
|
|
113
114
|
```
|
|
@@ -125,13 +126,13 @@ web_guidance_search({"query": "view transition"}) → ранжированный
|
|
|
125
126
|
| Переключение светлой и тёмной темы | `dark mode toggle` | `dark-mode-toggle` |
|
|
126
127
|
| Ползущий индикатор вкладки без JavaScript | `anchor positioning` | `anchor-positioning-tab-underline` |
|
|
127
128
|
| Валидация, которая не придирается во время ввода | `form validation after interaction` | `validate-input-after-interaction` |
|
|
128
|
-
| Вход без пароля | `passkey
|
|
129
|
+
| Вход без пароля | `passkey registration` | `passkey-registration` |
|
|
129
130
|
| Быстрый LCP | `prioritize hero image` | гайды про `fetchpriority` |
|
|
130
131
|
| Расширение Manifest V3 | (скилл) `chrome-extensions` | материалы скилла про расширения |
|
|
131
132
|
|
|
132
133
|
## Как работает поиск
|
|
133
134
|
|
|
134
|
-
`lib/guidance.js` при первом использовании строит BM25-индекс по встроенному корпусу (~1.
|
|
135
|
+
`lib/guidance.js` при первом использовании строит BM25-индекс по встроенному корпусу (~1.9 MB markdown, индексация
|
|
135
136
|
занимает несколько сотен миллисекунд, дальше кэш): заголовок, id, описание, `featuresUsed`, заголовки разделов и
|
|
136
137
|
текст, со стоп-словами, небольшим английским стеммером, префиксным расширением и бонусами за точное совпадение id или
|
|
137
138
|
заголовка. Никаких эмбеддингов, встроенной модели и TensorFlow.js — пакет остаётся компактным, а каждый результат
|
|
@@ -158,12 +159,12 @@ CLI через `npx`, сохраняет заметки про фреймвор
|
|
|
158
159
|
выполняется. Единственный файл, который он пишет, — собственный файл счётчиков (см.
|
|
159
160
|
[Статистика использования](#статистика-использования)).
|
|
160
161
|
- **Гайды не могут протащить команды.** В телах гайдов апстрима есть перекрёстные ссылки вида
|
|
161
|
-
`npx -y modern-web-guidance@latest retrieve "…"` (
|
|
162
|
+
`npx -y modern-web-guidance@latest retrieve "…"` (197 вхождений в 64 гайдах). При загрузке индекса они
|
|
162
163
|
переписываются в `web_guidance_retrieve({"ids":["…"]})`, так что ничто прочитанное моделью из каталога не просит
|
|
163
164
|
её установить и выполнить непинённый удалённый пакет. Файлы на диске остаются побайтово равны закреплённому срезу.
|
|
164
165
|
- **`web_guidance_retrieve` ограничен**: не более 10 гайдов и 120 000 символов за вызов, повторяющиеся id
|
|
165
166
|
схлопываются, эхо несуществующих id обрывается на 10, а рендерер прямо говорит, что не вернул и что нужно запросить
|
|
166
|
-
отдельно. Извлечение всех
|
|
167
|
+
отдельно. Извлечение всех 208 гайдов отдало бы 1.9 MB (~475k токенов) одним результатом.
|
|
167
168
|
- **`web_guidance_search` ограничен**: запрос обрезается до 512 символов и 24 уникальных термов до лексического
|
|
168
169
|
прохода. Запрос на 137 KB раньше блокировал event loop хоста на секунды; та же форма теперь стоит миллисекунды.
|
|
169
170
|
- **Каталог не может выйти за пределы пакета**: id и категории записей обязаны быть слагами, и каждый разрешённый путь
|
|
@@ -177,7 +178,7 @@ CLI через `npx`, сохраняет заметки про фреймвор
|
|
|
177
178
|
|
|
178
179
|
## Статистика использования
|
|
179
180
|
|
|
180
|
-
0.2.0 записывает, что именно спрашивают у трёх инструментов. Счётчики локальные: ни endpoint, ни аналитического
|
|
181
|
+
С версии 0.2.0 плагин записывает, что именно спрашивают у трёх инструментов. Счётчики локальные: ни endpoint, ни аналитического
|
|
181
182
|
сервиса, ни стороннего SDK — за пределы машины ничего не уходит.
|
|
182
183
|
|
|
183
184
|
Отчёт смотрит человек командой, а не инструментом, который может вызвать агент:
|
|
@@ -200,12 +201,12 @@ CLI через `npx`, сохраняет заметки про фреймвор
|
|
|
200
201
|
|
|
201
202
|
## Боковая панель
|
|
202
203
|
|
|
203
|
-
|
|
204
|
+
Плагин добавляет клиентскую часть: иконка в левом рейле открывает в центральной области панель
|
|
204
205
|
**Guidance Insights**. Это те же счётчики, что печатает `/guidance-stats`, только в виде экрана:
|
|
205
206
|
|
|
206
207
|
- вызовы и доля попаданий за последние 7 дней
|
|
207
208
|
- самые частые запросы с числом попаданий и промахов
|
|
208
|
-
- покрытие категорий — извлечённые гайды против
|
|
209
|
+
- покрытие категорий — извлечённые гайды против 208 в корпусе
|
|
209
210
|
- запросы, которые ничего не нашли
|
|
210
211
|
- сколько гайдов не извлекали ни разу
|
|
211
212
|
|
|
@@ -223,11 +224,14 @@ CLI через `npx`, сохраняет заметки про фреймвор
|
|
|
223
224
|
|
|
224
225
|
## Обновление корпуса гайдов
|
|
225
226
|
|
|
226
|
-
Корпус — это закреплённый срез апстрима `modern-web-guidance@0.0
|
|
227
|
+
Корпус — это закреплённый срез апстрима `modern-web-guidance@1.0.0` (версия скилла `2026_11_09-5bcc021b`). Чтобы
|
|
227
228
|
обновить:
|
|
228
229
|
|
|
229
|
-
1. Скачайте npm-тарбол
|
|
230
|
-
|
|
230
|
+
1. Скачайте npm-тарбол апстрима. Индекс лежит в `gen/`, а не в корне пакета: скопируйте
|
|
231
|
+
`package/skills/modern-web-guidance/gen/guides.json` в `data/guides.json`, а
|
|
232
|
+
`package/skills/modern-web-guidance/guides/` в `data/guides/`. Кладите в пакет только гайды из этого индекса
|
|
233
|
+
(208 из 209 файлов: `built-in-ai/prompt-api.md` — побайтовый дубль `language-model.md`, в индексе его нет).
|
|
234
|
+
`package/skills/chrome-extensions` скопируйте в `data/skills/`.
|
|
231
235
|
2. Сохраните `data/skills/modern-web-guidance/SKILL.md` — это адаптированная версия этого плагина, не перезаписывайте
|
|
232
236
|
её файлом апстрима, заточенным под CLI.
|
|
233
237
|
3. Запустите `npm test`, чтобы убедиться, что корпус грузится и дымовые запросы по-прежнему ранжируются правильно.
|
|
@@ -257,5 +261,6 @@ Apache-2.0. Корпус гайдов, скилл `chrome-extensions` и исх
|
|
|
257
261
|
[GoogleChrome/modern-web-guidance](https://github.com/GoogleChrome/modern-web-guidance) (Copyright Google LLC,
|
|
258
262
|
Apache-2.0). Что именно скопировано, адаптировано или удалено — см. [NOTICE](NOTICE).
|
|
259
263
|
|
|
260
|
-
Этот плагин не является официальным продуктом Google. Он убирает CLI
|
|
261
|
-
сторож телеметрии Clearcut, который
|
|
264
|
+
Этот плагин не является официальным продуктом Google. Он убирает CLI апстрима (`modern-web.mjs`, `search.mjs`,
|
|
265
|
+
`legacy-scan.mjs`), предвычисленные таблицы семантического поиска в `gen/` и сторож телеметрии Clearcut, который
|
|
266
|
+
поставляется с этим CLI (в пакетах 0.x вместо этих таблиц лежала модель TensorFlow.js MiniLM).
|
package/README.zh.md
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
</p>
|
|
11
11
|
|
|
12
12
|
<p align="center">
|
|
13
|
-
|
|
13
|
+
208 篇带 Baseline 降级方案的指南 · 3 个工具 · 2 个技能 · 零依赖 · 仅本地统计
|
|
14
14
|
</p>
|
|
15
15
|
|
|
16
16
|
<p align="center">
|
|
@@ -24,17 +24,18 @@
|
|
|
24
24
|
<a href="package.json"><img alt="依赖" src="https://img.shields.io/badge/dependencies-0-brightgreen"></a>
|
|
25
25
|
<a href="#安全与边界"><img alt="遥测" 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="测试" src="https://github.com/metapeka/dsh-modern-web-guidance/actions/workflows/test.yml/badge.svg"></a>
|
|
27
|
-
<img alt="
|
|
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="指南" src="https://img.shields.io/badge/guides-208-2563eb">
|
|
28
29
|
<img alt="DSH 插件" src="https://img.shields.io/badge/DSH-plugin-0d9488">
|
|
29
30
|
</p>
|
|
30
31
|
|
|
31
32
|
---
|
|
32
33
|
|
|
33
|
-
编程模型默认会写出过时的 Web 代码,因为它们的训练数据里就是这些内容。这个插件把
|
|
34
|
+
编程模型默认会写出过时的 Web 代码,因为它们的训练数据里就是这些内容。这个插件把 208 篇经过筛选、节省 token 的
|
|
34
35
|
指南放到智能体面前,并提供离线检索,让它优先使用当前平台 API(原生 `<dialog>`/popover、锚点定位、容器查询、视图
|
|
35
36
|
过渡、滚动驱动效果、`:has()`、passkey、`fetchpriority` 等),而不是自己写 JavaScript 变通方案或引入库。
|
|
36
37
|
|
|
37
|
-
|
|
38
|
+
一切都本地运行:指南随包分发,检索在进程内计算,没有网络请求。自 0.2.0 起就有使用统计,但它不离开这台机器 ——
|
|
38
39
|
见[使用统计](#使用统计)。
|
|
39
40
|
|
|
40
41
|
## 你得到什么
|
|
@@ -53,7 +54,7 @@
|
|
|
53
54
|
|
|
54
55
|
## 安装
|
|
55
56
|
|
|
56
|
-
|
|
57
|
+
从已发布的包安装:
|
|
57
58
|
|
|
58
59
|
```shell
|
|
59
60
|
dsh plugin --profile desktop add dsh-modern-web-guidance
|
|
@@ -80,7 +81,7 @@ bundle 只插入一行(`modern-web-guidance`),不需要构建步骤、依
|
|
|
80
81
|
|
|
81
82
|
### 1. 直接提出 Web 开发需求(默认方式)
|
|
82
83
|
|
|
83
|
-
技能的路由描述就是“在写 HTML、CSS 或客户端 JavaScript 之前先检索
|
|
84
|
+
技能的路由描述就是“在写 HTML、CSS 或客户端 JavaScript 之前先检索 208 篇用例指南”,所以一句平常的请求就够了 ——
|
|
84
85
|
智能体会先检索、取回所需内容,然后按当前平台 API 写代码,而不是写变通方案:
|
|
85
86
|
|
|
86
87
|
```text
|
|
@@ -106,7 +107,7 @@ bundle 只插入一行(`modern-web-guidance`),不需要构建步骤、依
|
|
|
106
107
|
`web_guidance_list` 回答“到底有什么”,不必花一次取回去看全文:
|
|
107
108
|
|
|
108
109
|
```text
|
|
109
|
-
web_guidance_list({}) → 17 个分类共
|
|
110
|
+
web_guidance_list({}) → 17 个分类共 208 篇指南
|
|
110
111
|
web_guidance_list({"category": "css"}) → 18 篇 CSS 指南的 id 与标题
|
|
111
112
|
web_guidance_search({"query": "view transition"}) → 取回之前的排序候选列表
|
|
112
113
|
```
|
|
@@ -123,13 +124,13 @@ web_guidance_search({"query": "view transition"}) → 取回之前的排序候
|
|
|
123
124
|
| 深浅色主题切换 | `dark mode toggle` | `dark-mode-toggle` |
|
|
124
125
|
| 不用 JavaScript 的滑动标签指示条 | `anchor positioning` | `anchor-positioning-tab-underline` |
|
|
125
126
|
| 输入过程中不打扰人的行内校验 | `form validation after interaction` | `validate-input-after-interaction` |
|
|
126
|
-
| 免密码登录 | `passkey
|
|
127
|
+
| 免密码登录 | `passkey registration` | `passkey-registration` |
|
|
127
128
|
| 更快的 LCP | `prioritize hero image` | `fetchpriority` 相关指南 |
|
|
128
129
|
| Manifest V3 扩展 | (技能)`chrome-extensions` | 扩展技能的参考文件 |
|
|
129
130
|
|
|
130
131
|
## 检索如何工作
|
|
131
132
|
|
|
132
|
-
`lib/guidance.js` 在首次使用时为内置语料建立 BM25 索引(约 1.
|
|
133
|
+
`lib/guidance.js` 在首次使用时为内置语料建立 BM25 索引(约 1.9 MB markdown,几百毫秒建好并缓存):标题、id、
|
|
133
134
|
描述、`featuresUsed`、各级标题与正文,配合停用词过滤、小型英文词干器、前缀扩展,以及精确 id/标题命中的加权。
|
|
134
135
|
没有 embedding、没有内置模型、没有 TensorFlow.js —— 包保持小巧,每个结果都能解释。
|
|
135
136
|
|
|
@@ -149,11 +150,11 @@ web_guidance_search({"query": "view transition"}) → 取回之前的排序候
|
|
|
149
150
|
- **无网络、无执行,只有一次本地写入。** 插件只导入本地的 `node:fs`、`node:path` 和 `node:url`;没有依赖,也没有
|
|
150
151
|
lifecycle 脚本,因此安装时不会下载或运行任何东西。它唯一写入的文件是自己的计数文件(见[使用统计](#使用统计))。
|
|
151
152
|
- **指南里夹带不了命令。** 上游指南正文之间用
|
|
152
|
-
`npx -y modern-web-guidance@latest retrieve "…"` 互相引用(
|
|
153
|
+
`npx -y modern-web-guidance@latest retrieve "…"` 互相引用(197 处,分布在 64 篇指南里)。建立索引时这些引用会被
|
|
153
154
|
改写成 `web_guidance_retrieve({"ids":["…"]})`,所以模型从目录里读到的内容不会要求它安装并执行一个未锁定版本的
|
|
154
155
|
远程包。磁盘上的文件仍与锁定快照逐字节一致。
|
|
155
156
|
- **`web_guidance_retrieve` 有上限**:每次调用最多 10 篇、120 000 字符;重复 id 会去重;未知 id 的回显最多 10
|
|
156
|
-
|
|
157
|
+
个;渲染器会明确说明哪些没有返回、需要单独请求。一次取回全部 208 篇会返回 1.9 MB(约 475k token)。
|
|
157
158
|
- **`web_guidance_search` 有上限**:在进入词法扫描前,查询被截断到 512 字符和 24 个不同词项。此前一个 137 KB
|
|
158
159
|
的查询会阻塞宿主事件循环数秒;同样形状的查询现在只需毫秒级。
|
|
159
160
|
- **目录无法越出包外**:条目 id 与分类必须是 slug,每个解析出的路径都会校验是否位于数据目录内。被篡改的
|
|
@@ -166,7 +167,7 @@ web_guidance_search({"query": "view transition"}) → 取回之前的排序候
|
|
|
166
167
|
|
|
167
168
|
## 使用统计
|
|
168
169
|
|
|
169
|
-
0.2.0
|
|
170
|
+
自 0.2.0 起,插件记录三个工具到底被问了什么。计数只在本地:没有上报端点、没有分析服务、没有第三方 SDK,任何东西都不离开这台
|
|
170
171
|
机器。
|
|
171
172
|
|
|
172
173
|
查看用的是给人用的斜杠命令,不是智能体能调用的工具:
|
|
@@ -188,12 +189,12 @@ web_guidance_search({"query": "view transition"}) → 取回之前的排序候
|
|
|
188
189
|
|
|
189
190
|
## 侧边栏面板
|
|
190
191
|
|
|
191
|
-
|
|
192
|
+
插件增加了客户端部分:左侧栏的图标会在中央区域打开 **Guidance Insights** 面板。它展示的就是
|
|
192
193
|
`/guidance-stats` 打印的那些计数,只是换成了界面:
|
|
193
194
|
|
|
194
195
|
- 最近 7 天的调用次数与命中率
|
|
195
196
|
- 最常出现的查询,以及各自的命中与未命中次数
|
|
196
|
-
- 分类覆盖情况 —— 已取回的指南对
|
|
197
|
+
- 分类覆盖情况 —— 已取回的指南对 208 篇语料
|
|
197
198
|
- 什么都没找到的查询
|
|
198
199
|
- 有多少篇指南从未被取回过
|
|
199
200
|
|
|
@@ -209,10 +210,13 @@ web_guidance_search({"query": "view transition"}) → 取回之前的排序候
|
|
|
209
210
|
|
|
210
211
|
## 更新指南语料
|
|
211
212
|
|
|
212
|
-
语料是上游 `modern-web-guidance@0.0
|
|
213
|
+
语料是上游 `modern-web-guidance@1.0.0` 的锁定快照(技能版本 `2026_11_09-5bcc021b`)。更新步骤:
|
|
213
214
|
|
|
214
|
-
1. 下载上游 npm tarball
|
|
215
|
-
`package/skills/
|
|
215
|
+
1. 下载上游 npm tarball。索引位于 `gen/` 而不是包根目录:把
|
|
216
|
+
`package/skills/modern-web-guidance/gen/guides.json` 复制为 `data/guides.json`,把
|
|
217
|
+
`package/skills/modern-web-guidance/guides/` 复制到 `data/guides/`。只放入索引里列出的指南
|
|
218
|
+
(209 个文件中的 208 个:`built-in-ai/prompt-api.md` 是 `language-model.md` 的逐字节副本,索引里没有它)。
|
|
219
|
+
把 `package/skills/chrome-extensions` 复制到 `data/skills/`。
|
|
216
220
|
2. 保留 `data/skills/modern-web-guidance/SKILL.md`(本插件的改编版本),不要用面向 CLI 的上游文件覆盖它。
|
|
217
221
|
3. 运行 `npm test`,确认语料仍能加载、冒烟查询排序仍然正确。如果有任何被返回的指南让智能体去运行上游 CLI,
|
|
218
222
|
测试同样会失败,所以刷新语料后不需要手工再清理一遍 npx —— 改写发生在加载时(`lib/guidance.js`,
|
|
@@ -240,4 +244,4 @@ Apache-2.0。指南语料、`chrome-extensions` 技能以及改编版 `SKILL.md`
|
|
|
240
244
|
[GoogleChrome/modern-web-guidance](https://github.com/GoogleChrome/modern-web-guidance)(Copyright Google LLC,
|
|
241
245
|
Apache-2.0)。具体复制、改编与删除了哪些内容,见 [NOTICE](NOTICE)。
|
|
242
246
|
|
|
243
|
-
本插件不是 Google 官方产品。它移除了上游 CLI
|
|
247
|
+
本插件不是 Google 官方产品。它移除了上游 CLI(`modern-web.mjs`、`search.mjs`、`legacy-scan.mjs`)、`gen/` 下预计算的语义检索表,以及上游 CLI 附带的 Clearcut 遥测看门狗(0.x 版本的包里放的是 TensorFlow.js MiniLM 模型,而不是这些表)。
|
package/data/corpus.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "
|
|
3
|
-
"snapshotDate": "2026-
|
|
4
|
-
}
|
|
2
|
+
"version": "2026_11_09-5bcc021b",
|
|
3
|
+
"snapshotDate": "2026-11-09"
|
|
4
|
+
}
|