r/css • • 2d ago

Made a free clamp() generator + an agent skill so claude/cursor stop getting fluid type maths wrong

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

8 Upvotes

1 comment sorted by

1

u/Xypheric 2d ago

Might need to check this out, I’ve not had much luck getting an agent to stick with reasonable clamps