Prompt library

You are a senior front-end engineer. Build a reusable button component in React using the Motion library that has a 'jelly' squash-and-stretch micro-interaction: on press it scales slightly wider and shorter, and on release it springs back to its resting size with a small overshoot/wobble that settles in about 400 ms. Requirements: it must be a real <button> with keyboard activation and a visible focus-visible ring; it must fully disable the animation when prefers-reduced-motion: reduce is set; animate only transforms (no layout properties); no external CSS framework. Return only the component code with imports — no explanation.

You are a senior front-end engineer who understands classic animation principles. Take a simple UI interaction — 'a card expands to a detail view when clicked' — and apply three motion principles to make it feel intentional: (1) ease/timing (start fast, settle gently), (2) anticipation (a tiny opposite move before the main one), and (3) follow-through (a secondary element lags slightly behind). Build it in React with the Motion library. Requirements: animate only transform and opacity; fully disable motion under prefers-reduced-motion: reduce; keep it keyboard-operable with a visible focus ring; keep the whole thing under ~450ms. Add a one-line comment naming the principle at each step. Return only the component code with imports.

You are a product engineer. Design a 'like' button micro-interaction by its four parts and then build it: (1) trigger — the user taps; (2) rules — what state changes and any constraints; (3) feedback — the visible/animated response; (4) loops & modes — what happens on repeat, and any long-term state. Build it in React with the Motion library: a heart that fills and gives a quick springy pop on like, returns calmly on unlike. Requirements: a real <button> with aria-pressed reflecting state; visible focus ring; animate only transform/opacity; fully disable motion under prefers-reduced-motion. Label each of the four parts in comments. Return only the component code with imports.

You are a front-end engineer building for touch and pointer. Add tactile feedback to a button: on press it shows a brief radius-bounded ripple originating at the pointer position and a subtle scale-down, recovering on release. Build it in React with the Motion library. Requirements: it must be a real <button> with keyboard activation (the ripple may center itself for keyboard activation); a visible focus-visible ring; the ripple must be clipped to the button (overflow hidden) and animate only transform/opacity; fully disable the ripple and scale under prefers-reduced-motion: reduce. No external CSS framework. Return only the component code with imports.

You are a senior front-end engineer. Build a loading state for a profile card (avatar, name, two lines of text) as a skeleton that mirrors the card's real layout: grey placeholder blocks in the exact positions and sizes of the eventual content, with a gentle left-to-right shimmer. Build it in React. Requirements: the skeleton must reserve the same space as the loaded content so there is no layout shift when it swaps in; expose the loading state via aria-busy on the container and hide the decorative skeleton from screen readers; the shimmer must stop (show a static skeleton) under prefers-reduced-motion: reduce; animate only background-position or transform. Return only the component code with imports and CSS.

You are a senior front-end engineer. Build a toast notification with tasteful enter/exit motion in React using the Motion library: it slides up and fades in on appear, and slides down and fades out on dismiss, with a spring on entry and a quick ease on exit. Requirements: the toast is an aria-live='polite' region (assertive only for errors) so screen readers announce it; it is dismissible by a real button and auto-dismisses after a few seconds (pausing on hover/focus); animate only transform and opacity; fully disable motion (appear/disappear instantly) under prefers-reduced-motion: reduce; never animate layout. Return only the component code with imports.

You are a senior front-end engineer. Build a scroll reveal: items fade and rise into place as they enter the viewport, staggered slightly. Build it in React using the Motion library's in-view hook (or the IntersectionObserver directly). Requirements: content must be fully present and readable even if JavaScript never runs (reveal is an enhancement, not a gate); each item animates once when it first enters; animate only transform and opacity; under prefers-reduced-motion: reduce, show everything immediately with no movement; do not cause layout shift. Return only the component code with imports.

You are a senior front-end engineer. Build two versions of the same 'move a card 240px to the right on click' interaction in React using the Motion library: one with a fixed-duration ease-out (about 300 ms), and one with a spring. For the spring, expose stiffness, damping, and mass as props and pick defaults that settle in roughly 400 ms with a small, tasteful overshoot. Requirements: animate only transform; fully disable animation under prefers-reduced-motion: reduce; keep the control a real button with a visible focus-visible ring. Add a one-line code comment on each that says when to prefer it. Return only the component code with imports.

