lintapple README

The project's README from github.com/gholtzap/lintapple. As one markdown file: README.md.

lintapple logo

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:

npm install -D lintapple && npx lintapple init

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:

npm run lint:ui

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:

npx lintapple http://localhost:3000 --json

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:

import { expectUI } from 'lintapple/playwright';

await expectUI(page, testInfo);

Findings fail the test and attach a JSON 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 equal the outer radius minus the inset.

You can also use controlContainers in the policy to select existing button containers. See example styles.

License

MIT. See LICENSE.

lintapple (gholtzap/lintapple)

Searching Database…

499 ·GitHub
Lintapple
这是干什么的?lintapple 是一个命令行工具,用来检查正在运行的 Web 应用的界面,找出 AI 编程工具常见的布局和设计问题,比如字体不对、对比度太低、元素没对齐、间距不一致。
它是在终端里运行的检查工具,还是要 import 到代码里的库?它是一个命令行检查工具:安装后会添加一个 ui-policy.json 配置文件和一个 lint:ui 的 npm 脚本,用来检查你正在运行的应用的 URL;另外它还提供一个辅助函数,可以在 Playwright 测试里调用。
怎么把它加到我的项目里?在应用的项目目录里运行安装命令;它会创建 ui-policy.json(你在里面设置字体和字号),并添加一个指向你应用 URL 的 lint:ui 脚本。
除了 Node,我还需要装别的东西吗?你需要 Node.js 22 或更高版本,而且你的应用必须已经在本地运行起来,这样 lintapple 才能通过它的 URL 进行检查。
所有检查开箱就能用,还是需要在代码里加标记?字体、对比度、控件尺寸和屏幕边界这几种检查不需要额外标记就能用,但间距、对齐和圆角检查需要给元素添加 data-ui-* 属性。
运行 lint:ui 时,退出码分别代表什么?退出码 0 表示检查通过,1 表示发现了界面问题,2 表示检查本身没有执行完成。
每一条检查结果会给我哪些信息?每一条结果都会报告违反的规则、涉及的元素、实际测到的数值,以及一个建议的修复方法。
我可以检查别的 URL 或者把结果保存下来吗?可以,lintapple 允许你指向其他 URL,也可以把输出保存成 JSON 报告,而不只是在终端里打印。
What are similar projects?testsprite-cli, e2e, agentic-playwright, SeleniumBase, playwright, playwright-python, midscene, perch
Which topics is it in?e2e-testing, test-automation, linter, playwright, static-analysis, design, cli-tool, testing, ui, web-development, command-line-tool, npm
Creator
gholtzap
Size
2 MB
Stars
499
Updated
CommitOct 16Releasev0.1.23Oct 16
Age
11d
Commits · 90 Days