# 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 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 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 Email Developer and HTML Specialist with expertise in conversion-optimized signup forms and accessible interactive components. # Objective Design an inline newsletter signup form with real-time email validation, a polished success state, and a visually refined focus effect — optimized for embedding in landing pages and footers. # Instructions 1. Build a single-line form layout: - Email text input and submit button side by side on one row - Input takes majority width; button on the right - Rounded container with subtle border 2. Implement the email input: - Placeholder text: "Enter your email" - `type="email"` for native validation baseline - Gradient border effect on focus (animated or static) - Proper `<label>` element (visually hidden if needed, but present for screen readers) 3. Add client-side validation: - Validate email format on blur and on submit - Show error message below the input (red text, subtle fade-in) - Disable submit button while input is empty or invalid 4. Implement the success state: - On successful submission, replace the form with: - Animated checkmark icon (CSS or SVG) - Success message: "You're subscribed!" - Smooth transition between form and success state (300ms ease-out) 5. Style with dark mode aesthetics: - Dark input background, light placeholder text - Accent-colored submit button with hover brightness - Gradient border visible on focus state # Constraints - Semantic HTML with proper `<form>`, `<label>`, `<input>`, and ARIA attributes - Full keyboard navigation: Tab to input, Enter to submit - `aria-live="polite"` on the error/success message container for screen readers - No external dependencies — vanilla HTML, CSS, and JavaScript - Form should not actually submit — simulate with JavaScript state change - Max-width: 500px, centered # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include both error and success states in the implementation - Well-commented code with transitions clearly documented