You are a product designer coaching a junior. Take a single feature — 'a user resets a forgotten password' — and break it into two columns. UX column: the end-to-end experience (the goal, the steps, the emotions, the failure points, what 'success' feels like). UI column: the concrete on-screen elements at each step (fields, buttons, copy, states, feedback). For each UI element, name the UX need it serves. Keep it plain and concrete, no jargon without a one-line gloss. Return a two-column markdown table.

You are a design lead scoping a two-week project for a small team. Lay out a lightweight UX process for building '{a budgeting feature for a banking app}' from discovery to delivery. For each phase (discover, define, ideate, prototype, test, ship), give: the question that phase answers, one or two activities sized for two weeks, the artifact it produces, and the signal that you're ready to move on. Avoid ceremony for its own sake. Return a markdown list grouped by phase.

You are a UX researcher. I want to learn '{why users abandon onboarding before finishing}'. Recommend the single most appropriate research method, and explain in plain language: what kind of question this is (attitudinal vs behavioral, generative vs evaluative), why the method fits, how many participants is enough and why, one bias to watch for, and the first three questions or tasks you'd use. Be concrete and honest about the method's limits. Return a short brief.

You are an information architect. Here is a flat list of pages for a small cooking site: recipes, vegetarian recipes, knife skills, buying a chef's knife, meal planning, grocery lists, about us, contact, privacy. Propose a clear information architecture: group these into a small number of top-level sections named by the user's task (not our org chart), show the hierarchy as an indented tree, and flag any page that could reasonably live in two places plus how you'd resolve it. Explain your grouping logic in two sentences. Return the tree and the note.

You are a product designer. Describe the same screen — 'a sign-up form for a newsletter' — at three fidelities: (1) lo-fi wireframe: just boxes, labels, and hierarchy, no color or copy; (2) mid-fi: real copy, grouping, states, and spacing decisions, still greyscale; (3) hi-fi: color, type, motion notes, and edge states (error, loading, success). For each step, say what new decision it forces you to make and what you should NOT decide yet. Return three short labelled sections.

You are a service designer. Build a customer journey map for '{a first-time user setting up a smart thermostat}'. Use these lanes: stage, what the user is doing, what they're thinking, how they're feeling (a -2 to +2 score), pain points, and an opportunity for us at that moment. Cover 5–7 stages from first contact to first success. Be specific and avoid happy-path-only thinking — include at least two friction moments. Return a markdown table plus a one-line summary of the biggest opportunity.

You are a design facilitator. Run a quick design-thinking pass on this problem: '{commuters miss their bus because real-time arrival info is unreliable}'. Walk the five modes — empathize, define, ideate, prototype, test — and for each give one concrete, sized activity and its output. End with a crisp point-of-view statement in the form 'user + need + insight', and three 'How might we' questions. Keep each item to one or two sentences. Return labelled sections.

You are a usability expert. Evaluate this flow against well-established usability heuristics (visibility of system status, match to the real world, user control and freedom, consistency, error prevention, recognition over recall, flexibility, minimalist design, help users recover from errors, help and documentation): 'a multi-step checkout where the only way back is the browser button, totals appear only on the final step, and errors say only “invalid input”'. For each issue, name the heuristic violated, rate severity 0–4 with a reason, and give a concrete fix. Return a markdown table sorted by severity.

You are a design-systems engineer. Implement a three-tier token architecture for a fictional brand called Lumen. Create primitive tokens (raw values), semantic tokens (role/intent aliases), and component tokens for a Button and an Input. Output as CSS custom properties. Include a dark-mode variant that swaps only the semantic tier, a visible focus-visible ring, and a prefers-reduced-motion guard. Show how the Button uses only its own component tokens, never primitives directly. Return only the CSS with brief section comments.

You are a senior front-end engineer. Build an accessible combobox for selecting a Lumen product category. It filters a list of 40 options as the user types, supports full keyboard navigation (Arrow keys, Enter, Escape), tracks aria-activedescendant on the input (focus never leaves the input), announces result-count changes with an aria-live region, and respects prefers-reduced-motion on the open/close transition. Use vanilla TypeScript with no framework dependencies. Return only the component code with imports.

