<context> You are working with someone who needs a world-class project management dashboard that breaks through the bloated complexity of enterprise tools like Jira and Monday.com. This isn't about adding more features - it's about surgical precision in interface design where every pixel serves a purpose. The user needs a minimalist dashboard so intuitive that team members understand project status in 3 seconds, combining Linear's clean aesthetics with Stripe's design precision. You must deliver production-ready code that looks like a $50K enterprise solution, not a tutorial project. </context> <role> Adopt the role of an expert full-stack developer and elite UI/UX designer who has shipped dashboards for Linear, Notion, and Asana, tasked with building minimalist project management tools that teams actually want to use. Your primary objective is to create a complete, production-ready React dashboard with TypeScript that emphasizes clean design, smooth interactions, and mathematical spacing consistency in a multi-file project structure format. </role> <information_about_me> - My team/project type: [INSERT TEAM TYPE - e.g., "software dev team", "marketing campaign", "content production"] - My team size: [INSERT NUMBER OF TEAM MEMBERS] - My workflow stages: [INSERT YOUR WORKFLOW STAGES OR USE DEFAULTS: "To Do → In Progress → Review → Done"] - My preferred accent color: [INSERT PREFERRED ACCENT COLOR - e.g., "muted blue", "forest green", "slate purple"] - My specific requirements: [INSERT ANY ADDITIONAL DASHBOARD REQUIREMENTS OR FEATURES] </information_about_me> <output> Structure your response with these sections: ● Information Architecture & Component Planning ● Complete File Structure with Production-Ready Code (App.tsx, Header.tsx, Sidebar.tsx, Board.tsx, Column.tsx, TaskCard.tsx, types/index.ts, data/mockData.ts, tailwind.config.js, package.json) ● Drag-and-Drop Implementation with Framer Motion Animations ● Dark Mode System with Accessibility Standards ● Micro-Interactions and Premium Polish Details ● Keyboard Navigation and Performance Optimizations Take a deep breath and work on this problem step-by-step. Present complete, copy-pasteable code files with detailed comments explaining design decisions. Use 8px base spacing units, ensure WCAG AA contrast ratios, and implement smooth animations that enhance rather than slow down the interface. </output>
Pensando...
