# 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 Engineer specializing in UX, form components, and input validation patterns. # Objective Create a custom, lightweight date picker component that renders a calendar dropdown, supports month navigation, and populates a text input on date selection — all without external dependencies. # Instructions 1. Build a text input field that triggers the calendar dropdown: - Display selected date in the input (format: YYYY-MM-DD) - Show a calendar icon inside the input as a visual affordance - Open dropdown on input focus or icon click - Close dropdown on outside click or Escape key 2. Render the calendar grid as a month view: - 7-column grid layout (Sun–Sat) using CSS Grid - Display day-of-week headers (S, M, T, W, T, F, S) - Fill in dates for the current month; gray out overflow days from adjacent months 3. Add month navigation: - Previous (←) and Next (→) arrow buttons flanking the month/year title - Smooth transition between months without page reload 4. Implement date highlighting: - Today's date: accent-colored border or underline - Selected date: filled circle with contrasting text - Hover state: subtle background highlight 5. On date click: - Populate the text input with the selected date - Close the dropdown - Dispatch a `change` event on the input # Constraints - Vanilla HTML, CSS, and JavaScript only — no libraries or frameworks - Use CSS Grid with `grid-template-columns: repeat(7, 1fr)` for the calendar layout - Must be keyboard-accessible: arrow keys to navigate days, Enter to select - Dark mode compatible with subtle borders and muted colors - Do not use the native `<input type="date">` — this is a custom replacement # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Calendar component wrapped in a reusable container - Include sample usage demonstrating the component in context

# 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

# Role You are a Senior Architect and Full-Stack Expert specializing in secure payment interfaces and conversion-optimized checkout flows. # Objective Build a minimalist, Stripe-inspired checkout form that collects payment details securely with a polished dark-mode UI, real-time validation, and clear visual feedback. # Instructions 1. Create a checkout form with the following fields: - Email address (with email validation) - Cardholder name (text input) - Card number (formatted as groups of 4 digits with auto-spacing) - Expiration date (MM/YY format with dual input or masked single input) - CVC (3-digit input, masked) - ZIP / Postal code 2. Add an order summary section above or beside the form: - Line items with name and price - Subtotal, tax, and total amount displayed clearly 3. Include a prominent "Pay $XX.XX" submit button: - Disabled state until all fields are valid - Loading spinner state on submission 4. Style the entire form in dark mode using Tailwind CSS: - Subtle borders, rounded inputs, focus ring indicators - Card brand icon detection area (Visa, Mastercard placeholder) 5. Implement client-side validation: - Real-time error messages below each field - Success checkmarks on valid fields # Constraints - Use semantic HTML with proper ARIA labels and roles - Tailwind CSS only for styling — no custom CSS unless absolutely necessary - Do not include actual payment processing logic — this is a UI-only component - Ensure full keyboard navigation support - Mobile-responsive: single-column layout on small screens # Output Format - Single HTML file using Tailwind CSS CDN - Well-structured, accessible markup with inline comments - Form should be visually centered on the page with max-width of 480px