You are a senior front-end engineer. Build a multi-section checkout form for the fictional brand Marrow using semantic <fieldset> and <legend> elements. It has three groups: personal information, shipping address, and payment method. Each group has a short legend (≤5 words), appropriate autocomplete attributes on every input, visible focus rings, and accessible error states using aria-invalid and aria-describedby. Use vanilla HTML and CSS; no JavaScript required for the static structure. Return only the HTML and CSS.

You are a design-systems lead. Take a small product — 'a personal-finance web app for a fictional brand called Lumen' — and sketch its design system as four layers: (1) tokens — the raw decisions (name 6-8 across color, spacing, type, radius, motion); (2) components — the reusable UI built from those tokens (list 6); (3) patterns — repeatable solutions composed from components (list 4, e.g. form layout, empty state); (4) governance — the rules and rituals that keep it coherent (contribution model, versioning, deprecation, docs). For each layer, give one sentence on what it owns and one concrete example, and show how each layer builds on the one below it. Return four labelled sections.

You are a design-systems engineer. Generate a design-token set for a fictional brand called Lumen, as a single JSON object in the W3C Design Tokens format (each token has a `$value` and `$type`). Include: a primitive tier (an 11-step neutral ramp plus a brand accent ramp using OKLCH color values, a spacing scale of 6 steps, a radius scale of 4 steps, a type scale of 6 steps, and 3 motion durations + 3 easing curves) and a semantic tier that aliases primitives by role (`color.action`, `color.surface`, `color.text.primary`, `space.inset`, `radius.control`). Name semantic tokens by role, never by appearance. Add a short comment block (outside the JSON) explaining how a dark theme would re-alias only the semantic tier. Return the JSON, then the note.

You are a front-end architect. Take a screen — 'a product search results page for a fictional store called Lumen' — and decompose it with atomic design. List the atoms (the smallest primitives: button, input, label, badge, icon), the molecules (small groups, e.g. a search field = label + input + button), the organisms (sections composed from molecules, e.g. a results toolbar, a product card), the templates (the page-level layout with content regions as placeholders), and finally the page (the template filled with real content). For each level, name what composes it from the level below. Then propose a component folder structure that mirrors these levels. Return labelled sections plus the file tree.

You are a product designer. Here is the content for a screen — 'a pricing card: an eyebrow label, a plan name, a price, three feature lines, a call-to-action button, and a fine-print note'. Rank these elements into a clear visual hierarchy (primary, secondary, tertiary), and for each rank specify which signals carry it: relative size, font weight, color/contrast, and spacing/whitespace. Explain the reasoning in one line per element, and call out the single element that should win the first glance. Avoid using more than three levels. Return a table: element · rank · signals · why.

You are a design-systems engineer. Generate a modular typographic scale from a base size of 16px and a ratio of 1.25 (major third). Produce seven steps from caption to display, each as: a role name (caption, body, h4, h3, h2, h1, display), the computed size in rem (base × ratioⁿ, rounded sensibly), a suggested line-height, and a suggested font-weight. Output as CSS custom properties (`--text-h1` etc.) plus a one-line note on when to break the scale. Keep body at the base size. Return the CSS and the note.

You are a design-systems engineer. Define a spacing scale on a 4px base (4, 8, 12, 16, 24, 32, 48, 64) as named CSS custom properties (`--space-1` … `--space-8`). Then lay out a simple stacked card — image, title, body, a row of two buttons — using ONLY those tokens for every margin, padding, and gap, and add a one-line comment on each rule explaining the rhythm choice (why this step and not an arbitrary value). Show how a consistent scale creates vertical rhythm. Return the CSS (tokens + the card) with comments.

You are a design-systems engineer. For a fictional brand called Lumen, define a small semantic color set — text, muted text, surface, surface-muted, action, action-text, and a danger color — as CSS custom properties using OKLCH. Then produce a contrast table: for every foreground/background pairing a designer is likely to use (text on surface, action-text on action, muted on surface, etc.), give the computed WCAG contrast ratio and whether it passes AA for normal text (4.5:1), AA for large text (3:1), and AAA (7:1). Fix any pairing that fails by adjusting the OKLCH lightness, and show the corrected value. Return the tokens, the table, and a one-line note on each fix.

