DEV Community: roynick365

Your UI Has Problems You Cannot See Until It Is Too Late

roynick365 — Fri, 01 May 2026 18:19:15 +0000

You ship a component. It looks fine. Users struggle with it anyway.
Not because of a bug. Because the button said "Go" instead of "Get Started". Because the empty state said "No data" instead of something a human would actually understand. Because the form had five fields when it needed three.

Small things. The kind you do not notice until someone else points them out.

I built a tool that points them out before you ship. And this week I made it a lot harder to ignore.

What changed

I added three things to Fix My UI, and one of them might save you from a review that comes back as "output too complex to be reliable" — which is a frustrating thing to find out after you have already waited for the result.

You now know before you run whether your component is going to get a good review.

A complexity indicator sits below the input and reads your HTML in real time. It counts your lines, counts your tags, and tells you whether what you have pasted is simple, medium, or complex. If it is complex, it tells you to split it before running.

Sounds obvious. I did not have it before. I was pasting full dashboard sections, getting weak reviews, wondering why, and only later realizing the component was too large. Now I know before I click the button.
You can now get the raw data out.

The Markdown export I shipped in the last version is good for PR comments and tickets. But sometimes you want the structured JSON — the scores, the issue array, the full machine-readable output. Maybe you want to store it, compare it across versions, or pipe it somewhere else.

JSON export is now a second button next to the Markdown one. One click, clean structured file, includes metadata.

You can now use the tool in the light. Dark mode only was a choice I made for myself and forced on everyone else. There is a toggle in the top-right corner now. It works.

The thing I keep learning building this
Every version I want to add ten things. Every version I add three. The discipline of asking "did I actually hit this problem or am I just adding features" is the only reason the tool still does one thing well.

The complexity indicator almost did not make it. I thought it was too small. But it is the kind of quiet improvement that makes every single interaction slightly less frustrating, and those compound.

What is coming next
The roadmap has three items and the third one is the interesting one.
Before and after rendered preview is coming — see the original and improved component side by side as actual rendered HTML, not just code.
CSS analysis alongside HTML is coming — right now the tool only sees your markup, not your styles.

And then there is screenshot input. Paste an image of a component, skip writing the HTML entirely, get a review based on what it actually looks like. I am still figuring out the right approach. It is the feature I am most curious about and least certain how to build well.

Try it: roynick365.github.io/fix-my-ui
GitHub: github.com/roynick365/fix-my-ui

If you paste a component and the review misses something obvious, open an issue. That is the most useful thing you can do right now.

Three Small Things I Added to Fix My UI That Made It Actually Useful in Real Work

roynick365 — Sun, 26 Apr 2026 13:44:27 +0000

A few days ago I shipped Fix My UI, a browser tool that reviews HTML components and tells you what is wrong. The core idea was simple: paste HTML, get structured feedback, move on.
It worked. But after using it myself for a couple of weeks I kept hitting the same friction points. So I fixed them.

The friction points and what I did about each one
Too many issues at once.
When I reviewed a complex component I would sometimes get nine or ten issues back. I did not want to see all of them at the same time. I wanted to handle the critical ones first and come back to suggestions later.
I added a severity filter. After a review runs, you can toggle critical, warning, and suggestion on and off independently. It sits in a thin bar below the result tabs and stays out of the way until you need it.
Re-pasting the same HTML over and over.
When I was iterating on a component, fixing one issue, then reviewing again, I kept copying and pasting the same HTML back into the input. On the third or fourth pass it got annoying.
I added session history. The last five reviewed components are stored in memory during the session. Each entry shows the first line of the HTML and the overall score. Click it to load the HTML back into the input instantly. Nothing is stored after you close the tab.
Sharing the review was awkward.
The review output lives across four tabs. When I wanted to share it with someone else, copying tab by tab and pasting into a message was clunky.
I added a Markdown export. One button downloads the complete review as a .md file: issues, improved code, quick fixes, and UX reasoning all in one clean document. I paste it straight into PR comments now.

None of these changed what the tool does
It still does one thing. You paste a component, you get a structured review. These three additions just made the workflow around that less frustrating.
Demo: roynick365.github.io/fix-my-ui
GitHub: github.com/roynick365/fix-my-ui

I got tired of fixing the same UI problems… so I built a small tool

roynick365 — Thu, 23 Apr 2026 16:59:45 +0000

Every project I work on has the same kind of issues.

Not big problems.
Small ones.

A button that says “Go” instead of something meaningful
Spacing that feels slightly off
A layout that works… but doesn’t feel clear
Empty states that look like placeholders

Nothing is broken. But something feels unfinished.

And the worst part?

You notice it. But explaining what’s wrong takes longer than fixing it.

The real problem

UI problems are rarely technical.

They’re small decisions:

wording
hierarchy
spacing
clarity

And they keep repeating across projects.

Most of the time, we fix them:

late
quickly
inconsistently

There’s no simple way to review a component and say:

“Here’s exactly what’s wrong, and here’s how to improve it.”

So I built something simple

I made a small tool called FixMyUI.

👉 https://github.com/roynick365/fix-my-ui
👉 https://roynick365.github.io/fix-my-ui

You paste an HTML component, and it gives you:

issues ranked by severity
an improved version
before-and-after changes
reasoning for each fix

That’s it.

Example
Go

Becomes:

Get Started

With explanation:

“Go” is unclear. A more specific label improves usability.

What makes this different

This is not a UI generator.

It doesn’t try to replace your UI.

It helps you improve what you already have.

Why I kept it simple

I didn’t want another tool that does everything.

I wanted something I could use during development:

Paste component
Review issues
Apply fixes
Continue working

No setup. No learning curve.

It’s still early

I’m working on:

better analysis for edge cases
before/after preview
improving output quality
If this sounds useful

Try it, break it, suggest improvements.

👉 https://github.com/roynick365/fix-my-ui

If you’ve ever looked at your UI and thought
“something feels off, but I don’t know what” - this tool is for that moment.

I built a small CSS library for UI states (because I kept rewriting the same thing)

roynick365 — Tue, 21 Apr 2026 18:07:01 +0000

I built a small CSS library for UI states (because I kept rewriting the same thing)

Most UI libraries focus on buttons, forms, and layouts.

But in real projects, a lot of time goes into something else:

empty screens
loading states
error messages
first-time user experiences

And somehow, these are always built last.

The problem

I noticed a pattern in almost every project I worked on:

Empty states were inconsistent
Loading states were rushed
Error messages felt generic
Onboarding screens were overthought

Nothing was technically hard — just repetitive and easy to ignore until the end.

So I built something small

I created StateKit — a lightweight CSS library focused only on UI states.

No framework. No setup.

Just copy and use.

👉 https://github.com/roynick365/statekit
👉 https://roynick365.github.io/statekit/

What it includes

Empty state
Empty search
Error state
404 page
Success state
Loading spinner
Loading skeleton
Onboarding state

Each component is plain HTML + CSS and can be dropped into any project.

Example

<div class="sk-empty">
  <h3>No data available</h3>
  <p>Create your first item to get started.</p>
  <button class="sk-btn">Create</button>
</div>

Why this exists

I didn’t want another UI framework.

I just wanted something to handle the parts that usually get rushed or overlooked.

What I learned building this

Simple tools are harder than they look
Consistency matters more than complexity
Most “UI problems” are actually small decisions repeated many times

What’s next

More variants for each state
Dark mode
Accessibility improvements
Possibly React wrappers

Feedback welcome

If you have suggestions or want to contribute:

👉 https://github.com/roynick365/statekit

If you’ve ever rebuilt the same empty or loading state more than once, this might help.