@yargote/artifacts-cli 0.1.0-beta.4 → 0.1.0-beta.5
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/README.md
CHANGED
|
@@ -11,9 +11,9 @@ Use Node 24 or later. The beta targets macOS and Linux. Windows has not been ver
|
|
|
11
11
|
Choose one persistent installation:
|
|
12
12
|
|
|
13
13
|
```sh
|
|
14
|
-
npm install --global @yargote/artifacts-cli@0.1.0-beta.
|
|
14
|
+
npm install --global @yargote/artifacts-cli@0.1.0-beta.5
|
|
15
15
|
# Or, with pnpm and an existing global bin directory on PATH:
|
|
16
|
-
pnpm add --global @yargote/artifacts-cli@0.1.0-beta.
|
|
16
|
+
pnpm add --global @yargote/artifacts-cli@0.1.0-beta.5
|
|
17
17
|
artifacts --version
|
|
18
18
|
```
|
|
19
19
|
|
|
@@ -22,8 +22,8 @@ If pnpm reports that no global bin directory exists, run `pnpm setup` and reopen
|
|
|
22
22
|
For one-off execution, pin the same version:
|
|
23
23
|
|
|
24
24
|
```sh
|
|
25
|
-
npx --yes @yargote/artifacts-cli@0.1.0-beta.
|
|
26
|
-
pnpm dlx @yargote/artifacts-cli@0.1.0-beta.
|
|
25
|
+
npx --yes @yargote/artifacts-cli@0.1.0-beta.5 --help
|
|
26
|
+
pnpm dlx @yargote/artifacts-cli@0.1.0-beta.5 --help
|
|
27
27
|
```
|
|
28
28
|
|
|
29
29
|
`@beta` follows future prereleases. Exact versions remain reproducible. No stable `latest` release is part of this beta. An organization's pnpm minimum release age or trust policy can delay a new release. Follow that policy rather than disabling it globally.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yargote/artifacts-cli",
|
|
3
|
-
"version": "0.1.0-beta.
|
|
3
|
+
"version": "0.1.0-beta.5",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "Command-line client for the Artifacts REST API.",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"skills"
|
|
28
28
|
],
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@yargote/artifacts-contracts": "0.1.0-beta.
|
|
31
|
-
"@yargote/artifacts-client": "0.1.0-beta.
|
|
30
|
+
"@yargote/artifacts-contracts": "0.1.0-beta.5",
|
|
31
|
+
"@yargote/artifacts-client": "0.1.0-beta.5",
|
|
32
32
|
"openid-client": "6.8.8",
|
|
33
33
|
"zod": "4.6.5"
|
|
34
34
|
},
|
|
@@ -9,9 +9,15 @@ The calling skill owns the snapshot, size limit, and save workflow. This skill o
|
|
|
9
9
|
|
|
10
10
|
The document renders in a sandbox that blocks every network request. Fonts, images, and icons load only as `data:` URIs. External stylesheets, Google Fonts links, and CDN scripts silently fail. Inline all CSS and JavaScript.
|
|
11
11
|
|
|
12
|
-
##
|
|
12
|
+
## Choose the composition
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
Before writing HTML, identify the reader's task, the facts and assets available, and what the reader should understand or do first. Use supplied facts. Label illustrative inputs and assumptions, and leave unavailable evidence absent.
|
|
15
|
+
|
|
16
|
+
Choose the element that carries the answer: a comparison, a diagram, a sequence, a chart, or a result beside its inputs. Give it the most space and put its supporting text nearby. If the same composition would fit an unrelated topic unchanged, use the subject's actual relationships or quantities to make the structure more specific. A report can be dense, an explanation can use large scenes, and a calculator can fit on one screen. Do not impose a hero, a section count, or a word budget.
|
|
17
|
+
|
|
18
|
+
## Use the starter's tokens
|
|
19
|
+
|
|
20
|
+
Copy the `<style>` block of [the starter](templates/starter.html) into the new document. It defines the color, font, and spacing tokens and shared components: contextual text and labels, lede, summary strip, pills, expandable rows, panel, note, table, filter bar, and footer. Delete components the page does not use. Derive every new color and type decision from its tokens.
|
|
15
21
|
|
|
16
22
|
The starter supplies a vocabulary, not a layout. Compose the body for the reader's task:
|
|
17
23
|
|
|
@@ -31,11 +37,11 @@ Open in a complete state with the user's real data. Never ship an empty shell or
|
|
|
31
37
|
Use the bundled faces through the starter's tokens:
|
|
32
38
|
|
|
33
39
|
- `--f-display` is Bricolage Grotesque. Use it for `h1` to `h3` and large figures only.
|
|
34
|
-
- `--f-body` is Public Sans for running text and
|
|
35
|
-
- `--f-mono` is JetBrains Mono for code
|
|
40
|
+
- `--f-body` is Public Sans for running text, controls, labels, and table headers.
|
|
41
|
+
- `--f-mono` is JetBrains Mono for code and identifiers. Use it for measurements when it helps the reader read or align them.
|
|
36
42
|
- Newsreader is an optional reading face. For a long essay or editorial guide, set `--f-body` to `"Newsreader",Charter,Georgia,serif` and keep Public Sans for controls.
|
|
37
43
|
|
|
38
|
-
|
|
44
|
+
Start with `h1` at `clamp(28px,4vw,40px)` and body at 15 to 16 px with a 1.55 line height. Set labels in the body face at 12 to 13 px, in sentence case without added tracking. Adjust the scale for the document's main visual and reading density. Keep `text-wrap: balance` on headings and `font-variant-numeric: tabular-nums` wherever digits align.
|
|
39
45
|
|
|
40
46
|
After the HTML file is complete, embed the fonts it names:
|
|
41
47
|
|
|
@@ -59,7 +65,7 @@ The starter follows the viewer's system theme. Light uses Catppuccin Latte and d
|
|
|
59
65
|
|
|
60
66
|
- Center one `.wrap` column at `--width` with `max(16px, env(safe-area-inset-*))` side gutters. Space siblings with grid or flex `gap`.
|
|
61
67
|
- Use borders and fills by role. A summary strip, a table, and one panel can each earn a surface. Running text and headings sit on the page.
|
|
62
|
-
-
|
|
68
|
+
- Use an eyebrow only for source or scope information the heading does not already give. A label names a field, and numbering appears only for real sequences.
|
|
63
69
|
- Encode attention in form. A row that needs action gets a pill or a muted closed state, not only a different word.
|
|
64
70
|
- Put wide code and diagrams in their own `overflow-x: auto` container. Use a `<table>` only for short records that stay readable when scrolled; use expandable rows for records with long text. The page itself never scrolls sideways at 375 px.
|
|
65
71
|
- Draw diagrams in inline SVG with token colors and labels inside the view box. For icons, use inline Tabler outline SVGs with `currentColor`.
|
|
@@ -71,6 +77,6 @@ Give the `<title>` a specific name of two to four words, or the name the user al
|
|
|
71
77
|
|
|
72
78
|
## Check the rendered page
|
|
73
79
|
|
|
74
|
-
Run the [interface checks](references/interface-checks.md)
|
|
80
|
+
Run the [interface checks](references/interface-checks.md) before saving. They distinguish required checks from visual judgment. Render the finished page at 375 px and 1280 px in both light and dark when browser tools are available. Fix observed failures and repeat the affected checks. Report checks you could not run.
|
|
75
81
|
|
|
76
82
|
The license notices for bundled fonts and adapted guidance are in [third-party notices](THIRD-PARTY-NOTICES.md).
|
|
@@ -119,6 +119,37 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
|
119
119
|
SOFTWARE.
|
|
120
120
|
```
|
|
121
121
|
|
|
122
|
+
## Hallmark
|
|
123
|
+
|
|
124
|
+
The composition guidance in [SKILL.md](SKILL.md) and the review categories in
|
|
125
|
+
[references/interface-checks.md](references/interface-checks.md) adapt ideas from
|
|
126
|
+
[Hallmark](https://github.com/Nutlope/hallmark), reviewed on 2026-10-24.
|
|
127
|
+
[Upstream license](https://github.com/Nutlope/hallmark/blob/main/LICENSE).
|
|
128
|
+
|
|
129
|
+
```text
|
|
130
|
+
MIT License
|
|
131
|
+
|
|
132
|
+
Copyright (c) 2026 Hallmark contributors
|
|
133
|
+
|
|
134
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
135
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
136
|
+
in the Software without restriction, including without limitation the rights
|
|
137
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
138
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
139
|
+
furnished to do so, subject to the following conditions:
|
|
140
|
+
|
|
141
|
+
The above copyright notice and this permission notice shall be included in all
|
|
142
|
+
copies or substantial portions of the Software.
|
|
143
|
+
|
|
144
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
145
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
146
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
147
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
148
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
149
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
150
|
+
SOFTWARE.
|
|
151
|
+
```
|
|
152
|
+
|
|
122
153
|
## Bundled fonts
|
|
123
154
|
|
|
124
155
|
The files in [fonts](fonts) are the Latin subsets of Bricolage Grotesque, Public Sans, JetBrains Mono, and Newsreader, as served by Google Fonts on 2026-10-17. Each is licensed under the SIL Open Font License, Version 1.1. The copyright lines and the complete license text are in [fonts/OFL.txt](fonts/OFL.txt).
|
|
@@ -31,7 +31,9 @@ Keep input-driven calculations in document memory. Use labeled controls without
|
|
|
31
31
|
|
|
32
32
|
Keep filters and tabs local to the document. Do not depend on host URL synchronization, router packages, persistent storage, network requests, or remote fonts. Embed fonts and other required assets as `data:` URIs within the snapshot budget.
|
|
33
33
|
|
|
34
|
-
##
|
|
34
|
+
## Required checks
|
|
35
|
+
|
|
36
|
+
Check content fidelity, sandbox compatibility, and usable behavior regardless of the composition. Preserve supplied facts, units, qualifications, and requested controls. For a visual revision, record the existing content and actions before editing and confirm that they still work afterward.
|
|
35
37
|
|
|
36
38
|
When browser tools are available, inspect the generated document at a narrow viewport around 375 px and a wide viewport around 1280 px, or the user's requested sizes. Verify that body content fits, labels remain legible, and only intentionally wide tables or code regions scroll locally. Check the artifact itself rather than relying on the surrounding application's appearance.
|
|
37
39
|
|
|
@@ -41,10 +43,18 @@ Finish when each relevant check passes or an unavailable check is identified. Fi
|
|
|
41
43
|
|
|
42
44
|
For a requested audit, identify each issue by element or source location and state its correction. Distinguish source inspection from browser verification. Do not turn ordinary artifact delivery into an unsolicited audit report.
|
|
43
45
|
|
|
46
|
+
## Visual judgment
|
|
47
|
+
|
|
48
|
+
Check whether the main visual or result answers the reader's task, whether its labels stay close to what they describe, and whether the reading order is clear at both widths. Read the headings alone and check that they describe this document's content. Remove containers and repeated labels that add no grouping or information.
|
|
49
|
+
|
|
50
|
+
Choose density, alignment, cards, and section rhythm for the content. A long report, a diagram sequence, and a calculator need different compositions. These choices are defaults to reconsider with a concrete reason, not automatic failures. Keep the user's requested style and content. Do not remove evidence or simplify away a qualification to meet an aesthetic preference.
|
|
51
|
+
|
|
44
52
|
## Sources
|
|
45
53
|
|
|
46
54
|
Adapted on 2026-10-14 from [Emil Kowalski's design engineering skill](https://raw.githubusercontent.com/emilkowalski/skills/refs/heads/main/skills/emil-design-eng/SKILL.md) and [Vercel's web design guidelines skill](https://raw.githubusercontent.com/vercel-labs/agent-skills/refs/heads/main/skills/web-design-guidelines/SKILL.md).
|
|
47
55
|
|
|
48
56
|
The accessibility and interface checks incorporate Vercel's Web Interface Guidelines `command.md` as local guidance. Its remote command workflow and output format are not required. The sandbox adaptations are specific to Artifacts.
|
|
49
57
|
|
|
58
|
+
The composition workflow and the distinction between required checks and visual judgment draw on [Hallmark](https://github.com/Nutlope/hallmark), reviewed on 2026-10-24. This adaptation retains Artifacts' document types, palette, embedded fonts, and sandbox constraints.
|
|
59
|
+
|
|
50
60
|
License notices are retained in [Third-party notices](../THIRD-PARTY-NOTICES.md).
|
|
@@ -47,7 +47,7 @@ code,kbd,pre{font-family:var(--f-mono);font-size:.86em}
|
|
|
47
47
|
pre{margin:0;padding:14px 16px;background:var(--sunken);border-radius:8px;overflow-x:auto;line-height:1.5}
|
|
48
48
|
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
|
|
49
49
|
|
|
50
|
-
.eyebrow,.label{font:600
|
|
50
|
+
.eyebrow,.label{font:600 12px/1.35 var(--f-body);color:var(--muted)}
|
|
51
51
|
header{display:grid;gap:8px}
|
|
52
52
|
.lede{color:var(--muted);max-width:68ch;font-size:16px}
|
|
53
53
|
.prose{display:grid;gap:12px;max-width:68ch}
|
|
@@ -71,14 +71,14 @@ section{display:grid;gap:14px}
|
|
|
71
71
|
|
|
72
72
|
.table{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow-x:auto}
|
|
73
73
|
table{width:100%;border-collapse:collapse;font-size:14px}
|
|
74
|
-
th{font:600
|
|
74
|
+
th{font:600 12px/1.35 var(--f-body);color:var(--muted);text-align:left;padding:10px 14px;background:var(--sunken);border-bottom:1px solid var(--line);white-space:nowrap}
|
|
75
75
|
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
|
|
76
76
|
tr:last-child td{border-bottom:0}
|
|
77
77
|
td.num,th.num{text-align:right;white-space:nowrap}
|
|
78
78
|
|
|
79
79
|
.rows{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
|
|
80
80
|
.rows-head,.row>summary{display:grid;grid-template-columns:var(--cols,88px minmax(0,2fr) minmax(0,1fr) minmax(0,1.4fr));gap:16px;padding:12px 16px;align-items:start}
|
|
81
|
-
.rows-head{font:600
|
|
81
|
+
.rows-head{font:600 12px/1.35 var(--f-body);color:var(--muted);background:var(--sunken);border-bottom:1px solid var(--line)}
|
|
82
82
|
.row{border-bottom:1px solid var(--line)}
|
|
83
83
|
.row:last-child{border-bottom:0}
|
|
84
84
|
.row>summary{cursor:pointer;list-style:none}
|