Notes - Alex Carpenter

npx skills add alexcarpenter/resilient-ui

See also vercel-composition-patterns npx skills add vercel-labs/agent-skills

Say what happened Say why it’s a problem Point out how to solve the problem

TIL you can slow down animations in Chrome DevTools.

CSS only scroll fade example that I implemented on ibrewmyown.coffee: @supports (animation-timeline: scroll()) { @property --fade-left { syntax: "<length>"; inherits: false; initial-value: 0px; } @property --fade-right { syntax: "<le…

Easiest method for targeting Safari with CSS and Tailwind in 2025.

Discover the best coffee gifts for the holidays—espresso machines, drippers, brewers, and bean subscriptions that coffee lovers will actually use every day.

Australian Design Engineer who loves working on open source software for the web.

Staff front-end engineer based in Amsterdam, working on AI assistants at Shopify.

This is one of those that feels like it should be easier than it ends up being, but here is where I landed at to ensure a modal image preserves its 3/2 aspect ratio no mater the viewport width/height. .modal { aspect-ratio: 3 / 2; height: min(calc(100…

It’s always felt weird using opacity for disabled buttons for situations where its not placed on a solid background.

See also Rauno’s Web Interface Guidelines.

I’ve been fortunate to work with some amazing people over the years and a couple of those folks are open for new opportunities.

Fixing folks list alignment one PR at a time. midday/pull/606 billingsdk/pull/144

Two fantastic pieces of web inspiration: operate.so tempo.xyz

I’ve been slowly working on my own shadcn/ui registry while learning more about the whole component distrubution setup at work.

Another use case for absolute positioning elements within inline text to support hanging punctuation.

Native‑like swipeable sheets on the web

A lightweight React Hook intended mainly for AI chat applications, for smoothly sticking to bottom of messages.

Ensure the trailing icon never orphans itself on to a new line.

My current favorite approach to building bullet proof icon alignment within list items.

npx shadcn@latest add https://clerk.com/r/nextjs-quickstart.json This single command will install: App layout with ClerkProvider and theme integration Sign-in and sign-up pages with catch-all routes Clerk middleware for route protection Header component…

For when <mark /> elements wrap to multiple lines, use box-decoration-break: clone; to render each fragment with their own specified border, padding, and margin. mark { box-decoration-break: clone; padding-inline: 0.25rem; }

Using background-repeat: round; to get that repeated dot background to fit perfectly across differing viewport widths. div { background-image: radial-gradient(red 1px, transparent 1.3px); background-size: 24px 24px; background-position: 0 0; backg…

Had a quick chat with Hamed about the recent work we have done to improve the customization of Clerk UI components.

Your component library ships bundled CSS via CSS-in-JS.

We shipped a new Clerk theme based on shadcn/ui that styles Clerk’s components according to your shadcn/ui theme.

Here’s a simple trick for getting more people to read what you write: write in spoken language.

Software development is changing and we find ourselves at a convergence.

Theme your Clerk components directly from your CSS files where your design tokens live – no more CSS-in-JS required.

A comprehensive color library for JavaScript.

JS color calculator for composing colors with consistent APCA contrast ratio.

JS library to improve keyboard UI of web apps