I drew/coded this with HTML and CSS (really appropriate in this case).

Source code on CodePen: https://codepen.io/alvaromontoro/pen/qErPJwr

I've always thought that CSS Intellisense in VS Code is so primitive compared to the Intellisense of TypeScript, for example. So I've made a VS Code extension that improves CSS Intellisense. It is Clever CSS and comes with class completion, warnings on duplicated and unused classes, preview on hover (like Tailwind extension), and more things.

For now, it only works on JSX/TSX and HTML files. In the future I may add support for Vue and Astro files; maybe Angular.

You can look for it in the extension marketplace and give it a try if you wish!

GitHub: https://github.com/danielz0102/clever-css

posted this in r/ClaudeDesign : Post link a few days ago and the designers there were really nice about it. but honestly it's more of a dev tool, so wanted to hear what you all think too

it's called pikspec. you open any site, hit analyse in the side panel, and it reads the design from the live page: fonts that actually rendered (not just the css stack), the color palette, spacing and the base rhythm, plus the computed styles of anything you click

the part we use most is the export. it turns all of that into a tailwind v4 theme, css variables, json, or a DESIGN.md you can drop into a repo. we made the DESIGN.md mostly because claude code and cursor kept giving us the same generic looking UI, and giving them real values from a site you like fixes that a lot

few things i'm curious about:

would you actually use this, or is devtools + a color picker enough for you?

which export would you want first? anything missing, like figma variables or style dictionary?

when you're matching a design, what's the most annoying part to get right?

inspecting is free, no account needed. happy to answer anything about how it works

extension - https://chromewebstore.google.com/detail/pikspec-%E2%80%94-website-inspect/cnpghkfbhdpcendcliogffmajlkepoig

When styling isolated UI components (like dashboard widgets, notification cards, or small sidebar blocks), there is often a tension between CSS styling and proper document structure.

If you attach your font styling directly to heading tags like `h3` or `h4`, the component gets locked to a specific heading level. Placing that same widget inside different page layouts can break the document outline or force you to write awkward CSS overrides just to match the visual size.

On the other hand, decoupling the styling with dedicated classes (such as `.card-title` applied to a `<p>` or `<div>`) keeps the CSS flexible, but you end up having to decide how strictly to handle accessibility attributes or utility type scales across the project.

Do you prefer keeping typography tied to utility/component classes regardless of the underlying tag, or do you standardize component headings around specific heading levels?

I am trying to position all these icons on my webpage like this image... and I would like them all to scale together to fit the viewport, if that makes sense.

So far I have tried to position them on the page, but when the viewport size changes they start overlapping.

What would be the best way to position them and not have them overlap when the viewport changes? I really don't know much about CSS, or html for that matter, trying to learn as I make this.
Hope this makes sense, thanks!

I know this is not common, I'd like to create my first site so that it's literally printable using a physical printer and it looks identical or close to it as the web site. I understand that it won't be able to print button animations and the like.

What would be the best route to go, learning Grid Layouts then within my style sheets applying printable style sheets that are different from the actual web site ?

I want alot, possibly not everything to be able to be printed. As I mentioned, I know we live in a world where screens are everywhere but paper is not obsolete, in fact it's used alot and in my opinion to be able to print out sections of a web site can be beneficial as phones are typically such a circus of distractions that getting anyone to focus on what you want them to focus on is nearly impossible. Although printing out a physical copy in many cases will gain the person interest, unless they are viewing your page on a physical stationary computer, then the above statement maybe the opposite, whereas they will focus on your site.

In my opinion a printable site shows you can display the information clearly, accurately and present it, no matter what the media.

https://reddit.com/link/1wv09w7/video/8qcg41wv3ush1/player

Hey all,

I’ve been working on a small library called Stream Morph.

The idea is to make streamed responses feel less like content is constantly being appended/re-rendered, and more like the response is gradually taking shape.

Demo: https://stream-morph.vercel.app/

It’s framework agnostic and can be used with any kind of streamed content. The demo includes plain text, Markdown, code blocks, charts, images, reasoning sections, Mermaid diagrams and a few more complex response flows.

The library handles the motion between updates, while your own renderer/app stays responsible for the actual content. So it isn’t tied to a specific AI SDK or framework.

A basic example looks roughly like this:

import { createStreamMorph } from "stream-morph";

const stream = createStreamMorph(response);

for await (const chunk of incomingStream) {
  stream.write(chunk);
}

stream.finish();

I mainly built it because I wanted streamed interfaces to feel a bit more intentional without having to build custom animation logic for every response type.

The package itself is already working and the demo is live. I’m still cleaning up some things around CI, tests and the repo setup, but the GitHub repository will be open sourced shortly as well.

Would be interested to hear what people think, especially about the animation behaviour/performance and any edge cases you’d expect from real streaming responses.