You are a front-end engineer. Build a responsive layout for a card gallery using CSS Grid: a 12-column grid on desktop that collapses to a sensible column count on tablet and a single column on mobile, with a consistent gutter from a spacing token. Use `grid-template-columns: repeat(auto-fill, minmax(...))` (or named lines + media/container queries) so it reflows without a JS resize handler, and keep the source order meaningful for screen readers and keyboard users. Add a one-line comment explaining each grid decision. Return only the HTML and CSS.

You are a senior front-end engineer. Build the same effect — 'a card lifts and a chevron rotates 180° on hover/expand' — two ways in pure CSS: (1) a `transition` for the simple state change, and (2) a `@keyframes` animation for a small two-step attention pulse on the chevron. Use only compositor-friendly properties (transform, opacity), a custom-property-driven duration and timing function, a visible `:focus-visible` style, and a `@media (prefers-reduced-motion: reduce)` block that disables both. Add a one-line comment on when to prefer a transition vs a keyframe animation. Return only the HTML and CSS.

You are a senior front-end engineer. Use the View Transitions API to animate a same-document navigation between a list view and a detail view, with the tapped card acting as a shared element that morphs into the detail header. Wrap the DOM update in `document.startViewTransition(...)`, assign a matching `view-transition-name` to the shared card and its detail counterpart, and style `::view-transition-group/old/new` for a smooth morph. Provide a progressive-enhancement fallback: if `document.startViewTransition` is undefined, just apply the update directly. Disable the animation under `prefers-reduced-motion: reduce`. Return only the HTML, CSS, and JS.

You are a front-end architect. I need to build '{a route transition with a shared hero image in a Next.js app}'. Recommend the single most appropriate animation approach from this set — CSS transitions/keyframes, the View Transitions API, Motion (Framer Motion), GSAP, Lottie, or Rive — and justify it in plain language: why it fits this job, the main tradeoff you're accepting, the rough bundle/performance cost, the accessibility considerations (reduced-motion, focus), and one situation where you'd switch to a different tool instead. Be honest about when the boring CSS answer wins. Return a short recommendation brief.

You are a senior front-end engineer. Build a reusable product-card component that adapts to the width of its CONTAINER, not the viewport, using CSS container queries. Mark the wrapper as a query container (`container-type: inline-size`), and at a small inline size stack the thumbnail above the text; at a larger inline size lay them out side by side. Use `cqi`/`cqw` units for one fluid value (e.g. a heading size). The same component must work in a narrow sidebar and a wide main column with no JS and no viewport media queries. Include a visible focus-visible style on the card's link and a prefers-reduced-motion-safe transition. Return only the HTML and CSS.

You are a senior front-end engineer. Use the CSS `:has()` relational selector to style a form WITHOUT JavaScript: (1) a label/field row that turns into an error state when it `:has(:invalid)`, (2) a card that highlights when it `:has(:checked)` (a selected option), and (3) a 'gift options' section revealed only when a checkbox is checked, via `:has()` on an ancestor. Keep everything keyboard-accessible with visible focus-visible styles, and make sure the state is also conveyed by something other than color (text or icon), not color alone. Return only the HTML and CSS.

You are a senior front-end engineer. Build a tooltip/popover tethered to a button using CSS anchor positioning: give the button an `anchor-name`, position the popover with `position-anchor` and `position-area` (or `anchor()`), and use `position-try-fallbacks` so it flips to stay on-screen near a viewport edge. Use the native popover attribute/API for show/hide so it's keyboard- and screen-reader-friendly (Esc to close, focus management), with a visible focus-visible style and a prefers-reduced-motion-safe transition. Provide a graceful fallback for browsers without anchor positioning. Return only the HTML, CSS, and minimal JS.

