uilint

The Layout Linter for Your Frontend

uilint is a tool that verifies the visual layout of your web application. Just as ESLint checks your code for syntax errors, uilint checks your page for layout violations—ensuring elements are aligned, responsive, and positioned correctly across all screen sizes.

Why Layout Linting?

CSS is powerful but fragile. A small change in one component can break the layout in another, especially on different viewports. Manual visual QA is slow, and screenshot testing is often flaky and hard to maintain.

uilint solves this by letting you define Layout Specs in TypeScript. These specs describe the invariants of your design (e.g., "header is always at the top", "cards are aligned horizontally"), which uilint verifies against your running application.

Quick Start

Initialize a new project:

npx uilint init

Run the layout check:

npx uilint layout

Documentation

• Getting Started: Installation and your first layout spec.
• CLI Reference: Configuration, commands, and scenarios.
• Core API: Comprehensive reference for constraints (inside, below, alignedHorizontally, etc.).
• Best Practices: Tips for writing robust, maintainable specs.
• Advanced Playwright: Deep dive into the Playwright integration.

How It Works

1. Configure: Set up uilint.config.ts with your project details and viewports.
2. Scenario: Write a simple script to visit a page and take a snapshot.
3. Spec: Define the layout rules for that page.
4. Run: Execute npx uilint layout to see if your implementation matches the spec.

Building and Testing

From the repository root:

pnpm install
pnpm exec playwright install   # first time only

pnpm lint
pnpm build
pnpm test

See examples/uilint-crm-demo/ for a complete, runnable example.