better-design 0.42.0 → 0.43.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.
package/README.md CHANGED
@@ -25,6 +25,8 @@ The installer sends this label when creating a free key and records npm as the i
25
25
 
26
26
  Rerunning setup preserves existing connections. If setup reports a manual step, finish it first. Then ask your agent to list Better Design's design systems and confirm that a tool returns a result.
27
27
 
28
+ If something does not work, run `npx better-design doctor`. It checks your key, the connection to the server, each client's configuration, the review hook in this project and your version, and prints the command that fixes each problem. It changes nothing.
29
+
28
30
  ## Try it
29
31
 
30
32
  Ask your agent:
@@ -64,8 +66,10 @@ Your agent keeps a map of the product in `.better-design/feature-map.json`:
64
66
  each feature, its flows, and the route, screen, components and data of every
65
67
  step. `build-feature-map` drafts it from `git ls-files`, `read-feature-map`
66
68
  names what a change to a flow touches, and `update-feature-map` adds, renames
67
- or removes a feature or flow in one call. The map stays in your repository;
68
- the tools store nothing.
69
+ or removes a feature or flow in one call. The map can also hold one Main
70
+ Quest, a goal for a set time with at most 3 initiatives, so the agent says
71
+ when new work serves none of them. The map stays in your repository; the
72
+ tools store nothing.
69
73
 
70
74
  ## Share your team's rules with every agent
71
75
 
@@ -121,16 +125,40 @@ holds the key can confirm it, and the code works for ten minutes.
121
125
 
122
126
  ## Review UI code
123
127
 
124
- Check changed JSX and TSX files in your project:
128
+ Check changed JSX, TSX and CSS files in your project:
125
129
 
126
130
  ```bash
127
131
  npx better-design review
128
132
  ```
129
133
 
134
+ To check each file your agent edits, add the review hook to your project:
135
+
136
+ ```bash
137
+ npx better-design review --install-hook
138
+ ```
139
+
140
+ It adds the hook for Claude Code and for every other agent whose folder the
141
+ project has. Pick agents with `--host claude-code,codex,copilot,cursor,devin`
142
+ or `--host all`. Findings go back to the agent the way each agent reads them.
143
+ Codex asks you to approve the hook once with `/hooks`. Setup with `--project`
144
+ adds the hook for the clients it configures. The hook runs the release that
145
+ installed it; run the command again to move it to a newer release.
146
+
130
147
  It reads your `components.json`, the stylesheet it names and your UI folder, so
131
148
  a finding names your own theme colours and your components' variants. The
132
149
  check for classes Tailwind does not generate builds your Tailwind theme, which
133
150
  runs the plugins your stylesheet names, as your build does. The agent hook skips
134
151
  that check. Run `npx better-design review --help` for options.
135
152
 
153
+ ## Make a product video
154
+
155
+ Ask your agent for a launch film, a changelog clip or an App Store preview.
156
+ `plan-video` turns the one-line brief into beats, picks a Remotion component
157
+ for each beat and writes the film's skeleton. `cut-screen-recording` measures
158
+ a recording of your product with Remotion's own ffmpeg and cuts it into beats,
159
+ with the browser chrome cropped and the camera on what moves. On this local
160
+ server, `render-video-frames` renders chosen frames in your Remotion project
161
+ and shows them to the agent, so it checks its work before the full render.
162
+ The recording and the frames never leave your machine.
163
+
136
164
  [Installation guide](https://better-design.com/mcp/install) · [Design systems](https://better-design.com/design-systems) · [Website](https://better-design.com)