x.com/BraydenWilmoth
Intent UI is continuously generative UI: describe what you need and a page is built from your data, generated lazily where you go next, and saved as a document anyone can reload, replay and render with their own components.
x.com/myfonj
ul { text-align: center; padding: 0; }
li { display: inline; }
li::after {
content: ' ';
word-spacing: 1rem;
background-image: linear-gradient(-.2turn,
transparent 0 calc(50% - .03em),
currentcolor 0 calc(50% + .03em),
transparent 0);
}x.com/diegohaz
a[target="_blank"]::after {
content: "\2060" / "";
padding-inline-start: 1em;
background: currentColor;
mask: var(--arrow) 0 0 / 100% 100%;
}stryker-mutator.io
learned about mutation testing recently and started running Stryker on some of our feature tests. it finds gaps using mutants, and agents follow up by patching them. nice little feedback loop.
mattrothenberg.com
x.com/devongovett
mattrothenberg.com
That is the difference. A component library gives builders reusable parts; a design system makes recurring decisions about structure, behavior, and user interaction canonical. When those decisions live only in a shipped screen or somebody’s head, agents expose the gap quickly: they build from what you encoded and make reasonable but different inferences everywhere else.
make your inline icons resilient to wrapping.
avoid flex + items-center.
vertically align SVG with height="1lh" and size with width.
https://codepen.io/editor/alexcarpenter/pen/019ff69c-0252-7405-84c4-a61eff18d6ec
favorite resources on composition:
Agentic tool stack recently:
/plannotator-review has been such a big improvement to reviewing lots of agent written code recently.
active transform scale, I want to love you.. I do, as its such a nice piece of feedback for pressed state.
but we really need the ability to scale by px value.
button:active {
transform: scale(calc(100% - 6px));
}colordx.dev
A high-performance color library with extended support for modern color spaces including OKLCH, OKLAB, Display-P3, and more.
<svg viewbox="0 0 16 16" width="32">...</svg>
<svg viewbox="0 0 16 16" height="32">...</svg>Setting only width or height scales the icon along that axis. Along the other axis, the icon centers itself in whatever space its container gives it via the default preserveAspectRatio=“xMidYMid meet”, instead of stretching to fill it.
Helpful for aligning icons with text with height="1lh".
I’ve never been a fan of a seperate <IconButton /> component. Finally landed on what feels like a nice naming scheme.
<button shape="square">
<Icon />
</button>
<button shape="circle">
<Icon />
</button>Shape supports default | square | circle options where square and circle both removes the inline padding and sets the aspect-ratio to 1/1.
.btn {
height: 2rem;
padding-inline: 0.625rem;
}
.btn:is([data-shape="square"], [data-shape="circle"]) {
padding-inline: 0;
aspect-ratio: 1 / 1;
}x.com/thomas_sweet
@property --scheme-probe {
syntax: "<color>";
inherits: true;
initial-value: white;
}
.card {
--scheme-probe: light-dark(white, black);
}
@container style(--scheme-probe: black) {
.swatch {
border-style: dashed; /* any property */
}
}yeptype.com
tenphi.me
thecultureslop.com
github.com
Tailwind CSS v4 squircle (superellipse) corner utilities with visual radius correction.