gholtzap / lintapple

# lintapple
It should be impossible for AI to make a bad UI.
npm · Demo
## Install
Requires Node.js 22 or later. Run in your app’s project directory:
 [code] 
This creates `ui-policy.json` and a `lint:ui` script. Existing settings are kept.
Set the fonts and text sizes in `ui-policy.json` to match your app. Set the app URL in the `lint:ui` script; the default is `http://localhost:3000`.
## Use
Start your app, then run:
 [code] 
Text reports group repeated problems and list their states, screen sizes, and themes.
The JSON report keeps every finding and adds a `summary` with counts by rule and groups with all measurements.
A group means the same rule, element, expected value, interaction phase, document, and frame path. Measured values can differ between occurrences.
Confirmed failures and unresolved checks have separate counts. Unresolved checks require review and still exit with code `1`.
The CLI writes the active font policy to stderr before the check. A font mismatch means the page differs from that policy.
Each finding includes the rule, element, measured value, and suggested fix.
Exit codes: `0` passed, `1` findings, `2` check did not finish.
To check another URL or save a JSON report:
 [code] 
For a page that loads asynchronously, add `--ready '[data-app-ready]'` with a selector that is visible when the page is ready.
## Use in Playwright
Add this to an existing test after the page is ready:
 [code] 
Checks apply to the current document. Child frames are not checked automatically.
Each page and state report includes `frameCoverage` with the checked document and omitted child frames, including nested frames. Frame paths such as `main/0/1` identify frames by their child order at the time of the check.
To check a frame, call `checkPage(frame)` separately. This includes cross-origin frames that Playwright can access.
A check with no findings does not prove that omitted frames pass.
Findings fail the test and attach a JSON report. If a passing page has omitted frames, the helper attaches a coverage report. The helper reads your `ui-policy.json`.
See the example tests.
## Mark layout elements
Font, contrast, control size, and screen bounds checks work without extra markup.
Add these attributes for checks that need layout information:
| Attribute | Use on |
| --- | --- |
| `data-ui-stack` | A group whose child spacing must be checked. |
| `data-ui-actions` | A button group whose gaps must be checked. |
| `data-ui-container` | A surface whose button insets must be checked. |
| `data-ui-number` | A changing number that needs equal digit widths. |
| `data-ui-content` | A container whose text must stay inside its edges. |
| `data-ui-align="start"` | A group whose marked elements must align. Use `center` or `end` for other alignments. |
| `data-ui-align-item` | Each element to compare in an alignment group. |
| `data-ui-radius` | An outer surface with equal corner radii and insets. |
| `data-ui-radius-inner` | Its direct inner surface. Its radius must e