# 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 UX Engineer specializing in file handling interfaces, drag-and-drop interactions, and form component design. # Objective Build a drag-and-drop file upload dropzone with visual feedback states, file previews, validation, and a file list — styled for dark mode with smooth micro-interactions. # Instructions 1. Create the dropzone area: - Large dashed-border rectangle as the drop target - Upload icon (cloud + arrow SVG) centered with instructional text - Text: "Drag & drop files here" with a secondary "or click to browse" link - Hidden `<input type="file" multiple>` triggered by clicking the dropzone 2. Implement drag-and-drop visual states: - **Default**: dashed border in muted color - **Drag over**: border color changes to accent, background lightens, icon scales up slightly - **Uploading**: pulsing animation on the border - **Error**: red border with error message - Smooth transitions between all states (200ms ease) 3. Build the file preview list (below the dropzone): - Each file shows: file type icon, file name (truncated), file size (human-readable), and a remove button (×) - Image files show a thumbnail preview (use `FileReader` + `URL.createObjectURL`) - Progress bar per file (simulated with CSS animation) 4. Add validation: - Max file size: 10MB per file — show inline error for oversized files - Accepted types: images and PDFs only (`.jpg`, `.png`, `.gif`, `.pdf`) - Max 5 files at once — reject additional files with a warning 5. Style in dark mode: - Dark card background with subtle border - Accent color for active/success states, red for errors - Consistent spacing and rounded corners # Constraints - Vanilla JavaScript — no external libraries - Use `dragenter`, `dragover`, `dragleave`, `drop` events with proper `preventDefault()` - Semantic HTML with `aria-label` on the dropzone - File size display in human-readable format (KB, MB) - Must work without JavaScript for the basic `<input type="file">` fallback - Responsive: full-width on mobile, max-width 600px on desktop # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include realistic placeholder states and sample file entries - Well-commented code with clear separation: dropzone UI, drag events, file handling, validation

# Role You are a Senior Frontend Developer and Design Systems Engineer specializing in progress indicators, state visualization, and reusable UI components. # Objective Build a horizontal multi-step progress stepper component with distinct visual states (completed, active, upcoming), connecting lines, and optional step descriptions — suitable for checkout flows, form wizards, or onboarding. # Instructions 1. Create the stepper layout: - Horizontal row of step nodes connected by lines - Evenly spaced across the container width using CSS Flexbox - 5 steps total for demonstration 2. Design each step node: - Circle (40px) with step number or icon inside - **Completed state**: filled accent background, white checkmark icon replacing the number - **Active state**: accent-colored ring (outline) with filled inner dot, subtle pulse animation - **Upcoming state**: muted gray circle with gray number - Step label below each circle (e.g., "Cart", "Shipping", "Payment", "Review", "Confirm") - Optional: brief description text below the label in smaller, muted font 3. Build the connecting lines: - Horizontal lines between each step node - **Completed segment**: filled with accent color (solid) - **Active segment**: gradient from accent to muted (half-filled effect) - **Upcoming segment**: muted gray, dashed or solid - Lines should connect center-to-center of the circles 4. Add interactive demo controls: - "Next" and "Previous" buttons below the stepper - Clicking advances or retreats the active step - Smooth transition animations on state changes (300ms) 5. Style in dark mode: - Dark background, accent color for progress - White text on completed circles, muted text on upcoming - Clean, minimal aesthetic # Constraints - CSS Flexbox for layout — lines using `::before`/`::after` or `<hr>` elements between nodes - Transitions on all state changes (color, scale, opacity) - Semantic HTML: use `<ol>` with `<li>` for steps, `aria-current="step"` on active - Must work at any number of steps (3–7) without layout breaking - Responsive: on mobile, show only active step with prev/next navigation - No external dependencies # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include realistic step labels (e-commerce checkout theme) - Well-commented code with sections: stepper markup, state styles, connecting lines, demo controls - Use CSS custom properties for accent color and sizing