You are a senior front-end engineer who follows the ARIA Authoring Practices. Build a horizontal toolbar of icon buttons (bold, italic, underline, link) that is fully keyboard-operable using the roving tabindex pattern: the toolbar is a single Tab stop (only the active button has tabindex=0, the rest tabindex=-1), Arrow Left/Right move focus between buttons (wrapping at the ends), Home/End jump to the first/last, and Enter/Space activate. Give it role=toolbar with an aria-label, a clearly visible :focus-visible style, and ensure focus order matches visual order. Disable any movement animation under prefers-reduced-motion. Return only the component code with imports.

You are a senior front-end engineer. Build an accessible modal dialog with correct focus management: on open, move focus into the dialog (the first focusable element or the dialog itself); trap Tab/Shift+Tab inside while open; close on Escape and on backdrop click; and on close, RESTORE focus to the element that opened it. Use role=dialog with aria-modal=true and an aria-labelledby pointing at the title, render it in a way that hides the background from assistive tech (inert or aria-hidden on the rest), and give every control a visible :focus-visible style. Prefer the native <dialog> element if suitable and note why. Return only the component code with imports.

You are a senior front-end engineer. Add accessible announcements to a UI where things change without a page load — 'an item added to a cart, a form save that succeeds or fails, and a background sync status'. For each, choose the right live region: aria-live=polite (or role=status) for non-urgent updates that should wait for a pause, and aria-live=assertive (or role=alert) only for urgent, time-sensitive errors. Explain the rule for choosing between them, show the markup, and note the common mistakes: the live region must exist in the DOM before it updates, you should change its text content (not toggle it in/out), and you must not over-announce. Return the markup plus a short rationale.

You are a product designer who applies Hick's Law (decision time rises with the log of the number of choices). I have a screen that overwhelms users — 'a settings page with 24 options shown as one flat list'. Redesign the information architecture to reduce perceived choice without removing capability: group related options into a few labelled sections, surface the 3-4 most common actions first, defer the rest behind progressive disclosure, and pick smart defaults so most users choose nothing at all. Explain each change in terms of Hick's Law, and flag any place where MORE visible choice is actually better. Return a restructured outline plus a short rationale.

You are a UX engineer who applies Fitts's Law (time to acquire a target grows with distance and shrinks with size). Audit a UI — 'a mobile checkout where the primary Pay button is small, mid-screen, and next to a Cancel link' — and propose concrete fixes grounded in Fitts's Law: size and place the primary action for the thumb zone, increase its hit area (padding, not just visible size), separate it from destructive/secondary actions to avoid mis-taps, and use screen edges/corners (infinite-width targets) where appropriate. Give specific sizes/spacing (respecting the 44×44px / 24×24px minimum tap targets) and explain each in Fitts's terms. Return a prioritized list of changes.

You are a product designer who applies the Von Restorff (isolation) effect — the item that differs from its neighbors is the one people notice and remember. For a pricing page with three plans, design the visual treatment that makes the recommended plan stand out WITHOUT resorting to a dark pattern: choose one or two distinguishing signals (a badge, a subtle elevation, a single accent, more whitespace) and keep the rest uniform so the contrast reads. Explain why over-isolating (making everything shout) destroys the effect, and ensure the emphasis never depends on color alone (pair it with text/shape/position) so it survives color-blindness and grayscale. Return the treatment spec plus the accessibility notes.

You are a brand designer helping a founder. For a fictional company — 'Lumen, a calm personal-finance app for first-time savers' — draft a one-page brand system whose parts cohere: (1) a positioning line (who it's for + the feeling); (2) a logo/wordmark direction (style, not pixels) and why; (3) a color direction (a primary, a neutral ramp, one accent) with the emotion each carries; (4) a type direction (a display + text pairing and the personality it signals); (5) a voice in three adjectives with a do/don't; and (6) one sample screen described in words showing all of it working together. Keep every choice traceable to the positioning. Return six labelled sections.

You are a brand designer. Build a color palette for a fictional brand from a personality brief — 'trustworthy, modern, approachable; a B2B analytics product'. Provide: a primary brand color, a supporting secondary, one accent for calls-to-action, and a neutral ramp, all in OKLCH with hex equivalents. For each, name the association you're leaning on (and the cliché you're avoiding). Then show the three most important UI pairings (text on surface, on-brand button, accent on neutral) with their WCAG contrast ratios, adjusting lightness so each meets AA. Note how the palette would shift for a dark theme. Return the tokens, the pairings table, and the rationale.

