chore: Add storybook harness.

.gitignore

@@ -10,6 +10,7 @@ dist
 
 dist
 storybook-static
+.storyshots
 
 test.html
 

README.md

@@ -23,6 +23,25 @@ _To see the latest designs, check out the [Figma](https://www.figma.com/file/aWU
 > yarn watch:truss
 ```
 
+## Storybook Screenshot Harness
+
+Use this local harness when iterating on UX changes with an agent.
+
+```bash
+# Terminal 1: start Storybook
+yarn storybook
+
+# Terminal 2: capture a baseline screenshot
+yarn story:screenshot --story inputs-text-field--default --name baseline
+
+# After making code changes, capture and diff against baseline
+yarn story:screenshot --story inputs-text-field--default --name iter-1 --compare baseline
+```
+
+- Screenshots are stored in `.storyshots/<story-id>/` by default.
+- `--url` also works if you copy a Storybook URL directly from the browser.
+- `--selector` lets you capture a specific element instead of the full story frame.
+
 ## Beam's API Design Approach
 
 tldr: **Consistency & Brevity** over **Power & Flexibility**.

package.json

@@ -39,6 +39,7 @@
     "lint": "eslint --ext js,ts,tsx src",
     "lint:fix": "eslint --ext js,ts,tsx --fix src",
     "storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 9000",
+    "story:screenshot": "node scripts/storybook-screenshot.mjs",
     "chromatic": "chromatic --project-token=074248da7284 --exit-once-uploaded --only-changed",
     "copy": "npx copyfiles -u 1 \"./src/**/*.css\" \"./dist/\"",
     "copy-to-internal-frontend": "cp -r dist/* ~/homebound/internal-frontend/node_modules/@homebound/beam/dist/",
@@ -113,8 +114,9 @@
     "jsdom": "^29.0.0",
     "mobx": "^6.15.0",
     "mobx-react": "^9.2.1",
-    "prettier": "^3.8.1",
-    "prettier-plugin-organize-imports": "^4.3.0",
+    "pixelmatch": "^7.1.0",
+    "playwright": "^1.58.2",
+    "pngjs": "^7.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "semantic-release": "^24.2.9",