v2.4.0 · MITLocal-first231 tests

A local-first command center
for frontend code quality

better-ui scans your frontend projects for lint errors, accessibility gaps, performance issues, and code smells — then helps you fix them, one file at a time. No SaaS, no data exfiltration, no CI lock-in.

$ npm install -g better-ui-cli
$ npx better-ui-cli /menu

Get Started ↗View on GitHub ↗Learn more ↓

Features

Everything you need, nothing you don’t

Scan, analyze, fix, and report — all from your terminal. Works with React, Next.js, Vue, Svelte, Angular, Astro, and vanilla TypeScript.

Multi-scanner Analysis

ESLint, TypeScript diagnostics, and 8 built-in frontend heuristics covering accessibility, performance, and maintainability.

AI-Powered Fixes

12 LLM providers (OpenAI, Claude, Gemini, Groq, and more). Fix files with contextual rewrites, not regex.

6 Standalone Scanners

SEO audits, technical debt detection, performance profiling, stack analysis, migration readiness, and a consolidated health score.

Image Optimization

Discover oversized assets and generate WebP variants with configurable quality.

Interactive TUI

Dashboard, command palette, and hunk-level interactive fixing — all in your terminal.

Local-First Security

Zero network calls in product code. Path-validated writes. No telemetry. No SaaS. Your code never leaves your machine.

0

Network calls in product code

8

Built-in heuristic rules

5

Adapter patterns for 12 AI providers

Install

Global install or on-demand

Install globally

npm install -g better-ui-cli

Then run better-ui-cli /menu anywhere.

Run on-demand

npx better-ui-cli /menu

No install required — run via npx.

Quick Start

Try it in 10 seconds

# Open the interactive command center
better-ui-cli /menu

# Run a full scan
better-ui-cli /scan

# Check project health score
better-ui-cli /health

# Find dead dependencies
better-ui-cli /deps

# Scan for accessibility issues only
better-ui-cli /a11y

# Run an SEO audit
better-ui-cli /seo

# Show the top-10 most problematic files
better-ui-cli /hotspots --top 10

# List all project images with sizes
better-ui-cli /images

# Convert heavy images to WebP (quality 1-100)
better-ui-cli /images --generate --quality 75

# AI-powered fixes (scan → AI rewrite → re-scan)
better-ui-cli /fix

# Or run without installing
npx better-ui-cli /menu

Read the Docs ↗GitHub ↗npm ↗

Why better-ui

One tool to rule them all

No more juggling ESLint, Lighthouse, bundle analyzers, and SEO checkers. better-ui unifies them in a single terminal command.

Before better-ui

ESLint in one terminal tab
Lighthouse in another
Manual SEO checklist in a doc
CI pipeline for bundle analysis
Separate dependency audit tool
AI prompt copy-paste for fixes

After better-ui

/scan — ESLint + TS + heuristics, one command
/health — aggregated health score
/seo — 25-point automated audit
/performance — images, blocking resources, caching
/deps — unused + heavy dependencies
/fix — AI rewrites files, no copy-paste

Slash Commands

Everything at your fingertips

Every command starts with /. No flags to memorize for basic usage. Scope any scan with --changed or --staged.

/scancore

Full project scan (ESLint + heuristics + TS diagnostics)

/fixai

AI-powered fix or dry-run

/healthoverview

Project health score (0–100) with category breakdown

/hotspotsoverview

Files ranked by issue density and severity

/a11ycore

Accessibility-only scan

/depsaudit

Unused and heavy dependency analysis

/imagesaudit

Image inventory and WebP generation

/seoaudit

SEO audit (meta, OG, Twitter Cards, structured data)

/tech-debtaudit

Code smell detection (TODOs, console.log, :any, etc.)

/performanceaudit

Frontend performance audit

/stack-auditaudit

Technology stack and tooling analysis

/migrationaudit

Legacy pattern detection (CRA, Enzyme, class components)

/fe-scoreoverview

Consolidated frontend health score

/advancedoverview

Power-user cheat sheet

/menutui

Interactive TUI dashboard

/commandstui

Full command catalog

/aiai

Configure AI provider, API key, and system prompt

/custom-s-pai

View, edit, or reset the AI system prompt

/ui-colorsui

Color palette analysis (hex, rgb, hsl, inconsistencies)

/ui-standardsui

Component standards analysis

/ui-typographyui

Typography audit

/ui-spacingui

Spacing consistency scan

Git-aware: /scan --changed, /scan --staged, /fix --changed

