# Role You are a Senior Frontend Developer and Privacy UX Specialist with expertise in GDPR-compliant consent interfaces, accessible overlays, and non-intrusive notification design. # Objective Build a GDPR-compliant cookie consent banner with category-based preference toggles, accept/reject actions, and smooth animations — designed to be non-intrusive yet clearly visible. # Instructions 1. Create the banner container: - Fixed to the bottom of the viewport, full width - Slide-up entrance animation from below (300ms ease-out) - Dark card background with subtle top border or shadow - Max-width content area centered (1200px) 2. Add the main consent message: - Concise headline: "We value your privacy" - Brief description explaining cookie usage (2 lines max) - Link to "Privacy Policy" (styled as underlined text link) 3. Build action buttons: - "Accept All" — primary filled button with accent color - "Reject All" — ghost/outline button - "Customize" — text link or subtle button that expands the preference panel 4. Create the expandable preferences panel: - Slides open below the main message when "Customize" is clicked - Cookie categories with toggle switches: - **Essential** (always on, toggle disabled with explanation) - **Analytics** (default off) - **Marketing** (default off) - **Functional** (default off) - Each category has a name, brief description, and toggle switch - "Save Preferences" button at the bottom of the panel 5. Persistence: - Save consent choice to `localStorage` - Do not show the banner again if consent was previously given - Provide a way to re-open preferences (small floating button or footer link) # Constraints - Vanilla JavaScript — no external libraries - Toggle switches built with CSS-only (`<input type="checkbox">` + `<label>`) - Essential cookies toggle must be visually disabled and checked - Must be keyboard-accessible: Tab through all controls, Enter/Space to toggle - `aria-live="polite"` on the banner for screen reader announcement - Responsive: stack buttons vertically on mobile - Banner must not block page scrolling # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include a sample page behind the banner to demonstrate non-blocking behavior - Well-commented code with clear sections: banner markup, toggle logic, localStorage handling

# Role You are a Senior UX Engineer specializing in feedback systems, micro-interactions, and notification component design. # Objective Build an animated success toast notification component with entrance/exit animations, auto-dismiss behavior, and proper accessibility — styled for dark mode. # Instructions 1. Create the toast notification element: - Positioned in the top-right corner of the viewport (fixed) - Contains: success icon (checkmark in green circle), message text, and close button (×) - Rounded corners, subtle shadow, dark background with green accent 2. Implement entrance animation: - Slide in from the right with fade-in (`translateX(100%) → translateX(0)`) - Duration: 300ms ease-out 3. Implement exit animation: - Slide out to the right with fade-out - Duration: 200ms ease-in - Triggered by close button click or auto-dismiss timer 4. Add auto-dismiss behavior: - Toast automatically disappears after 4 seconds - Optional: progress bar at the bottom showing remaining time - Pause auto-dismiss on hover (resume on mouse leave) 5. Support stacking: - Multiple toasts stack vertically with consistent gap - New toasts appear at the top, pushing others down 6. Style with Tailwind CSS in dark mode: - Dark background (`bg-gray-800` or similar) - Green accent for success variant - White text with muted close button # Constraints - Semantic HTML with `role="alert"` and `aria-live="polite"` for screen readers - Tailwind CSS only — no custom CSS - Vanilla JavaScript for timing and animation triggers - No external dependencies - Toast container max-width: 360px - Include a demo button to trigger the toast # Output Format - Single HTML file using Tailwind CSS CDN - Include a trigger button for demonstration - Well-commented code with clear separation of toast markup, styles, and behavior

# Role You are a Senior Frontend Engineer specializing in UX, form design, and client-side validation patterns. # Objective Build a multi-step form wizard with a visual step indicator, field validation, a review step, and smooth slide transitions between each stage. # Instructions 1. Create a step indicator bar at the top: - 3 numbered circles connected by horizontal lines - Active step: filled accent color with white number - Completed step: green with checkmark icon - Upcoming step: muted/gray outline - Lines between steps fill with color as steps complete 2. Build 3 form steps: - **Step 1 — Personal Info**: Full name (required), email (required, validated), phone (optional) - **Step 2 — Preferences**: Preferred contact method (radio buttons), newsletter opt-in (checkbox), timezone (select dropdown) - **Step 3 — Review & Submit**: Display all entered data in a read-only summary, edit button per section to jump back 3. Add navigation controls: - "Previous" button (hidden on Step 1) - "Next" button (disabled until required fields are valid) - "Submit" button on the final review step 4. Implement validation: - Validate required fields before allowing progression to the next step - Show inline error messages below invalid fields - Highlight invalid fields with red border 5. Add slide transitions: - Use `transform: translateX()` with transition for horizontal sliding between steps - Current step slides out, next step slides in # Constraints - Vanilla HTML, CSS, and JavaScript only — no frameworks or libraries - Client-side validation only (HTML5 + JavaScript) - Disable the "Next" button until all required fields on the current step pass validation - Form must be keyboard-navigable: Tab through fields, Enter to advance - Dark mode compatible styling - Single-page form — no actual page navigation # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Use `translateX()` for slide transitions between steps - Include realistic placeholder content and sample data - Well-commented code with clear separation of each step

# Role You are a Senior Frontend Developer and Product Design Engineer specializing in user onboarding flows, progressive disclosure, and first-run experience design. # Objective Build a multi-step onboarding wizard with a visual progress indicator, step-specific content panels, navigation controls, and smooth transitions — designed to guide new users through initial setup. # Instructions 1. Create the wizard container: - Centered card on a dark background (max-width: 640px) - Subtle shadow and rounded corners for a floating card feel - Fixed height with content area that transitions between steps 2. Build the progress indicator (top of the card): - Horizontal step bar with numbered circles connected by lines - States for each step: completed (filled accent), active (outlined accent with pulse), upcoming (muted) - Step labels beneath each circle (e.g., "Profile", "Workspace", "Integrations", "Done") - 4 total steps 3. Design each step's content: - **Step 1 — Profile**: name input, role dropdown, avatar upload placeholder - **Step 2 — Workspace**: workspace name input, team size radio buttons (Solo, Small Team, Organization) - **Step 3 — Integrations**: checklist of integration options with toggle switches (GitHub, Slack, Jira, Figma) - **Step 4 — Done**: success illustration (CSS checkmark animation), welcome message, "Go to Dashboard" CTA 4. Add navigation controls (bottom of the card): - "Back" button (hidden on Step 1) - "Continue" button (becomes "Finish" on last step) - Step counter text: "Step 2 of 4" 5. Implement transitions: - Slide-left animation when advancing, slide-right when going back - Progress bar fills smoothly between steps # Constraints - Vanilla JavaScript for step navigation and state management - CSS transitions for slide animations — no animation libraries - Form inputs must be properly labeled with `<label>` elements - Keyboard-accessible: Tab through form fields, Enter to advance - Maintain form state when navigating back to previous steps - Dark mode only with consistent input styling - Responsive: full-width card on mobile with stacked layout # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include realistic placeholder content (SaaS or developer tool theme) - Well-commented code with sections: progress bar, step content, navigation logic, transitions