@yojahny/wp-design-library 1.1.0 → 1.1.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.
@@ -0,0 +1,68 @@
1
+ ---
2
+ slug: mengto-documentary-brutalist-agency
3
+ title: 'MengTo Skills: documentary brutalist agency, billboard type and black/white chapters'
4
+ tier: inspiration
5
+ source:
6
+ kind: open
7
+ url: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/documentary-brutalist-agency
8
+ license: MIT (MengTo/Skills); demo HTML measured live, may be ported
9
+ captured:
10
+ method: both
11
+ at: '2026-09-21'
12
+ tool: wp-design-library@1.1.0
13
+ captures:
14
+ - method: both
15
+ input: http://127.0.0.1:4173/documentary-brutalist-agency/demo/index.html
16
+ artifacts:
17
+ - key: entries/mengto-documentary-brutalist-agency/1/strip.webp
18
+ bytes: 261706
19
+ sha256: c2c874e969b53dbb32c6407e48f116ee3257d5e6ca14b780320fc53449480e40
20
+ uploaded: true
21
+ - key: entries/mengto-documentary-brutalist-agency/1/measure.json
22
+ bytes: 907
23
+ sha256: e7ecd70fba72026d0d8f80b91bcf93dae53b4ab005e5ffc2e159a43ac70f8b52
24
+ uploaded: true
25
+ - key: entries/mengto-documentary-brutalist-agency/1/screen-1440.png
26
+ bytes: 183022
27
+ sha256: b6b66c46f635c466f00868a07f5024c4af2a03d4ac1e05a0db02a12c3fcbc2de
28
+ uploaded: true
29
+ - key: entries/mengto-documentary-brutalist-agency/1/screen-390.png
30
+ bytes: 61551
31
+ sha256: d28003a69a2c23675281d63166891d97639186b92809646388d9269e18475444
32
+ uploaded: true
33
+ media: {}
34
+ roles:
35
+ - hero
36
+ - explainer
37
+ feel:
38
+ - dark
39
+ - brutalist
40
+ - editorial
41
+ palette:
42
+ canvas: '#0b0b0a'
43
+ ink: '#f2efe6'
44
+ accent: '#b8624e'
45
+ type:
46
+ display: Impact, "Arial Narrow", sans-serif
47
+ body: Arial, Helvetica, sans-serif
48
+ motion:
49
+ devices:
50
+ - reveal
51
+ - wipe
52
+ - parallax
53
+ notes: >-
54
+ Static at capture: no animation measured across nav, hero and philosophy chapter. Devices are the ones the source
55
+ skill prescribes for a build in this idiom, not ones observed — 500-760ms masked entrances (wipe), decisive
56
+ black/white chapter cuts with sticky contrast changes at boundaries (reveal, one reading transition at a time), and
57
+ collage parallax capped under 5% (parallax). It forbids continuous parallax, smooth-scroll theatre and decorative
58
+ loops.
59
+ ported_from: null
60
+ ---
61
+
62
+ A billboard hero: three uppercase lines in a compressed grotesk (Impact stack) fill the viewport edge to edge, with three small framed abstract images layered behind and through the letters. The nav is a hairline-ruled bar of tracked uppercase labels. A single tracked paragraph sits bottom-left, a circular scroll affordance bottom-right. The next chapter cuts to warm off-white paper with a small index label (OUR POSITION · 01) and one enormous editorial statement set in a neutral grotesk at roughly a third of the viewport height, ragged, no measure discipline — the statement is the section.
63
+
64
+ Useful for: a hero role where the type is the image and any photography is subordinate; an explainer role that is one sentence at billboard scale. The accent here is eyeballed from the collage frames (muted terracotta), not a UI token — the page has no coloured control. From the recorded frames, not measured.
65
+
66
+ ## Sources
67
+
68
+ - MengTo/Skills, `agent-skills/web-design/documentary-brutalist-agency` (MIT). Demo HTML served locally and measured live at 1440 and 390.
@@ -0,0 +1,68 @@
1
+ ---
2
+ slug: mengto-editorial-portfolio-chapters
3
+ title: 'MengTo Skills: editorial portfolio in chapters, near-black frame and one colour field per project'
4
+ tier: inspiration
5
+ source:
6
+ kind: open
7
+ url: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/editorial-portfolio-chapters
8
+ license: MIT (MengTo/Skills); demo HTML measured live, may be ported
9
+ captured:
10
+ method: both
11
+ at: '2026-09-21'
12
+ tool: wp-design-library@1.1.0
13
+ captures:
14
+ - method: both
15
+ input: http://127.0.0.1:4173/editorial-portfolio-chapters/demo/index.html
16
+ artifacts:
17
+ - key: entries/mengto-editorial-portfolio-chapters/1/strip.webp
18
+ bytes: 153042
19
+ sha256: c42d3ed9ab55ac486cf78abb29bf5f5921b242ca167f8c475fbcc33c439920d4
20
+ uploaded: true
21
+ - key: entries/mengto-editorial-portfolio-chapters/1/measure.json
22
+ bytes: 1376
23
+ sha256: 4e24e54185fb3ded7d3068240ce0e0d747f1391c0bf41a6b40b8e842f7174d48
24
+ uploaded: true
25
+ - key: entries/mengto-editorial-portfolio-chapters/1/screen-1440.png
26
+ bytes: 172310
27
+ sha256: e522369a2099a8024b0f61b55531ac883a33264a6763b5595a2ad114b88098d0
28
+ uploaded: true
29
+ - key: entries/mengto-editorial-portfolio-chapters/1/screen-390.png
30
+ bytes: 48463
31
+ sha256: 1f9acbb2a6d47056f0d4ad10e09ac4b86c81f25f8e23fbeab0652b1a44c5d10d
32
+ uploaded: true
33
+ media: {}
34
+ roles:
35
+ - hero
36
+ - proof
37
+ feel:
38
+ - dark
39
+ - editorial
40
+ - premium
41
+ palette:
42
+ canvas: '#10100f'
43
+ ink: '#f3f0e8'
44
+ accent: '#0c0c0b'
45
+ type:
46
+ display: Arial, Helvetica, sans-serif
47
+ body: Arial, Helvetica, sans-serif
48
+ motion:
49
+ devices:
50
+ - reveal
51
+ - stagger
52
+ - parallax
53
+ notes: >-
54
+ Static at capture: nothing measured moving in the six sections (three project shells are empty in the demo). Devices
55
+ are what the source skill prescribes, not what was observed — 500-760ms section entrances with direct children
56
+ staggered 45-70ms on cubic-bezier(.22,.61,.36,1) (reveal, stagger), parallax under 5% so the hero stays still enough
57
+ to study (parallax), nav background tied to section boundaries. It forbids fast card choreography, large parallax
58
+ and decorative motion loops.
59
+ ported_from: null
60
+ ---
61
+
62
+ A near-black frame with a compact pill nav (WORK · SERVICES / STUDIO · CONTACT). The hero is one framed rectangle inset from the page edges, carrying four diagonal colour bands — terracotta, navy, pale blue, olive — behind the studio wordmark MORROW set huge in a bold grotesk that picks up the band colours where it overlaps them. A vertical running head sits in the left margin; one short positioning line bottom-right. Below, the first project chapter cuts to a pale lavender field: a small index label (SELECTED WORK · 01 / 04), the project title After Light at display scale bottom-left, one tall image right, a View the project link.
63
+
64
+ Useful for: a hero where the identity is a colour field plus a wordmark rather than a photograph; a proof role done as chapters — one project per colour field, the field itself doing the separation instead of cards. From the recorded frames, not measured. Only one of the four project chapters is populated in the demo.
65
+
66
+ ## Sources
67
+
68
+ - MengTo/Skills, `agent-skills/web-design/editorial-portfolio-chapters` (MIT). Demo HTML served locally and measured live at 1440 and 390.
@@ -0,0 +1,67 @@
1
+ ---
2
+ slug: mengto-technical-wireframe-info-layout
3
+ title: 'MengTo Skills: monochrome technical wireframe, annotated object with connector callouts'
4
+ tier: inspiration
5
+ source:
6
+ kind: open
7
+ url: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/technical-wireframe-info-layout
8
+ license: MIT (MengTo/Skills); demo HTML measured live, may be ported
9
+ captured:
10
+ method: both
11
+ at: '2026-09-21'
12
+ tool: wp-design-library@1.1.0
13
+ captures:
14
+ - method: both
15
+ input: http://127.0.0.1:4174/technical-wireframe-info-layout/index.html
16
+ artifacts:
17
+ - key: entries/mengto-technical-wireframe-info-layout/1/strip.webp
18
+ bytes: 176466
19
+ sha256: 7cd02c89ef89a924af8f21bc127790a81f4dfdd563a95486aa5d3c54557a8edb
20
+ uploaded: true
21
+ - key: entries/mengto-technical-wireframe-info-layout/1/measure.json
22
+ bytes: 1275
23
+ sha256: d12b7f46e153611eb4163663566603b82b1d215c294ae9989c8ae5a046f94377
24
+ uploaded: true
25
+ - key: entries/mengto-technical-wireframe-info-layout/1/screen-1440.png
26
+ bytes: 127432
27
+ sha256: 99294323d6f00eb6b41983b84ec92bd881433d8504da7c9c3ed05d6a696c6e74
28
+ uploaded: true
29
+ - key: entries/mengto-technical-wireframe-info-layout/1/screen-390.png
30
+ bytes: 40370
31
+ sha256: 51559ff1074a0e8f81a02edc8575f1a01e958cbcd775d1c1b340eeb6057e4e2b
32
+ uploaded: true
33
+ media: {}
34
+ roles:
35
+ - explainer
36
+ - capability
37
+ feel:
38
+ - dark
39
+ - minimal
40
+ - cold
41
+ - saas
42
+ palette:
43
+ canvas: '#000000'
44
+ ink: '#d4d4d8'
45
+ accent: '#71717a'
46
+ type:
47
+ display: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
48
+ body: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
49
+ motion:
50
+ devices:
51
+ - reveal
52
+ - count
53
+ notes: >-
54
+ Static at capture: a still instrument panel across top bar, framed diagram and status footer. Devices are the ones
55
+ that would carry it in a build, not ones observed — the metrics and the timestamped diagnostic stream want to count
56
+ in and tick (count); the diagram planes and annotations want a quiet entrance (reveal). Nothing here wants tilt,
57
+ magnet or parallax; the skill's own avoid list rejects motion that turns the diagram into noise.
58
+ ported_from: null
59
+ ---
60
+
61
+ A monochrome engineering panel on pure black, framed by a hairline border inset from the viewport with corner marks. Top bar: a versioned product label (SEMANTIC.NET_V3.1 / SYSTEM ONTOLOGY), three tab-like section names with a lit dot on the active one, a stress meter at right. The main viewport is a wireframe: three stacked isometric planes drawn in thin grey lines, nodes labelled in tracked mono uppercase (PROCESS_ENGINE, INDEX_CORE, SRC_01), dotted connectors between them, one bright node. A right column holds an annotated paragraph, two metrics with hatched progress bars, and a timestamped diagnostic list with the current row boxed. Footer strip: view-mode toggle icons, uptime and latency in mono, one outlined action button.
62
+
63
+ Useful for: an explainer or capability role for a technical product where the object itself is the section — diagram in the centre, annotations in a fixed column — instead of a headline and three cards. Everything is hairlines, mono labels and a single grey accent; no fills, no colour beyond one highlighted node. From the recorded frames, not measured.
64
+
65
+ ## Sources
66
+
67
+ - MengTo/Skills, `agent-skills/web-design/technical-wireframe-info-layout` (MIT); the demo is a Neuform export the skill ships, flattened from its embedded page and measured live at 1440 and 390. Of the eight Neuform-synced demos tried in this batch it is the only one whose page matched its skill's name.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yojahny/wp-design-library",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "description": "Design reference corpus and MCP server for claude-wp-builder",
5
5
  "repository": {
6
6
  "type": "git",
package/src/cli/check.mjs CHANGED
@@ -55,7 +55,12 @@ export async function run(args = []) {
55
55
  const problems = [];
56
56
  await mapPool(artifacts, 8, async (a) => {
57
57
  try {
58
- const r = await fetch(objectUrl(config, a.key), { method: 'HEAD', signal: AbortSignal.timeout(20000) });
58
+ // identity, or the CDN compresses JSON and drops content-length: every measure.json then
59
+ // reads as 0 bytes while the object is fine. Images are never compressed, which is why
60
+ // this only ever showed on the .json artifacts.
61
+ const r = await fetch(objectUrl(config, a.key), {
62
+ method: 'HEAD', headers: { 'accept-encoding': 'identity' }, signal: AbortSignal.timeout(20000),
63
+ });
59
64
  // Existence AND size. A 200 with the wrong length means the object is not what the entry
60
65
  // records -- exactly as broken as it being absent, and cheaper to catch here than at read
61
66
  // time on a visitor's page.