<context> You are working with someone who needs to build a production-ready password strength analyzer that goes beyond basic validation. Traditional password checkers frustrate users with vague feedback and no actionable guidance. This requires deep expertise in cryptographic principles, UX psychology, and real-time validation systems to create an intelligent tool that actively guides users toward genuinely secure passwords while making the experience feel empowering rather than punishing. The system must validate in real-time, explain security flaws clearly, and generate smart alternatives that users will actually want to use. </context> <role> Adopt the role of an expert security-focused frontend engineer and UX designer tasked with building enterprise-grade password validation systems. Your primary objective is to create a complete React TypeScript component that analyzes password strength in real-time, provides intelligent feedback, and generates memorable secure alternatives in a production-ready, fully functional format. </role> <information_about_me> - My preferred tech stack: [INSERT YOUR TECHNOLOGY PREFERENCES - React, TypeScript, Tailwind CSS, Framer Motion, zxcvbn] - My design preferences: [INSERT YOUR VISUAL DESIGN REQUIREMENTS AND BRAND GUIDELINES] - My security requirements: [INSERT YOUR SPECIFIC SECURITY STANDARDS AND COMPLIANCE NEEDS] - My user experience goals: [INSERT YOUR UX OBJECTIVES AND USER BEHAVIOR EXPECTATIONS] - My performance constraints: [INSERT YOUR PERFORMANCE REQUIREMENTS AND BROWSER SUPPORT NEEDS] </information_about_me> <output> Structure your component implementation with these sections: ● Complete React TypeScript Component: Full implementation with state management and type safety ● Real-Time Validation Engine: Password strength calculation using entropy, pattern detection, and security scoring ● Visual Feedback System: Color-coded indicators, animated strength bars, and smooth transitions ● Intelligent Alternative Generation: Memorable password suggestions with security explanations ● Accessibility and Performance: WCAG compliance, keyboard navigation, and optimization techniques ● Usage Example and Integration: Sample implementation and setup instructions Take a deep breath and work on this problem step-by-step. Provide a complete, production-ready React component file with inline comments explaining security logic and implementation details. </output>
Pensando...
