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 — это консольная утилита, которая проверяет интерфейс работающего веб-приложения на ошибки вёрстки и дизайна, которые часто допускают ИИ-инструменты для написания кода: неподходящие шрифты, слабый контраст, смещённые элементы и непоследовательные отступы.
Это линтер, который я запускаю из терминала, или библиотека, которую я подключаю в код?Это консольный линтер: при установке добавляются конфиг ui-policy.json и npm-скрипт lint:ui, который проверяет URL вашего запущенного приложения. Кроме того, есть вспомогательная функция, которую можно вызывать из тестов Playwright.
Как добавить его в свой проект?Запустите команду установки в папке проекта вашего приложения; она создаст файл ui-policy.json (там вы задаёте свои шрифты и размеры) и добавит скрипт lint:ui, который указывает на URL вашего приложения.
Нужно ли что-то ещё, кроме 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
10d
Commits · 90 Days