uilint-core

Core library for UILint - AI-powered UI consistency checking for React and Next.js applications.

Overview

uilint-core provides the foundational functionality for UILint, including:

- Style extraction - Parses HTML/CSS to extract colors, typography, spacing, and component patterns
- Ollama integration - Client for local LLM analysis via Ollama
- Style guide management - Read, write, and generate style guides
- Tailwind support - Extract and validate Tailwind CSS class usage
- Validation - Core validation logic for detecting UI inconsistencies

This package is typically used as a dependency by uilint, uilint-react, or uilint-mcp.

Installation

``bash
npm install uilint-core
`

Usage

$3

`typescript
import { OllamaClient, UILINT_DEFAULT_OLLAMA_MODEL } from "uilint-core";

const client = new OllamaClient({ model: UILINT_DEFAULT_OLLAMA_MODEL });

// Generate a style guide from extracted styles
const styleGuide = await client.generateStyleGuide({
colors: { "#3B82F6": 10, "#1E40AF": 5 },
fontSizes: ["14px", "16px", "18px"],
spacing: ["8px", "16px", "24px"],
});

// Analyze UI for inconsistencies
const result = await client.analyzeStyles(styleSummary, styleGuide);
console.log(result.issues);
`

$3

`typescript
import { extractStylesFromHTML } from "uilint-core";

const html =

console.log(styles.colors); // { "#3B82F6": 1 }
console.log(styles.fontSizes); // ["16px"]
`

$3

`typescript
import {
readStyleGuideFromProject,
writeStyleGuide,
styleGuideExists,
getDefaultStyleGuidePath,
} from "uilint-core/node";

const projectPath = process.cwd();

// Check if style guide exists
if (styleGuideExists(projectPath)) {
// Read the style guide
const content = await readStyleGuideFromProject(projectPath);
console.log(content);
}

// Write a new style guide
const guidePath = getDefaultStyleGuidePath(projectPath);
await writeStyleGuide(guidePath, "# My Style Guide\n...");
`

API

$3

`typescript
class OllamaClient {
constructor(options: { model?: string; baseUrl?: string });

generateStyleGuide(styleSummary: StyleSummary): Promise;
analyzeStyles(
styleSummary: StyleSummary,
styleGuide: string
): Promise;
queryStyleGuide(styleGuide: string, query: string): Promise;
}
`

$3

`typescript
function extractStylesFromHTML(html: string): StyleSummary;

interface StyleSummary {
colors: Record;
fontSizes: string[];
fontFamilies: string[];
spacing: string[];
borderRadius: string[];
shadows: string[];
tailwindClasses?: Record;
}
`

$3

`typescript
function readStyleGuideFromProject(projectPath: string): Promise;
function writeStyleGuide(path: string, content: string): Promise;
function styleGuideExists(projectPath: string): boolean;
function getDefaultStyleGuidePath(projectPath: string): string;
`

Prerequisites

For LLM-powered features, you need Ollama installed locally:

`bash


Install Ollama, then pull the default model

- uilint - Command-line interface
- uilint-react - React component for runtime analysis
- uilint-mcp` - MCP server for editor integration

Documentation

For full documentation, visit the UILint GitHub repository.

License

MIT