Github Link: https://github.com/LadyBeGood/doraemon

It's fairly chunky code-wise, but for pure CSS I'm happy :)

You can play with it/customize it here:
https://doathingy.com/?tool=dt_1778362378294_6v0gj6

(You may need to wait a minute for the tool to load, I'm still working on Doathingy, just using it here to share this work)

At least I'm enjoying myself :)

Color picker here: https://codepen.io/Inefficient-Code/pen/KwNMRao
Menu here: https://codepen.io/Inefficient-Code/pen/ZYBOoow

If you've always wanted to switch your favicon based on dark/light mode, here's how to do it. I bet you already know that! 😊

Bonus: If you use an SVG favicon, you can use media queries within it to achieve the same "effect".

I kept ending up with Tailwind class strings that looked like this:

className="px-4 py-2 rounded hover:bg-blue-500 hover:text-white hover:shadow-lg focus:ring-2 focus:ring-offset-2 focus:outline-none active:scale-95"

After doing this repeatedly across components, I made a tiny utility called tw-variant to group variant prefixes automatically.

Example:

import { tv } from "tw-variant"

const buttonStyles = tv({
  base: "px-4 py-2 rounded font-medium transition-all",
  hover: "bg-blue-500 text-white shadow-lg",
  focus: "ring-2 ring-offset-2 outline-none",
  active: "scale-95",
  dark: "bg-gray-900 text-white"
})

Generated output:

"px-4 py-2 rounded font-medium transition-all hover:bg-blue-500 hover:text-white hover:shadow-lg focus:ring-2 focus:ring-offset-2 focus:outline-none active:scale-95 dark:bg-gray-900 dark:text-white"

Why I made it:

• reduces repeated hover: / focus: / dark: prefixes
• keeps Tailwind class strings easier to read
• works with any Tailwind variant
• tiny + zero dependencies
• full TypeScript support

Works nicely alongside clsx, cn, or tailwind-merge.

import clsx from "clsx"

className={clsx(
  tv({
    hover: "shadow-lg",
    focus: "ring-2",
    dark: "bg-gray-900"
  }),
  isDisabled && "opacity-50"
)}

Install:

npm install tw-variant

Github: https://github.com/kushalxcoder/tw-variant
NPM: https://www.npmjs.com/package/tw-variant

Would genuinely love feedback/suggestions/improvements.

Customizable and all code here: https://doathingy.com/?tool=dt_1778503835266_c5lcoh

I had seen some great liquid effects (like this Liquid), but nothing quite satisfactory. I'm using the overlapping div circles with svg filters (gaussian blur) trick and then built a custom js "physics engine", text sits in a separate layer.

I built a visual frontend asset library so I can stop losing my own UI snippets

As a web developer, I often build or collect small frontend assets that are useful later: buttons, gradients, loaders, hover effects, CTAs, footers, bento grids, layout fragments and product UI patterns.

The problem is that these assets usually end up scattered across old projects, screenshots, notes, CodePens, local folders or random files. When I need one, I know I already made something similar, but finding it takes too long.

So I built UI IP Toolkit: a static visual catalog for fast access to my copy-ready frontend assets.

Live site: https://ui-ip-toolkit.vercel.app/ GitHub: https://github.com/ikerperez12/UI-IP-Toolkit-v4.0

What it is

UI IP Toolkit is a public, static frontend asset library. It is designed to be browsed visually, not as a package install.

It includes sections for:

• Buttons and interaction states
• Gradients and color systems
• Loading patterns
• Text effects
• Hover treatments
• Glass surfaces
• CTAs and pricing blocks
• Footers
• Bento grids
• Navigation patterns
• 404 and recovery pages
• Product UI patterns
• Layout fragments and reusable CSS utilities

Every card is meant to be practical: open the site, scan visually, copy the snippet, adapt it, and move on.

Why I made it static

I wanted the toolkit to be simple, fast and easy to publish:

• No backend
• No runtime framework dependency
• No account required
• No build step needed for browsing
• Self-hosted fonts and assets
• Deployed as a static site on Vercel

The goal was not to create a huge npm package or a rigid design system. I wanted a personal working library that feels visual and fast enough to use during real frontend work.

The main use case

When I am building a new page or feature, I can open the toolkit and quickly find a starting point:

• Need a loader? Go to Loading States.
• Need a CTA? Open CTA Blocks or Purchase CTAs.
• Need a footer? Open Footer Systems.
• Need a visual layout idea? Open Bento Systems.
• Need a small CSS utility? Open the utilities section.

It is basically a visual memory layer for reusable frontend work.

Tech stack

The project is intentionally simple:

• HTML
• CSS
• Vanilla JavaScript
• Local fonts
• Local media assets
• Vercel static hosting

The repository is public here:

https://github.com/ikerperez12/UI-IP-Toolkit-v4.0

The live version is here:

https://ui-ip-toolkit.vercel.app/

What I learned

The biggest improvement was not adding more components. It was making the catalog easier to navigate.

Once the toolkit had many sections, a long top nav became useless. I replaced it with a compact section menu grouped by category. That made the site feel much more like a real working tool instead of a long landing page.

I also learned that previews matter a lot. If every card looks too similar, the library feels bigger than it is useful. So I spent time making the previews more varied and more realistic while keeping the site lightweight.

Feedback welcome

I am sharing this because I think other frontend developers might have the same problem: useful assets scattered everywhere, but no quick visual way to reuse them.

Would you use a personal visual asset catalog like this in your own workflow? And what sections would you add next?

Live site: https://ui-ip-toolkit.vercel.app/ GitHub: https://github.com/ikerperez12/UI-IP-Toolkit-v4.0

[SELF-PROMOTION]

I built Tailfind, a Chrome extension for developers who work with Tailwind.

At first, I built it for personal use. I found it very useful, especially when developing new pages based on references from other interfaces. The main pain point it solves is reducing the manual work needed to recreate UI patterns. I decided to move forward and share it with other developers. I built Tailfind using Codex and managed to create an automated flow that successfully learned how to parse elements and generate clean, plain Tailwind output.

The idea is simple:
When you find a useful UI pattern on a real page, Tailfind lets you inspect the element, capture the right fragment, and convert it into plain Tailwind-ready HTML.

- No rebuilding from a blank file.
- No manually copying styles one by one.
- Just select, copy, paste, and keep moving.

It’s especially useful when prototyping, rebuilding existing interfaces, or turning live UI references into a starting point for Angular, React, Vue, or Svelte projects. Tailfind can also open the generated HTML directly in Tailwind Play, so you can tweak the result before bringing it into your codebase.

I’m currently refining the extension and would love feedback from developers who use Tailwind in real projects.

Chrome Web Store:
https://chromewebstore.google.com/detail/tailfind/famibopnbenoegknengohifmnjnkhohh

Website:
https://tailfind.org

Full Website capture GitHub page from my extension:
https://play.tailwindcss.com/XiZtXbLn9W

Not sure if I'm aloud to post links to my own site?

I am learning web development, mainly HTML and CSS and I found this card with the electric border while looking for things made with only CSS.

https://codepen.io/BalintFerenczy/pen/KwdoyEN

I thought it was a pretty cool looking effect.

Not very useful but that didn't stop me from seeing what I could do with it.

Initially I just changed a couple of things and made this: https://thisistheway.one

But what I really wanted was to make a divider with it and ended up with this: https://thisistheway.one/divider-index.html

Doathingy.com for anyone curious or interested in signing up for early access testing!

The tool is StyleBop. Folder of .css files in, folder of .css files out — same files on disk, formatted cleanly, no proprietary format, no compile step. Open the same folder in VS Code afterward and the diffs are clean.

The reason I built it: I love writing CSS, but I don't love hand-managing a :root of 80 custom properties or hunting down which selector owns the padding-block: 1.25rem I want to tweak. So this is a CSS-aware editor that knows what's in your stylesheets and lets you act on the structure, not just the text.

Modern CSS it understands as first-class:

• u/layer — cascade layers are surfaced in the UI; you can pick which layer a ruleset belongs to and drag-reorder priority
• u/container and named container queries — write the condition once, the canvas previews under it
• u/supports — feature queries with and/or/not compound forms
• u/media wrapping rulesets directly
• CSS nesting (& .child)
• u/keyframes + a draggable timeline with cubic-bezier curve editor
• u/font-face families grouped in the Tokens tab
• Custom properties (var(--token)) — resolved inline by default, swap to raw var() syntax with one toggle

The thing I'm proudest of: project-wide token refactors.

• Extract to Variable — pick any literal (#3b82f6, 1.25rem, cubic-bezier(0.4, 0, 0.2, 1)), hit a shortcut, and it rewrites every matching occurrence across every file in the folder to var(--name). Per-file undo entries. Suggested names use a curated palette: #6495ED extracts as --color-cornflower, not --color-6495ed.
• Usage tracker — every variable in the Tokens tab shows a usage count badge. Click to see every file/ruleset that consumes it. "0 references — safe to delete" stops dead tokens from accumulating.
• Resolution chain — vars resolve through :root, layer overrides, and parent rulesets, so what you see is what the browser will compute.

What it doesn't do:

• Not a framework. No Tailwind output, no utility classes, no build step.
• Not a generator. It edits your CSS, it doesn't author it from scratch.
• No JS or HTML editing — the canvas previews shapes/typography/effects but the surface area is CSS only.

Native:

100% Swift/SwiftUI, code-signed, notarized, Sparkle auto-update, no telemetry. Localized in 8 languages.

----

I'd love hard feedback from people who write CSS for real — especially edge cases I haven't hit. Try opening a real codebase and tell me what breaks.

Download: https://bendansby.com/apps/stylebop.html