better-design 0.19.0 → 0.20.0
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 +64 -2
- package/dist/index.js +17612 -5697
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -31,12 +31,12 @@ Your code stays in your repo and remains yours to change.
|
|
|
31
31
|
| Tool | Purpose |
|
|
32
32
|
| --- | --- |
|
|
33
33
|
| `find-design-system` | Find a catalog system for a requested interface. |
|
|
34
|
-
| `get-design-system-kit` | Retrieve installable React, HTML, or
|
|
34
|
+
| `get-design-system-kit` | Retrieve installable React, HTML, Shopify, or DTCG design-token output. |
|
|
35
35
|
| `get-design-system-status` | Check a generated system's progress and result. |
|
|
36
36
|
| `create-design-system` | Generate a custom design system for a product. Pass an extracted token sheet as `brandCss` to build from the user's own brand instead of a catalog look-alike. |
|
|
37
37
|
| `preview-design-system` | Show a token-true preview for a system. |
|
|
38
38
|
| `get-ui-principle` | Load visual guidance for layout, type, color, polish, and accessibility. |
|
|
39
|
-
| `get-ux-principle` | Load guidance for flows, forms, navigation, errors, onboarding, and
|
|
39
|
+
| `get-ux-principle` | Load guidance for flows, forms, navigation, errors, onboarding, behavior, and landing page positioning. |
|
|
40
40
|
| `get-react-native-guide` | Load React Native and Expo build guidance. |
|
|
41
41
|
| `get-three-js-guide` | Load Three.js and React Three Fiber build guidance. |
|
|
42
42
|
| `get-motion-guide` | Load animation and motion guidance. |
|
|
@@ -49,6 +49,68 @@ Your code stays in your repo and remains yours to change.
|
|
|
49
49
|
| `install-icons` | Install selected icons into the local project. |
|
|
50
50
|
| `detect-icon-library` | Detect an existing icon library in the project. |
|
|
51
51
|
| `review-illustration` | Review illustration output against Better Design rules. |
|
|
52
|
+
| `review-ui-code` | Deterministic review of React source: design-system drift, generated-UI tells, WCAG basics. |
|
|
53
|
+
|
|
54
|
+
## Review UI code like a PR bot
|
|
55
|
+
|
|
56
|
+
The `review` command checks React code against deterministic UI and UX rules: native elements your design system already replaces, hardcoded colors and raw palette classes, `dark:` forks, generated-UI tells (letter-spaced capital labels, left-border callout boxes, gradient text, labels above titles, em dashes in copy), and WCAG basics. The same input always produces the same findings.
|
|
57
|
+
|
|
58
|
+
```bash
|
|
59
|
+
npx better-design review # review changed files (vs HEAD, plus untracked)
|
|
60
|
+
npx better-design review src/components # review specific files or folders
|
|
61
|
+
npx better-design review --base main # review a branch, like a PR diff
|
|
62
|
+
npx better-design review --json # machine-readable output for CI
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
The command exits 1 when it finds critical or serious issues, so it works as a CI gate. Tune the threshold with `--fail-on critical|serious|moderate|none`.
|
|
66
|
+
|
|
67
|
+
Put your agent on rails: install the Claude Code hook and every file write is checked in real time, with violations fed back to the agent so it self-corrects without your intervention.
|
|
68
|
+
|
|
69
|
+
```bash
|
|
70
|
+
npx better-design review --install-hook
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Override the default rules per project in `.better-design/review.config.json`. For example, point element rules at your own component paths, or turn a rule group off:
|
|
74
|
+
|
|
75
|
+
```json
|
|
76
|
+
{
|
|
77
|
+
"rules": {
|
|
78
|
+
"elements": {
|
|
79
|
+
"button": { "use": "Button", "from": "@/ui/button" }
|
|
80
|
+
},
|
|
81
|
+
"semanticTokens": { "enabled": false }
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Agents can run the same checks through the `review-ui-code` MCP tool and fix the findings before presenting the result.
|
|
87
|
+
|
|
88
|
+
### Review every pull request
|
|
89
|
+
|
|
90
|
+
Add this workflow to review UI code on each pull request. It fails the check when it finds critical or serious issues:
|
|
91
|
+
|
|
92
|
+
```yaml
|
|
93
|
+
name: UI review
|
|
94
|
+
on: pull_request
|
|
95
|
+
jobs:
|
|
96
|
+
review:
|
|
97
|
+
runs-on: ubuntu-latest
|
|
98
|
+
steps:
|
|
99
|
+
- uses: actions/checkout@v4
|
|
100
|
+
with:
|
|
101
|
+
fetch-depth: 0
|
|
102
|
+
- uses: actions/setup-node@v4
|
|
103
|
+
with:
|
|
104
|
+
node-version: "lts/*"
|
|
105
|
+
- name: Review the changed UI code
|
|
106
|
+
env:
|
|
107
|
+
BASE_REF: ${{ github.base_ref }}
|
|
108
|
+
run: npx -y better-design@^0.19 review --base "$(git merge-base "origin/${BASE_REF}" HEAD)"
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
The `review` command needs version 0.19.0 or later, which the version range pins. Pass the branch through the environment rather than interpolating it into the script: a branch name is text a contributor controls, and `${{ }}` would place it straight into your shell.
|
|
112
|
+
|
|
113
|
+
To post the findings as review comments instead of failing the check, add `--json`, write the output to a file, and hand it to a script that calls the GitHub API. Better Design's own repository does this in `.github/workflows/ui-review.yml`.
|
|
52
114
|
|
|
53
115
|
## Explore Better Design
|
|
54
116
|
|