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