February 2, 2026
AI SUMMARY
On small screens, render the tag row as `overflow-x-auto` with hidden scrollbar. Add a `mask-image` gradient to fade the left/right edges. On desktop, disable the mask and allow the pills to sit normally.
Pill tabs are easy on desktop, but mobile needs a different treatment.
We apply a mask-image gradient to the scrolling container, then remove it on larger screens.
A Markdown Pipeline That Looks Like Product UI
AI Summary Cards With Frontmatter
More from this author
Design Systems
A small, opinionated token set that keeps contrast crisp across light/dark, while preserving the documentation-style quiet UI.
Feb 6, 2026 1 min read
UX
A skimmable summary card that appears near the top of the post, controlled by a single frontmatter field.
Feb 3, 2026 1 min read
Quality
If something matters, put it in a checklist. Then automate the boring parts.
Jan 25, 2026 1 min read
