1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/assets/styles-9jdj6gLi.css" data-precedence="default"/><title>Projects | Patrick Xin</title><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0a0a"/><meta name="author" content="Patrick Xin"/><meta name="keywords" content="Patrick Xin, blog, AI, react, Base UI, TanStack Start, Lumi UI, Tailwind CSS, TypeScript"/><meta property="og:type" content="website"/><meta property="og:site_name" content="Patrick Xin"/><meta property="og:url" content="https://patrickxin.dev"/><meta property="og:image" content="https://patrickxin.dev/og-image.png"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Patrick Xin"/><meta name="twitter:description" content="Patrick Xin's Blog"/><meta name="twitter:image" content="https://patrickxin.dev/og-image.png"/><meta name="description" content="Experiments and side projects by Patrick Xin"/><meta property="og:title" content="Projects | Patrick Xin"/><meta property="og:description" content="Experiments and side projects by Patrick Xin"/><link rel="modulepreload" href="/assets/index-BKWocNHd.js"/><link rel="modulepreload" href="/assets/_-_locale_-xcNh34OP.js"/><link rel="modulepreload" href="/assets/projects-YYl3R4YY.js"/><link rel="modulepreload" href="/assets/chevron-right-C5ZeCZy4.js"/><link rel="modulepreload" href="/assets/link-external-BvFUc0Ab.js"/><link rel="modulepreload" href="/assets/separator-Cx11Bnuu.js"/><link rel="modulepreload" href="/assets/retro-console-surface-QSa7JrtB.js"/><link rel="modulepreload" href="/assets/Separator-jorVzIu8.js"/><link rel="icon" href="/favicon.ico"/><link rel="icon" type="image/svg+xml" href="/favicon.svg"/><link rel="canonical" href="https://patrickxin.dev"/></head><body>
1<script>(function(){try{var c=localStorage.getItem("tonex-tokens-css");if(!c)return;var s=document.createElement("style");s.id="tonex-tokens-boot";s.textContent=c;document.head.appendChild(s);}catch(e){}})();</script>
1<script>(function(){try{var t=localStorage.getItem("theme");if(t!=='light'&&t!=='dark'&&t!=='system'){t="system"}var d=matchMedia('(prefers-color-scheme: dark)').matches;var r=t==='system'?(d?'dark':'light'):t;var e=document.documentElement;e.classList.add(r);e.style.colorScheme=r}catch(e){}})();;document.currentScript.remove()</script>
1<div class="root flex flex-col min-h-dvh"><header class="sticky top-0 h-(--header-height) z-100 inset-x-0 bg-surface"><div class="flex items-stretch justify-between flex-1 grow h-full relative max-w-[calc(var(--content-width)+4rem)] mx-auto px-4 lg:px-0"><nav class="items-center flex-1 flex"><ul class="h-full flex items-center gap-2 lg:gap-4 xl:gap-8"><li class="h-full"><a href="/" class="h-full flex items-center pr-4"><svg viewBox="0 0 472 748" xmlns="http://www.w3.org/2000/svg" class="text-primary size-6" aria-hidden="true"><path fill="currentColor" d="M180 0 3 69v388l179-119 1-143 161 113L0 540v90l178 118V611l293-198 1-209L180 0Z"></path></svg></a></li><li class="hidden sm:block h-full"><a href="/" class="group inline-flex items-center font-medium text-on-surface transition-colors duration-200 hover:text-primary h-full justify-center text-sm tracking-wide font-heading"><span class="text-outline-variant mr-1 group-data-[status='active']:text-secondary transition-colors duration-200 group-hover:text-secondary">[</span><span aria-label="Home" class="relative inline-block whitespace-nowrap" style="user-select:auto">Home</span><span class="text-outline-variant ml-1 group-data-[status='active']:text-secondary transition-colors duration-200 group-hover:text-secondary">]</span></a></li><li class="hidden sm:block h-full"><a href="/post" class="group inline-flex items-center font-medium text-on-surface transition-colors duration-200 hover:text-primary h-full justify-center text-sm tracking-wide font-heading"><span class="text-outline-variant mr-1 group-data-[status='active']:text-secondary transition-colors duration-200 group-hover:text-secondary">[</span><span aria-label="Blogs" class="relative inline-block whitespace-nowrap" style="user-select:auto">Blogs</span><span class="text-outline-variant ml-1 group-data-[status='active']:text-secondary transition-colors duration-200 group-hover:text-secondary">]</span></a></li><li class="hidden sm:block h-full"><a href="/projects" data-status="active" aria-current="page" class="group inline-flex items-center font-medium text-on-surface transition-colors duration-200 hover:text-primary h-full justify-center text-sm tracking-wide font-heading text-primary!"><span class="text-outline-variant mr-1 group-data-[status='active']:text-secondary transition-colors duration-200 group-hover:text-secondary">[</span><span aria-label="Projects" class="relative inline-block whitespace-nowrap" style="user-select:auto">Projects</span><span class="text-outline-variant ml-1 group-data-[status='active']:text-secondary transition-colors duration-200 group-hover:text-secondary">]</span></a></li></ul></nav><div class="flex items-center"><div class="hidden lg:flex items-stretch h-full"><!--$--><button type="button" tabindex="0" data-base-ui-click-trigger="" id="base-ui-_R_3qtda_" aria-haspopup="dialog" aria-expanded="false" data-slot="popover-trigger" aria-label="Accent Color" class="relative select-none group flex h-full w-16 cursor-pointer items-center justify-center hover:bg-primary/8 data-popup-open:bg-primary/8 shadow-none!"><span class="block size-6" style="background-color:#904477"></span></button><!--/$--><a role="button" tabindex="0" aria-label="Switch language" href="/zh/projects" class="inline-flex items-center justify-center gap-2 text-sm rounded-md whitespace-nowrap transition-[border-color,color,background-color,box-shadow,opacity,outline-color] border border-transparent outline-transparent select-none shadow-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-disabled:shadow-none aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50 aria-disabled:shadow-none aria-invalid:border aria-invalid:border-error aria-invalid:ring-4 aria-invalid:ring-error/12 px-4 py-2 has-[>svg]:px-3 bg-transparent focus-visible:outline-none focus-visible:border-primary/87 focus-visible:ring-primary/12 focus-visible:ring-3 group h-full w-16 font-heading uppercase font-medium hover:bg-primary/8 cursor-pointer shadow-none!"><svg class="fill-current size-3.5 text-on-surface-variant group-hover:text-on-surface" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
1<path d="m22,9v-2h-1v-2h-1v-1h-1v-1h-2v-1h-2v-1h-6v1h-2v1h-2v1h-1v1h-1v2h-1v2h-1v7h1v1h1v2h1v1h1v1h2v1h2v1h6v-1h2v-1h2v-1h1v-1h1v-2h1v-2h1v-6h-1Zm-1,1v4h-3v-4h3Zm-5-6h1v1h2v2h1v1h-3v-3h-1v-1Zm-2,14v2h-1v1h-2v-1h-1v-2h-1v-2h6v2h-1Zm2-8v4h-8v-4h8Zm-7-4h1v-2h1v-1h2v1h1v2h1v2h-6v-2Zm-5,1h1v-2h2v-1h1v1h-1v3h-3v-1Zm-1,7v-4h3v4h-3Zm2,5v-2h-1v-1h3v3h1v1h-1v-1h-2Zm14-2v2h-2v1h-1v-1h1v-3h3v1h-1Z"></path></svg><span class="font-bold text-on-surface-variant group-hover:text-on-surface"><span aria-label="ä¸" class="relative inline-block whitespace-nowrap" style="user-select:auto">ä¸</span></span></a></div><!--$--><button type="button" tabindex="0" aria-label="Open system config" data-base-ui-click-trigger="" id="base-ui-_R_3fdda_" aria-haspopup="dialog" aria-expanded="false" data-slot="drawer-trigger" class="inline-flex items-center justify-center gap-2 text-sm rounded-md whitespace-nowrap transition-[border-color,color,background-color,box-shadow,opacity,outline-color] border border-transparent outline-transparent select-none shadow-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-disabled:shadow-none aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50 aria-disabled:shadow-none aria-invalid:border aria-invalid:border-error aria-invalid:ring-4 aria-invalid:ring-error/12 px-4 py-2 has-[>svg]:px-3 bg-transparent focus-visible:outline-none focus-visible:border-primary/87 focus-visible:ring-primary/12 focus-visible:ring-3 group h-full w-16 font-heading uppercase font-medium hover:bg-primary/8 cursor-pointer"><svg class="fill-current size-3.5 text-on-surface-variant group-hover:text-on-surface" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m21,10v-1h-1v-2h1v-2h-1v-1h-1v-1h-2v1h-2v-1h-1V1h-4v2h-1v1h-2v-1h-2v1h-1v1h-1v2h1v2h-1v1H1v4h2v1h1v2h-1v2h1v1h1v1h2v-1h2v1h1v2h4v-2h1v-1h2v1h2v-1h1v-1h1v-2h-1v-2h1v-1h2v-4h-2Zm0,3h-1v1h-1v1h-1v2h1v2h-2v-1h-2v1h-1v1h-1v1h-2v-1h-1v-1h-1v-1h-2v1h-2v-2h1v-2h-1v-1h-1v-1h-1v-2h1v-1h1v-1h1v-2h-1v-2h2v1h2v-1h1v-1h1v-1h2v1h1v1h1v1h2v-1h2v2h-1v2h1v1h1v1h1v2Z"></path><path d="m16,10v-1h-1v-1h-1v-1h-4v1h-1v1h-1v1h-1v4h1v1h1v1h1v1h4v-1h1v-1h1v-1h1v-4h-1Zm-1,4h-1v1h-4v-1h-1v-4h1v-1h4v1h1v4Z"></path></svg><span class="hidden md:block font-bold"><span aria-label="S" class="relative inline-block whitespace-nowrap" style="user-select:auto">S</span></span><span class="sr-only">Open settings</span></button><!--/$--><!--$--><button type="button" tabindex="0" data-base-ui-click-trigger="" id="base-ui-_R_vtda_" aria-haspopup="dialog" aria-expanded="false" data-slot="command-menu-trigger" class="inline-flex items-center justify-center gap-2 text-sm rounded-md whitespace-nowrap transition-[border-color,color,background-color,box-shadow,opacity,outline-color] border border-transparent outline-transparent select-none shadow-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-disabled:shadow-none aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50 aria-disabled:shadow-none aria-invalid:border aria-invalid:border-error aria-invalid:ring-4 aria-invalid:ring-error/12 px-4 py-2 has-[>svg]:px-3 bg-transparent focus-visible:outline-none focus-visible:border-primary/87 focus-visible:ring-primary/12 focus-visible:ring-3 group h-full w-16 font-heading uppercase font-medium hover:bg-primary/8 cursor-pointer shadow-none!"><svg class="fill-current size-3 text-on-surface-variant group-hover:text-on-surface" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20,10V9h2V7h1V4H22V2H20V1H17V2H15V4H14V8H10V4H9V2H7V1H4V2H2V4H1V7H2V9H4v1H8v4H4v1H2v2H1v3H2v2H4v1H7V22H9V20h1V16h4v4h1v2h2v1h3V22h2V20h1V17H22V15H20V14H16V10ZM16,4h1V3h3V4h1V7H20V8H17V7H16ZM8,20H7v1H4V20H3V17H4V16H7v1H8ZM8,7H7V8H4V7H3V4H4V3H7V4H8Zm2,7V10h4v4Zm11,3v3H20v1H17V20H16V17h1V16h3v1Z"></path></svg><span class="hidden md:block font-bold text-on-surface-variant group-hover:text-on-surface"><span aria-label="K" class="relative inline-block whitespace-nowrap" style="user-select:auto">K</span></span><span class="sr-only">
1Open command menu</span></button><!--/$--></div></div></header><div class="flex-1"><!--$--><main class="relative max-w-(--content-width) mx-auto px-4 lg:mt-4"><div aria-hidden="true" class="retro-console-surface -z-10 pointer-events-none absolute lg:w-[calc(var(--content-width)+4rem)] size-full left-1/2 -translate-x-1/2"></div><div class="space-y-12 py-6"><section class="space-y-4 lg:space-y-6"><div aria-hidden="true" class="w-full text-xs text-primary select-none"><span aria-label="âââââââââââââââââââââââââââââââââ" class="relative inline-block whitespace-nowrap" style="user-select:auto">âââââââââââââââââââââââââââââââââ</span></div><div><h1 aria-label="Case Files" class="relative inline-block text-4xl font-extrabold sm:text-5xl uppercase whitespace-normal leading-10 lg:leading-16" style="user-select:auto">Case Files</h1></div><div class="flex flex-wrap gap-6 border-y py-2 lg:gap-12"><div class="space-y-0.5"><span class="text-3xs block text-on-surface-variant">DIVISION</span><span class="text-2xs block text-primary">R&D</span></div><div class="space-y-0.5"><span class="text-3xs block text-on-surface-variant">CLEARANCE</span><span class="text-2xs block text-primary">PUBLIC</span></div><div class="space-y-0.5"><span class="text-3xs block text-on-surface-variant">RECORDS</span><span class="text-2xs block text-primary">11</span></div><div class="space-y-0.5"><span class="text-3xs block text-on-surface-variant">SIGNAL</span><span class="text-2xs block text-primary">INTERMITTENT</span></div></div></section><section class="space-y-4"><p aria-label="> CASE INDEX" class="relative inline-block whitespace-nowrap text-xs tracking-wider text-primary cursor-default" style="user-select:auto">> CASE INDEX</p><div class="flex items-center gap-2"><span class="text-xs tracking-widest text-primary font-heading">â¸â¸</span><span class="text-3xs text-on-surface-variant mt-1">11<!-- --> FILES</span><div data-orientation="horizontal" role="separator" aria-orientation="horizontal" data-slot="separator" class="bg-outline-variant data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px flex-1"></div></div><ol class="border-t border-outline-variant"><li class="group relative border-b border-outline-variant py-5 px-2 -mx-2 transition-colors hover:bg-surface-container-low/60"><div class="flex items-start justify-between gap-4"><div class="flex min-w-0 items-center gap-3 py-0.5"><h2 aria-label="tonex" class="relative whitespace-nowrap inline-block font-heading text-sm uppercase tracking-widest leading-snug truncate bg-primary-container text-on-primary-container px-1.5 py-0.5" style="user-select:auto">tonex</h2><span class="shrink-0 text-2xs tracking-wider text-on-surface-variant select-none">/ <!-- -->PX-0x704E</span></div><span class="shrink-0 -rotate-3 border border-current px-1.5 py-0.5 text-3xs tracking-widest text-primary">ACTIVE</span></div><p class="mt-2 text-xs leading-relaxed text-on-surface-variant"><span>The color layer for design systems â one seed color in, whole palette out. It generates </span><span class="bg-transparent md:bg-on-surface-variant text-on-surface-variant transition-colors duration-200 md:group-hover:bg-transparent md:group-hover:text-on-surface md:group-focus-within:bg-transparent md:group-focus-within:text-on-surface">the palette you are reading right now</span><span>.</span></p><div class="mt-3 flex items-center justify-between gap-4"><div class="flex flex-wrap gap-2 text-3xs tracking-widest text-on-surface-variant"><span class="border border-outline-variant px-1.5 py-0.5">design-system</span><span class="border border-outline-variant px-1.5 py-0.5">material3</span><span class="border border-outline-variant px-1.5 py-0.5">cli</span></div><div class="flex shrink-0 items-center gap-4 text-2xs tracking-widest"><a href="https://github.com/patrick-xin/tonex" target="_blank" rel="noreferrer noopener" class="inline-flex items-center gap-1 text-on-surface-variant transition-colors hover:text-primary">SOURCE <svg class="fill-current size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="23 1 23 9 21 9 21 8 20 8 20 7 19 7 19 8 18 8 18 9 17 9 17 10 16 10 16 11 15 11 15 12 14 12 14 13 13 13 13 14 12 14 12 15 11 15 11 16 10 16 10 17 9 17 9 18 8 18 8 17 7 17 7 16 6 16 6 15 7 15 7 14 8 14 8 13 9 13 9 12 10 12 10 11 11 11 11 10 12 10 12 9 13 9 13 8 14 8 14 7 15 7 15 6 16 6 16 5 17 5 17 4 16 4 16 3 15 3 15 1 23 1"></polygon><polygon points="20 15 20 22 19 22 19 23 2 23 2 22 1 22 1 5 2 5 2 4 11 4 11 7 4 7 4 20 17 20 17 15 20 15"></polygon></svg></a><a href="https://tonex.dev" target="_blank" rel="noreferrer noopener" class="inline-flex items-center gap-1 text-on-surface-variant transition-colors hover:text-primary">LINK <svg class="fill-current size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="7 19 7 17 8 17 8 16 9 16 9 15 10 15 10 14 11 14 11 13 12 13 12 11 11 11 11 10 10 10 10 9 9 9 9 8 8 8 8 7 7 7 7 5 8 5 8 4 10 4 10 5 11 5 11 6 12 6 12 7 13 7 13 8 14 8 14 9 15 9 15 10 16 10 16 11 17 11 17 13 16 13 16 14 15 14 15 15 14 15 14 16 13 16 13 17 12 17 12 18 11 18 11 19 10 19 10 20 8 20 8 19 7 19"></polygon></svg></a></div></div></li><li class="group relative border-b border-outline-variant py-5 px-2 -mx-2 transition-colors hover:bg-surface-container-low/60"><div class="flex items-start justify-between gap-4"><div class="flex min-w-0 items-center gap-3 py-0.5"><h2 aria-label="lumi-ui" class="relative whitespace-nowrap inline-block font-heading text-sm uppercase tracking-widest leading-snug truncate bg-primary-container text-on-primary-container px-1.5 py-0.5" style="user-select:auto">lumi-ui</h2><span class="shrink-0 text-2xs tracking-wider text-on-surface-variant select-none">/ <!-- -->PX-0x4C55</span></div><span class="shrink-0 -rotate-3 border border-current px-1.5 py-0.5 text-3xs tracking-widest text-primary">ACTIVE</span></div><p class="mt-2 text-xs leading-relaxed text-on-surface-variant"><span>Composable React components powered by Base UI and Tailwind. </span><span class="bg-transparent md:bg-on-surface-variant text-on-surface-variant transition-colors duration-200 md:group-hover:bg-transparent md:group-hover:text-on-surface md:group-focus-within:bg-transparent md:group-focus-within:text-on-surface">
126 witnesses concur.</span></p><div class="mt-3 flex items-center justify-between gap-4"><div class="flex flex-wrap gap-2 text-3xs tracking-widest text-on-surface-variant"><span class="border border-outline-variant px-1.5 py-0.5">react</span><span class="border border-outline-variant px-1.5 py-0.5">base-ui</span><span class="border border-outline-variant px-1.5 py-0.5">tailwind</span></div><div class="flex shrink-0 items-center gap-4 text-2xs tracking-widest"><a href="https://github.com/patrick-xin/lumi-ui" target="_blank" rel="noreferrer noopener" class="inline-flex items-center gap-1 text-on-surface-variant transition-colors hover:text-primary">SOURCE <svg class="fill-current size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="23 1 23 9 21 9 21 8 20 8 20 7 19 7 19 8 18 8 18 9 17 9 17 10 16 10 16 11 15 11 15 12 14 12 14 13 13 13 13 14 12 14 12 15 11 15 11 16 10 16 10 17 9 17 9 18 8 18 8 17 7 17 7 16 6 16 6 15 7 15 7 14 8 14 8 13 9 13 9 12 10 12 10 11 11 11 11 10 12 10 12 9 13 9 13 8 14 8 14 7 15 7 15 6 16 6 16 5 17 5 17 4 16 4 16 3 15 3 15 1 23 1"></polygon><polygon points="20 15 20 22 19 22 19 23 2 23 2 22 1 22 1 5 2 5 2 4 11 4 11 7 4 7 4 20 17 20 17 15 20 15"></polygon></svg></a><a href="https://www.lumiui.dev" target="_blank" rel="noreferrer noopener" class="inline-flex items-center gap-1 text-on-surface-variant transition-colors hover:text-primary">LINK <svg class="fill-current size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="7 19 7 17 8 17 8 16 9 16 9 15 10 15 10 14 11 14 11 13 12 13 12 11 11 11 11 10 10 10 10 9 9 9 9 8 8 8 8 7 7 7 7 5 8 5 8 4 10 4 10 5 11 5 11 6 12 6 12 7 13 7 13 8 14 8 14 9 15 9 15 10 16 10 16 11 17 11 17 13 16 13 16 14 15 14 15 15 14 15 14 16 13 16 13 17 12 17 12 18 11 18 11 19 10 19 10 20 8 20 8 19 7 19"></polygon></svg></a></div></div></li><li class="group relative border-b border-outline-variant py-5 px-2 -mx-2 transition-colors hover:bg-surface-container-low/60"><div class="flex items-start justify-between gap-4"><div class="flex min-w-0 items-center gap-3 py-0.5"><h2 aria-label="starlogs" class="relative whitespace-nowrap inline-block font-heading text-sm uppercase tracking-widest leading-snug truncate bg-primary-container text-on-primary-container px-1.5 py-0.5" style="user-select:auto">starlogs</h2><span class="shrink-0 text-2xs tracking-wider text-on-surface-variant select-none">/ <!-- -->PX-0x6768</span></div><span class="shrink-0 -rotate-3 border border-current px-1.5 py-0.5 text-3xs tracking-widest text-primary">ACTIVE</span></div><p class="mt-2 text-xs leading-relaxed text-on-surface-variant"><span>A finder for what's trending on GitHub â tells you whether a repo is for you </span><span class="bg-transparent md:bg-on-surface-variant text-on-surface-variant transition-colors duration-200 md:group-hover:bg-transparent md:group-hover:text-on-surface md:group-focus-within:bg-transparent md:group-focus-within:text-on-surface">without opening it</span><span>.</span></p><div class="mt-3 flex items-center justify-between gap-4"><div class="flex flex-wrap gap-2 text-3xs tracking-widest text-on-surface-variant"><span class="border border-outline-variant px-1.5 py-0.5">agents</span><span class="border border-outline-variant px-1.5 py-0.5">news</span></div><div class="flex shrink-0 items-center gap-4 text-2xs tracking-widest"><span class="text-on-surface-variant">EVIDENCE SEALED</span><a href="https://starlogs.vercel.app" target="_blank" rel="noreferrer noopener" class="inline-flex items-center gap-1 text-on-surface-variant transition-colors hover:text-primary">LINK <svg class="fill-current size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="7 19 7 17 8 17 8 16 9 16 9 15 10 15 10 14 11 14 11 13 12 13 12 11 11 11 11 10 10 10 10 9 9 9 9 8 8 8 8 7 7 7 7 5 8 5 8 4 10 4 10 5 11 5 11 6 12 6 12 7 13 7 13 8 14 8 14 9 15 9 15 10 16 10 16 11 17 11 17 13 16 13 16 14 15 14 15 15 14 15 14 16 13 16 13 17 12 17 12 18 11 18 11 19 10 19 10 20 8 20 8 19 7 19"></polygon></svg></a></div></div></li><li class="group relative border-b border-outline-variant py-5 px-2 -mx-2 transition-colors hover:bg-surface-container-low/60"><div class="flex items-start justify-between gap-4"><div class="flex min-w-0 items-center gap-3 py-0.5"><h2 aria-label="diagram-design-zh" class="relative whitespace-nowrap inline-block font-heading text-sm uppercase tracking-widest leading-snug truncate bg-primary-container text-on-primary-container px-1.5 py-0.5" style="user-select:auto">diagram-design-zh</h2><span class="shrink-0 text-2xs tracking-wider text-on-surface-variant select-none">/ <!-- -->PX-0x2D44</span></div><span class="shrink-0 -rotate-3 border border-current px-1.5 py-0.5 text-3xs tracking-widest text-primary">ACTIVE</span></div><p class="mt-2 text-xs leading-relaxed text-on-surface-variant"><span>Agent skill that turns </span><span class="bg-transparent md:bg-on-surface-variant text-on-surface-variant transition-colors duration-200 md:group-hover:bg-transparent md:group-hover:text-on-surface md:group-focus-within:bg-transparent md:group-focus-within:text-on-surface">zero instructions</span><span> into Chinese-language diagrams â single-file HTML, opens offline, CJK typesetting built in.</span></p><div class="mt-3 flex items-center justify-between gap-4"><div class="flex flex-wrap gap-2 text-3xs tracking-widest text-on-surface-variant"><span class="border border-outline-variant px-1.5 py-0.5">agent-skill</span><span class="border border-outline-variant px-1.5 py-0.5">html</span><span class="border border-outline-variant px-1.5 py-0.5">cjk</span></div><div class="flex shrink-0 items-center gap-4 text-2xs tracking-widest"><a href="https://github.com/patrick-xin/diagram-design-zh" target="_blank" rel="noreferrer noopener" class="inline-flex items-center gap-1 text-on-surface-variant transition-colors hover:text-primary">SOURCE <svg class="fill-current size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="23 1 23 9 21 9 21 8 20 8 20 7 19 7 19 8 18 8 18 9 17 9 17 10 16 10 16 11 15 11 15 12 14 12 14 13 13 13 13 14 12 14 12 15 11 15 11 16 10 16 10 17 9 17 9 18 8 18 8 17 7 17 7 16 6 16 6 15 7 15 7 14 8 14 8 13 9 13 9 12 10 12 10 11 11 11 11 10 12 10 12 9 13 9 13 8 14 8 14 7 15 7 15 6 16 6 16 5 17 5 17 4 16 4 16 3 15 3 15 1 23 1"></polygon><polygon points="20 15 20 22 19 22 19 23 2 23 2 22 1 22 1 5 2 5 2 4 11 4 11 7 4 7 4 20 17 20 17 15 20 15"></polygon></svg></a><a href="https://patrick-xin.github.io/diagram-design-zh/" target="_blank" rel="noreferrer noopener" class="inline-flex items-center gap-1 text-on-surface-variant transition-colors hover:text-primary">LINK <svg class="fill-current size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="7 19 7 17 8 17 8 16 9 16 9 15 10 15 10 14 11 14 11 13 12 13 12 11 11 11 11 10 10 10 10 9 9 9 9 8 8 8 8 7 7 7 7 5 8 5 8 4 10 4 10 5 11 5 11 6 12 6 12 7 13 7 13 8 14 8 14 9 15 9 15 10 16 10 16 11 17 11 17 13 16 13 16 14 15 14 15 15 14 15 14 16 13 16 13 17 12 17 12 18 11 18 11 19 10 19 10 20 8 20 8 19 7 19"></polygon></svg></a></div></div></li><li class="group relative border-b border-outline-variant py-5 px-2 -mx-2 transition-colors hover:bg-surface-container-low/60"><div class="flex items-start justify-between gap-4"><div class="flex min-w-0 items-center gap-3 py-0.5"><h2 aria-label="pi-acp" class="relative whitespace-nowrap inline-block font-heading text-sm uppercase tracking-widest leading-snug truncate bg-primary-container text-on-primary-container px-1.5 py-0.5" style="user-select:auto">pi-acp</h2><span class="shrink-0 text-2xs tracking-wider text-on-surface-variant select-none">/ <!-- -->PX-0x3AC0</span></div><span class="shrink-0 -rotate-3 border border-current px-1.5 py-0.5 text-3xs tracking-widest text-primary">ACTIVE</span></div><p class="mt-2 text-xs leading-relaxed text-on-surface-variant"><span>ACP adapter that lets Buzz â or any ACP host â drive the pi coding agent </span><span class="bg-transparent md:bg-on-surface-variant text-on-surface-variant transition-colors duration-200 md:group-hover:bg-transparent md:group-hover:text-on-surface md:group-focus-within:bg-transparent md:group-focus-within:text-on-surface">as a managed agent</span><span>.</span></p><div class="mt-3 flex items-center justify-between gap-4"><div class="flex flex-wrap gap-2 text-3xs tracking-widest text-on-surface-variant"><span class="border border-outline-variant px-1.5 py-0.5">acp</span><span class="border border-outline-variant px-1.5 py-0.5">agent</span></div><div class="flex shrink-0 items-center gap-4 text-2xs tracking-widest"><a href="https://github.com/patrick-xin/pi-acp" target="_blank" rel="noreferrer noopener" class="inline-flex items-center gap-1 text-on-surface-variant transition-colors hover:text-primary">SOURCE <svg class="fill-current size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="23 1 23 9 21 9 21 8 20 8 20 7 19 7 19 8 18 8 18 9 17 9 17 10 16 10 16 11 15 11 15 12 14 12 14 13 13 13 13 14 12 14 12 15 11 15 11 16 10 16 10 17 9 17 9 18 8 18 8 17 7 17 7 16 6 16 6 15 7 15 7 14 8 14 8 13 9 13 9 12 10 12 10 11 11 11 11 10 12 10 12 9 13 9 13 8 14 8 14 7 15 7 15 6 16 6 16 5 17 5 17 4 16 4 16 3 15 3 15 1 23 1"></polygon><polygon points="20 15 20 22 19 22 19 23 2 23 2 22 1 22 1 5 2 5 2 4 11 4 11 7 4 7 4 20 17 20 17 15 20 15"></polygon></svg></a></div></div></li><li class="group relative border-b border-outline-variant py-5 px-2 -mx-2 transition-colors hover:bg-surface-container-low/60"><div class="flex items-start justify-between gap-4"><div class="flex min-w-0 items-center gap-3 py-0.5"><h2 aria-label="px" class="relative whitespace-nowrap inline-block font-heading text-sm uppercase tracking-widest leading-snug truncate bg-primary-container text-on-primary-container px-1.5 py-0.5" style="user-select:auto">px</h2><span class="shrink-0 text-2xs tracking-wider text-on-surface-variant select-none">/ <!-- -->PX-0x0001</span></div><span class="shrink-0 -rotate-3 border border-current px-1.5 py-0.5 text-3xs tracking-widest text-primary">ACTIVE</span></div><p class="mt-2 text-xs leading-relaxed text-on-surface-variant"><span>This very site: a TanStack Start terminal posing as a blog. Source </span><span class="bg-transparent md:bg-on-surface-variant text-on-surface-variant transition-colors duration-200 md:group-hover:bg-transparent md:group-hover:text-on-surface md:group-focus-within:bg-transparent md:group-focus-within:text-on-surface">withheld pending declassification</span><span>.</span></p><div class="mt-3 flex items-center justify-between gap-4"><div class="flex flex-wrap gap-2 text-3xs tracking-widest text-on-surface-variant"><span class="border border-outline-variant px-1.5 py-0.5">tanstack</span><span class="border border-outline-variant px-1.5 py-0.5">terminal</span></div><div class="flex shrink-0 items-center gap-4 text-2xs tracking-widest"><span class="text-on-surface-variant">EVIDENCE SEALED</span><a href="https://patrickxin.dev" target="_blank" rel="noreferrer noopener" class="inline-flex items-center gap-1 text-on-surface-variant transition-colors hover:text-primary">LINK <svg class="fill-current size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="7 19 7 17 8 17 8 16 9 16 9 15 10 15 10 14 11 14 11 13 12 13 12 11 11 11 11 10 10 10 10 9 9 9 9 8 8 8 8 7 7 7 7 5 8 5 8 4 10 4 10 5 11 5 11 6 12 6 12 7 13 7 13 8 14 8 14 9 15 9 15 10 16 10 16 11 17 11 17 13 16 13 16 14 15 14 15 15 14 15 14 16 13 16 13 17 12 17 12 18 11 18 11 19 10 19 10 20 8 20 8 19 7 19"></polygon></svg></a></div></div></li><li class="group relative border-b border-outline-variant py-5 px-2 -mx-2 transition-colors hover:bg-surface-container-low/60"><div class="flex items-start justify-between gap-4"><div class="flex min-w-0 items-center gap-3 py-0.5"><h2 aria-label="vibe64" class="relative whitespace-nowrap inline-block font-heading text-sm uppercase tracking-widest leading-snug truncate bg-primary-container text-on-primary-container px-1.5 py-0.5" style="user-select:auto">vibe64</h2><span class="shrink-0 text-2xs tracking-wider text-on-surface-variant select-none">/ <!-- -->PX-0x6464</span></div><span class="shrink-0 -rotate-3 border border-current px-1.5 py-0.5 text-3xs tracking-widest text-primary">ACTIVE</span></div><p class="mt-2 text-xs leading-relaxed text-on-surface-variant"><span>Paste any text and Jev judges it across 64 independent signals, compiling the probabilities into an </span><span class="bg-transparent md:bg-on-surface-variant text-on-surface-variant transition-colors duration-200 md:group-hover:bg-transparent md:group-hover:text-on-surface md:group-focus-within:bg-transparent md:group-focus-within:text-on-surface">8Ã8 fingerprint that becomes your wallpaper</span><span>
1. Zero generated words.</span></p><div class="mt-3 flex items-center justify-between gap-4"><div class="flex flex-wrap gap-2 text-3xs tracking-widest text-on-surface-variant"><span class="border border-outline-variant px-1.5 py-0.5">nextjs</span><span class="border border-outline-variant px-1.5 py-0.5">typesafe</span><span class="border border-outline-variant px-1.5 py-0.5">ai</span></div><div class="flex shrink-0 items-center gap-4 text-2xs tracking-widest"><span class="text-on-surface-variant">EVIDENCE SEALED</span><a href="https://www.vibe64.me" target="_blank" rel="noreferrer noopener" class="inline-flex items-center gap-1 text-on-surface-variant transition-colors hover:text-primary">LINK <svg class="fill-current size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="7 19 7 17 8 17 8 16 9 16 9 15 10 15 10 14 11 14 11 13 12 13 12 11 11 11 11 10 10 10 10 9 9 9 9 8 8 8 8 7 7 7 7 5 8 5 8 4 10 4 10 5 11 5 11 6 12 6 12 7 13 7 13 8 14 8 14 9 15 9 15 10 16 10 16 11 17 11 17 13 16 13 16 14 15 14 15 15 14 15 14 16 13 16 13 17 12 17 12 18 11 18 11 19 10 19 10 20 8 20 8 19 7 19"></polygon></svg></a></div></div></li><li class="group relative border-b border-outline-variant py-5 px-2 -mx-2 transition-colors hover:bg-surface-container-low/60"><div class="flex items-start justify-between gap-4"><div class="flex min-w-0 items-center gap-3 py-0.5"><h2 aria-label="shepherd" class="relative whitespace-nowrap inline-block font-heading text-sm uppercase tracking-widest leading-snug truncate bg-primary-container text-on-primary-container px-1.5 py-0.5" style="user-select:auto">shepherd</h2><span class="shrink-0 text-2xs tracking-wider text-on-surface-variant select-none">/ <!-- -->PX-0x5E9E</span></div><span class="shrink-0 -rotate-3 border border-current px-1.5 py-0.5 text-3xs tracking-widest text-secondary">IN DEV</span></div><p class="mt-2 text-xs leading-relaxed text-on-surface-variant"><span>Herdr-native workflow for coordinating multiple coding-tool instances â a shared collaborative directory, or </span><span class="bg-transparent md:bg-on-surface-variant text-on-surface-variant transition-colors duration-200 md:group-hover:bg-transparent md:group-hover:text-on-surface md:group-focus-within:bg-transparent md:group-focus-within:text-on-surface">isolated worktrees with independent review</span><span>.</span></p><div class="mt-3 flex items-center justify-between gap-4"><div class="flex flex-wrap gap-2 text-3xs tracking-widest text-on-surface-variant"><span class="border border-outline-variant px-1.5 py-0.5">herdr</span><span class="border border-outline-variant px-1.5 py-0.5">agents</span><span class="border border-outline-variant px-1.5 py-0.5">cli</span></div><div class="flex shrink-0 items-center gap-4 text-2xs tracking-widest"><span class="text-on-surface-variant">EVIDENCE SEALED</span></div></div></li><li class="group relative border-b border-outline-variant py-5 px-2 -mx-2 transition-colors hover:bg-surface-container-low/60"><div class="flex items-start justify-between gap-4"><div class="flex min-w-0 items-center gap-3 py-0.5"><h2 aria-label="dsh-tui" class="relative whitespace-nowrap inline-block font-heading text-sm uppercase tracking-widest leading-snug truncate bg-primary-container text-on-primary-container px-1.5 py-0.5" style="user-select:auto">dsh-tui</h2><span class="shrink-0 text-2xs tracking-wider text-on-surface-variant select-none">/ <!-- -->PX-0x0D54</span></div><span class="shrink-0 -rotate-3 border border-current px-1.5 py-0.5 text-3xs tracking-widest text-secondary">IN DEV</span></div><p class="mt-2 text-xs leading-relaxed text-on-surface-variant"><span>Terminal UI for DeepSeek Harness, loaded as an out-of-tree profile bundle â </span><span class="bg-transparent md:bg-on-surface-variant text-on-surface-variant transition-colors duration-200 md:group-hover:bg-transparent md:group-hover:text-on-surface md:group-focus-within:bg-transparent md:group-focus-within:text-on-surface">not a fork, not a PR</span><span>.</span></p><div class="mt-3 flex items-center justify-between gap-4"><div class="flex flex-wrap gap-2 text-3xs tracking-widest text-on-surface-variant"><span class="border border-outline-variant px-1.5 py-0.5">tui</span><span class="border border-outline-variant px-1.5 py-0.5">terminal</span></div><div class="flex shrink-0 items-center gap-4 text-2xs tracking-widest"><span class="text-on-surface-variant">EVIDENCE SEALED</span></div></div></li><li class="group relative border-b border-outline-variant py-5 px-2 -mx-2 transition-colors hover:bg-surface-container-low/60"><div class="flex items-start justify-between gap-4"><div class="flex min-w-0 items-center gap-3 py-0.5"><h2 aria-label="docnote" class="relative whitespace-nowrap inline-block font-heading text-sm uppercase tracking-widest leading-snug truncate bg-primary-container text-on-primary-container px-1.5 py-0.5" style="user-select:auto">docnote</h2><span class="shrink-0 text-2xs tracking-wider text-on-surface-variant select-none">/ <!-- -->PX-0x0D0C</span></div><span class="shrink-0 -rotate-3 border border-current px-1.5 py-0.5 text-3xs tracking-widest text-primary">ACTIVE</span></div><p class="mt-2 text-xs leading-relaxed text-on-surface-variant"><span>A markdown notepad that lives in Chrome's side panel â your notes </span><span class="bg-transparent md:bg-on-surface-variant text-on-surface-variant transition-colors duration-200 md:group-hover:bg-transparent md:group-hover:text-on-surface md:group-focus-within:bg-transparent md:group-focus-within:text-on-surface">never leave your device</span><span>.</span></p><div class="mt-3 flex items-center justify-between gap-4"><div class="flex flex-wrap gap-2 text-3xs tracking-widest text-on-surface-variant"><span class="border border-outline-variant px-1.5 py-0.5">chrome</span><span class="border border-outline-variant px-1.5 py-0.5">markdown</span><span class="border border-outline-variant px-1.5 py-0.5">privacy</span></div><div class="flex shrink-0 items-center gap-4 text-2xs tracking-widest"><span class="text-on-surface-variant">EVIDENCE SEALED</span><a href="https://chromewebstore.google.com/detail/dlkpbdhhlkofgbmimapojbpobhpfdced" target="_blank" rel="noreferrer noopener" class="inline-flex items-center gap-1 text-on-surface-variant transition-colors hover:text-primary">LINK <svg class="fill-current size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="7 19 7 17 8 17 8 16 9 16 9 15 10 15 10 14 11 14 11 13 12 13 12 11 11 11 11 10 10 10 10 9 9 9 9 8 8 8 8 7 7 7 7 5 8 5 8 4 10 4 10 5 11 5 11 6 12 6 12 7 13 7 13 8 14 8 14 9 15 9 15 10 16 10 16 11 17 11 17 13 16 13 16 14 15 14 15 15 14 15 14 16 13 16 13 17 12 17 12 18 11 18 11 19 10 19 10 20 8 20 8 19 7 19"></polygon></svg></a></div></div></li><li class="group relative border-b border-outline-variant py-5 px-2 -mx-2 transition-colors hover:bg-surface-container-low/60"><div class="flex items-start justify-between gap-4"><div class="flex min-w-0 items-center gap-3 py-0.5"><h2 aria-label="px-groove" class="relative whitespace-nowrap inline-block font-heading text-sm uppercase tracking-widest leading-snug truncate bg-primary-container text-on-primary-container px-1.5 py-0.5" style="user-select:auto">px-groove</h2><span class="shrink-0 text-2xs tracking-wider text-on-surface-variant select-none">/ <!-- -->PX-0x6752</span></div><span class="shrink-0 -rotate-3 border border-current px-1.5 py-0.5 text-3xs tracking-widest text-on-surface-variant">DORMANT</span></div><p class="mt-2 text-xs leading-relaxed text-on-surface-variant"><span>A small Next.js music player. Case opened 2022; </span><span class="bg-transparent md:bg-on-surface-variant text-on-surface-variant transition-colors duration-200 md:group-hover:bg-transparent md:group-hover:text-on-surface md:group-focus-within:bg-transparent md:group-focus-within:text-on-surface">last seen on a Vercel instance</span><span>.</span></p><div class="mt-3 flex items-center justify-between gap-4"><div class="flex flex-wrap gap-2 text-3xs tracking-widest text-on-surface-variant"><span class="border border-outline-variant px-1.5 py-0.5">nextjs</span><span class="border border-outline-variant px-1.5 py-0.5">tailwind</span><span class="border border-outline-variant px-1.5 py-0.5">audio</span></div><div class="flex shrink-0 items-center gap-4 text-2xs tracking-widest"><a href="https://github.com/patrick-xin/nextjs-music-player" target="_blank" rel="noreferrer noopener" class="inline-flex items-center gap-1 text-on-surface-variant transition-colors hover:text-primary">SOURCE <svg class="fill-current size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="23 1 23 9 21 9 21 8 20 8 20 7 19 7 19 8 18 8 18 9 17 9 17 10 16 10 16 11 15 11 15 12 14 12 14 13 13 13 13 14 12 14 12 15 11 15 11 16 10 16 10 17 9 17 9 18 8 18 8 17 7 17 7 16 6 16 6 15 7 15 7 14 8 14 8 13 9 13 9 12 10 12 10 11 11 11 11 10 12 10 12 9 13 9 13 8 14 8 14 7 15 7 15 6 16 6 16 5 17 5 17 4 16 4 16 3 15 3 15 1 23 1"></polygon><polygon points="20 15 20 22 19 22 19 23 2 23 2 22 1 22 1 5 2 5 2 4 11 4 11 7 4 7 4 20 17 20 17 15 20 15"></polygon></svg></a><a href="https://px-groove.vercel.app" target="_blank" rel="noreferrer noopener" class="inline-flex items-center gap-1 text-on-surface-variant transition-colors hover:text-primary">LINK <svg class="fill-current size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="7 19 7 17 8 17 8 16 9 16 9 15 10 15 10 14 11 14 11 13 12 13 12 11 11 11 11 10 10 10 10 9 9 9 9 8 8 8 8 7 7 7 7 5 8 5 8 4 10 4 10 5 11 5 11 6 12 6 12 7 13 7 13 8 14 8 14 9 15 9 15 10 16 10 16 11 17 11 17 13 16 13 16 14 15 14 15 15 14 15 14 16 13 16 13 17 12 17 12 18 11 18 11 19 10 19 10 20 8 20 8 19 7 19"></polygon></svg></a></div></div></li></ol></section><p class="inline-flex items-center gap-1 text-2xs tracking-widest text-on-surface-variant"><svg class="fill-current size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="7 19 7 17 8 17 8 16 9 16 9 15 10 15 10 14 11 14 11 13 12 13 12 11 11 11 11 10 10 10 10 9 9 9 9 8 8 8 8 7 7 7 7 5 8 5 8 4 10 4 10 5 11 5 11 6 12 6 12 7 13 7 13 8 14 8 14 9 15 9 15 10 16 10 16 11 17 11 17 13 16 13 16 14 15 14 15 15 14 15 14 16 13 16 13 17 12 17 12 18 11 18 11 19 10 19 10 20 8 20 8 19 7 19"></polygon></svg>THE TRUTH IS IN THE SOURCE_<span class="text-primary text-xs" style="opacity:0.7;transition:opacity 0.08s">â</span></p></div></main>
1<script>(function(a,f){let l;try{l=JSON.parse(sessionStorage.getItem(a)||"{}")}catch{return}const n=l?.[f||history.state?.__TSR_key];let c=!1;for(const t in n){const e=n[t],o=e?.scrollX,s=e?.scrollY;if(Number.isFinite(o)&&Number.isFinite(s)){if(t==="window")scrollTo(o,s),c=!0;else if(t)try{const r=document.querySelector(t);r&&(r.scrollLeft=o,r.scrollTop=s)}catch{}}}if(c)return;const i=location.hash.slice(1);if(i){const t=history.state?.__hashScrollIntoViewOptions??!0;if(t){const e=document.getElementById(i);e&&e.scrollIntoView(t)}return}scrollTo(0,0)})("tsr-scroll-restoration-v1_3");document.currentScript.remove()</script>
1<!--/$--></div><footer class="max-w-[calc(var(--content-width)+4rem)] mx-auto relative min-h-(--footer-height) w-full grid grid-cols-[1fr_auto_1fr] items-center pt-24 py-4 px-2 lg:px-0"><span class="justify-self-start text-3xs tracking-widest text-on-surface-variant">© <!-- -->2026<!-- --> <span aria-label="PATRICK XIN" class="relative inline-block whitespace-nowrap" style="user-select:auto">PATRICK XIN</span></span><span aria-label="--:--:--" class="relative inline-block whitespace-nowrap text-3xs tracking-widest text-on-surface-variant" style="user-select:auto">--:--:--</span><a href="https://github.com/patrick-xin" target="_blank" rel="noopener noreferrer" aria-label="GitHub link" class="justify-self-end"><svg class="fill-current size-4 text-on-surface-variant" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="23 9 23 15 22 15 22 17 21 17 21 19 20 19 20 20 19 20 19 21 18 21 18 22 16 22 16 23 15 23 15 18 14 18 14 17 15 17 15 16 17 16 17 15 18 15 18 14 19 14 19 9 18 9 18 6 16 6 16 7 15 7 15 8 14 8 14 7 10 7 10 8 9 8 9 7 8 7 8 6 6 6 6 9 5 9 5 14 6 14 6 15 7 15 7 16 9 16 9 18 7 18 7 17 6 17 6 16 4 16 4 17 5 17 5 19 6 19 6 20 9 20 9 23 8 23 8 22 6 22 6 21 5 21 5 20 4 20 4 19 3 19 3 17 2 17 2 15 1 15 1 9 2 9 2 7 3 7 3 5 4 5 4 4 5 4 5 3 7 3 7 2 9 2 9 1 15 1 15 2 17 2 17 3 19 3 19 4 20 4 20 5 21 5 21 7 22 7 22 9 23 9"></polygon></svg></a></footer></div>
1<script class="$tsr" id="$tsr-stream-barrier">(self.$R=self.$R||{})["tsr"]=[];self.$_TSR={h(){this.hydrated=!0,this.c()},e(){this.streamEnded=!0,this.c()},c(){this.hydrated&&this.streamEnded&&(delete self.$_TSR,delete self.$R.tsr)},p(e){this.initialized?e():this.buffer.push(e)},buffer:[]};$_TSR.router=($R=>$R[0]={manifest:$R[1]={routes:$R[2]={__root__:$R[3]={preloads:$R[4]=["/assets/index-BKWocNHd.js"],scripts:$R[5]=[$R[6]={attrs:$R[7]={type:"module",async:!0,src:"/assets/index-BKWocNHd.js"}}]},"/{-$locale}":$R[8]={preloads:$R[9]=["/assets/_-_locale_-xcNh34OP.js"]},"/{-$locale}/projects":$R[10]={preloads:$R[11]=["/assets/projects-YYl3R4YY.js","/assets/chevron-right-C5ZeCZy4.js","/assets/link-external-BvFUc0Ab.js","/assets/separator-Cx11Bnuu.js","/assets/retro-console-surface-QSa7JrtB.js","/assets/Separator-jorVzIu8.js"]}}},matches:$R[12]=[$R[13]={i:"__root__�",u:1790449718441,s:"success",l:$R[14]=[$R[15]={title:"Add Multiple Theme To Next.JS and Tailwind Project",slug:"add-multiple-theme-to-nextjs-project",description:"Switch themes easily with few lines of code.",publishedAt:"2022-06-06",category:$R[16]=["Web"],type:"archived",locale:"en",hasTranslation:!1},$R[17]={title:"Build A Toast Component With React From Scratch",slug:"build-a-toast-component-with-react-from-scrach",description:"Create a react toast with tailwind, framer motion and zustand by yourself.",publishedAt:"2022-02-01",category:$R[18]=["Web"],type:"archived",locale:"en",hasTranslation:!1},$R[19]={title:"Infinite Scrolling With React Query And Prisma In Next.js",slug:"infinite-scrolling-with-react-query-and-prisma",description:"Add infinite scrolling feature to your next React project.",publishedAt:"2022-03-03",category:$R[20]=["Web"],type:"archived",locale:"en",hasTranslation:!1},$R[21]={title:"Designing for AI agents",slug:"designing-for-ai-agents",description:"Why the shape of your component library is the most important prompt you'll ever write.",publishedAt:"2026-03-14",category:$R[22]=["AI","Web"],type:"active",locale:"en",hasTranslation:!1},$R[23]={title:"One file, one source of truth",slug:"one-file-one-source-of-truth",description:"Three real components, three different escape hatches. What \"one file, one source of truth\" actually means in practice.",publishedAt:"2026-03-12",category:$R[24]=["Web"],type:"active",locale:"en",hasTranslation:!1},$R[25]={title:"The details that matter",slug:"the-details-that-matter",description:"Animations, hit areas, and type safety. The micro-decisions that make a component library feel premium.",publishedAt:"2026-03-16",category:$R[26]=["Web"],type:"active",locale:"en",hasTranslation:!1},$R[27]={title:"Why I Built Lumi UI",slug:"why-i-built-lumi",description:"Every component library feels clean until your app grows. Here's the pattern I kept hitting, and why I eventually had to build my own.",publishedAt:"2026-03-10",category:$R[28]=["AI","Web"],type:"active",locale:"en",hasTranslation:!1}],ssr:!0},$R[29]={i:"�{-$locale}�",u:1790449718439,s:"success",ssr:!0},$R[30]={i:"�{-$locale}�projects�projects",u:1790449718439,s:"success",ssr:!0}]})($R["tsr"]);$_TSR.e();document.currentScript.remove()</script>
1<script type="module" async="" src="/assets/index-BKWocNHd.js"></script>
1</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.