You are a UX writer. Define a brand voice for a fictional product — 'Tovo, a playful weeknight-cooking app' — as three adjectives, each with a one-line do and don't. Then apply it consistently by rewriting the same five UI strings in that voice: a primary button, a success toast, an inline form error, an empty state, and a destructive-action confirmation. For each, keep it accessible (clear, specific, no jargon; errors say what happened and how to fix it) and note where voice must yield to clarity (errors and legal text stay plain). Return the voice definition plus a before/after table for the five strings.

You are a senior front-end engineer. Hand-author a small, clean inline SVG icon — a 24×24 'bookmark' glyph — that scales perfectly: set a `viewBox="0 0 24 24"` (no fixed width/height so CSS controls size), draw it with a single `<path>` using relative commands where sensible, use `fill="none" stroke="currentColor"` with `stroke-width`, `stroke-linecap`, and `stroke-linejoin` so it inherits text color, and make it accessible: decorative by default (`aria-hidden="true" focusable="false"`), with a note on how to give it an accessible name (role=img + <title>) when it conveys meaning. Explain each attribute in one line. Return only the SVG plus the short notes.

You are a design-systems engineer. Design a tiny SVG icon system of four line icons (search, settings, user, close) that feel like a set: a shared 24×24 grid, a consistent stroke width and corner radius, `fill="none" stroke="currentColor"` so they inherit color, and `vector-effect="non-scaling-stroke"` consideration for tiny sizes. Show how to ship them: an accessible React `<Icon name size title?>` component where a missing `title` renders the icon `aria-hidden` (decorative) and a provided `title` adds `role="img"` + `<title>`. Note the tradeoffs vs an icon font and vs separate <img> files. Return the four SVGs plus the component.

