Forem: David Ang

Performance Monitoring with Lighthouse and Kiro.dev

David Ang — Fri, 05 Dec 2025 16:57:50 +0000

Let’s make the internet fast for everyone. With AI editors everywhere helping us to write code, it feels like the right time to put a bit more care and that extra effort into how our sites and apps perform.

I've built PerfMon-a Lighthouse powered tool that provides performance audits on any URL, track your history locally with IndexedDB, and get instant feedback with mobile/desktop emulation.

When you're like me and don't check every line the AI writes but still want to feel like the architect, you open Kiro.dev, write down what you want, and I let Kiro.dev do it's thing. Created the steering docs after—and that's actually better. The docs reflect what actually works, not what you think might work.

As Kiroween wrapped up, I had more ideas for features, so I asked Kiro to create the specs—a structured way to document requirements, design, and implementation tasks. Instead of losing track of ideas, I now have them properly written down to come back to later.

You’d argue that we can use Lighthouse from DevTools, and you’re right. But I get tired of opening it every time when all I want is to click a restart button.

React Media Library – Fast, headless asset picker for your React app

David Ang — Fri, 05 Dec 2025 03:37:28 +0000

With AI editors like #kiro, it finally feels realistic to aim for a faster web. I can spend less time wiring boilerplate and more time making sure the UI is light, accessible, and scores well on Lighthouse.

React Media Library – fast, lightweight, headless library you can drop into any app, with a near-perfect Lighthouse score.

React Media Library will provide you with a focused media flow:

Headless provider hooks for assets, selection, and uploads
A Tailwind and Mantine presets that works out of the box
Drag & drop and file input uploads and hooks for dragging or selecting from the media library.
Simple media viewer to maintain the speed and lightweight of the library
Swappable icons (Lucide, your own SVGs, or text-only)
Basic image editing like cropping, rotation and panning.

Building it with Kiro.dev

Like most of my vibe-coded projects, I’m a visual person, I start by dumping ideas and immediately I want to see them. I opened Kiro and described the idea in plain language: a headless media library that’s rich but lightweight and performance-first.

Used vibe coding to get the first MediaLibraryProvider, useMediaLibrary hook, and MediaGrid wired up.
Turned that into steering docs: keep the core headless, avoid heavy dependencies, don’t force any icon library, and respect Lighthouse constraints. That gave me confidence that Kiro understood the architecture I wanted and kept the style consistent across the app.
Generate specs for current and future features in tiny bits - provider API, grid behavior, upload flow, presets, and reiterate with #kiro.

If you like what I’m building and want to follow along:

AppFrames - Creating beautiful store screenshotss

David Ang — Thu, 04 Dec 2025 17:32:36 +0000

With AI coding assistants everywhere, we're shipping apps faster than ever. But then comes the tedious part - creating those perfect App Store screenshots with device frames, captions, and exact dimensions that Apple and Google demand.

I got tired of wrestling with Figma templates and Photoshop layers every time I needed to update a screenshot. I built AppFrames - a web tool that just handles it.

Being a visual person and get satisfaction when I see things - I open #kiro and started building. Got the core working - drag screenshots onto device frames, mix any canvas size with any frame, export at 2x for crisp store submissions.

With Kiroween coming to a closem, I just had more ideas. Used #kiro specs so I'd remember. Started writing down future features like cross-canvas dragging, device rotation, landing pages. Now those ideas are properly documented and ready to build.

Offline-first, runs entirely in your browser, and handles all those annoying App Store dimension requirements automatically. Built with Next.js 16, React 19, and Mantine. Stores your data in IndexDB and files in OPFS.

You could use design tools for this but I just wanted something that's tailored made to create framed screenshots.

Try it at https://appframes.dev
or check out the repo

If you like what I'm building would you follow me please?

LinkedIn
X
Reddit