Alex (@MetalHaze) header
Alex (@MetalHaze) profile picture

Senior Product Designer (mobile/web/desktop) for an EHR company • He/him • Accessibility Advocate • Design System Architect #BlackLivesMatter

Boston, MA
Joined April 2008
Photo by Alex (@MetalHaze)Photo by Alex (@MetalHaze)Photo by Alex (@MetalHaze)Photo by Alex (@MetalHaze)Photo by Alex (@MetalHaze)Photo by Alex (@MetalHaze)Photo by Alex (@MetalHaze)Photo by Alex (@MetalHaze)Photo by Alex (@MetalHaze)
CSS tip: you can finally animate to height: auto. :root { interpolate-size: allow-keywords; } .panel { transition: height 0.3s; } Accordions open and close smoothly, no JS measuring. Browsers without support just snap, so it's safe to ship today.
9
39
3
293
12,258
css tip: 𝚝𝚎𝚡𝚝-𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠 takes any string, not just an ellipsis. .𝚝𝚒𝚝𝚕𝚎 { 𝚠𝚑𝚒𝚝𝚎-𝚜𝚙𝚊𝚌𝚎: 𝚗𝚘𝚠𝚛𝚊𝚙; 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠: 𝚑𝚒𝚍𝚍𝚎𝚗; 𝚝𝚎𝚡𝚝-𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠: 𝚎𝚕𝚕𝚒𝚙𝚜𝚒𝚜; 𝚝𝚎𝚡𝚝-𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠: " (𝚖𝚘𝚛𝚎)"; } the browser cuts the title and draws your string right after the last letter that fits. browsers without it drop the last line and keep the ellipsis.
2
16
2
182
4,740
Stageshow: a skill that helps your agent make better faux UI stills, animations, bento grids, and more. npx skills add benjitaylor/skills --skill stageshow
456
749
288
14,402
1,571,583
what to check before calling a component done: - hover, focus, pressed, disabled ~ all 4 - longest possible text, then a name in german - empty state, one item, 150 items - keyboard only, no mouse - slow network, does it still feel calm? - dark mode, blur your eyes, does the hierarchy hold?
10
16
383
9,622
If you want your app/site/whatever to feel better on mobile devices, just run my /mobile-native skill. It fixes things like hover states being stuck, zooming into inputs, long-press selecting text, etc. These are small things, but they compound, so make sure you fix them!
62
113
19
3,515
98,456
things i make the agent do before a component ships: - render every variant at 320px and 1440px - tab through it with no mouse - screenshot light and dark side by side - paste a 200 character label into it - try to break the empty state the agent is a mid designer and a great qa intern. use it like one.
6
6
278
7,892
I’ve been working on something new: aiforui.dev/ AI for UI has 28 skills and 20 lessons on building great interfaces with AI. More than 3,000 people have enrolled so far. It’s $299 instead of $399 until early access closes on Friday. The full course opens in 2027.
118
103
57
2,034
289,338
Unslopping a vibecoded dashboard
371
536
130
16,309
2,005,940
Alex retweeted
AI makes it easy. We make it compliant. Build and launch a HIPAA compliant app in days, not months.

8
22
142
494,805
Made a skill for dimensional drawings of UI components. Inspired by Apple's accessory drawings, it documents a component's architecture into a spec sheet. github.com/enesozturk/dimens…
41
168
21
3,316
143,397
Call me when the cyber attacks erase all my debt and make taxes irrelevant.
58
Alex retweeted
I'm tired boss
176
910
433
8,802
2,290,097
Alex retweeted
We've decided to sunset Arc on December 22, 2026. That's not an easy sentence to write. We spent years building Arc and celebrating each and every release along the way: we have so much pride and love for what we made alongside the Arc community. Our priority is to deliver best-in-class security for our members. Keeping a browser secure takes constant, dedicated work that is only increasing in the age of AI. Dia was built from the ground up to meet today’s security standards, so that's where our engineering and security teams will focus moving forward. We've worked to make switching to @diabrowser as easy as possible for Arc members. Here's how: · Your passwords, bookmarks, extensions and history come over to Dia seamlessly. · Spaces, Folders, and Tab Groups are in Dia and import over with your data intact. · Dia now surpasses Arc benchmarks in stability, speed, and security. · The browser features you use in Arc are free in Dia, and the AI is optional. Thank you for using Arc, for pushing us to make it better, and for building alongside us. The team that made Arc is the same team behind Dia, and some of our most ambitious work is just ahead. We'd love for you to be there with us when it lands.
2,256
964
2,667
8,133
3,328,589
shadcn registry for healthcare 👉 organui.com more like this on → shoogle.dev/directory
20
105
7
1,144
50,629
I built out a new way to generate color ramps. Previous ones leveraged algorithmic approaches to try and estimate how our eyes perceived light. Mathmatical models are bad at representing human color preference. I made a free one based on image models: tools.diffui.ai/palette
17
21
3
199
19,196
Figma MCP pro tip.. if you have PRs where there’s new design changes, you can write all of your revisions back to canvas and have your model trigger dev mode annotations. Then have these annotations serve as references you can pass to other agents that have other loops for other purposes
6
1
1
37
2,400
Alex retweeted
Wake up babe the Figma Chrome extension can now capture your website code and bring into Figma as a code layer Live from Config India
98
179
119
2,866
7,967,741
Alex retweeted
Introducing Specs: a new medium for markdown that brings context into, out of, and across Figma AND it’s collaborative AND has unique-to-Figma visual features Live from Config India
38
86
45
1,351
6,185,966
Some mistakes you might be making: Your effort level is too high Your skills are too long You're not aligning before you start work You're aligning too often, and too hard Your automated checks are too lax Your custom tooling is too token-inefficient You aren't doing enough automated review You aren't reviewing previous coding sessions (with an agent) You're doing too much human review You aren't vibe coding enough prototypes Your agent can't verify its own work You're babysitting the agent too much You've overloaded your global steering files Your codebase is hard to navigate You aren't building a shared language Your codebase architecture allows bad tests to be written You aren't thinking strategically enough You aren't thinking enough
273
247
60
4,022
211,832