Configuration

Zero config, or bring your own

Create better-ui.config.json in your project root. Or don't — sensible defaults apply.

Config file

{
  "projectName": "my-app",
  "preset": "next",
  "aiProvider": "Groq",
  "aiMaxFixLines": 400,
  "defaults": {
    "reportFile": "better-ui-report.json",
    "extensions": [".js", ".jsx", ".ts", ".tsx"]
  },
  "plugins": ["my-custom-scanner"]
}

Available presets: react, next, vite, landing-page, typescript-library

AI settings (.env)

AI_API_KEY=gsk_your_key_here
AI_PROVIDER=Groq
AI_MODEL=llama-3.3-70b-versatile

Auto-created, git-ignored. See docs for full schema.

React

.js,.jsx,.ts,.tsx

Next.js

.js,.jsx,.ts,.tsx

Vite

.js,.jsx,.ts,.tsx

Landing Page

.js,.jsx

TypeScript Library

.ts,.tsx

Custom

Use defaults.extensions

AI Providers

12 providers, 60+ models

Pick your model. Bring your own key. No vendor lock-in — switch providers with a single command.

ProviderAdapterAPI Key Setup

OpenAIOpenAI-compatibleplatform.openai.com/api-keys

GroqOpenAI-compatibleconsole.groq.com/keys

Anthropic (Claude)Anthropic Messagesconsole.anthropic.com

Google (Gemini)Geminiaistudio.google.com/apikey

DeepSeekOpenAI-compatibleProvider dashboard

MistralOpenAI-compatibleProvider dashboard

xAIOpenAI-compatibleProvider dashboard

MiniMaxOpenAI-compatibleProvider dashboard

NVIDIAOpenAI-compatibleProvider dashboard

OpenRouterOpenAI-compatibleProvider dashboard

Alibaba (Qwen)DashScopebailian.console.alibabacloud.com

CohereCohere Chatdashboard.cohere.com

API keys stored in .env — auto-ignored by .gitignore. Never logged.

Built-in Heuristics

Eight rules that run alongside ESLint

No configuration needed. These fire automatically on every /scan.

RuleCategoryDescription

large-filemaintainabilityFiles over 350 lines

img-altaccessibility<img> missing alt

clickable-divaccessibility<div onClick> — use <button>

inline-stylemaintainabilityInline style=

empty-buttonaccessibilityButton with no text or aria-label

input-labelaccessibility<input> without label

list-keyperformance.map() without key prop

heading-orderaccessibilitySkipped heading levels

Inline suppression

// better-ui-disable-next-line img-alt
<img src="decorative.jpg" />

/* better-ui-disable large-file */
// ... long component
/* better-ui-enable large-file */

// better-ui-disable  // disables ALL rules for this line

Health Score

How healthy is your frontend?

A single number (0–100) computed from every file in your project.

Formula

total = sum of (errorCount + floor(warningCount / 2))
score = max(0, 100 - min(100, total))

Thresholds

≥ 80Healthy

50–79Needs attention

< 50Critical

Report output

Reports save to .reports/<command>/<command>-<ISO>.<ext> by default. Override with --out <path> or skip writing with --no-save. Formats: json (default), markdown.

Works With

Your stack, supported

Scanners auto-detect frameworks and adapt analysis. No manual configuration needed.

React

Next.js

Vue

Svelte

Angular

Astro

Vite

Tailwind

TypeScript

Remix

Gatsby

Solid

Development

Build from source

git clone https://github.com/davidalarcondev/better-ui.git
cd better-ui
pnpm install
pnpm verify
pnpm build

Documentation

Everything you need to know

Scanner limitations ↗

Open source roadmap ↗

A local-first command centerfor frontend code quality

Everything you need, nothing you don’t

Multi-scanner Analysis

AI-Powered Fixes

6 Standalone Scanners

Image Optimization

Interactive TUI

Local-First Security

Global install or on-demand

Install globally

Run on-demand

Try it in 10 seconds

One tool to rule them all

Before better-ui

After better-ui

Everything at your fingertips

Zero config, or bring your own

Config file

AI settings (.env)

React

Next.js

Vite

Landing Page

TypeScript Library

Custom

12 providers, 60+ models

Eight rules that run alongside ESLint

Inline suppression

How healthy is your frontend?

Formula

Thresholds

Report output

Your stack, supported

Build from source

Everything you need to know

Start shipping better frontend code

A local-first command center
for frontend code quality