@penpair/web 0.3.0 → 0.3.3
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 +83 -39
- package/docs/adapters.md +10 -3
- package/docs/backup.md +6 -1
- package/docs/conventions/README.md +2 -4
- package/docs/design-workflow.md +4 -1
- package/docs/getting-started.md +40 -20
- package/docs/guide.md +11 -7
- package/docs/installation.md +67 -0
- package/docs/marwes-components.md +1 -1
- package/docs/releasing.md +7 -3
- package/docs/skill-installation.md +77 -0
- package/docs/skill-validation.md +85 -0
- package/docs/validation.md +68 -0
- package/package.json +2 -2
- package/docs/branch-review.md +0 -59
- package/docs/conventions/completion-2026-10-22.md +0 -73
- package/docs/conventions/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json +0 -1
- package/docs/fixtures/browser-capture-2026-10-22.json +0 -217
- package/docs/fixtures/feedback-reproductions.md +0 -12
- package/docs/fixtures/feedback-scratch.template.json +0 -9
- package/docs/improvements.md +0 -1217
- package/docs/plans/registry-polling-fix.md +0 -101
- package/docs/plans/tradient-feedback-0.2.0.md +0 -209
- package/docs/plans/tradient-feedback-review.md +0 -83
- package/docs/pr-improvements.md +0 -57
- package/docs/tradient-followups.md +0 -77
- package/docs/trials/report-template.json +0 -76
- package/docs/trials.md +0 -41
- package/docs/upstream/marwes-1.11.0-evidence.json +0 -15
- package/docs/upstream/marwes-requests.md +0 -35
package/README.md
CHANGED
|
@@ -1,59 +1,103 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="https://raw.githubusercontent.com/niklas-westman/penpair/main/docs/assets/logo.png" alt="Penpair: a pen nib between blue code brackets" width="120" height="120">
|
|
3
|
+
</p>
|
|
4
|
+
|
|
1
5
|
# penpair
|
|
2
6
|
|
|
3
|
-
**Design together. Build together.**
|
|
7
|
+
**Design together. Build together.**
|
|
4
8
|
|
|
5
|
-
|
|
9
|
+
Penpair helps people and AI coding assistants work on the same Penpot design, then carry that design into frontend code. Your assistant can inspect a real file, build a page in reviewed steps and check the result. You stay in control of what changes and what gets approved.
|
|
6
10
|
|
|
7
|
-
**Design in Penpot →
|
|
11
|
+
**Design in Penpot → build in your app → compare the result.**
|
|
8
12
|
|
|
9
|
-
|
|
10
|
-
| --- | --- | --- |
|
|
11
|
-
| [Marwes UI adapter](docs/adapters.md#bring-your-component-library-into-penpot) | Your application uses Marwes UI | Bring library/project tokens into Penpot, detect drift and compose library-aware recipes |
|
|
12
|
-
| [Reflection Check adapter](docs/adapters.md#check-the-frontend-against-the-design) | You implement a frontend from Penpot and want repeatable visual checks | Connect approved design cases to real browser captures and comparison evidence |
|
|
13
|
+
[Install](#install) · [First task](#try-your-first-task) · [Companions](#add-your-companions) · [Contribute](#contribute) · [Documentation](#documentation)
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
[](https://m8ven.ai/mcp/niklas-westman-penpair-637i3e?s=readme)
|
|
15
16
|
|
|
16
|
-
##
|
|
17
|
+
## What it does
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
Penpot holds the design. Penpair adds project configuration, reusable operations and skills: written instructions that teach your assistant how to work with that design.
|
|
20
|
+
|
|
21
|
+
| From an idea to a checked page | What Penpair helps with |
|
|
19
22
|
| --- | --- |
|
|
20
|
-
|
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
| Choose adapters or check the frontend | [Companion adapters](docs/adapters.md) |
|
|
25
|
-
| Resolve a failure | [Troubleshooting](docs/troubleshooting.md) |
|
|
26
|
-
| Extend the framework | [Guide and reference map](docs/guide.md) |
|
|
23
|
+
| **Understand the design** | Read pages, inspect components and tokens, audit spacing and export frames. |
|
|
24
|
+
| **Work on it together** | Pin the intended file, inspect before writing, take snapshots and independently read changes back. |
|
|
25
|
+
| **Build the frontend** | Hand design references and component mappings to the coding assistant. |
|
|
26
|
+
| **Check the implementation** | Add Reflection Check to compare approved references with real browser captures. |
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
Use your existing frontend stack. Library-specific knowledge lives in optional adapters; the core stays independent of any component library.
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
## Install
|
|
31
31
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
32
|
+
Choose how you want to get started. Both routes set up the same project and agent skills.
|
|
33
|
+
|
|
34
|
+
| Route | Best for | Start here |
|
|
35
|
+
| --- | --- | --- |
|
|
36
|
+
| **Set it up with your assistant — recommended** | You want guidance, help with browser steps and checks along the way. | [Guided installation](https://github.com/niklas-westman/penpair/blob/main/docs/installation.md#recommended-set-it-up-with-your-assistant) |
|
|
37
|
+
| **Install it yourself** | You prefer to run each command and review the configuration yourself. | [Manual installation](https://github.com/niklas-westman/penpair/blob/main/docs/getting-started.md) |
|
|
38
|
+
|
|
39
|
+
For the recommended route, open your application's project in your coding assistant and paste:
|
|
40
|
+
|
|
41
|
+
```text
|
|
42
|
+
Read https://raw.githubusercontent.com/niklas-westman/penpair/main/packages/core/skills/penpair-setup/SKILL.md
|
|
43
|
+
and follow its recommended assisted route to set up Penpair in this project.
|
|
44
|
+
Keep my MCP key out of chat and check with me before changing a design file.
|
|
39
45
|
```
|
|
40
46
|
|
|
41
|
-
|
|
47
|
+
You need **Node.js 22 or newer**, a project folder and a Penpot account. Your assistant helps check the prerequisites; you handle your personal key and browser. No clone of this repository is needed. Prefer a terminal wizard? The [installation guide](https://github.com/niklas-westman/penpair/blob/main/docs/installation.md#prefer-a-terminal-wizard) covers that too.
|
|
42
48
|
|
|
43
|
-
|
|
49
|
+
## Try your first task
|
|
44
50
|
|
|
45
|
-
|
|
51
|
+
Start with a read-only request to your assistant:
|
|
46
52
|
|
|
47
|
-
|
|
53
|
+
> Read the installed penpair-design skill. Inspect the pinned design file, summarize its pages and tokens, and suggest one small improvement. Do not change the file yet.
|
|
48
54
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
|
55
|
+
Then choose a scratch page and agree on a small design task. The workflow is: inspect, snapshot, write once, independently read back, export and look at the result. The [design workflow](https://github.com/niklas-westman/penpair/blob/main/docs/design-workflow.md) explains the review points and recovery steps.
|
|
56
|
+
|
|
57
|
+
The installed skills cover **setup → design → recipes → handoff → verification**, with `design-judgment` for visual hierarchy. Ask the assistant to name the skill it uses. For frontend work, `penpair-handoff` carries design evidence into implementation; `penpair-verify` guides browser comparison, image review, fixes and recapture. [Check skill discovery and behavior](https://github.com/niklas-westman/penpair/blob/main/docs/skill-validation.md).
|
|
58
|
+
|
|
59
|
+
## Add your companions
|
|
60
|
+
|
|
61
|
+
| Package | Add it when | What it contributes |
|
|
62
|
+
| --- | --- | --- |
|
|
63
|
+
| **`@penpair/marwes-ui`** | Your application uses Marwes UI | Bring library and project tokens into Penpot, detect drift and compose library-aware recipes. |
|
|
64
|
+
| **`@penpair/reflection-check`** | You build a frontend from the design | Map approved design cases to real browser captures and comparison evidence. **Recommended for design-to-code work.** |
|
|
56
65
|
|
|
57
|
-
|
|
66
|
+
Install companions at the **same version** as your command package, then register them in `penpair.config.json`. Both can work together; Reflection Check can also be used without Marwes. Follow [installation and registration](https://github.com/niklas-westman/penpair/blob/main/docs/adapters.md).
|
|
58
67
|
|
|
59
|
-
|
|
68
|
+
**Penpair manages the design workflow. Marwes connects the component library. Reflection Check connects implementation evidence.** The comparison adapter does not bundle a browser or a Reflection engine: your project supplies a browser/checker provider. Start with the [real-browser example](https://github.com/niklas-westman/penpair/blob/main/examples/reflection-browser/README.md). Installing the adapter alone does not complete verification, and a passing comparison does not replace visual review or human approval.
|
|
69
|
+
|
|
70
|
+
## Know the boundaries
|
|
71
|
+
|
|
72
|
+
- Penpair uses Penpot's MCP and plugin APIs. The editor must stay open and visible; this is an interactive workflow.
|
|
73
|
+
- A healthy connection does not authorize design changes. Review the target and intended work before writing.
|
|
74
|
+
- Keep backups and prove a restore on scratch before relying on them. See [backup and restore](https://github.com/niklas-westman/penpair/blob/main/docs/backup.md).
|
|
75
|
+
- Penpair is early software. Check [compatibility](https://github.com/niklas-westman/penpair/blob/main/docs/compatibility.md) for tested environments and remaining gaps. The installed command's `--help` is the reference for its available options.
|
|
76
|
+
|
|
77
|
+
Use the scoped command packages above. The unscoped `penpair` wrapper currently has a publishing exception. `@penpair/core` is the underlying library and ships transitively; it has no command of its own.
|
|
78
|
+
|
|
79
|
+
## Contribute
|
|
80
|
+
|
|
81
|
+
Found a rough edge? [Open an issue](https://github.com/niklas-westman/penpair/issues) with what you tried, what you expected, your versions and a redacted reproduction. Documentation fixes, reproducible bug reports and focused pull requests are welcome. Report vulnerabilities through [SECURITY](https://github.com/niklas-westman/penpair/blob/main/SECURITY.md).
|
|
82
|
+
|
|
83
|
+
To develop Penpair itself, fork and clone this repository, then:
|
|
84
|
+
|
|
85
|
+
```sh
|
|
86
|
+
pnpm install --frozen-lockfile
|
|
87
|
+
pnpm check
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
Use the pnpm version declared in `package.json`. Read [CONTRIBUTING](https://github.com/niklas-westman/penpair/blob/main/CONTRIBUTING.md) for choosing a package, conventions, release notes and package smoke checks. A live Penpot connection is not required for the standard automated checks.
|
|
91
|
+
|
|
92
|
+
## Documentation
|
|
93
|
+
|
|
94
|
+
| You want to… | Read |
|
|
95
|
+
| --- | --- |
|
|
96
|
+
| Set up by hand or join a team | [Choose an installation route](https://github.com/niklas-westman/penpair/blob/main/docs/installation.md) · [Team setup](https://github.com/niklas-westman/penpair/blob/main/docs/team.md) |
|
|
97
|
+
| Work on a design and build from it | [Design workflow](https://github.com/niklas-westman/penpair/blob/main/docs/design-workflow.md) · [Handoff](https://github.com/niklas-westman/penpair/blob/main/docs/handoff.md) |
|
|
98
|
+
| Connect a library or browser checker | [Companion adapters](https://github.com/niklas-westman/penpair/blob/main/docs/adapters.md) |
|
|
99
|
+
| Find commands, recipes or extension points | [Guide](https://github.com/niklas-westman/penpair/blob/main/docs/guide.md) · [Cookbook](https://github.com/niklas-westman/penpair/blob/main/docs/cookbook.md) · [MCP tools](https://github.com/niklas-westman/penpair/blob/main/docs/mcp.md) |
|
|
100
|
+
| Diagnose or recover a failure | [Troubleshooting](https://github.com/niklas-westman/penpair/blob/main/docs/troubleshooting.md) · [Recovery](https://github.com/niklas-westman/penpair/blob/main/docs/recovery.md) |
|
|
101
|
+
| Validate a source build or prepare a release | [Validation](https://github.com/niklas-westman/penpair/blob/main/docs/validation.md) · [Releasing](https://github.com/niklas-westman/penpair/blob/main/docs/releasing.md) |
|
|
102
|
+
|
|
103
|
+
[Changelog](https://github.com/niklas-westman/penpair/blob/main/CHANGELOG.md) · [MIT licence](https://github.com/niklas-westman/penpair/blob/main/LICENSE)
|
package/docs/adapters.md
CHANGED
|
@@ -39,10 +39,11 @@ First check your installed command version:
|
|
|
39
39
|
pnpm exec penpair --version
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
-
For a project
|
|
42
|
+
For example, a project whose command/core are **0.3.0** installs this matching
|
|
43
|
+
companion. Use the actual installed version when it differs:
|
|
43
44
|
|
|
44
45
|
```sh
|
|
45
|
-
pnpm add -D -E @penpair/reflection-check@0.
|
|
46
|
+
pnpm add -D -E @penpair/reflection-check@0.3.0
|
|
46
47
|
```
|
|
47
48
|
|
|
48
49
|
Use the version printed above when it differs. In a pnpm workspace, use the existing dependency location (`-w` when installing at the workspace root). Upgrade directly installed Penpair packages together rather than mixing releases.
|
|
@@ -72,7 +73,13 @@ pnpm exec penpair reflection check --map design/implementation-cases.json --prov
|
|
|
72
73
|
|
|
73
74
|
Use the [package reference](https://github.com/niklas-westman/penpair/blob/main/packages/reflection-check/README.md) for mapping/provider examples. Exit **0** means complete evidence within threshold, **2** means measured drift and **3** means missing/incomplete evidence. An install, a passing setup check or a stub provider is not a completed frontend comparison.
|
|
74
75
|
|
|
75
|
-
The
|
|
76
|
+
The browser-provider starter ships with the command package; supply real project
|
|
77
|
+
hooks or report integration as pending. The shipped
|
|
78
|
+
[penpair-verify skill](../packages/core/skills/penpair-verify/SKILL.md) guides
|
|
79
|
+
comparison, image inspection, implementation fixes and recapture. For simple
|
|
80
|
+
legacy route/viewport checks, the existing generated `reflection-cases.json` and
|
|
81
|
+
`visualSmoke` configuration remain available; richer cases require explicit setup
|
|
82
|
+
and readback.
|
|
76
83
|
|
|
77
84
|
## Why explicit companions?
|
|
78
85
|
|
package/docs/backup.md
CHANGED
|
@@ -49,6 +49,11 @@ Set `restoreVerified` to true only after the owner completes the scratch compari
|
|
|
49
49
|
|
|
50
50
|
## Current verification limits
|
|
51
51
|
|
|
52
|
-
The bounded exporter, target/revision guards, refusal to overwrite, error/budget
|
|
52
|
+
The bounded exporter, target/revision guards, refusal to overwrite, error/budget
|
|
53
|
+
handling and reminder behavior are tested with fake clients and local files.
|
|
54
|
+
Those checks do not establish archive restoration on a live hosted instance;
|
|
55
|
+
record the required export/import and visual comparison before relying on that
|
|
56
|
+
recovery path. Structural snapshots provide review evidence and remain distinct
|
|
57
|
+
from archives.
|
|
53
58
|
|
|
54
59
|
[Structural snapshots and diffs](snapshots.md) provide bounded review evidence alongside archives; they cannot replace an export/import restore trial.
|
|
@@ -4,9 +4,6 @@ Start with the row matching the change. Copy the relevant pattern, then use the
|
|
|
4
4
|
nearest production module's domain vocabulary. The examples compile and run in
|
|
5
5
|
`pnpm conventions:check`; production code never imports them.
|
|
6
6
|
|
|
7
|
-
The [completion report](completion-2026-10-22.md) records the initial rollout,
|
|
8
|
-
resolved problems, verification and limits.
|
|
9
|
-
|
|
10
7
|
| Work | Read | Checked example |
|
|
11
8
|
| --- | --- | --- |
|
|
12
9
|
| Choose a package, folder or module boundary | [Structure](structure.md) | [Comparison adapter](../../packages/reflection-check/src/index.ts) |
|
|
@@ -49,7 +46,8 @@ Penpair with their designs.
|
|
|
49
46
|
|
|
50
47
|
- Generated `dist/`, dependencies, ignored local artifacts and data fixtures are
|
|
51
48
|
outside formatting. Keep captured evidence unchanged.
|
|
52
|
-
-
|
|
49
|
+
- Internal completion reports, trial evidence and upstream drafts belong in
|
|
50
|
+
git-ignored `.working-docs/`; maintained guides must work without those files.
|
|
53
51
|
- Raw plugin bodies in `examples/hello-card/`, `examples/theme-preview/` and
|
|
54
52
|
`examples/trials/` may contain a top-level `return`, which Biome's module parser
|
|
55
53
|
rejects. Their existing sandbox tests compile them as async function bodies.
|
package/docs/design-workflow.md
CHANGED
|
@@ -8,6 +8,9 @@
|
|
|
8
8
|
6. Generate a [structured handoff](handoff.md) with explicit component mappings. Implement behavior, responsive rules and accessibility from an actual application contract rather than inferred appearance.
|
|
9
9
|
7. Use the recommended [Reflection Check companion](adapters.md#check-the-frontend-against-the-design) and a real project browser provider to capture the actual implementation case with stable fonts/data. Inspect comparison evidence and images, resolve drift, and report changed behavior, validation and remaining risks. Missing provider/setup work remains pending.
|
|
10
10
|
|
|
11
|
-
[Structural snapshots](snapshots.md) make design review diffable. [Archives and
|
|
11
|
+
[Structural snapshots](snapshots.md) make design review diffable. [Archives and
|
|
12
|
+
restore trials](backup.md) establish recovery independently. Use the
|
|
13
|
+
[validation guide](validation.md) for source-package and scratch checks; automated
|
|
14
|
+
fixtures do not establish live behavior or human acceptance.
|
|
12
15
|
|
|
13
16
|
Before expanding variants, choose the primary task and an existing reference, establish hierarchy/context and responsive/focus order, then critique one small first frame. Use `inspect → spec → snapshot/diff → capture/approve → comparison` from installed `penpair --help`. Exact owner words approve only the captured artifact; first-frame critique does not grant approval. Layout strategy and fresh doctor evidence are described in [build kit](build-kit.md) and [recovery](recovery.md).
|
package/docs/getting-started.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Manual installation
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Run each step yourself, at your own pace. Prefer your assistant to guide you? [Choose the recommended route](installation.md#recommended-set-it-up-with-your-assistant). Both routes produce the same setup.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Browser menu labels below marked **(not tried yet)** still need a fresh live check; use [compatibility](compatibility.md) for the recorded environment checks.
|
|
6
6
|
|
|
7
7
|
The normal way is to use Penpot on the web (or your team's own Penpot) and connect the AI assistant to it. Nothing runs on your computer except penpair. If you want your own copy of Penpot on your computer instead, see "Alternative: run Penpot on your own computer" at the end.
|
|
8
8
|
|
|
@@ -25,13 +25,23 @@ That is all. The assistant looks first, changes things in one go, and checks its
|
|
|
25
25
|
## If you set it up
|
|
26
26
|
You need: a Mac or Linux computer, **Node.js** (22 or newer), a terminal, and an account on a Penpot (use design.penpot.app or your team's own address).
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
### 0. Install the command package
|
|
29
|
+
|
|
30
|
+
In your application's folder (not a clone of Penpair):
|
|
31
|
+
|
|
32
|
+
```sh
|
|
33
|
+
pnpm add -D @penpair/web
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Using npm? Run `npm install --save-dev @penpair/web`, then use `npx penpair` in place of `pnpm exec penpair` below. In a pnpm workspace, add `-w` when installing at its root. Start with a `package.json`; in an empty trial folder, create one with `npm init -y` first.
|
|
37
|
+
|
|
38
|
+
For Docker, install `@penpair/docker` instead and follow the [local Penpot steps](#alternative-run-penpot-on-your-own-computer). Install only one command package.
|
|
29
39
|
|
|
30
40
|
### 1. Connect your project to that Penpot
|
|
31
41
|
In the folder of your project:
|
|
32
42
|
|
|
33
43
|
```
|
|
34
|
-
|
|
44
|
+
pnpm exec penpair init --external https://design.penpot.app --gitignore
|
|
35
45
|
```
|
|
36
46
|
|
|
37
47
|
`init` writes a small settings file (`penpair.config.json`, commit it) and keeps your private files out of git for you.
|
|
@@ -40,15 +50,17 @@ npx @penpair/web init --external https://design.penpot.app --gitignore
|
|
|
40
50
|
Open the Penpot address, create an account and log in. Create a project and a design file for this work.
|
|
41
51
|
|
|
42
52
|
### 3. Connect the assistant (once)
|
|
43
|
-
1. In Penpot open **Account, Integrations, MCP Server** and switch it on (not tried yet). Copy the address it shows; it contains your personal key, so treat it like a password. The key belongs to you, not to the team; each person who uses the assistant makes their own.
|
|
44
|
-
2. In your project folder run `npx @penpair/web connect` and paste the address when asked. Nothing is shown as you paste. It saves the address in `.env.local` (readable only by you, and added to `.gitignore`) and refuses an address that belongs to a different Penpot. (By hand instead: put the line `PENPAIR_MCP_URL=<the address>` in `.env.local` and keep that file out of git.)
|
|
45
|
-
3. Open your design file in Penpot, choose **File, MCP Server, Connect**, and keep that tab visible.
|
|
46
53
|
|
|
47
|
-
|
|
54
|
+
1. In Penpot open **Account, Integrations, MCP Server** and switch it on (not tried yet). Copy the address it shows; it contains your personal key, so treat it like a password. Each teammate uses their own key.
|
|
55
|
+
2. Open the intended design file, choose **File, MCP Server, Connect**, and keep that tab visible.
|
|
56
|
+
3. In your project's terminal run `pnpm exec penpair connect` and paste the address into the hidden prompt. It saves the address in private, git-ignored `.env.local` and refuses an address for a different Penpot. Never paste the address into chat. [Private file and Keychain references](credentials.md) are also supported.
|
|
57
|
+
4. When asked to pin the file, check its displayed name and ID before accepting. If you skipped the prompt, verify the correct file is open before running `pnpm exec penpair connect --pin-file`; that flag accepts the pin without another confirmation.
|
|
58
|
+
|
|
59
|
+
The pin is saved in `penpair.config.json`; commit it for teammates. A different open file blocks writes and file-specific exports. Basic reads warn. If doctor reports a mismatch, open the expected file and reconnect its plugin.
|
|
48
60
|
|
|
49
61
|
### 4. Check that it works
|
|
50
62
|
```
|
|
51
|
-
|
|
63
|
+
pnpm exec penpair doctor
|
|
52
64
|
```
|
|
53
65
|
Every line should say `ok`. If one says `FAIL`, the line under it says what to do. The usual ones:
|
|
54
66
|
|
|
@@ -56,17 +68,29 @@ Every line should say `ok`. If one says `FAIL`, the line under it says what to d
|
|
|
56
68
|
| --- | --- |
|
|
57
69
|
| penpot: not answering | Check the address in the config and your internet connection |
|
|
58
70
|
| editor and plugin: the MCP address points at another instance | The address in `.env.local` belongs to a different Penpot. Copy the one from this Penpot |
|
|
59
|
-
| editor and plugin: not connected |
|
|
71
|
+
| editor and plugin: not connected | Reconnect the plugin in step 3.2 and keep the tab visible |
|
|
60
72
|
|
|
61
|
-
Then try: `
|
|
73
|
+
Then try: `pnpm exec penpair pages` lists the pages in the open file.
|
|
62
74
|
|
|
63
|
-
If you want to know what your Penpot offers before you start, `
|
|
75
|
+
If you want to know what your Penpot offers before you start, `pnpm exec penpair probe` lists its tools and limits. If `execute_code` is missing from that list, penpair cannot work with it. The hosted service, checked 2026-10-20 on Penpot 2.18.4, offers the same four tools and the same limits as a local Penpot (see `compatibility.md`).
|
|
64
76
|
|
|
65
77
|
### 5. Give the assistant its rules (once)
|
|
66
78
|
```
|
|
67
|
-
|
|
79
|
+
pnpm exec penpair skills install --agents AGENTS.md --dry-run
|
|
80
|
+
pnpm exec penpair skills install --agents AGENTS.md
|
|
81
|
+
pnpm exec penpair skills check --agents AGENTS.md --json
|
|
68
82
|
```
|
|
69
|
-
This copies the rules the assistant follows
|
|
83
|
+
Review the preview before applying it. This copies the rules the assistant follows into the project's skill folder, creates discovery links and adds task routing to `AGENTS.md`. Use `CLAUDE.md` instead if that is your instruction file. Existing project text outside the owned section is preserved. The final command checks discovery and routing; observe actual skill use separately.
|
|
84
|
+
|
|
85
|
+
Then fill in `penpair-design/references/project-facts.md` in the skill folder printed by the installer (your file, never replaced): the Penpot file, the token sets, the names you use, who approves. See [skill installation](skill-installation.md) for destination choices and existing setups.
|
|
86
|
+
|
|
87
|
+
### 6. Finish and choose companions
|
|
88
|
+
|
|
89
|
+
Commit your dependency and lockfile, `penpair.config.json`, Git ignore rules and reviewed skill/instruction files. Keep `.env.local` and private connection files out of Git.
|
|
90
|
+
|
|
91
|
+
Choose [companion adapters](adapters.md): add Marwes UI when your app uses it, and the recommended Reflection Check adapter for frontend comparison. Keep versions aligned. Installation and registration do not replace approved references or a real browser provider.
|
|
92
|
+
|
|
93
|
+
You are connection-ready when `doctor` is healthy, `pages` names the intended file and skill discovery checks pass. Observe actual skill use in your assistant separately; comparison readiness is a further step. Try the [read-only first task](../README.md#try-your-first-task).
|
|
70
94
|
|
|
71
95
|
### Every day
|
|
72
96
|
Before moving into frontend implementation, choose the [companion adapters](adapters.md): use the library adapter for library-aware tokens/recipes and the recommended Reflection Check adapter for comparing the running frontend with approved designs. Installation and registration are the first steps; browser setup/provider evidence is a separate readiness stage.
|
|
@@ -76,7 +100,7 @@ Open the file in Penpot, choose **File, MCP Server, Connect**, keep the tab visi
|
|
|
76
100
|
### Your safety net
|
|
77
101
|
See the [hosted backup and scratch-restore guide](backup.md). `penpair backup file <new.penpot>` can try a bounded file export; it never replaces an existing archive and does not claim restore proof. Larger/failing exports use the manual UI route. Optional backup-note reminders are disabled unless configured.
|
|
78
102
|
|
|
79
|
-
`up`, `down`, Docker `status`, instance `backup` and instance `restore` belong to the Docker alternative; `backup file` is the separate hosted-file export candidate described above. Your safety net is Penpot's own version history and the `.penpot` export in the File menu. Whether
|
|
103
|
+
`up`, `down`, Docker `status`, instance `backup` and instance `restore` belong to the Docker alternative; `backup file` is the separate hosted-file export candidate described above. Your safety net is Penpot's own version history and the `.penpot` export in the File menu. Whether an archive restores all required components, token sets and themes must be established with the [scratch restore checklist](backup.md#prove-the-restore-on-scratch).
|
|
80
104
|
|
|
81
105
|
## What it will not do
|
|
82
106
|
It needs the Penpot tab open and visible while the assistant works, so it cannot run on its own overnight. It changes one Penpot at a time and only the page you have open.
|
|
@@ -102,10 +126,6 @@ npx penpair up
|
|
|
102
126
|
|
|
103
127
|
Every day: `npx penpair up` (if Docker was restarted) and `npx penpair down` to stop; your designs stay. Back up before big changes with `npx penpair backup`, and prove a backup works with `npx penpair backup verify <the folder it printed>`. The backup contains account data, so never put it in git.
|
|
104
128
|
|
|
105
|
-
## Still to make easier (see the [plan](https://github.com/niklas-westman/penpair/blob/main/PLAN.md))
|
|
106
|
-
- A short illustrated version with a screenshot of each browser step.
|
|
107
|
-
- A shared Penpot for a team, so designers need no setup.
|
|
108
|
-
|
|
109
129
|
## Rotate or move a personal key
|
|
110
130
|
|
|
111
131
|
Follow [private credential storage and rotation](credentials.md). Use the provider UI and a private file/Keychain update, or the legacy hidden `connect --replace` prompt. Reconnect the intended editor and confirm the public file pin with doctor. The assistant should never receive either key value.
|
package/docs/guide.md
CHANGED
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
# Guide
|
|
2
2
|
|
|
3
|
-
Choose a workflow below, starting with [companion adapters](adapters.md) when
|
|
3
|
+
Choose a workflow below, starting with [companion adapters](adapters.md) when
|
|
4
|
+
connecting a component library or verifying frontend code. The
|
|
5
|
+
[validation guide](validation.md) distinguishes automated, scratch and actual
|
|
6
|
+
consumer evidence.
|
|
4
7
|
|
|
5
8
|
## Documentation map
|
|
6
9
|
|
|
7
10
|
| Path | Documents |
|
|
8
11
|
| --- | --- |
|
|
9
|
-
| First run / shared file | [
|
|
12
|
+
| First run / shared file | [Choose an installation route](installation.md), [manual installation](getting-started.md), [team](team.md), [validation](validation.md) |
|
|
10
13
|
| Build / handoff | [Cookbook](cookbook.md), [workflow](design-workflow.md), [kit](build-kit.md), [file scripts](run-file.md), [handoff](handoff.md) |
|
|
11
14
|
| Evidence | [Inspection](inspection.md), [advisory audits](audits.md), [snapshots](snapshots.md), [approvals](approvals.md), [coverage](coverage.md), [artifacts](artifacts.md) |
|
|
12
|
-
| Integration | [Companion adapters](adapters.md), [MCP](mcp.md), [formats](formats.md), [extension trust](extensions-trust.md), [credentials](credentials.md), [token adapter](marwes.md)
|
|
15
|
+
| Integration | [Companion adapters](adapters.md), [MCP](mcp.md), [formats](formats.md), [extension trust](extensions-trust.md), [credentials](credentials.md), [token adapter](marwes.md) |
|
|
13
16
|
| Repair / operations | [Status/open](status.md), [troubleshooting](troubleshooting.md), [recovery](recovery.md), [backup](backup.md), [compatibility](compatibility.md), [releasing](releasing.md) |
|
|
14
17
|
|
|
15
18
|
## Extension points
|
|
@@ -21,11 +24,12 @@ Choose a workflow below, starting with [companion adapters](adapters.md) when co
|
|
|
21
24
|
| Verification provider | what "matches the design" means | `penpair baselines` (images and Reflection cases, below), a page-verify gate |
|
|
22
25
|
| Skill pack | rules the agent follows | the Penpot skill, design judgment |
|
|
23
26
|
|
|
24
|
-
##
|
|
27
|
+
## Verification limits
|
|
25
28
|
|
|
26
|
-
|
|
27
|
-
-
|
|
28
|
-
|
|
29
|
+
Offline fixtures do not establish first-run usability, hosted large-file behavior
|
|
30
|
+
or multi-person coordination. Validate those in the actual target environment and
|
|
31
|
+
retain observed results separately from unknowns; see [validation](validation.md)
|
|
32
|
+
and the [compatibility matrix](compatibility.md).
|
|
29
33
|
|
|
30
34
|
## Configuration checks and standalone inspection
|
|
31
35
|
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# Choose your installation route
|
|
2
|
+
|
|
3
|
+
Two ways to get the same Penpair setup. Choose who drives the steps; you can switch routes without starting over.
|
|
4
|
+
|
|
5
|
+
| Route | Who does what | Choose it when |
|
|
6
|
+
| --- | --- | --- |
|
|
7
|
+
| **Set it up with your assistant — recommended** | Your assistant checks the project, explains and runs permitted commands, then verifies progress. You handle the browser, private key and approvals. | You want help getting connected and choosing companions. |
|
|
8
|
+
| **Install it yourself** | You run each command, connect Penpot and review the installed instructions. Your assistant can help explain an individual step. | You want direct control over every setup step. |
|
|
9
|
+
|
|
10
|
+
## Recommended: set it up with your assistant
|
|
11
|
+
|
|
12
|
+
Open the project that will use Penpair in your coding assistant. Paste:
|
|
13
|
+
|
|
14
|
+
```text
|
|
15
|
+
Read https://raw.githubusercontent.com/niklas-westman/penpair/main/packages/core/skills/penpair-setup/SKILL.md
|
|
16
|
+
and follow its recommended assisted route to set up Penpair in this project.
|
|
17
|
+
Keep my MCP key out of chat and check with me before changing a design file.
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
The [setup skill](https://github.com/niklas-westman/penpair/blob/main/packages/core/skills/penpair-setup/SKILL.md) works before Penpair is installed. If your assistant cannot open the URL, give it that file's contents, or use the manual route. Linking a skill asks the assistant to read it; it does not install it globally.
|
|
21
|
+
|
|
22
|
+
Your assistant will:
|
|
23
|
+
|
|
24
|
+
1. Check Node.js 22+, your project folder and package manager. Help create a small trial project if needed.
|
|
25
|
+
2. Recommend web Penpot, or use Docker when you choose it.
|
|
26
|
+
3. Install one command package and preserve any existing project setup.
|
|
27
|
+
4. Walk you through connecting the visible editor and entering your key privately.
|
|
28
|
+
5. Confirm the intended file pin, run connection checks and preview/install the agent skills.
|
|
29
|
+
6. Recommend Marwes UI if your app uses it and Reflection Check for frontend verification, with missing integration work stated clearly.
|
|
30
|
+
|
|
31
|
+
You still operate the browser and paste the key into your own hidden terminal prompt. A healthy setup does not authorize design changes. A first design trial is optional and needs an agreed scratch target.
|
|
32
|
+
|
|
33
|
+
## Install it yourself
|
|
34
|
+
|
|
35
|
+
Follow [manual installation](getting-started.md). It includes dependency installation, configuration, browser connection, file pinning, diagnostics, agent instructions and companion choices.
|
|
36
|
+
|
|
37
|
+
Tell your assistant “manual installation; give me the steps, do not run them” if you want help without handing over execution. It should explain the current step and wait for your result. You can switch to assisted setup later; it should inspect progress and continue rather than initialize everything again.
|
|
38
|
+
|
|
39
|
+
## Prefer a terminal wizard?
|
|
40
|
+
|
|
41
|
+
This is another way to drive setup yourself. In your project folder, after creating a `package.json` if needed:
|
|
42
|
+
|
|
43
|
+
```sh
|
|
44
|
+
pnpm add -D @penpair/web
|
|
45
|
+
pnpm exec penpair setup --web --agents AGENTS.md
|
|
46
|
+
pnpm exec penpair doctor
|
|
47
|
+
pnpm exec penpair pages
|
|
48
|
+
pnpm exec penpair skills check --agents AGENTS.md --json
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
Use your team's Penpot with `setup --web --external https://your-penpot.example --agents AGENTS.md`. For npm, install with `npm install --save-dev @penpair/web` and use `npx penpair`. At a pnpm workspace root, add `-w` to the install. Select `CLAUDE.md` instead if that is your instruction file. The wizard installs skills; use the manual route when you want a dry-run preview before applying those files.
|
|
52
|
+
|
|
53
|
+
Review the displayed file name and ID when the wizard offers to pin it. If you skip pinning, verify the open file before `pnpm exec penpair connect --pin-file`; that flag accepts without another prompt. Fill in the installed `penpair-design/references/project-facts.md` and choose [companions](adapters.md) afterward. The wizard does not complete browser comparison integration.
|
|
54
|
+
|
|
55
|
+
For local Penpot, install `@penpair/docker` **instead of** `@penpair/web` and use `setup --docker --agents AGENTS.md`. Docker Desktop must be running. Web/Docker is a hosting choice, independent of assisted/manual installation.
|
|
56
|
+
|
|
57
|
+
## Same finish line
|
|
58
|
+
|
|
59
|
+
Whichever route you choose, check:
|
|
60
|
+
|
|
61
|
+
- `doctor` reports a healthy connection and intended file pin.
|
|
62
|
+
- `pages` lists the intended file's pages.
|
|
63
|
+
- Skills and routing are installed in the chosen instruction file, with project facts filled in or missing facts recorded.
|
|
64
|
+
- Personal credentials remain private; teammates each connect with their own key.
|
|
65
|
+
- Companion installation is recorded separately from approved references, browser-provider setup and completed visual checks.
|
|
66
|
+
|
|
67
|
+
See [skill installation](skill-installation.md), [troubleshooting](troubleshooting.md) and the [first task](../README.md#try-your-first-task) for what comes next.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Measured component pilot
|
|
2
2
|
|
|
3
|
-
`penpair marwes components snapshot [--write]`, `check [--measure]` and `diff` compare Button, Card and StatTile in explicit light/dark contexts. This is a pilot, not a generated native library. `build` refuses until a live pinned-API experiment proves text/style instance overrides survive updates.
|
|
3
|
+
`penpair marwes components snapshot [--write]`, `check [--measure]` and `diff` compare Button, Card and StatTile in explicit light/dark contexts. This is a pilot, not a generated native library. `build` refuses until a live pinned-API experiment proves text/style instance overrides survive updates. Measurement snapshots alone do not establish that native behavior.
|
|
4
4
|
|
|
5
5
|
The adopting project owns a stable fixture rendering its installed components with its actual theme, state and fonts. Use explicit selectors and named `data-pilot-part` anatomy nodes. React component names are not inferred from the DOM. Start with six cases (three components, two modes) and add actual states as needed, up to 60. Add this adapter-owned block under `marwes`:
|
|
6
6
|
|
package/docs/releasing.md
CHANGED
|
@@ -174,8 +174,8 @@ can consume that metadata without changing versions. If such a note blocks an
|
|
|
174
174
|
interrupted release, handle it in a reviewed metadata-only cleanup, preserve its
|
|
175
175
|
summary in the completion report and verify unchanged package/source versions
|
|
176
176
|
plus the existing manual gate. This does not apply to notes requesting a package
|
|
177
|
-
release.
|
|
178
|
-
|
|
177
|
+
release. Retain the reviewed cleanup rationale and unchanged-version checks with
|
|
178
|
+
the release's own evidence; never relax the existing release guards.
|
|
179
179
|
|
|
180
180
|
## A package npm will not accept yet
|
|
181
181
|
|
|
@@ -205,7 +205,11 @@ The core ships `dist`, `skills`, `LICENSE` and a short `README.md`. The web pack
|
|
|
205
205
|
|
|
206
206
|
## After publishing
|
|
207
207
|
|
|
208
|
-
|
|
208
|
+
Record registry versions, provenance and any explicit publishing exception in
|
|
209
|
+
the release evidence. Keep temporary release/recovery notes in `.working-docs/`
|
|
210
|
+
and lasting operational guidance in this document. A problem found in a published
|
|
211
|
+
version is answered with a new version of **all** packages, never by changing a
|
|
212
|
+
published one.
|
|
209
213
|
|
|
210
214
|
## Authentication and limits
|
|
211
215
|
|
|
@@ -1,5 +1,35 @@
|
|
|
1
1
|
# Install skills and integrate project instructions
|
|
2
2
|
|
|
3
|
+
## One skill pack, three hosts
|
|
4
|
+
|
|
5
|
+
There is one canonical installation skill, **penpair-setup**, for first setup,
|
|
6
|
+
assisted/manual routes and connection repair. The old `penpair-setup-guide` URL is
|
|
7
|
+
only a redirect. The other five skills own design operations, recipes, judgment,
|
|
8
|
+
frontend handoff and frontend verification; install does not create host-specific
|
|
9
|
+
versions of their instructions.
|
|
10
|
+
|
|
11
|
+
The installer stores one physical copy, normally in `.skills`, and creates
|
|
12
|
+
relative discovery links. It reuses an existing real skill folder, including
|
|
13
|
+
`.github/skills`, instead of creating a second copy.
|
|
14
|
+
|
|
15
|
+
| Host | Discovery path used by Penpair | Explicit use when available |
|
|
16
|
+
| --- | --- | --- |
|
|
17
|
+
| Codex | `.agents/skills/<name>/SKILL.md` | Mention `$penpair-setup` or select the skill in the host. |
|
|
18
|
+
| Claude Code | `.claude/skills/<name>/SKILL.md` | `/penpair-setup` |
|
|
19
|
+
| GitHub Copilot | `.agents/skills/<name>/SKILL.md`; Copilot also supports `.claude/skills` and `.github/skills` | Ask it to read the installed skill by name/path. |
|
|
20
|
+
|
|
21
|
+
All six entrypoints use shared `name`/`description` YAML metadata, task-specific
|
|
22
|
+
triggers and ordinary Markdown. Codex's optional `agents/openai.yaml` adds UI
|
|
23
|
+
metadata; it is not required by Claude or Copilot. Host selection still depends
|
|
24
|
+
on the request, host version/settings and available tools.
|
|
25
|
+
|
|
26
|
+
Choose an instruction destination the host actually loads. The examples below
|
|
27
|
+
use `AGENTS.md`. For Claude, use `--agents CLAUDE.md`, or maintain an explicit
|
|
28
|
+
reference from the project's existing Claude instructions to shared guidance.
|
|
29
|
+
Copilot projects can select `--agents .github/copilot-instructions.md` for native
|
|
30
|
+
repository instructions. Running install for a second instruction file reuses
|
|
31
|
+
the same skills; it does not make another pack.
|
|
32
|
+
|
|
3
33
|
```sh
|
|
4
34
|
penpair skills install --agents AGENTS.md --dry-run
|
|
5
35
|
penpair skills install --agents AGENTS.md
|
|
@@ -11,6 +41,53 @@ Without `--agents`, exactly one existing AGENTS.md or CLAUDE.md is selected. If
|
|
|
11
41
|
|
|
12
42
|
The installer appends a skills section when needed or replaces only the contents between `<!-- penpair:skills:start -->` and `<!-- penpair:skills:end -->`. Existing text outside the owned region, including line endings, is preserved. Duplicate, reversed or unmatched markers stop installation before any skill files are written. An instruction file edited after planning is preserved; retry after reviewing its current contents. A repeat run with identical content is a no-op. Existing file permissions are retained.
|
|
13
43
|
|
|
44
|
+
The owned block includes task-to-skill routing as well as a skill directory. It
|
|
45
|
+
instructs the agent to read the relevant skill before tool work, and follows the
|
|
46
|
+
selected skills when `--only` is used. Installation does not guarantee that a
|
|
47
|
+
particular model will select or correctly apply a skill, and selecting a skill
|
|
48
|
+
grants no additional write permission.
|
|
49
|
+
|
|
50
|
+
Run host-specific read-only discovery/routing diagnostics after a reviewed installation:
|
|
51
|
+
|
|
52
|
+
```sh
|
|
53
|
+
penpair skills check --agent codex --agents AGENTS.md --json
|
|
54
|
+
penpair skills check --agent claude --agents CLAUDE.md --json
|
|
55
|
+
penpair skills check --agent copilot --agents .github/copilot-instructions.md --json
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Check only hosts/instruction files you have configured. Without `--agent`, Codex
|
|
59
|
+
remains the default. Claude defaults to `CLAUDE.md`; Codex and Copilot default to
|
|
60
|
+
`AGENTS.md` when `--agents` is omitted. These checks verify files and routes, not
|
|
61
|
+
whether the host loaded them. Use repeated `--only NAME` for a partial install
|
|
62
|
+
and `--agents PATH` for its selected instruction destination. See
|
|
63
|
+
[skill validation](skill-validation.md) for results, limits and realistic model
|
|
64
|
+
invocation trials. Filesystem readiness does not prove correct agent behavior.
|
|
65
|
+
|
|
66
|
+
Bundled `agents/openai.yaml` files provide readable skill names, descriptions and
|
|
67
|
+
explicit starting prompts for Codex. Implicit invocation remains enabled; the
|
|
68
|
+
metadata is optional for discovery. Generated project instructions ask the agent
|
|
69
|
+
to briefly name the selected skill and its purpose. This makes intended use
|
|
70
|
+
visible without claiming a host-specific badge or completed verification. If a
|
|
71
|
+
new skill is absent from the host's available-skill list, check discovery first;
|
|
72
|
+
Codex normally detects changes automatically, with a restart as a fallback when
|
|
73
|
+
an update does not appear. See [official skill documentation](https://developers.openai.com/codex/skills/).
|
|
74
|
+
|
|
14
75
|
Local outputs must remain inside the project after resolving existing symlinks. An instruction link escaping the project or a dangling link is refused. The resolved destination is shown so a project wrapper or shared in-project target is visible. These operations do not edit global agent configuration. Entry-point/output checks do not sandbox arbitrary extensions.
|
|
15
76
|
|
|
16
77
|
Skill files modified by the project are kept unless `--force` is explicit. Project facts remain project-owned even with force, and rename migration preserves the prior facts. All writes are planned before execution, published as complete files, and instructions are written after skill copies/links. This is not a multi-file transaction: a filesystem failure or a concurrent owner edit can leave skill installation partly applied while preserving the instruction file. Review the report and rerun; unchanged files are skipped.
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
## Refresh an old setup without duplicates
|
|
81
|
+
|
|
82
|
+
Preview `penpair skills install --agents <your-instruction-file> --dry-run --json`.
|
|
83
|
+
Review `kept` files and `legacy` folders, migrate needed custom guidance into the
|
|
84
|
+
canonical skill or project instructions, then remove obsolete folders/links only
|
|
85
|
+
after that review. The installer reports old `penpair-setup-guide` copies in all
|
|
86
|
+
supported project folders and never deletes them. `skills check` stays incomplete
|
|
87
|
+
while those old setup folders remain. Project facts remain protected even with
|
|
88
|
+
`--force`; avoid force when you have not reviewed the kept changes.
|
|
89
|
+
|
|
90
|
+
See the official [Codex](https://developers.openai.com/codex/skills/),
|
|
91
|
+
[Claude Code](https://code.claude.com/docs/en/skills) and
|
|
92
|
+
[Copilot](https://docs.github.com/en/copilot/concepts/customizations/agent-skills)
|
|
93
|
+
documentation for host discovery and invocation details.
|