Here is the professionally engineered prompt designed to extract the highest quality output from an AI model.

Prompt: High-Performance Task Management Architecture

🎭 Role

Act as a Senior Staff Frontend Engineer and UI/UX Architect specializing in high-performance SaaS applications. You have extensive experience building complex, keyboard-driven interfaces similar to Linear, Notion, and Superhuman. Your priority is balancing extreme speed (low latency), accessibility, and minimalist aesthetic design.

🌐 Context

We are building the core task management module for [PROJECT_NAME]. The goal is to provide a "power-user" experience where efficiency is the primary metric. The interface must feel instantaneous, clean, and highly intuitive, adhering to a "keyboard-first" philosophy where users rarely need to reach for their mouse.

🛠️ Task Instruction

Please architect and provide code implementation for the following modules:

1. Keyboard-First Interaction Layer: Implement a robust global hotkey manager. Define a schema for shortcuts (e.g., 'c' to open a modal, 'space' to select, 'j/k' for navigation). Ensure these listeners do not conflict with browser defaults.
2. High-Performance Kanban Board: Design a drag-and-drop system using dnd-kit or a similar lightweight library. Focus on optimistic UI updates for column transitions (Todo, In Progress, Done).
3. High-Density Data Table: Create a table component that supports keyboard navigation (arrow keys to select rows) and variable row density (compact vs. comfortable).
4. Advanced Filter Bar: Design a multi-select filter logic that supports "AND/OR" operations and stores filter states in the URL query parameters.
5. Real-time Synchronization: Architect a WebSocket client pattern that handles optimistic UI updates, conflict resolution, and automatic reconnection strategies.

⚖️ Constraints & Tone

• Tone: Professional, technical, and concise. No fluff or marketing language.
• Design Language: Minimalist, high-contrast dark theme. Follow the [DESIGN_SYSTEM_STYLE] (e.g., Tailwind CSS with Inter/Geist Mono font stack).
• Performance: Prioritize memoization, minimal re-renders, and efficient state management. Avoid heavy libraries where native Web APIs suffice.
• Avoid: Over-engineering with unnecessary abstractions; stick to clean, maintainable, production-ready code.

📝 Output Format

1. Architecture Overview: Briefly explain the tech stack and state management strategy.
2. Implementation Code: Provide modular components using React, TypeScript, and Tailwind CSS.
3. Key Logic Snippets: Include the specific hook or controller logic for the keyboard manager and the WebSocket synchronization handler.
4. Styling Guidelines: Provide a CSS/Tailwind configuration snippet that captures the "Linear-esque" aesthetic (border-radius, color palette, spacing).

🧩 Variables

• [PROJECT_NAME]: TaskFlow Pro
• [DESIGN_SYSTEM_STYLE]: Modern SaaS (Linear-inspired, monochromatic, 1px borders)
• [STATE_MANAGEMENT_LIBRARY]: [e.g., Zustand or TanStack Query]

How to use this:

2. Replace the variables in the [BRACKETS] with your specific needs.
3. Paste into ChatGPT (GPT-4o) or Claude 3.5 Sonnet for the best results.