ucli — Fast Offline Design System Linter & UI/UX Auditor

ucli is a blazing-fast, 100% offline Node.js CLI tool that functions as a strict frontend design system linter and UI/UX auditor. It runs lightning-fast local static code inspection to catch accessibility violations, performance bottlenecks, and design token inconsistencies in your UI codebase.

Features

1. Comprehensive Static Linter:
   • Tokens & Colors: Detects hardcoded hex (#ff0000) and raw rgb() strings bypassing CSS variables or theme tokens.
   • Spacing & Modular Grid: Catches odd spacing pixel values (11px, 13px, 17px, 23px) breaking standard 4px/8px design scales.
   • Accessibility (a11y): Detects missing alt attributes on images, non-interactive tags with click handlers missing role="button", and unlabelled inputs.
   • Performance (Perf): Catches unoptimized layout animations (e.g. width/margin transitions), missing lazy-loading, and Cumulative Layout Shift (CLS) triggers.
   • Smart Scoring: The overall UI Health Score intelligently scales based on project size, ensuring massive codebases are graded fairly.
2. Beautiful HTML Dashboard:
   • Automatically generates and opens a minimal, high-contrast visual dashboard summarizing your UI's health.
   • Features categorical breakdowns and overall design compliance scores.
3. CI/CD Pipeline Ready:
   • Returns strict exit codes (process.exit(1)) when design errors are detected to automatically block failing builds.
   • Supports --json output mode for machine-readable pipeline integrations.

Supported Languages & Frameworks

ucli is designed to be framework-agnostic and scans the following file types:

• Web Components & Markup: .html, .jsx, .tsx, .vue, .svelte
• Stylesheets: .css, .scss, .less
• Mobile UI: .dart (Flutter), .xml (Android), .swift (iOS/SwiftUI)
• Logic: .js, .ts

Installation

Install ucli globally on your machine:

npm install -g @uxiom/ucli

Usage & Commands

Run a Full Scan

Scan the current directory or a specific frontend directory:

# Scan current directory
ucli scan

# Scan a specific directory or file
ucli scan ./src/components

CI/CD Mode (Headless)

Run a scan without automatically opening the HTML dashboard in your browser:

ucli scan ./src --no-open

Output JSON for Pipelines

Output machine-readable structured JSON:

ucli scan ./src --json

License

MIT © Uxiom