Building a Self-Hosted Prompt Library UI with TailwindCSS and Radix Dialog

When evaluating f/prompts.chat for internal deployment, the first friction point wasn't the backend—it was the UI layer for browsing, searching, and injecting prompts into existing AI workflows. The repository offers a clean prompt-sharing architecture, but integrating it into a production developer portal requires solving three specific UI problems:

Accessible modal overlays for prompt preview without disrupting screen reader navigation

Token-aware textarea components that provide visual feedback when prompt length approaches model limits

CSS containment strategies to prevent layout thrashing when rendering thousands of prompts with dynamic Markdown content

The Broken Pattern: Direct DOM Manipulation for Modals

Our initial prototype used a naive approach—toggling display: none on a modal wrapper and manually managing focus with document.querySelector .…