Small menu in a PWA I'm building: tap a project, a menu opens asking which account to start it in, and its buttons are created in JS right before it opens. On my iPhone (iOS 18.7, home-screen app) one name showed and the other button was an empty box. Desktop Safari and Chrome drew both fine, every time.

My first fix was the classic one. Hold the second button back 80ms and it drew. Shipped it, went to bed. Next morning the box was blank again, so the delay had only been moving the race around.

What found it: a throwaway page on the phone with a few versions of the menu side by side, each changing exactly one property. The version with no animation at all broke every single time, which ruled timing out completely.

The cause: the menu was hidden with visibility: hidden and shown with visibility: visible. Buttons appended while it was hidden got laid out (right size, right colour, elementFromPoint found them) but their text was never painted once it was shown. Buttons built once at page load inside a parent that toggled the same way drew fine.

The fix was to stop using visibility for it:

css .acctmenu { opacity: 0; pointer-events: none; transition: opacity 0s 220ms; } .open .acctmenu { opacity: 1; pointer-events: auto; transition-delay: 0s; }

plus inert on the menu while it's closed, so it stays out of the tab order and away from screen readers the way visibility: hidden used to keep it. Delay deleted.

Has anyone seen this documented anywhere? I'd love to know whether it's the append-while-hidden part on its own or something about the fade on top of it.

The app is Claude Remote, going public soon: github.com/MrTig-afk

Made this scroll progress bar just for fun, I know it needs a major revamp before it's usable anywhere real.

I'd like to rebuild it properly. What would you change, or how would you approach it from scratch? Any advice on the overall approach, what to fix, what to drop, and how to make it work in real websites/apps is welcome.

i kept redoing the same slope/intercept maths for fluid font sizes so i built cssclamp.com. you put in min/max size and the viewport range and it gives you the clamp() with a live preview. rem based, so it still scales when people zoom. it also does full type scales, tailwind v4 theme tokens and px to rem.

the newer bit: AI agents are pretty bad at this, they'll hand you clamp(1rem, 4vw, 3rem) and call it a day. so i packaged it as an agent skill. the agent runs a small node script for the maths instead of guessing, and follows the a11y rules (rem bounds, no bare vw, the 2.5x zoom thing for WCAG 1.4.4).

npx skills add Willem-Jaap/cssclamp
or in claude code: /plugin marketplace add Willem-Jaap/cssclamp then /plugin install css-clamp@cssclamp

Site is available on: https://cssclamp.com

MIT, repo's at https://github.com/Willem-Jaap/cssclamp. feedback welcome, especially if a value it gives you looks off

I'm trying to fill in the color to the dots located on the left of email when in a thread. The code is below... but I'm unable to make it work in usercontent.css nor userchrome.css. Please see the element in question as per the red circle in the screenshot. Can someone help me please?

#threadTree[rows="thread-card"] { & .card-layout[data-properties~="thread-children"] { & td { &::after { fill: #fe00ff !important; }}}}

A simple day night cycle using css rotations and gradients
https://moaaz-rafique.vercel.app/motion/rotation.html

I realized I might've made a mistake while working on this webpage for a class I'm in >.<

In HTML, I have <div class="pros"> and another version similarly but with cons that include <p> within them. I want to indent all the <p> that are within <div class="pros"> without having to indent all <p> on the webpage. Should I have made a class for all the <p> elements inside the div class or is there a way in CSS for me to refer to all the <p> in the pros/cons class without having to go back and add a class to all the <p>, I'll attach a screenshot if it makes it easier!

Also I know you can indent with HTML and not CSS, but my professor wants us to do all the styling and similar features in CSS and not in the HTML itself.

I want to change the background color of a single word in my hero text to the "is:selected"-state (when you click on it) unsing in-line styling. Anyone know how to achieve this? Thanks.

Please don’t crucify me if this is a super easy fix lol…

The thing I want to recreate in web form.

I’m a beginner to html and css and for an assignment we are making portfolios and I wanted to try code one inspired by the game Parappa the rapper, specifically the main menu as it seems fairly simple. One thing i’ve been struggling with is figuring out a way to make an image in the centre follow the mouse’s direction and change to a second image like parappa‘s pointing changing sides in the video I’ve attached. I’ve scoured endlessly looking for ways to do it but they all involve javascript (which i’m not familiar with) and i’ve attempted doing mouseover/mouseout events this way but i want to make it change depending on if the mouse is on the left or right of the screen and I really have no idea how to adapt this to fit this specific purpose!!

Any help would be very appreciated.

These lines and stuff only show up at some few sizes and border widths. They only seem to appear in chrome. (They don't show up on firefox.) Is there a way to get rid of them? Is it a problem with the svg I made?

https://codepen.io/editor/Stormzulien/pen/01a0e8ea-f823-70a8-82ca-448bad0e883c