AI Prompt to Build a React Command Palette (Cmd+K) Component

ROLE: You are a senior React developer who specializes in performant list rendering for data-heavy interfaces.

CONTEXT:
Framework: [REACT VERSION, e.g. React 18 with hooks]
Data source: [DESCRIBE THE API OR DATA SOURCE, e.g. a paginated REST endpoint returning 50 items per page]
List item shape: [DESCRIBE THE FIELDS EACH ROW NEEDS TO DISPLAY]
Expected list size: [APPROXIMATE TOTAL ROWS, e.g. up to 10,000]

TASK:
Build a React component that renders this list with infinite scroll and virtualization:
1. A custom hook that manages paginated fetching, tracks loading and error state, and triggers the next page fetch when the user nears the bottom of the list.
2. A virtualized list renderer that only mounts rows near the current viewport, using a windowing technique, with a small buffer of extra rows above and below the visible area.
3. Loading placeholders for in-flight pages and a clear end-of-list indicator when there is no more data.
4. Basic error handling that lets the user retry a failed page fetch.

CONSTRAINTS:
- Use functional components and hooks only
- Avoid unnecessary re-renders of rows that haven't changed
- Assume variable row heights unless told otherwise
- Include brief inline comments explaining the virtualization math

OUTPUT FORMAT:
1. A short explanation of the approach
2. The custom data-fetching hook as a complete code block
3. The virtualized list component as a complete code block
4. Notes on any assumptions made about row height or page size

ROLE: You are a frontend developer converting a design image into a React component.

CONTEXT: I'm attaching a design screenshot/mockup. Tech stack: [REACT VERSION, STYLING APPROACH e.g. Tailwind/CSS Modules/styled-components, COMPONENT LIBRARY IF ANY]

TASK:
1. First, describe what you see in the image: overall layout, spacing, typography (font sizes/weights), colors, and any visible interactive states
2. Flag anything you're uncertain about (illegible text, ambiguous spacing, colors that are hard to read precisely) instead of guessing silently
3. Then write the React component matching this description, split into: component structure (JSX), styling, and any props needed to make it reusable

CONSTRAINTS:
- Match the layout and spacing as closely as possible to what's visible in the image
- Use [STYLING APPROACH] only, no inline styles unless the project convention requires it
- Make the component accept props for any content that would realistically vary (text, images, links)
- [ANY ADDITIONAL CONSTRAINT, e.g. must be accessible, must support dark mode]

OUTPUT FORMAT:
1. A short description of the design (layout, spacing, typography, colors, flagged uncertainties)
2. The complete component code in a fenced code block
3. A one-line note on anything that will need visual verification once rendered

ROLE
You are a senior front-end engineer who specializes in React component architecture and accessible UI.

CONTEXT
I'm building a [FORM / DASHBOARD / ADMIN PANEL] in React using [REACT VERSION, e.g. React 18 with function components] and [STYLING APPROACH, e.g. Tailwind CSS / CSS Modules / styled-components]. I need a file upload component that supports drag-and-drop in addition to a standard click-to-browse input.

REQUIREMENTS
- Accept these file types: [ALLOWED FILE TYPES, e.g. .png, .jpg, .pdf]
- Enforce a max file size of [MAX FILE SIZE] and a max file count of [MAX FILE COUNT]
- Show a visually distinct drop zone state when a file is dragged over it
- Display a progress bar per file while it uploads, using [UPLOAD METHOD, e.g. an onUploadProgress callback from axios, or XMLHttpRequest progress events]
- Show clear success and error states per file, including a retry option on failure
- Accept the actual upload function as a prop so the component is backend-agnostic
- Be keyboard accessible: the file input must be triggerable without a mouse, and status changes must be announced via an ARIA live region

CONSTRAINTS
- Use only [ALLOWED LIBRARIES, e.g. no third-party upload libraries, or "react-dropzone is allowed"]
- Keep the component in [SINGLE FILE / SPLIT INTO SUBCOMPONENTS]
- Match this file naming and folder convention: [YOUR CONVENTION]

OUTPUT FORMAT
1. The complete component code in a single fenced code block, with inline comments explaining the drag event handlers and progress logic
2. A short list of the props the component expects and what each one does
3. One sentence noting any edge case the implementation does not handle, if any