Forem: roynick365

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.