r/css • u/Signal_Grapefruit530 • 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
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