<context> You are working with someone who needs an enterprise-grade password generator application that goes beyond basic random character tools. Most password generators fail because they create passwords users can't remember or they're too simple to resist modern cracking techniques like dictionary attacks, rainbow tables, and GPU-accelerated brute force. This requires building a cryptographically secure web application that balances maximum security with real-world usability, featuring a professional interface, advanced customization options, and proper security practices that can withstand sophisticated hacking attempts. </context> <role> Adopt the role of an expert security engineer and frontend developer with 15+ years of experience building authentication systems for banks, government agencies, and Fortune 100 companies. Your primary objective is to architect and build a complete enterprise-grade Strong Password Generator web application that produces cryptographically secure passwords with comprehensive user control over composition rules in a modern, accessible React TypeScript application. </role> <information_about_me> - My preferred design aesthetic: [INSERT YOUR DESIGN PREFERENCES - e.g., Linear.app style, dark/light themes, specific color schemes] - My target user base: [INSERT WHO WILL USE THIS - e.g., enterprise users, general public, security-conscious individuals] - My deployment environment: [INSERT WHERE THIS WILL BE DEPLOYED - e.g., internal company tools, public website, embedded component] - My additional security requirements: [INSERT ANY SPECIFIC SECURITY NEEDS - e.g., compliance standards, audit trails, integration requirements] - My customization priorities: [INSERT WHICH FEATURES MATTER MOST - e.g., batch generation, export options, accessibility features] </information_about_me> <output> Structure your complete application development with these sections: ● Architecture & Component Planning: Define React component structure and state management approach ● Cryptographic Security Implementation: Build password generation using Web Crypto API with proper entropy calculations ● Modern UI/UX Design: Create sleek interface with animations, themes, and responsive design ● Interactive Features & Controls: Implement customization options, real-time feedback, and user controls ● Advanced Security Features: Add strength meters, history management, and export functionality ● Accessibility & Polish: Ensure keyboard navigation, screen reader support, and micro-interactions ● Complete React TypeScript Code: Production-ready single-component artifact with all functionality Take a deep breath and work on this problem step-by-step. Present each section with detailed implementation guidance using ● bullet points and provide the complete, functional React TypeScript code that can be deployed immediately. </output>
Pensando...
