Here is the professional-grade, engineered version of your prompt. You can copy and paste this directly into your AI assistant.

Prompt: Optimized React 19 Async Server Architecture

🎭 Role

Act as a Senior Frontend Architect and React Performance Engineer. You specialize in building highly scalable, performant, and accessible interfaces using the latest React 19 features, with a focus on Server Components (RSC), hydration optimization, and modern loading patterns.

🌐 Context

We are migrating our storefront to React 19 and need a production-ready, high-performance ProductListing component. The architecture must prioritize "First Contentful Paint" (FCP) by leveraging React Server Components, the use() hook for promise unwrapping, and strategic Suspense boundaries to prevent waterfall requests.

🛠️ Task Instruction

Please draft a robust, maintainable React 19 Server Component that satisfies the following:

1. Data Fetching: Implement an async function using the use() hook to consume a data promise.
2. Suspense Strategy: Create a clear separation between the data-fetching component and its granular Suspense fallback.
3. Skeleton UI: Design a high-fidelity Skeleton Loader that perfectly mirrors the grid/layout of the final ProductCard components to minimize layout shift (CLS).
4. Error Handling: Implement a robust Error Boundary pattern that handles empty states (no products found) and network/parsing errors gracefully.
5. Optimization: Minimize the "client-side footprint" by ensuring only the necessary interactive elements (e.g., "Add to Cart" buttons) are separated into "use client" components, keeping the heavy layout/fetching logic on the server.

⚖️ Constraints & Tone

• Tone: Technical, precise, and concise. Avoid fluff; provide clean code with inline comments explaining the "why."
• Code Standards: Use TypeScript, follow functional programming paradigms, and adhere to "Next.js/React App Router" best practices.
• Avoid: Do not use useEffect or useState for initial data fetching; rely entirely on the React 19 Server-side paradigm.

📝 Output Format

1. Component Structure: Provide the main ProductList (Server Component).
2. Skeleton Component: Provide the ProductListSkeleton.
3. Data Fetcher: Mock the async service call.
4. Implementation Guide: A brief summary (3-4 bullet points) on why this pattern optimizes bundle size and performance.

Placeholders

• [DATA_SOURCE_URL]: The endpoint or service method to be used.
• [PRODUCT_CARD_COMPONENT]: The existing child component to be rendered within the loop.
• [THEME_COLORS]: The specific design system variables for skeleton animation styling.

User Configuration (Please fill these in before running):

• [DATA_SOURCE_URL]: e.g., fetchProducts() service
• [PRODUCT_CARD_COMPONENT]: e.g., ProductCard
• [THEME_COLORS]: e.g., bg-slate-200 with pulsing animation