# Lab prototypes — gaganmalik.io Last-Updated: 2026-08-05 Interactive demos are described in plain text; React widgets are not included. ## Lab prototypes ### Skeleton shape [View lab](https://www.gaganmalik.io/en/newsroom/a-skeleton-screen-is-a-promise-about-shape) [Retrieval brief — skeleton-shape] Category: design Thesis: A loading skeleton is a structural promise about shape, not a decorative pulse; the lab shows the same wait state built honest (matched to the real layout) versus built as generic chrome. Answers: What is the Skeleton Shape lab and what pattern does it demonstrate? | How can I compare a shape-matched loading skeleton to a generic spinner side by side? | What does Gagan Malik mean by a skeleton screen being a promise about shape? | How should Ask or a newsroom hub signal loading without lying about the destination layout? | What breaks trust in a loading skeleton: mismatched shape or missing motion? Implication: Before shipping a loading.tsx skeleton, hold it against the real component's shape and against the lab's mismatched example — if a visitor can't tell what's about to render, the skeleton is decoration, not a contract. Proof: Skeleton Shape interactive lab embedded on A Skeleton Screen Is a Promise About Shape — gaganmalik.io/newsroom/a-skeleton-screen-is-a-promise-about-shape; Companion essay — gaganmalik.io/newsroom/a-skeleton-screen-is-a-promise-about-shape Related essays: a-skeleton-screen-is-a-promise-about-shape Concepts: skeleton-screen, shape-drift, loading-states, perceived-performance, wait-state-honesty Skeleton shape A skeleton screen is a promise about shape: wireframe the layout before content lands. Skeleton Shape lab by Gagan Malik — interactive demo of Ask vs Newsroom wait states showing that loading placeholders should match the destination layout (composer, rails, card frames), not a generic spinner. When to use Use shape-matched skeletons when the page has a known layout and wait time is visible. Prefer rails, frames, and title lines over a lone spinner so the visitor learns where content will land. Anatomy Toggle Ask (composer, greeting, chrome) versus Newsroom hub (rails, card frames, title lines). Device switch shows desktop vs mobile wireframes. Pulse is optional; the outline is the contract. Companion essay A Skeleton Screen Is a Promise About Shape — argument and live embed on the essay page. --- ### What's new modal [View lab](https://www.gaganmalik.io/en/lab/capability-spotlight) [Retrieval brief — capability-spotlight] Category: design Thesis: A What's New surface earns its interruption only when it previews three concrete jobs a release unlocks, live, in the visitor's own context — not when it lists features shipped. Answers: What is the Capability Spotlight lab and what pattern does it demonstrate? | How does a What's New modal show a job instead of a feature list? | Can I see a live demo of the pill-tab, preview-card What's New pattern Gagan Malik writes about? | What is the difference between a changelog wall and a job-preview spotlight? | How should the footer CTAs on a What's New modal be sequenced (primary, dismiss, changelog)? Implication: Before shipping the next What's New modal, test it against the lab: does each tab preview a job the visitor can finish this week, or does it just restate a changelog line in bigger type? Proof: Capability Spotlight interactive lab — gaganmalik.io/lab/capability-spotlight; Companion essay: Show the Job, Not the Feature — gaganmalik.io/newsroom/show-the-job-not-the-feature Related essays: show-the-job-not-the-feature Concepts: whats-new-modal, job-board-ux, capability-spotlight, release-notes, carousel-tour, post-update What's new modal A post-update spotlight that shows users what shipped — before they return to a blank workspace. What's New modal lab by Gagan Malik — design pattern for post-update feature announcements with a dismissible modal, pill-tab use-case menu, live preview cards, and contextual footer CTAs. Interactive demo based on Claude's update spotlight. When to use Show a What's new modal on first open after a meaningful software update — not on every patch, and not before users have context for why it matters. It replaces release-note walls with three concrete jobs the update unlocks (plan, create, refine). Works especially well for AI assistants and creative tools where value depends on the task, not a feature checklist. Anatomy New badge (ties the moment to the release) and dismiss control (respects agency — mark seen, don't nag). Headline in display serif; subheadline in muted sans sets scope. A fit-to-content pill tab menu switches example use cases — active tab gets a clear outline. Preview card swaps per tab with realistic sample output. Footer: primary CTA per tab, secondary Do it later to dismiss, tertiary release notes for the changelog. Accessibility Use native tab semantics with arrow-key navigation between use cases. Announce tab changes to screen readers. Keep preview content readable at 200% zoom. Respect prefers-reduced-motion: cross-fade or instant swap instead of sliding carousels. Ensure dismiss and primary CTA meet 44×44pt touch targets. Reference The interactive demo recreates Anthropic's Claude update spotlight (tabbed trip, recipe, and email previews). --- ### Honest Clockstrip [View lab](https://www.gaganmalik.io/en/newsroom/feeding-the-meter) [Retrieval brief — honest-clockstrip] Category: design Thesis: A usage meter that shows only a percentage hides the contract; pairing remaining allowance with the reset clock at the point of send is the honest version of the same pixel budget. Answers: What is the Honest Clockstrip lab and what does it demonstrate? | How should a product show AI usage limits: percentage bar or remaining time plus reset clock? | Can I see a demo comparing a bare usage gauge to a clock-plus-remaining strip? | What is the difference between a rolling-window usage meter and a prepaid-credit balance display? | Where should usage status live in an AI chat UI — under the composer or buried in Settings? Implication: Move usage status out of Settings and under the composer; show the clock next to the number so a visitor can tell in one glance whether they're spending time or spending money. Proof: Honest Clockstrip interactive lab embedded on Feeding the Meter — gaganmalik.io/newsroom/feeding-the-meter; Companion essay: Feeding the Meter — gaganmalik.io/newsroom/feeding-the-meter Related essays: feeding-the-meter Concepts: usage-meter, clockstrip, rolling-window, prepaid-credit-expiry, AI-pricing-UX, wait-state-transparency Honest Clockstrip Put remaining allowance and the reset clock under the composer so percentage alone never pretends to be the contract. Honest Clockstrip is a usability lab by Gagan Malik showing best-practice AI usage UX: remaining time plus reset clock under a composer, and prepaid credit expiry treated as a calendar, not a capacity gauge. When to use Show usage at the point of send whenever the product meters allowance, on-demand spend, or prepaid credit. Prefer this over burying clocks in Settings → Usage. Use it for AI assistants, API dashboards, and any plan with a rolling window or calendar expiry. Anatomy Composer stays primary. Under it, a flat status strip pairs remaining with the clock: state icon beside the glance line, no gauge on the strip itself. Hover or focus (desktop) or tap (mobile) opens plan usage limits with session and weekly bars; prepaid shows balance, not a gauge. Accessibility The strip reveals usage details on hover or focus (desktop) or tap (mobile sheet). Meter fill in the details panel is decorative; meaning lives in text. Announce state changes with aria-live polite. Colour is never the only signal. Touch targets stay at least 44×44. Respect prefers-reduced-motion with instant fill updates. Companion essay Feeding the Meter — argument and live embed on the essay page. --- ### My family tree [View lab](https://www.gaganmalik.io/en/newsroom/family-trees-grow-wide-not-tall) [Retrieval brief — my-family-tree] Category: design Thesis: Genealogy interfaces default to a single node-link pedigree that scales wide, not tall; the lab lets a visitor toggle Tree, Pedigree, and Fan on the same dataset to feel why one layout can't carry orient, locate, and edit at once. Answers: What is the My Family Tree lab and what does it demonstrate? | Can I compare Tree, Pedigree, and Fan chart layouts on the same family dataset? | What is focus-is-viewport navigation in a kinship visualization? | Why do genealogy apps default to pedigree sprawl instead of fan or hourglass charts? | How does the lab illustrate the orient / locate / edit split from genealogy UX research? Implication: Before defaulting a genealogy or org-chart product to one layout, run the three views the lab demonstrates against real orient, locate, and edit tasks — not against which chart looks best in a screenshot. Proof: My Family Tree interactive lab embedded on Family Trees Grow Wide, Not Tall — gaganmalik.io/newsroom/family-trees-grow-wide-not-tall; Companion essay — gaganmalik.io/newsroom/family-trees-grow-wide-not-tall Related essays: family-trees-grow-wide-not-tall Concepts: genealogy-ux, fan-chart, hourglass-chart, pedigree-sprawl, focus-is-viewport, orient-locate-edit, kinship-visualization My family tree Genealogy apps default to the chart that scales worst. The fan and hourglass layouts already exist, and the industry ships the sprawl anyway. Family Trees Grow Wide, Not Tall — Gagan Malik lab essay on genealogy information architecture: node-link pedigree sprawl vs ego-centric fan and hourglass charts, with a live craft demo (marriage units, filter dimming, seven-ring fan, focus-is-viewport navigation). Interactive lab Focus-is-viewport hourglass for dense kinship graphs. Toggle Tree, Pedigree, and Fan on a public subset. Tap to refocus; use the profile control to inspect without travelling. Marriage units, filter dimming, and seven-ring fan encode orientation for wide families. Companion essay Family Trees Grow Wide, Not Tall — design hypothesis with a testable prototype embedded in the essay. --- ### My Design System [View lab](https://www.gaganmalik.io/en/lab/design-system) [Retrieval brief — design-system] Category: design Thesis: A design system worth citing is inspectable in the browser — tokens, spacing, radius, and component states a visitor can click through — not a static style-guide PDF. Answers: What is Gagan Malik's design system lab and what can I inspect in it? | What tokens, spacing scale, and radius does gaganmalik.io use (radix-maia / shadcn)? | Can I see the shadcn Maia components and dropdown patterns used across the site live? | How does Gagan Malik document his own design system for hiring managers or peers to review? | What is the spacing and radius convention behind gaganmalik.io's UI? Implication: Point a hiring manager or collaborator at the live lab instead of a deck — the tokens, components, and Maia dropdown conventions are the artifact, inspectable in the browser rather than described secondhand. Proof: Design System interactive lab — gaganmalik.io/lab/design-system Concepts: design-system, radix-maia, shadcn, design-tokens, spacing-scale, component-library My Design System Tokens, components, and Maia patterns used in my website. Design System lab by Gagan Malik — inspect radix-maia tokens, shadcn components, spacing, radius, typography, and Maia dropdown patterns in the browser. Interactive gallery Foundation: semantic colors from app/globals.css, radius scale from --radius, spacing 4/8/16/24/32, Inter typography tokens. Components: shadcn Maia primitives used across gaganmalik.io — buttons, inputs, selects, dialogs, and attached dropdowns. Patterns: Maia dropdown radius and sideOffset conventions; form fields; switch and touch targets. Technical docs for design-system and ui-components are linked from the lab detail page. ---