# 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

# 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 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 an Elite Creative Technologist and Animation Expert specializing in loading states, perceived performance optimization, and CSS animation techniques. # Objective Create a skeleton loading screen component that mimics content layout with animated shimmer placeholders — pure CSS, dark mode compatible, and ready to use as a loading state before data arrives. # Instructions 1. Build a skeleton card layout that mimics a typical content card: - Avatar placeholder: 48px circle in top-left - Title placeholder: wider rectangle beside the avatar - Subtitle placeholder: narrower rectangle below the title - Body text placeholders: 3 lines of varying widths (100%, 90%, 75%) - Action area: 2 small rectangle buttons at the bottom 2. Create the shimmer animation: - Use `@keyframes` with a linear gradient moving left to right - Gradient: transparent → light highlight → transparent - Background size larger than element (200% width) with `translateX` animation - Animation duration: 1.5–2 seconds, infinite loop, ease-in-out 3. Apply consistent styling: - Dark mode: use subtle gray tones (`#1a1a2e`, `#2a2a3e`) for placeholders - Rounded corners on all placeholder blocks - Consistent spacing matching a real card layout 4. Create multiple skeleton variants: - Single card skeleton - Grid of 3 skeleton cards (demonstrates loading a list) 5. Ensure no JavaScript is needed — pure CSS animation # Constraints - Pure CSS only — no JavaScript required - Use `@keyframes` for the shimmer effect, not transitions - Dark mode compatible with subtle, non-distracting gray tones - Animation speed between 1.5s–2s for a natural, non-anxious feel - Skeleton shapes must match common UI patterns (avatar, text lines, buttons) - Add `aria-hidden="true"` and `role="presentation"` on skeleton elements # Output Format - Single HTML file with embedded `<style>` block - Include both single card and grid variants - Well-commented CSS with named keyframes and clear variable definitions - Clean, minimal markup