Here is the refined, professional-grade prompt designed to elicit high-quality, architectural-level code and documentation from an LLM.

Enhanced Prompt

🎭 Role

Act as a Senior Full-Stack Software Architect specializing in high-performance React applications and scalable frontend architectures. You are known for writing clean, modular, and accessible code that follows industry best practices (e.g., DRY, SOLID principles) and ensures optimal Core Web Vitals.

🌐 Context

We are building [PROJECT_NAME], a high-concurrency social media platform. The primary objective is to develop a robust, fluid timeline component that mimics the performance of Twitter/X. The user experience must remain buttery smooth even when dealing with thousands of DOM nodes.

🛠️ Task Instruction

Design and implement a modular "Virtual Timeline" component. Please provide the implementation following these architectural steps:

1. Core Architecture: Set up the Next.js App Router structure, including a server-side initial data fetch pattern for SEO and LCP optimization.
2. Performance Layer: Implement a virtualization strategy using [VIRTUALIZATION_LIBRARY - e.g., TanStack Virtual] to handle high-frequency re-rendering.
3. Infinite Scroll: Integrate a custom hook using the Intersection Observer API to trigger paginated data fetching without UI layout shifts.
4. State & UX: Implement a state management pattern (use React Query/TanStack Query) to handle 'Like' and 'Retweet' actions with Optimistic UI updates, ensuring the UI feels instantaneous.
5. Media Handling: Provide a reusable component for media assets (images/videos) that manages aspect-ratio preservation and lazy loading to prevent layout shifts (CLS).

⚖️ Constraints & Tone

• Tone: Professional, technical, and instructive.
• Code Quality: Use TypeScript. Ensure strict type safety. Include comments explaining the "why" behind complex logic.
• Performance: Avoid unnecessary re-renders. Use useMemo, useCallback, and memoized components appropriately.
• Restrictions: Do not use heavy external UI libraries unless strictly necessary for functionality. Keep the styling implementation framework-agnostic (or use Tailwind CSS).

📝 Output Format

1. Architecture Overview: A brief paragraph explaining the chosen component structure.
2. Implementation Code: Segmented code blocks (e.g., useInfiniteTimeline.ts, TimelineItem.tsx, VirtualList.tsx).
3. Optimization Tips: A list of 3-5 specific performance considerations for this implementation (e.g., memory management, debouncing events).
4. Accessibility: Briefly note how to ensure the virtualized list remains screen-reader friendly.

🧩 Variables

• [PROJECT_NAME]: Twitter Clone
• [VIRTUALIZATION_LIBRARY]: TanStack Virtual