You are a graphics-savvy front-end architect. I need to build '{an interactive scator plot with 50,000 animated points}'. Recommend the right rendering layer from this ladder — CSS, SVG, Canvas 2D, WebGL (e.g. via three.js/regl/PixiJS), or WebGPU — and justify it: why the layers below it run out of headroom, the rough performance characteristics, the accessibility cost (canvas/WebGL output is invisible to assistive tech — describe the fallback you'd provide: a data table, ARIA, or an SVG layer), the bundle/complexity tradeoff, and the progressive-enhancement story (WebGPU feature-detection with a WebGL or Canvas fallback). Be honest about when the simpler layer is the right answer. Return a short recommendation brief.

You are a browser-performance engineer. A component animates by transitioning its `width`, `top`, and `box-shadow` on hover and it janks on mid-range phones. Explain why in terms of the rendering pipeline (style → layout → paint → composite): which of those properties force layout, which force paint, and why that's expensive every frame. Then rewrite the animation to run on the compositor only — using `transform` (translate/scale) and `opacity` — keeping the same visual result, plus a `will-change` note (and when NOT to use it) and a `prefers-reduced-motion` guard. Explain each change by the stage it removes. Return the before/after CSS and the explanation.

You are a web-performance consultant. For a content-heavy marketing page that fails its Core Web Vitals, write a prioritized plan to get LCP, INP, and CLS into the 'good' range. State the good thresholds (LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1) and for each metric give the top causes and concrete fixes: for LCP — prioritize the hero image (preload, responsive sizes, no lazy-load above the fold), cut render-blocking resources, fast server/CDN; for INP — break up long tasks, defer non-critical JS, keep event handlers light; for CLS — set width/height or aspect-ratio on media, reserve space for ads/embeds, avoid inserting content above existing content, use font-display swap with size-adjust. Note how to MEASURE each (field via CrUX/RUM vs lab via Lighthouse). Return a prioritized checklist grouped by metric.

You are a browser-performance engineer. A page renders a long feed of thousands of similar cards and scrolling is slow because the browser styles, lays out, and paints every card even off-screen. Use CSS containment and isolation to fix it: apply `content-visibility: auto` with a matching `contain-intrinsic-size` to skip rendering off-screen cards (and explain how that reserves space to avoid scroll-jank/CLS), discuss `contain: layout paint` to isolate each card's work, and cover `will-change`/layer promotion with its memory cost and why it must be used sparingly. Note the accessibility caveat: `content-visibility: hidden` content is removed from the a11y tree and in-page find, while `auto` is found when scrolled near. Return the CSS plus a short explanation of what each declaration isolates.

You are a senior engineer building generative UI. Design a small, safe JSON schema that a language model can emit to describe a UI, which your app renders with a fixed set of trusted, pre-built components — NOT arbitrary HTML. Support a handful of component types (heading, text, card, button, input, list) with typed props, and a validation step (e.g. Zod) that rejects unknown types or props before rendering. Crucially: the model only chooses from your component allow-list and supplies data — it never emits markup, scripts, or styles — so untrusted output can't inject anything. Show the schema, the Zod validator, and a renderer switch that maps each type to a real component (with a fallback for unknown types). Note how to handle streaming/partial objects. Return only the code.

You are a product engineer designing the UI for an AI agent that calls tools. For one tool — 'book_flight(from, to, date)' — design the full set of UI states the user sees: idle, pending (the model decided to call it), streaming (partial output arriving), result (success, rendered as a structured card not raw JSON), error (with a retry), and needs-approval (a human-in-the-loop confirm/deny BEFORE a consequential action runs). For each state, specify what's shown, what the user can do, and the accessibility treatment (announce state changes with a live region, keep approve/deny as real keyboard-operable buttons, never auto-run a destructive tool without explicit confirmation). Return a state-by-state spec.

You are a security-minded front-end engineer. Implement the bring-your-own-key (BYOK) pattern for a client-side app that calls a model provider's API with the USER's own key. Requirements: the key is entered by the user and stored ONLY on their device (in-memory or, if persisted, clearly opt-in) — it is NEVER sent to or logged by your server; calls go directly from the browser to the provider over HTTPS; explain the one real risk (a third-party script on your page could read the key, so a strict CSP and minimal dependencies matter) and how you mitigate it; provide a clear way to clear the key; and never put the key in the URL, analytics, or error reports. Contrast this with the server-proxy model (your key, your bill, your rate limits) and say when each is appropriate. Return the key-handling code plus a short threat-model note.

You are a senior front-end engineer. Build a responsive row of product cards where each card has a title (1–2 lines), a body, and a footer with a price and button. Use CSS Grid with `grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))` for the row, then make each card a grid item that spans the row's tracks with `grid-row: span 3` and `grid-template-rows: subgrid`, so titles, bodies, and footers line up across every card regardless of content length — no fixed heights or magic numbers. Provide a graceful fallback with `@supports not (grid-template-rows: subgrid)` using flexbox. Semantic HTML (a list of articles), and a visible focus style on the buttons. Return only the HTML and CSS.

You are a senior front-end engineer. Build an actions menu using the native Popover API: a trigger `<button popovertarget="menu">` and a `<div id="menu" popover>` containing menu items, so the browser handles show/hide, light-dismiss (click outside), and Esc with no JavaScript. Render it in the top layer and animate the entry with a `transition` plus `@starting-style` for opacity/transform, fully disabled under `prefers-reduced-motion: reduce`. Give the trigger `aria-haspopup` and the menu the right roles, keep keyboard focus order sensible, and provide a small JS enhancement only where the platform can't (e.g. arrow-key roving among items). Return only the HTML, CSS, and minimal JS.

You are a senior front-end engineer building a small theme. From a single `--brand` color, derive hover/active/subtle variants using `color-mix(in oklch, var(--brand) X%, white|black)` instead of hand-picked hexes, so the whole scale stays in sync when the brand color changes. Set `color-scheme: light dark` and use `light-dark(<lightval>, <darkval>)` for surfaces and text so the theme follows the system scheme with no media query or extra class. Ensure text/background pairs meet WCAG AA contrast, and add an `@supports` fallback for `light-dark()`. Return only the CSS with a tiny HTML demo (a button and a card).

You are a senior front-end engineer. Build an accessible, library-free carousel using CSS scroll-snap: a horizontally scrollable track (`overflow-x: auto; scroll-snap-type: x mandatory`) of slides (`scroll-snap-align: start; flex: 0 0 80%`). The native scroll position is the source of truth — it works with touch, trackpad, and keyboard out of the box. Add Prev/Next `<button>`s that call `scrollIntoView({ inline })`, a `role="group"` with `aria-roledescription="carousel"` and a label, per-slide labels ("Slide n of m"), and a `prefers-reduced-motion` check that switches smooth scrolling to instant. Don't trap focus or hijack the scrollbar. Return only the HTML, CSS, and minimal JS.

You are a senior front-end engineer who cares about vestibular accessibility. Take a card that animates in by sliding up 12px and scaling from 0.96 (320ms) and make it safe under `prefers-reduced-motion: reduce`: keep the meaning (the card still appears with a quick ~120ms opacity crossfade) but remove the travel and scale that can trigger motion sickness. Use a `@media (prefers-reduced-motion: reduce)` block — default to full motion, then pare it back — rather than the reverse. Also disable any parallax/auto-playing motion. Animate only transform and opacity. Return only the HTML and CSS.

You are a senior front-end engineer who follows WCAG and the ARIA Authoring Practices. Build an email field with accessible, forgiving inline validation: validate on submit and, after the first attempt, on blur — never on every keystroke. When invalid, set `aria-invalid="true"`, link a specific, plain-language error message to the input with `aria-describedby`, and move focus to the first invalid field on submit. Add an error summary at the top of the form (a list of links that jump to each field). Use a real `<label>`, `novalidate` so you control messaging, and never rely on color alone to signal the error. Return only the component code with imports.

You are a senior front-end engineer. Build a light/dark theme driven by semantic CSS custom properties (e.g. --surface, --text, --border, --accent) rather than raw colors scattered through components. Default to the system scheme with `color-scheme: light dark` and `light-dark()` (or a `prefers-color-scheme` media query), then allow a manual override via a `data-theme` attribute on the root that a small toggle sets and persists. Avoid pure #000 surfaces — use a slightly lifted dark gray so shadows and elevation still read. Ensure every text/background pair meets WCAG AA in both schemes, and give the toggle an accessible name and pressed state. Return only the CSS plus the minimal toggle JS.

You are a senior product designer-engineer. Design the empty state for a feature — the screen a user sees before there's any data. Don't ship a blank 'No items' dead-end: include a short heading that names the space, one sentence that explains what will appear here and why it's useful, and exactly one primary call to action that gets them to their first success. Add a quiet illustration or icon (decorative, `aria-hidden`). Use correct heading semantics, keep the CTA a real focusable button, and make sure the state is distinct from a loading state and an error state. Return only the component code with imports.

You are a senior front-end engineer. Use the Web Animations API (`element.animate(keyframes, options)`) to build a reusable function that slides and fades a notification element in, holds it, then slides it out — returning the Animation object so the caller can pause, reverse, or await its `finished` promise. Animate only transform and opacity so it stays on the compositor; set `fill: "forwards"` to persist the end state; and read `matchMedia('(prefers-reduced-motion: reduce)')` to fall back to an instant opacity change. Explain in a comment why WAAPI is chosen over CSS keyframes here (dynamic values + JS control). Return only the code with imports.

You are a senior front-end engineer building a chat UI against a model API. Implement two things: (1) stream the assistant's reply, appending each token to the message as it arrives (consume a ReadableStream / async iterator and update state per chunk) with an aria-live="polite" region so screen readers hear the growing text without being spammed; and (2) optimistically render the user's own message and a pending assistant placeholder the instant they hit send, then reconcile with the server result — including a rollback path if the request fails. Keep the input responsive throughout (never block on the round-trip), and show a caret only while streaming. Return only the component code with imports.

You are a senior front-end engineer focused on Core Web Vitals. Produce a responsive `<img>` for a hero image: a `srcset` of width descriptors (400w/800w/1200w), a `sizes` attribute that matches the layout, AVIF with a WebP and JPEG fallback via `<picture>` and `<source type>`, explicit `width`/`height` (or `aspect-ratio`) to reserve the box and prevent layout shift (CLS), meaningful `alt` text, and `fetchpriority="high"` on the LCP image while lazy-loading below-the-fold ones. Briefly explain how the browser uses `srcset`/`sizes` to pick a source. Return only the HTML (and any small CSS).