Cleaning Up "Dirty" AI-Generated CSS: Why I Built My Own Autonomous Tailwind Linter

Rashad Husanli — Mon, 18 May 2026 20:17:35 +0000

Recently, to speed up my frontend workflow, I started relying on AI (LLMs) to generate UI components. The code worked, and it looked fine on the screen. But when I looked at the source code, it was an architectural dump.

The AI kept using hardcoded pixel values like w-[321px] or text-[14px], and randomly hallucinating HEX colors like bg-[#ff0000] that weren't even in my design system.

Normally, the solution is simple: go back to the chat and say, "Fix this to match my Tailwind standards." But doing this for every component meant burning through my AI quota (and my money). My focus should be on getting the logic to work. "Grunt work" like standardizing pixels shouldn't require thinking, and it shouldn't be delegated to an expensive AI prompt. It should be handled by a local, autonomous tool.

Existing linters didn't solve these highly specific UI architectural issues out-of-the-box. So, I built my own zero-dependency autonomous gatekeeper: aura-lint.

How the Autonomous Auto-Fix Engine Works (--fix)

Aura-lint doesn't just find errors and yell at you. When you run it with the --fix flag, it dives into your code and cleans up the mess left by AI (or careless developers).

For example, to solve the recurring pixel (px) issue, I wrote a formula based on Tailwind's default 4-point grid system. When the engine sees a value written in px, it runs this simple but effective math in the background:

const twClass = pxVal / 4;
if (Number.isInteger(twClass)) {
  replacement = `${prefix}-${twClass}`;
} else {
  replacement = `${prefix}-${Math.round(twClass)}`;
}

What does this mean?

Did the AI write p-[16px]? Aura-lint divides it by 4, sees it's an integer, and instantly converts it to p-4.
Did the AI invent a weird value like w-[18px]? It divides 18 by 4 (4.5), rounds it up, and standardizes it to w-5.

This ensures you never have -[px] spaghetti in your codebase; everything aligns perfectly with standard Tailwind spacing.

You Are in Control: auralint.json

When designing Aura-lint, I wanted the setup and management to be incredibly simple. You can control everything with a single auralint.json file in your project root:

{
  "theme_path": "app.css",
  "hex_to_tailwind_map": {},
  "static_rules": {
    "must_not_have": [],
    "must_have": []
  },
  "plugin_rules": []
}

Thanks to this file, the tool reads your app.css and dynamically learns your theme's CSS variables. You can define your color transformations (hex_to_tailwind_map) and specify classes that must or must not exist in your codebase (static_rules).

Set Your Own Boundaries: The Plugin Architecture

Every project and every team has its own unique standards. That's why I didn't build Aura-lint as a closed black box, but as a fully extensible architecture.

You can write custom rules specific to your project in your plugins folder and inject them into the engine via the plugin_rules array.

In fact, I believe this is the true spirit of open source. If you write an awesome plugin that solves a common UI problem for your team, please send a Pull Request (PR) to our develop branch on GitHub. I would be thrilled to merge great solutions so everyone can benefit from them!

If you want to stop wasting your AI quotas on fixing CSS and start automating your UI architecture, check out Aura-lint on GitHub and drop a star to support the project:
👉 https://github.com/modoldern/aura-lint

I Hate Waiting for the Backend: Why I Built My Own Zero-Dependency Mock Server

Rashad Husanli — Mon, 18 May 2026 19:45:00 +0000

It all started with a simple thought experiment while I was building the backend architecture for my project.

I was working as a solo full-stack developer, but I couldn't help but think: "If I were working with a frontend team right now, they would be sitting idle, waiting for me to finish the APIs." I started looking for tools that would allow frontend developers to move forward without waiting for the backend. What I wanted was simple: a tool that required no backend coding and didn't exhaust me with complex configuration files. The existing tools were either too bloated or required too much setup boilerplate.

And that's how the idea for nullmock was born.

Why "Zero-Dependency"?

My spiritual mentor in programming, Tayfun Erbilen (the person whose videos taught me how to code), recently suffered an npm supply chain attack. That incident made me seriously reconsider things. Whenever we install a tool, we are secretly downloading hundreds of unknown dependencies behind the scenes. I wanted to minimize the developer paranoia of "Is there something malicious hiding inside the package I'm about to download?"

Because of this, I built Nullmock with absolutely zero external dependencies, relying purely on native Node.js power. It is a secure sandbox you can install and run with complete peace of mind.

What Does Nullmock Do?

Instead of writing complex route files, Nullmock uses the folder-based routing logic we all know and love from frameworks like Next.js.

For example, just create a file named mocks/api/users/[id]/GET.json. The server instantly recognizes this route. Furthermore, writing static JSON is boring, so I added "magic strings" for smart data generation:

{
  "id": "{{uuid}}",
  "name": "{{firstName:en}} {{lastName:en}}",
  "age": "{{number:18-65}}"
}

When you write this, Nullmock autonomously generates dynamic, localized (i18n supported) data for you on every request. If you want to test network latency on the frontend, simply append ?_delay=2000 to your URL, or ?_status=500 to simulate server errors.

Just the Tip of the Iceberg

What I've explained here is just a brief summary of what the engine can do. Nullmock doesn't leave you with a blank slate. When you visit the repository, you'll see that it comes out-of-the-box with industry-standard architectural examples and ready-to-use boilerplate that you can directly integrate into your workflow.

If you are tired of complex setups, a node_modules black hole full of security risks, and just want to spin up a dynamic API in seconds, give Nullmock a try.

You can check out the repo, explore the architecture, and drop a star to support the project here:
👉 https://github.com/modoldern/nullmock

DEV Community: Rashad Husanli