Install and try

Try ui-consistency

Skills and rules that make your coding agent build screens the way your project already builds them. Like superpowers, but for UI.

Node 20+ No build step github.com/kamenkurtev/ui-consistency

What it actually does

Before your agent builds or changes a screen, it reads the screens of that kind your project already has — the holder, the order of the regions, which component fills each role, the props most of them are written with — and writes that down as a pattern file in .ui-consistency/patterns/.

Then every screen is written from that file, one at a time, so the thirtieth matches the first. At the end, every screen touched is compared against it.

There is no built-in list of components, no framework it prefers, no API key and nothing to configure.

Install it

  1. 01

    Add the marketplace and install

    In Claude Code:

    /plugin marketplace add kamenkurtev/ui-consistency
    /plugin install ui-consistency@kkurtev-plugins

    Gemini CLI, Codex and Cursor have manifests too — see the README.

  2. 02

    Ask for a screen

    That is the whole setup. The agent picks up the skills on its own: it establishes the pattern first, then writes the screen from it. Where there is nothing to copy — the first screen of a kind — it asks you what the screen should look like, and writes down only what you answered.

  3. 03

    Ask it whether it is doing anything

    > use ui-consistency:reach

    It answers level by level, and there are only three answers:

    Works
    and here is what it read
    Quiet
    because your project has stated nothing — this is the design, not a fault
    Blind
    it cannot see here, and here is why

    No score and no grade.

The skills

The agent uses them on its own; you can also invoke any of them by name.

ui-consistency:patternwhat screens of this kind look like here
ui-consistency:decidethe first screen of a kind, when there is nothing to copy
ui-consistency:screenwrite one against the pattern
ui-consistency:rolloutapply it across many, one file per turn
ui-consistency:verifycompare the finished set, before a PR
ui-consistency:reviewa second opinion on one screen
ui-consistency:reachwhich of the three silences you are looking at

When you report back

Keep the numbers and drop the names. Rename every component, screen, route file and test-id prefix to a neutral equivalent of the same shape — OrdersGrid for a PascalCase grid, app-orders-grid for its selector form.

Reporting something