I built this because AI coding assistants (Claude, Cursor, Copilot) don't understand existing UI projects. They generate components with wrong styling, miss existing reusable components, and break naming conventions.
UIQuarter runs 20 static analyzers on your codebase using AST parsing (ts-morph). What it detects:
Every component with props, hooks, and file location
Full dependency graph (render edges, context providers, hook dependencies)
Styling patterns — your actual Tailwind tokens, CSS Module mappings, design system specifics
Architecture issues — hub components, orphans, circular deps, deep chains
Then generates context files for 7 AI tools (CLAUDE.md, .cursorrules, .windsurfrules, .clinerules, copilot-instructions.md, AGENTS.md, CONVENTIONS.md).
Benchmark on a React + Tailwind project (11 files, 71K chars): 17,800 context tokens → 325. 12 tool calls → 1 file read. The AI uses your actual design tokens instead of generic styling, reuses existing components instead of creating duplicates.
Supports React, Vue, Svelte, Angular, Next.js, Nuxt, SvelteKit, Solid, Lit, Qwik + backend patterns. Also has a query engine, drift detection, CI integration, MCP server.
I built this because AI coding assistants (Claude, Cursor, Copilot) don't understand existing UI projects. They generate components with wrong styling, miss existing reusable components, and break naming conventions.
UIQuarter runs 20 static analyzers on your codebase using AST parsing (ts-morph). What it detects:
Every component with props, hooks, and file location
Full dependency graph (render edges, context providers, hook dependencies)
Styling patterns — your actual Tailwind tokens, CSS Module mappings, design system specifics
Naming conventions, directory structure, export patterns
UX patterns — error/loading/empty states, accessibility attributes
Architecture issues — hub components, orphans, circular deps, deep chains
Then generates context files for 7 AI tools (CLAUDE.md, .cursorrules, .windsurfrules, .clinerules, copilot-instructions.md, AGENTS.md, CONVENTIONS.md).
Benchmark on a React + Tailwind project (11 files, 71K chars): 17,800 context tokens → 325. 12 tool calls → 1 file read. The AI uses your actual design tokens instead of generic styling, reuses existing components instead of creating duplicates.
Supports React, Vue, Svelte, Angular, Next.js, Nuxt, SvelteKit, Solid, Lit, Qwik + backend patterns. Also has a query engine, drift detection, CI integration, MCP server.
npm install -g uiquarter