Prompt Library

# Role You are a Senior Frontend Developer and Creative Technologist specializing in delightful error states, CSS illustration, and engagement-focused micro-interactions. # Objective Design a creative, animated 404 error page with a CSS-only illustration, engaging copy, helpful navigation links, and a search bar — turning a dead end into a pleasant experience. # Instructions 1. Create a centered full-viewport layout: - Vertically and horizontally centered content - Dark background with a subtle radial gradient for depth 2. Build a CSS-only illustration: - Animated astronaut, floating robot, or broken chain link (pick one) - Use CSS shapes (`border-radius`, `clip-path`, `transform`) — no image files - Add a gentle floating animation (`translateY` oscillation, 3–4 second loop) - Optional: animated stars or particles in the background using CSS 3. Add the error message content: - Large "404" number with gradient text or glow effect - Headline: witty message (e.g., "Lost in space" or "This page took a wrong turn") - Subtitle: helpful explanation in muted text 4. Include navigation aids: - Search bar: compact input with search icon and placeholder "Search for pages..." - Quick links row: "Home", "Blog", "Docs", "Support" as pill-shaped buttons - "Go Back" button using `history.back()` with a left arrow icon 5. Add micro-interactions: - Illustration reacts to mouse movement (subtle parallax via CSS or minimal JS) - Buttons have hover scale + glow effects - Search input expands on focus # Constraints - Illustration must be CSS-only — no SVGs, images, or icon fonts - Minimal JavaScript (parallax mouse tracking only — everything else in CSS) - Semantic HTML with proper heading hierarchy - The page must feel alive and engaging, not like a dead end - Dark mode only - Responsive: illustration scales down on mobile, links stack vertically # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Well-commented code with sections: illustration CSS, layout, animations, interactivity - Include all navigation links as working `<a>` tags with `href="#"` placeholders

# Role You are a Senior Frontend Developer and Information Architecture Specialist with expertise in temporal data display, feed design, and activity logging interfaces. # Objective Build a vertical activity timeline component displaying chronological events with icons, timestamps, descriptions, and visual connectors — suitable for dashboards, changelogs, or audit logs. # Instructions 1. Create the timeline structure: - Vertical line running down the left side as the visual connector - Each event node positioned along the line with a colored circle marker - Alternating or left-aligned layout (left-aligned preferred for readability) 2. Build each timeline event item: - Circle marker on the timeline line with a category-specific icon or color: - Commit/code: blue - Deployment: green - Alert/error: red - Comment/note: yellow - User action: purple - Event card to the right of the marker containing: - Event title (bold) - Description text (1–2 lines, muted color) - Relative timestamp (e.g., "2 hours ago", "Yesterday at 3:45 PM") - Optional: user avatar + name inline 3. Add date separators: - Group events by day with a date header (e.g., "Today", "March 28, 2026") - Date header styled as a pill badge on the timeline line 4. Implement "Load more" behavior: - Button at the bottom to load older events - Subtle fade-out gradient at the bottom edge before the button 5. Style in dark mode: - Dark background, slightly lighter event cards - Timeline line in low-opacity white - Consistent spacing between events (24px gap) # Constraints - Semantic HTML using `<ol>` for the event list and `<time>` for timestamps - CSS-only timeline connector — no SVG or canvas - Timeline line using `::before` pseudo-element on the list container - Circle markers using `::before` on each list item - No JavaScript required for the layout — static HTML/CSS component - Include at least 8 sample events across 3 date groups - Responsive: timeline shifts to full-width cards on mobile (line hidden) # Output Format - Single HTML file with embedded `<style>` block - Include realistic sample data (developer project or SaaS audit log theme) - Well-commented CSS explaining the timeline connector technique - Use CSS custom properties for colors and spacing

# Role You are a Senior Frontend Developer and UI/UX Expert specializing in data-rich dashboard interfaces and information hierarchy. # Objective Build a responsive analytics dashboard layout that displays key business metrics through stat cards and chart placeholders, optimized for quick scanning and data comprehension. # Instructions 1. Create a top row containing exactly 4 stat cards arranged horizontally: - Total Users, Revenue, Conversion Rate, Growth - Each card must display: a large metric value, a descriptive label beneath it, and a percentage change indicator - Change indicators: use a green upward arrow for positive trends and a red downward arrow for negative trends 2. Below the stat cards, add a main chart area: - Full-width chart placeholder container with a 16:9 aspect ratio - Include a placeholder label (e.g., "Revenue Over Time") 3. Below the main chart, add a bottom row with 2 smaller chart placeholders side by side: - Equal width, each with a 4:3 aspect ratio - Include placeholder labels (e.g., "Traffic Sources", "Conversion Funnel") 4. Apply a dark theme throughout: - Dark background with subtle card borders using low-opacity white or gray - Use consistent spacing and padding between all elements # Constraints - Use semantic HTML elements (`<section>`, `<article>`, `<header>`) - Use CSS `aspect-ratio` for chart containers — do not use padding hacks - Apply `font-variant-numeric: tabular-nums` on all numeric values for proper alignment - Ensure responsive behavior: stack cards vertically on mobile, 2x2 on tablet, 4 across on desktop - Do not use JavaScript for layout — CSS Grid or Flexbox only - Dark mode first; do not include a light mode variant # Output Format - Single HTML file with embedded `<style>` block - Clean, well-indented code with brief inline comments for each major section - Use CSS custom properties for colors and spacing to enable easy theming

# Role You are a Senior Architect and Elite Backend Engineer specializing in secure developer tooling and API infrastructure interfaces. # Objective Design a fully functional API key management panel that allows users to create, view, copy, and revoke API keys with appropriate security measures and clear visual feedback. # Instructions 1. Build a data table listing all API keys with the following columns: - Name (user-defined label) - Key prefix displayed as `sk_...xxxx` (masked, showing only first and last 4 characters) - Created date (formatted as relative time or ISO date) - Status indicator: green dot for "Active", red dot for "Revoked" - Actions column with a "Revoke" button 2. Add a "Create New Key" button that opens a modal: - Modal contains a single text input for the key name - On submission, display the full key exactly once with a copy-to-clipboard button - Show a prominent warning: "This key will not be shown again. Copy it now." - Disable the modal close button until the user acknowledges or copies the key 3. Implement the revoke flow: - Clicking "Revoke" opens a confirmation dialog with the key name - Confirm action sets the key status to "Revoked" and disables the revoke button 4. Style the panel for a dark dashboard theme with clear visual hierarchy # Constraints - Never display the full API key after initial creation — this is a hard security requirement - Use monospace font (`font-family: monospace`) for all key displays - Use semantic HTML and proper ARIA attributes for accessibility - Do not rely on external libraries — vanilla HTML/CSS/JS only - Status dots must be colorblind-friendly (include text labels alongside color indicators) # Output Format - Single HTML file with embedded CSS and JavaScript - Clean, well-structured code with comments explaining security-relevant decisions - Table should be responsive: horizontal scroll on small screens

# Role You are a Senior Frontend Developer and Product Communications Specialist with expertise in release documentation, content feeds, and information hierarchy design. # Objective Build a product changelog feed page displaying categorized release updates with version badges, date headers, change-type labels, and expandable detail sections — suitable for a public-facing product updates page. # Instructions 1. Create the changelog page layout: - Single-column, centered content (max-width: 720px) - Optional: left sidebar with version quick-links for navigation - Dark background with clean typography 2. Build each release entry: - Version badge at the top: pill-shaped label (e.g., "v2.4.0") with accent background - Release date beneath the version - List of changes grouped by type with colored labels: - **New**: green badge — new features - **Improved**: blue badge — enhancements to existing features - **Fixed**: orange badge — bug fixes - **Breaking**: red badge — breaking changes requiring action - Each change item: label badge + one-line description - Optional: "Read more" expandable section for detailed descriptions 3. Add filtering controls (top of page): - Filter pills: "All", "New", "Improved", "Fixed", "Breaking" - Active filter highlighted with accent background - Filtering hides entries that don't match (with smooth CSS transition) 4. Design the version quick-links (optional sidebar or top section): - Scrollable list of version numbers - Click scrolls to that release entry (smooth scroll) - Active version highlighted based on scroll position 5. Style and polish: - Version entries separated by subtle horizontal rules or spacing - Change-type badges in consistent pill style with category colors - Clean serif or sans-serif reading font for descriptions # Constraints - Vanilla JavaScript for filtering and scroll behavior - Semantic HTML: `<article>` for each release, `<time>` for dates - Filter transitions using CSS — hide/show with opacity + height animation - Include at least 4 release entries with 3–5 changes each - Dark mode only - Responsive: sidebar hidden on mobile, full-width content - No external dependencies # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include realistic changelog data (developer tool or SaaS product theme) - Well-commented code with sections: layout, release entries, filtering logic, scroll navigation

# Role You are a Senior Frontend Developer and Component Design Specialist with expertise in compact data display, collaborative UI patterns, and micro-interaction design. # Objective Build an overlapping avatar stack component that displays a group of user avatars with a "+N more" overflow counter, hover tooltips showing user names, and smooth hover expansion — commonly seen in GitHub, Linear, and Figma. # Instructions 1. Create the avatar stack container: - Horizontal row of circular avatars overlapping by 30% (negative margin) - Display up to 5 visible avatars, then a "+N" overflow counter circle - Stack order: first avatar on top (highest `z-index`), decreasing toward the right 2. Style each avatar: - Circular (40px diameter) with a 2px solid border matching the background (creates separation) - Colored background with white initials (2 letters) as fallback - Generate distinct colors per user (hash the name to pick from a palette) - Hover: scale up slightly (1.15×) and raise z-index above all others 3. Build the overflow counter: - Same size circle as avatars, muted background - Shows "+3" or similar count of remaining users - On hover: expand into a dropdown list showing all hidden users (name + avatar) 4. Add tooltips: - On hover over any avatar, show a small tooltip above with the user's full name - Tooltip appears with a short fade-in (150ms) - Positioned above center of the avatar with a small arrow/caret pointing down 5. Implement hover expansion: - On hover over the entire stack, avatars spread apart slightly (reduce overlap) - Smooth transition (200ms ease) # Constraints - Pure CSS for layout, overlap, and hover expansion — JavaScript only for tooltip positioning - Avatars must use `<img>` with `alt` text, falling back to initials via CSS - Border color must match the parent background for the "cut-out" overlap effect - Include at least 8 users in the data (5 visible + "+3" overflow) - Accessible: `aria-label` on the stack describing the group (e.g., "8 team members") - Dark mode only - Responsive: avatar size scales down on small screens # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include sample user data with names and generated initial colors - Well-commented code with sections: avatar markup, overlap CSS, tooltips, overflow dropdown

# 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

# Role You are a Senior Frontend Developer and Developer Experience Specialist with deep expertise in code presentation, syntax highlighting, and documentation UI components. # Objective Build a polished code snippet block component with syntax highlighting, line numbers, a language badge, a one-click copy button with feedback, and optional line highlighting — styled with a VS Code-inspired dark theme. # Instructions 1. Create the code block container: - Rounded card with dark background (`#1e1e2e` or One Dark theme) - Top bar with: language badge (left), filename (center, optional), copy button (right) - Subtle border and shadow for depth 2. Implement syntax highlighting (CSS-only, class-based): - Define CSS classes for token types: `.keyword`, `.string`, `.comment`, `.function`, `.number`, `.operator`, `.punctuation` - Color scheme matching VS Code One Dark: - Keywords: purple (#c678dd) - Strings: green (#98c379) - Comments: gray (#5c6370), italic - Functions: blue (#61afef) - Numbers: orange (#d19a66) - Wrap tokens in `<span>` elements with appropriate classes 3. Add line numbers: - Left gutter with line numbers in muted color - Line numbers right-aligned in a fixed-width column - Line numbers should NOT be selectable (use `user-select: none`) - Optional: highlight specific lines with a subtle background accent 4. Build the copy button: - Clipboard icon that changes to a checkmark on successful copy - Tooltip: "Copy" → "Copied!" with a brief display (2 seconds) - Use `navigator.clipboard.writeText()` — copy only the code, not line numbers 5. Add the language badge: - Small pill in the top bar showing the language name (e.g., "JavaScript", "Python") - Color-coded by language # Constraints - No syntax highlighting libraries — use pre-tokenized HTML with CSS classes - Copy must exclude line numbers — store raw code separately or strip on copy - `<pre><code>` semantic markup with `language-*` class - Line numbers via CSS `counter-increment` or a separate `<span>` column - Dark mode only - Include 3 demo snippets: JavaScript, Python, and HTML - Responsive: horizontal scroll on overflow, no wrapping of code lines # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include 3 realistic code samples with pre-applied syntax classes - Well-commented code with sections: theme colors, token styles, line numbers, copy logic

# Role You are a Senior Frontend Engineer and Keyboard-First UX Specialist with deep expertise in command-palette interfaces, fuzzy search algorithms, and developer-focused productivity tools. # Objective Build a VS Code / Linear-style command palette triggered by `⌘K` (or `Ctrl+K`), featuring fuzzy search filtering, grouped results, keyboard navigation, and smooth enter/exit animations — optimized for power users. # Instructions 1. Create the command palette overlay: - Centered modal with a search input at the top - Semi-transparent backdrop with blur effect (`backdrop-filter: blur(8px)`) - Smooth scale + fade entrance animation (200ms ease-out) - Close on `Escape`, backdrop click, or `⌘K` toggle 2. Build the search input: - Auto-focused on open with a search icon and placeholder: "Type a command..." - Real-time filtering as the user types - Clear button (×) when input has text 3. Implement the results list: - Group results by category with section headers (e.g., "Pages", "Actions", "Settings") - Each result item shows: icon (emoji or SVG), label, optional description, and keyboard shortcut hint (right-aligned `<kbd>`) - Highlight matching characters in bold within result labels 4. Add full keyboard navigation: - `↑` / `↓` arrows to move selection highlight - `Enter` to execute the selected command - Active item highlighted with accent background - Scroll active item into view automatically 5. Style in dark mode: - Dark modal background (`#1a1a2e` or similar) with subtle border - Muted section headers, bright result labels - `<kbd>` shortcut badges styled as pill-shaped tags - Max-height with scrollable results area # Constraints - Vanilla JavaScript — no frameworks or libraries - Fuzzy matching: filter results where input characters appear in order (not necessarily contiguous) - Must be keyboard-accessible end to end — no mouse required - Limit visible results to 8 items before scrolling - Trap focus inside the palette while open - Include at least 12 sample commands across 3 categories - Semantic HTML with `role="dialog"` and `aria-modal="true"` # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include realistic sample commands (developer tool or productivity app theme) - Well-commented code with clear separation: markup, styles, search logic, keyboard handling

# Role You are a Senior Frontend Developer and Conversion Optimization Specialist with expertise in comparison interfaces, data tables, and decision-support UI design. # Objective Build a side-by-side feature comparison table that helps users evaluate multiple products or plans, with checkmark/cross indicators, category groupings, and a sticky header — optimized for scanning and decision-making. # Instructions 1. Create the comparison table structure: - Sticky header row with product/plan names and logos or icons - First column: feature names (left-aligned, grouped by category) - Subsequent columns: one per product/plan (3–4 products) - Highlighted column for the "recommended" product (subtle accent background) 2. Build the header row: - Product name in bold - Optional: price or tagline beneath the name - "Recommended" badge on the highlighted column - Sticky on scroll (`position: sticky; top: 0`) 3. Organize features by category: - Category headers spanning the full width as section dividers - Categories: "Core Features", "Integrations", "Support", "Security" - At least 5 features per category 4. Feature value indicators: - Boolean features: green checkmark (✓) for included, red cross (✗) or dash for excluded - Quantitative features: display the value (e.g., "10 GB", "Unlimited", "24/7") - Use tooltips on hover for features that need extra explanation 5. Style in dark mode: - Alternating row backgrounds for readability (subtle shade difference) - Sticky header with solid background and bottom border - Feature names left-aligned, values center-aligned in each column - Responsive: on mobile, allow horizontal scroll with the feature name column frozen # Constraints - Semantic HTML `<table>` with `<thead>`, `<tbody>`, `<th>`, `<td>` - Feature name column sticky on horizontal scroll (`position: sticky; left: 0`) - No JavaScript required for the table layout — CSS only - Include at least 20 feature rows across 4 categories - Use `scope` attributes on header cells for accessibility - Dark mode only - Responsive: horizontal scroll with frozen first column on mobile # Output Format - Single HTML file with embedded `<style>` block - Include realistic comparison data (project management tools or cloud hosting theme) - Well-commented code with sections: table structure, sticky behavior, responsive handling - Use CSS custom properties for the accent/highlight color

# Role You are a Senior Frontend Developer specializing in accessible UI components and interaction design patterns. # Objective Create a reusable confirmation dialog component for destructive actions that is fully accessible, keyboard-navigable, and visually clear about the consequences of the action. # Instructions 1. Build the dialog using the native `<dialog>` HTML element: - Centered on screen with a backdrop blur overlay - Smooth entrance animation: fade-in combined with subtle scale-up (0.95 → 1.0) 2. Structure the dialog content as follows: - Top: warning triangle icon (SVG) in amber/yellow - Title: bold, clear heading describing the action (e.g., "Delete this project?") - Description: secondary text explaining consequences - Action context: display the name/identifier of the item being affected 3. Add two action buttons at the bottom: - Cancel button (secondary/outline style) — closes the dialog with no action - Confirm button (danger red, filled) — executes the destructive action - Confirm button should be visually dominant but NOT auto-focused (prevent accidental confirmation) 4. Implement keyboard and focus management: - Focus trap: Tab key cycles only within the dialog - Escape key closes the dialog - Set `inert` attribute on background content when dialog is open 5. Add exit animation: fade-out with scale-down on close # Constraints - Use the native `<dialog>` element — do not build a custom modal from `<div>` - No external dependencies — vanilla HTML, CSS, and JavaScript only - Must pass WCAG 2.1 AA accessibility requirements - Auto-focus the Cancel button on open (safe default) - Do not allow background scroll when dialog is open # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include a demo trigger button to open the dialog - Clean, commented code with clear separation of structure, style, 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 a Senior Frontend Developer specializing in accessible UI, developer-focused tooling, and information-dense navigation design. # Objective Build a compact top navigation bar for a developer-focused dashboard tool — featuring monospace breadcrumbs, a search input with keyboard shortcut hint, and a user avatar dropdown — inspired by Vercel/Linear design language. # Instructions 1. Create a fixed top navigation bar: - Full width, exactly 48px height — no wasted space - Dark background with bottom border: `1px solid rgba(255, 255, 255, 0.08)` - Three sections: left (breadcrumbs), center (search), right (user) 2. Build the breadcrumb navigation (left section): - Implement as an unstyled `<ol>` with `display: inline-flex` - Monospace font for all breadcrumb text - Separator: subtle forward slashes (`/`) in muted color between items - Active (last) breadcrumb in full-brightness text; previous items muted - Example: `{{TOOL_NAME}} / Projects / Settings` 3. Add the search input (center section): - Compact input with search icon and `⌘K` keyboard shortcut badge - Muted placeholder text: "Search..." - Input styled with subtle background and border on focus - Shortcut badge as a `<kbd>` element inside the input area 4. Build the user section (right section): - Small avatar circle (32px) with user image or initials - Dropdown trigger: chevron icon beside the avatar - On click: dropdown menu with user options (Profile, Settings, Logout) 5. Use `{{FRAMEWORK}}` and `{{CSS_TOOL}}` as specified by the user: - Template variables allow customization for any stack # Constraints - Height must be exactly 48px — do not exceed - Monospace font for breadcrumbs and technical labels - Breadcrumbs as semantic `<ol>` with `inline-flex` — not concatenated strings - Must be keyboard-accessible: Tab through interactive elements - Dark mode only, Vercel/Linear aesthetic - Responsive: hide breadcrumb text on mobile, show only icons # Output Format - Single HTML file with embedded styles - Use `{{FRAMEWORK}}`, `{{CSS_TOOL}}`, and `{{TOOL_NAME}}` template variables for customization - Well-commented code with clear structural sections

# Role You are a Senior Frontend Developer and UI/UX Expert specializing in data-dense interfaces and enterprise dashboard components. # Objective Build a feature-rich data table component with sortable columns, pagination, row selection, and a dark-mode admin aesthetic suitable for dashboards and back-office tools. # Instructions 1. Create an HTML table with the following columns: - Checkbox (for row selection) - Name (sortable, text) - Email (sortable, text) - Role (filterable badge: Admin, Editor, Viewer) - Status (Active/Inactive with colored dot indicator) - Date Joined (sortable, formatted date) - Actions (edit/delete icon buttons) 2. Implement sorting functionality: - Click column header to sort ascending; click again for descending - Visual indicator: arrow icon showing current sort direction 3. Add pagination controls below the table: - Previous/Next buttons - Page number indicators (1, 2, 3...) - "Showing X–Y of Z results" text 4. Include a top toolbar with: - Search input to filter rows by name or email - Bulk action dropdown (appears when rows are selected) - "Select All" checkbox in header 5. Style in dark mode using Tailwind CSS: - Alternating row backgrounds with subtle contrast - Hover highlight on rows - Sticky header on scroll # Constraints - Use semantic `<table>`, `<thead>`, `<tbody>`, `<th>`, `<td>` elements - Add proper ARIA attributes: `aria-sort` on sortable headers, `role="checkbox"` on selection - Tailwind CSS only — no custom CSS unless required for table-specific behavior - Responsive: horizontal scroll wrapper on small screens with sticky first column - Use sample/mock data (8–12 rows) to demonstrate functionality # Output Format - Single HTML file using Tailwind CSS CDN - Embedded JavaScript for sort, search, and pagination logic - Well-commented code with clear sections for markup, styles, and scripts

# 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 deep expertise in cross-client email rendering and responsive email design. # Objective Build a production-ready transactional email template for order confirmations that renders consistently across all major email clients (Gmail, Outlook, Apple Mail, Yahoo). # Instructions 1. Create a table-based layout (600px max-width, centered): - Wrapper table with `width="100%"` and inner table with `max-width: 600px` - Use `align="center"` for centering — not CSS margin 2. Build the header section: - Logo placeholder image (centered, max-height: 40px) - Background color bar with brand accent 3. Build the body section: - Greeting line: "Hi {{customer_name}}, your order is confirmed!" - Order number and date in a highlighted box 4. Create the order summary table: - Columns: Item Name, Quantity, Price - Each row with subtle bottom border for separation - Subtotal row - Shipping row - Total row with bold, larger font 5. Add a CTA button: - "View Order" button with bulletproof button technique (VML fallback for Outlook) - Centered with padding 6. Build the footer: - Company address (CAN-SPAM compliance) - Social media icon links (placeholder images) - Unsubscribe link (required) - Muted text color for footer content # Constraints - Inline CSS only — no `<style>` blocks (Outlook strips them from non-`<head>` positions) - Table-based layout only — no CSS Grid, Flexbox, or `<div>` layouts - All images must include `alt` text and explicit `width`/`height` attributes - Use `role="presentation"` on layout tables for accessibility - Dark mode support: include `color-scheme: light dark` meta tag and test with inverted colors - Maximum image width: 600px; use web-safe fonts with fallbacks # Output Format - Single `.html` file with complete `<!DOCTYPE html>` structure - All CSS inlined on elements - Use placeholder values wrapped in `{{mustache}}` syntax for dynamic content - Include HTML comments marking each section for easy editing

# Role You are a Creative Technologist and Frontend Expert specializing in modern marketing layouts and visual storytelling through UI design. # Objective Build a 2x2 bento-style feature grid section that highlights four key product or service features with a visually engaging, asymmetric layout optimized for marketing landing pages. # Instructions 1. Create a bento grid container with a 2x2 layout: - Top-left: large feature card spanning emphasis (can be taller or wider) - Top-right: standard feature card - Bottom-left: standard feature card - Bottom-right: large feature card (mirror emphasis of top-left) 2. Each feature card must include: - An icon or illustration placeholder (SVG or emoji) - A bold feature title (short, action-oriented) - A brief description (1–2 sentences max) - Optional: subtle background pattern or gradient unique to each card 3. Add hover interactions: - Subtle lift effect with increased shadow - Slight border glow or color accent shift 4. Style with Tailwind CSS in dark mode: - Dark card backgrounds with low-opacity borders - Consistent padding, rounded corners, and spacing - Accent colors to differentiate each feature # Constraints - Use semantic HTML (`<section>`, `<article>`, `<h3>`, `<p>`) - Tailwind CSS only — no custom CSS unless needed for grid spans - Responsive: single column on mobile, 2x2 on tablet and desktop - Keep text concise — titles under 5 words, descriptions under 20 words - Add `aria-label` on the section for screen reader context # Output Format - Single HTML file using Tailwind CSS CDN - Clean, well-indented markup with comments for each grid cell - Use placeholder content that demonstrates a realistic SaaS feature set

# Role You are a Senior Frontend Engineer and Conversion Specialist with expertise in landing page design and visual hierarchy optimization. # Objective Build a feature showcase section that presents product or service features in a visually compelling 3-column grid with icon-driven cards, hover interactions, and responsive behavior. # Instructions 1. Create a section with a centered heading and subheading: - Section title: bold, large (e.g., "Why Choose Us" or "Features") - Subtitle: muted, descriptive one-liner beneath the title 2. Build a 3-column grid of feature cards: - Each card contains: - Icon container: 48x48px circle or rounded square with gradient background - SVG icon inside the container (use Lucide or Heroicons style) - Feature title: bold, concise (3–5 words) - Feature description: muted text, 1–2 sentences (under 20 words) 3. Add hover interactions on each card: - Subtle upward lift (`translateY(-4px)`) - Increased `box-shadow` for depth - Smooth transition (200ms ease) 4. Style with a dark-mode-first design: - Dark card backgrounds with subtle borders - Gradient icon containers using brand-compatible accent colors - Consistent spacing and alignment across all cards 5. Ensure responsive layout: - 1 column on mobile (<640px) - 2 columns on tablet (640px–1024px) - 3 columns on desktop (>1024px) # Constraints - Use semantic HTML (`<section>`, `<article>`, `<h3>`, `<p>`) - CSS Grid or Flexbox for layout — no JavaScript required - Use inline SVG icons or placeholder icon containers — do not rely on external icon CDNs - Keep all descriptions under 20 words for scannability - 6 feature cards total (2 rows of 3) for visual balance # Output Format - Single HTML file with embedded `<style>` block - Include 6 placeholder features with realistic SaaS content - Well-indented code with comments for each section

# 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 UI/UX Architect specializing in clean layout design and accessible web components. # Objective Build a minimal, elegant website footer with social media links, navigation links, and copyright information — styled for dark mode and suitable for portfolios, landing pages, or SaaS sites. # Instructions 1. Create a footer with three distinct sections arranged horizontally: - Left: brand name or logo placeholder with a short tagline - Center: navigation links (Home, About, Blog, Contact) as an inline list - Right: social media icon links (GitHub, Twitter/X, LinkedIn, Email) 2. Add a bottom bar spanning full width: - Copyright text: "© 2025 [Brand]. All rights reserved." - Optional: Privacy Policy and Terms of Service links 3. Social media links: - Use inline SVG icons or Unicode symbols as placeholders - Hover effect: color transition to brand accent color - Open in new tab with `target="_blank"` and `rel="noopener noreferrer"` 4. Style with Tailwind CSS in dark mode: - Muted text colors for secondary content - Subtle top border separating footer from page content - Consistent padding and spacing # Constraints - Use semantic `<footer>`, `<nav>`, and `<ul>` elements - Tailwind CSS only — no custom CSS - Add `aria-label` on the footer nav and social links sections - Responsive: stack sections vertically on mobile, horizontal on desktop - Keep the footer compact — no more than 120px height on desktop # Output Format - Single HTML snippet using Tailwind CSS classes - Well-structured, accessible markup with brief comments - Use placeholder content that is realistic and ready to customize

# Role You are a Senior Frontend Developer and CSS Specialist with deep expertise in modern visual effects, glassmorphism design patterns, and micro-interactions. # Objective Design a compact, glassmorphic settings card for a dashboard interface featuring toggle switches, system labels, and a polished translucent aesthetic. # Instructions 1. Create a settings card container with glassmorphic styling: - `backdrop-filter: blur(12px)` for the frosted glass effect - Semi-transparent background: `rgba(255, 255, 255, 0.05)` or similar - Border: `1px solid rgba(255, 255, 255, 0.1)` - Subtle radial gradient overlay for depth - Rounded corners (`border-radius: 16px`) and soft shadow 2. Add a card header: - Title: "Settings" in JetBrains Mono or monospace fallback - Optional subtitle or description in muted text 3. Include 3–4 settings rows, each containing: - A system label (e.g., "Dark Mode", "Notifications", "Auto-Save") - A toggle switch on the right side of each row - Subtle separator line between rows 4. Build custom toggle switches: - Pill-shaped track with circle thumb - Smooth sliding transition (200ms ease) - Active state: accent color track with white thumb - Inactive state: muted gray track 5. Position the card on a dark gradient background to showcase the glass effect # Constraints - Use raw CSS — no Tailwind or CSS frameworks (produces best results for glassmorphism) - Use `font-family: 'JetBrains Mono', monospace` for labels - Keep interactive elements to 3–4 max for clean spacing - Ensure the card works without JavaScript for toggle appearance (use CSS `:checked` on hidden checkboxes) - Card max-width: 360px, centered on the page # Output Format - Single HTML file with embedded `<style>` block - Pure CSS toggles using `<input type="checkbox">` + `<label>` technique - Include a dark gradient body background to demonstrate the glass effect - Clean, well-commented CSS with clear variable definitions

# Role You are a Senior Frontend Engineer and Conversion Specialist with expertise in high-impact landing page design and CSS animation. # Objective Design a bold, full-width hero section with an animated gradient background, attention-grabbing typography, and dual CTA buttons — optimized for conversions and visual impact. # Instructions 1. Create a full-viewport hero section (`min-height: 100vh`): - Animated gradient background using `@keyframes` with slow color shift - Use `background-size: 400% 400%` for smooth, seamless animation - Animation duration: 15–20 seconds, infinite loop 2. Add centered content with vertical alignment: - Large headline with gradient text effect (`background-clip: text`) - Keep headline under 8 words for maximum impact - Subtitle beneath in muted secondary color, max 2 lines - Optional: small badge or label above the headline (e.g., "New Release" or "v2.0") 3. Add two CTA buttons side by side: - Primary button: filled with accent color, bold text, hover brightness increase - Secondary button: outline/ghost style with border, hover fill transition - Both buttons with rounded corners and consistent padding 4. Responsive behavior: - Desktop: content centered with max-width constraint - Mobile: stack buttons vertically, reduce headline font size - Maintain comfortable padding on all screen sizes # Constraints - Dark mode first design — no light mode variant needed - Pure CSS animations — no JavaScript for the gradient effect - Use semantic HTML: `<section>`, `<h1>`, `<p>`, `<a>` or `<button>` - Headline must use `background-clip: text` with `-webkit-background-clip: text` for gradient text - Ensure text remains readable over the animated gradient at all animation frames - No external dependencies # Output Format - Single HTML file with embedded `<style>` block - Include realistic placeholder content (SaaS or product launch theme) - Well-commented CSS with named `@keyframes` animation - Responsive breakpoints at 640px and 1024px

# Role You are a Senior Media/Graphics Engineer specializing in responsive image layouts, performance optimization, and interactive media components. # Objective Create a Pinterest-style masonry image gallery with a CSS-only layout, hover overlays, and a full-featured lightbox — all responsive and optimized for performance. # Instructions 1. Build the masonry grid layout using CSS columns: - Use `columns: 4` with `break-inside: avoid` on image containers - Each image wrapped in a container with `border-radius` and subtle `box-shadow` - Consistent gap between images using `margin-bottom` 2. Add hover interactions on each image: - Slight zoom effect (`transform: scale(1.03)`) with smooth transition - Dark overlay fading in with the image title text - Title displayed at the bottom of the image over the overlay 3. Implement a lightbox on image click: - Full-screen dark overlay (`rgba(0, 0, 0, 0.9)`) - Centered full-size image with max dimensions respecting viewport - Close button (×) in the top-right corner - Previous/Next arrow buttons on left and right sides - Keyboard support: Escape to close, arrow keys to navigate 4. Responsive column breakpoints: - Desktop (>1024px): 4 columns - Tablet (640px–1024px): 2 columns - Mobile (<640px): 1 column 5. Performance optimizations: - Add `loading="lazy"` on all images - Use `alt` text on every image for accessibility # Constraints - CSS columns for masonry layout — no JavaScript layout libraries - Vanilla JavaScript only for lightbox interaction - No external dependencies or frameworks - Images must include meaningful `alt` attributes - Lightbox must trap focus and be keyboard-navigable - Use placeholder images from a realistic dimension set (varying heights) # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include 8–12 placeholder images with varying aspect ratios - Well-commented code with sections for layout, hover effects, and lightbox

# Role You are a Senior Frontend Developer and UI/UX Expert specializing in productivity tools, drag-and-drop interfaces, and task management layouts. # Objective Design a Kanban task board layout with three status columns, task cards showing assignee and priority information, and interactive features like adding tasks and scrollable overflow. # Instructions 1. Create a horizontal board layout with 3 columns: - "To Do" — tasks not yet started - "In Progress" — tasks currently being worked on - "Done" — completed tasks 2. Each column must include: - Column header with the status name and a task count badge (e.g., "To Do (5)") - "+ Add Task" button at the top of the column - Scrollable task card area with `overflow-y: auto` and a defined `max-height` 3. Each task card must display: - Task title (bold, truncated with ellipsis if too long) - Assignee avatar (small circle with initials or placeholder image) - Priority label as a colored badge: - High: red background - Medium: yellow/amber background - Low: green background - Optional: due date in muted text 4. Add visual affordances for interactivity: - Subtle hover shadow on cards to suggest draggability - Cursor: `grab` on hover, `grabbing` on active - Smooth transition on hover effects 5. Style in dark mode: - Dark column backgrounds, slightly lighter card backgrounds - Subtle column borders for separation - Consistent spacing and padding throughout # Constraints - Use CSS Flexbox for the horizontal column layout - Use `overflow-y: auto` with `max-height: calc(100vh - 200px)` on card containers - Semantic HTML with proper heading hierarchy - No drag-and-drop JavaScript required — this is a layout/UI prompt only - Include 3–4 sample task cards per column with varied priorities - Responsive: horizontal scroll on the board container for mobile # Output Format - Single HTML file with embedded `<style>` block - Include realistic sample task data (project management theme) - Well-commented code with clear section markers - Use CSS custom properties for colors to enable easy theming

# Role You are a Senior Software Engineer and Performance Expert specializing in developer tooling interfaces and keyboard-driven UX patterns. # Objective Build a keyboard shortcuts help panel that displays available shortcuts in a clean, grouped modal — triggered by a keypress and styled with distinctive keyboard key visuals. # Instructions 1. Implement the trigger mechanism: - Listen for the `?` key press (Shift + /) to open the panel - Toggle behavior: pressing `?` again closes the panel 2. Build the modal panel: - Centered floating panel with dark background and subtle border - Backdrop overlay with slight opacity (click to close) - Smooth fade-in and scale-up entrance animation 3. Organize shortcuts into grouped sections: - **Navigation**: Home (`H`), Search (`/`), Next (`J`), Previous (`K`) - **Actions**: New (`N`), Save (`⌘ S`), Delete (`⌘ ⌫`), Copy (`⌘ C`) - **Editor**: Bold (`⌘ B`), Italic (`⌘ I`), Code (`⌘ E`), Link (`⌘ K`) - Each section with a subtle heading and divider 4. Style each shortcut row: - Left side: styled `<kbd>` elements with raised 3D border effect - Right side: brief description (under 5 words) - Use monospace font for all key labels 5. Close behavior: - Escape key closes the panel - Clicking outside the panel closes it - Transition out with fade effect # Constraints - Vanilla HTML, CSS, and JavaScript only — no dependencies - Style `<kbd>` elements with a raised 3D effect: `border-bottom: 2px solid`, `box-shadow`, and `border-radius: 4px` - Use monospace font (`font-family: monospace`) for key labels - Keep descriptions under 5 words for scannability - Panel should not exceed 500px width - Must be keyboard-accessible: focus management within the panel # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include at least 12 shortcut entries across 3 groups - Clean, well-indented code with comments for each section

# Role You are a Senior Security Architect and Full-Stack Engineer specializing in authentication interfaces, secure form design, and polished user experience. # Objective Build an elegant, accessible login modal with email/password authentication, social login options, and a polished dark-mode design suitable for SaaS applications. # Instructions 1. Create a centered modal overlay: - Backdrop with blur effect and dark overlay - Modal card with rounded corners, subtle border, and shadow - Smooth entrance animation (fade + scale) 2. Build the login form: - Email input with icon prefix and validation - Password input with icon prefix and show/hide toggle - "Remember me" checkbox - "Forgot password?" link aligned right - Submit button: full-width, accent color, hover effect 3. Add social authentication options: - Divider with "or continue with" text - Social login buttons: Google, GitHub, Apple (icon + label) - Styled as outline buttons with hover fill effect 4. Include a sign-up prompt: - "Don't have an account? Sign up" text below the form - "Sign up" as an accent-colored link 5. Implement interaction details: - Close button (×) in top-right corner - Close on Escape key or backdrop click - Focus trap within the modal - Auto-focus on email input when modal opens # Constraints - Use Tailwind CSS for all styling — no custom CSS - Semantic HTML with proper `<form>`, `<label>`, and ARIA attributes - Do not include actual authentication logic — UI only - Must be fully keyboard-navigable (Tab, Escape, Enter) - Modal max-width: 420px, centered on all screen sizes - Dark mode only # Output Format - Single HTML file using Tailwind CSS CDN - Include a trigger button to open the modal for demonstration - Well-structured, accessible markup with inline comments - Use placeholder content ready for real integration

# Role You are a Senior Frontend Developer specializing in accessible UI components, navigation patterns, and complex interactive menus. # Objective Build a full-width mega menu navigation system with categorized link columns, a featured content section, and smooth open/close transitions — fully accessible and keyboard-navigable. # Instructions 1. Create the top-level navigation bar: - Horizontal bar with 4–5 top-level menu items - Fixed or sticky positioning at the top of the page - Dark background with consistent height (56–64px) 2. Build the mega menu dropdown panel: - Triggers on hover over a top-level item - Full-width panel that slides down with smooth height transition - Divided into 3–4 content columns 3. Structure each column: - Section title (bold, uppercase or semi-bold) - List of 4–6 navigation links beneath each title - Links with hover color transition 4. Add a featured section: - Rightmost column contains an image card or promotional block - Image with overlay text and a CTA link - Visually distinct from the link columns 5. Implement interaction behavior: - Hover to open with a 150ms delay before closing (prevents accidental close) - Use `pointer-events` management to prevent flicker when moving between nav item and dropdown - Click outside the menu to close - Escape key to close - Smooth height/opacity transition on open and close # Constraints - Semantic HTML: `<nav>`, `<ul>`, `<li>`, `<a>` elements - Full keyboard navigation: Tab through items, Enter to open, arrow keys within dropdown - Add ARIA attributes: `aria-expanded`, `aria-haspopup`, `role="menu"` - No external dependencies — vanilla HTML, CSS, and JavaScript - Must work without JavaScript for basic link navigation (progressive enhancement) - Dark mode design # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include realistic placeholder navigation content (SaaS product categories) - Well-commented code with clear separation of structure, style, and behavior

# Role You are a Senior Frontend Developer and Developer Tools Specialist with deep expertise in text editors, real-time rendering, and split-pane interfaces. # Objective Build a split-pane Markdown editor with a live preview panel, toolbar with formatting buttons, and a dark code-editor aesthetic — similar to StackEdit or Dillinger. # Instructions 1. Create the split-pane layout: - Two equal-width panels side by side (50/50 split) - Left panel: Markdown editor (textarea or contenteditable) - Right panel: rendered HTML preview - Divider bar between panels (optional: draggable to resize) 2. Build the editor panel (left): - Full-height `<textarea>` with monospace font (`JetBrains Mono`, `Fira Code`, or system monospace) - Line numbers gutter on the left side (CSS-generated or JS-managed) - Tab key inserts spaces (2 or 4), not focus change - Dark background matching VS Code's One Dark theme 3. Build the preview panel (right): - Rendered HTML from the Markdown input, updated in real-time (on `input` event) - Styled prose: proper heading sizes, code blocks with dark background, blockquotes with left border, styled links, lists, and tables - Scrollable independently from the editor 4. Add a toolbar above the editor: - Formatting buttons: Bold, Italic, Heading (H1/H2/H3 dropdown), Link, Code, Blockquote, Unordered List, Ordered List - Each button inserts the corresponding Markdown syntax around the selected text or at cursor - Separator dividers between button groups 5. Implement Markdown parsing: - Support: headings, bold, italic, links, images, code (inline + blocks), blockquotes, lists (ordered + unordered), horizontal rules, tables - Use regex-based parsing — no external library # Constraints - Vanilla JavaScript — no Markdown libraries (build a basic parser with regex) - The parser does not need to cover edge cases — focus on common Markdown syntax - Editor and preview must scroll independently - Toolbar buttons must work with text selection (wrap selected text in syntax) - Dark mode only — VS Code-inspired theme - Responsive: stack panels vertically on mobile (editor on top, preview below) - No external dependencies # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include sample Markdown content pre-filled in the editor - Well-commented code with sections: layout, editor, parser, toolbar actions, preview rendering

# 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 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

# Role You are a Senior Frontend Developer and Product UX Engineer specializing in notification systems, dropdown interfaces, and information prioritization. # Objective Build a notification center triggered by a bell icon, featuring a dropdown panel with grouped notifications, read/unread states, action buttons, and a notification badge counter — styled for a dark-mode dashboard. # Instructions 1. Create the bell icon trigger: - Bell icon (CSS-only or inline SVG) positioned in a top navigation bar - Unread count badge: small red circle with white number, positioned top-right of the bell - Badge pulses briefly when a new notification arrives (CSS animation) - Click toggles the dropdown open/closed 2. Build the dropdown panel: - Positioned below the bell icon, right-aligned - Width: 380px, max-height: 480px with scroll - Header row: "Notifications" title + "Mark all as read" text button - Smooth scale + fade entrance from top-right (transform-origin: top right) 3. Structure the notification list: - Group by time: "Today", "Yesterday", "Earlier" with section headers - Each notification item includes: - Avatar circle (user initials or colored placeholder) - Title text (bold for unread, normal weight for read) - Description (1–2 lines, truncated with ellipsis) - Relative timestamp (e.g., "5 min ago") - Unread indicator: small accent dot on the left edge - Notification types with distinct accent colors: - Mention: blue - Assignment: purple - Alert: red - Update: green 4. Add interaction features: - Click a notification to mark as read (dot disappears, font weight changes) - "Mark all as read" clears all unread indicators and resets the badge - Hover state: subtle background highlight - Empty state: illustration or text when no notifications exist 5. Footer: "View all notifications" link at the bottom # Constraints - Vanilla JavaScript — no frameworks - Close dropdown on outside click or Escape key - Badge count updates in real time when notifications are marked as read - Semantic HTML with `role="menu"` and `aria-expanded` on the trigger - Include at least 8 sample notifications across 3 time groups - Dark mode only - Responsive: dropdown goes full-width on mobile (bottom sheet style) # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include a minimal nav bar to house the bell icon - Well-commented code with sections: trigger, dropdown, notification items, interaction logic

# 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 Creative Technologist and Frontend Expert specializing in conversion-optimized SaaS pricing layouts and visual hierarchy design. # Objective Build a three-tier SaaS pricing table with a visually highlighted "Pro" plan, feature comparison lists, and CTA buttons — designed to guide users toward the recommended plan. # Instructions 1. Create a 3-column pricing layout: - **Free** tier (left): basic features, $0/month - **Pro** tier (center): most popular, highlighted with accent border/glow and "Most Popular" badge - **Enterprise** tier (right): premium features, custom pricing or highest price 2. Each pricing card must include: - Plan name (bold heading) - Price display: large number with currency symbol and "/month" suffix - Brief description (1 line) of the plan - Feature list with checkmark (✓) icons for included features - Dash (—) or muted text for features not included - CTA button at the bottom: "Get Started", "Upgrade", or "Contact Sales" 3. Highlight the Pro (recommended) plan: - Slightly larger or elevated card - Accent-colored border or glow effect - "Most Popular" badge at the top - CTA button with filled accent color (other plans use outline style) 4. Optional: add a monthly/annual toggle above the pricing cards: - Toggle switch or segmented control - Show discounted annual pricing when toggled 5. Style in dark mode with Tailwind CSS: - Dark card backgrounds with subtle borders - Consistent typography and spacing - Responsive: stack cards vertically on mobile # Constraints - Use semantic HTML with proper heading hierarchy - Tailwind CSS only — no custom CSS - Add `aria-label` on the pricing section and CTA buttons - Feature lists must align across all three cards for easy comparison - Include at least 6 features per plan - Responsive: single column on mobile, 3 columns on desktop # Output Format - Single HTML file using Tailwind CSS CDN - Include realistic SaaS pricing content (project management or developer tool theme) - Well-structured markup with comments marking each plan section

# 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 Frontend Developer and CSS Specialist with expertise in social UI components and card-based layouts. # Objective Build a polished user profile card featuring an avatar, user information, social stats, and a follow/connect button — styled for dark mode with a modern, social-media-inspired design. # Instructions 1. Create a card container with: - Dark background, rounded corners, and subtle border - Optional: cover image or gradient banner at the top (120px height) 2. Add the user profile section: - Circular avatar (80px) overlapping the banner/top edge - User display name (bold, large) - Username or handle in muted text (e.g., "@username") - Short bio/description (1–2 lines, muted) 3. Add a stats row with 3 metrics: - Posts count, Followers count, Following count - Each with a number (bold) and label (muted, small) - Separated by subtle vertical dividers 4. Add action buttons: - Primary "Follow" button (accent color, filled) - Secondary "Message" button (outline style) - Buttons side by side, full-width within card 5. Style with Tailwind CSS in dark mode: - Avatar with white ring border for contrast - Hover effects on buttons - Consistent padding and spacing # Constraints - Semantic HTML with proper heading hierarchy - Tailwind CSS only — no custom CSS - Add `aria-label` on action buttons - Card max-width: 350px, centered - Responsive: card should look good at any width down to 280px - Use placeholder data that feels realistic (not "John Doe") # Output Format - Single HTML file using Tailwind CSS CDN - Include realistic placeholder profile data - Well-structured markup with brief comments

# Role You are a Senior Architect and Elite Backend Engineer specializing in API design, developer documentation, and technical reference interfaces. # Objective Create a REST API documentation page layout with a sidebar navigation, endpoint detail views, method badges, code examples, and parameter tables — styled with a dark VS Code-inspired theme. # Instructions 1. Build a two-panel layout: - Left sidebar (240px width): scrollable endpoint list grouped by resource - Main content area: endpoint detail view 2. Structure the sidebar: - Group endpoints by resource (e.g., "Users", "Projects", "Tasks") - Each item shows HTTP method badge + endpoint path - Active item highlighted with accent background - Collapsible resource groups 3. Build the endpoint detail view: - Endpoint header: method badge + full path (e.g., `GET /api/v1/users/:id`) - Brief description of what the endpoint does - Method badges with distinct colors: - GET: green - POST: blue - PUT/PATCH: orange - DELETE: red 4. Add a parameters table: - Columns: Name, Type, Required (yes/no badge), Description - Alternating row backgrounds for readability - Monospace font for parameter names and types 5. Include code blocks for request/response examples: - Dark code theme matching VS Code (One Dark or similar) - Syntax-highlighted JSON - Tabbed interface: "Request" and "Response" tabs - Copy button on each code block 6. Style the entire page in a dark theme: - Dark sidebar, slightly lighter content area - Monospace font for all code and endpoint paths - Consistent spacing and typography # Constraints - Semantic HTML with proper heading hierarchy and ARIA landmarks - No external dependencies — vanilla HTML, CSS, and JavaScript - Method badges in monospace font for consistent alignment - Keep endpoint paths left-aligned for scanability - Sidebar should be sticky/scrollable independently from the main content - Include 3–4 sample endpoints across 2 resources # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include realistic API endpoint examples (user management or project API theme) - Well-commented code with clear section markers - Responsive: sidebar collapses to hamburger menu on mobile

# Role You are an Elite Creative Technologist and Animation Expert specializing in scroll-based interactions, performance-optimized animations, and the Intersection Observer API. # Objective Build a reusable scroll-reveal animation system that fades in and slides up elements as they enter the viewport, with staggered delays for grid children and GPU-accelerated performance. # Instructions 1. Define the CSS animation classes: - `.reveal`: initial hidden state (`opacity: 0`, `transform: translateY(30px)`) - `.revealed`: visible state (`opacity: 1`, `transform: translateY(0)`) - Transition: 600ms ease-out on both opacity and transform - Add `will-change: transform, opacity` for GPU acceleration 2. Implement the Intersection Observer in vanilla JavaScript: - Observe all elements with the `.reveal` class - When an element enters the viewport, add the `.revealed` class - Configuration options: - `threshold: 0.15` (triggers when 15% visible — early enough to feel responsive) - `rootMargin: '0px 0px -50px 0px'` (slight offset from bottom) 3. Add staggered animation for grid children: - Elements with `data-reveal-delay` attribute get incremental delays - Auto-calculate delays for children: each child gets `index * 100ms` delay - Apply via inline `transition-delay` style 4. Support multiple animation variants: - `data-reveal="up"`: slide up (default) - `data-reveal="left"`: slide in from left - `data-reveal="right"`: slide in from right - `data-reveal="fade"`: fade only, no slide 5. Unobserve elements after they are revealed (one-time animation) # Constraints - Vanilla JavaScript only — no libraries or frameworks - CSS classes only: `.reveal` and `.revealed` — no inline style manipulation except `transition-delay` - Must be performant: use `will-change` and avoid layout-triggering properties - Do not animate elements that are already in the viewport on page load (reveal immediately) - Keep the JavaScript under 50 lines for easy copy-paste reuse - Works with any HTML structure — not tied to specific markup # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include a demo page with multiple sections and a grid to showcase all animation variants - Well-commented code with clear configuration section at the top

# Role You are a Senior Frontend Developer specializing in accessible UI, responsive navigation, and dashboard layout patterns. # Objective Build a collapsible sidebar navigation with icon-based menu items, nested sections, and smooth expand/collapse transitions — suitable for dashboards and admin panels. # Instructions 1. Create a sidebar container: - Fixed to the left side of the viewport, full height - Two states: expanded (240px) and collapsed (64px, icons only) - Toggle button to switch between states (hamburger or chevron icon) - Smooth width transition (300ms ease) 2. Build the navigation menu: - 6–8 menu items, each with: - Icon (SVG or placeholder) on the left - Text label (visible only in expanded state, hidden in collapsed) - Active item highlighted with accent background and left border - Hover effect: subtle background highlight 3. Add nested/grouped sections: - Group items under section headers (e.g., "Main", "Settings") - Section headers visible in expanded state, hidden in collapsed - Optional: collapsible sub-menus with chevron indicators 4. Include a user section at the bottom: - Avatar (small circle) + user name + role - In collapsed state: show only avatar 5. Style with Tailwind CSS in dark mode: - Dark sidebar background, slightly different from main content area - Subtle border on the right edge - Consistent icon sizing and alignment # Constraints - Semantic HTML: `<nav>`, `<ul>`, `<li>`, `<a>` elements - Tailwind CSS only — no custom CSS - Add ARIA attributes: `aria-expanded`, `aria-label` on toggle button - Keyboard-navigable: Tab through menu items, Enter to select - Responsive: on mobile (<768px), sidebar becomes an overlay with backdrop - Transitions must respect `prefers-reduced-motion` media query # Output Format - Single HTML file using Tailwind CSS CDN - Include a dummy main content area to demonstrate the layout - Well-structured markup with comments for each section

# Role You are a Senior Frontend Developer specializing in accessible UI, search interfaces, and keyboard-driven interaction patterns. # Objective Build a command palette (⌘K) search component with recent searches, categorized results, keyboard navigation, and a polished dark-mode design — inspired by tools like VS Code, Linear, and Raycast. # Instructions 1. Create the command palette trigger: - Open with `⌘K` (Mac) or `Ctrl+K` (Windows/Linux) keyboard shortcut - Centered modal overlay with backdrop blur - Smooth entrance animation (fade + scale) 2. Build the search input: - Full-width input at the top of the palette - Search icon on the left, keyboard shortcut hint on the right - Auto-focus on open - Clear button (×) when input has text 3. Display search results: - **Recent searches** section shown when input is empty - **Categorized results** when typing: Pages, Actions, Settings (grouped with headers) - Each result row: icon + label + optional description + keyboard shortcut hint - Highlighted active/selected row 4. Implement keyboard navigation: - Arrow Up/Down to move between results - Enter to select the active result - Escape to close the palette - Tab to cycle through result categories 5. Close behavior: - Escape key - Click on backdrop - After selecting a result 6. Style with Tailwind CSS in dark mode: - Dark modal background, subtle border - Muted section headers, bright result text - Accent highlight on active row # Constraints - Use Tailwind CSS for all styling - Semantic HTML with `role="dialog"`, `role="listbox"`, `aria-activedescendant` - No external dependencies for search logic — filter from a static list - Palette max-width: 640px, max-height: 400px with scrollable results - Must be fully keyboard-navigable — mouse is optional - Include at least 10 sample searchable items across 3 categories # Output Format - Single HTML file using Tailwind CSS CDN - Embedded JavaScript for keyboard handling and filtering - Well-commented code with clear sections for markup, styles, and behavior

# 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

# Role You are a Senior Frontend Engineer and Conversion Specialist with expertise in social proof components, CSS scroll mechanics, and lightweight interactive UI. # Objective Create an auto-scrolling testimonial carousel using CSS scroll-snap for smooth, native-feeling slide transitions — with minimal JavaScript for auto-advance and pause-on-hover functionality. # Instructions 1. Build the carousel container: - Horizontal scroll container with `scroll-snap-type: x mandatory` - Hide scrollbar using `::-webkit-scrollbar` and `scrollbar-width: none` - Show exactly 1 testimonial at a time (full-width slides) 2. Create each testimonial slide: - Large quote text (in quotation marks or with a quote icon) - Author section below the quote: - Avatar (circular, 48px) - Author name (bold) - Role and company (muted text) - Each slide snaps with `scroll-snap-align: center` 3. Add navigation dots: - Horizontal row of dots below the carousel - Active dot: filled accent color, slightly larger - Inactive dots: muted outline or smaller - Clicking a dot scrolls to the corresponding slide 4. Implement auto-advance behavior: - Auto-scroll to the next slide every 5 seconds - Pause auto-advance on hover - Resume auto-advance when mouse leaves - Loop back to the first slide after the last 5. Style in dark mode: - Dark background for the carousel section - Quote text in light color, author details in muted tones - Subtle card or section background to frame each testimonial # Constraints - CSS-first approach: use `scroll-snap` for sliding — not JavaScript-based transforms - Minimal JavaScript: only for auto-advance timer and dot click handlers - No external dependencies or frameworks - Show exactly 1 testimonial at a time for maximum focus - Include 4–5 testimonial slides with realistic placeholder content - Accessible: `aria-label` on the carousel, `role="tablist"` on dots # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include 4–5 realistic testimonials (SaaS or tech product theme) - Well-commented code with clear sections for layout, animation, and interaction

# Role You are a Senior Frontend Developer and Motion Design Engineer specializing in scroll-triggered animations, number transitions, and high-impact landing page sections. # Objective Build a scroll-triggered animated stats counter section that counts up key metrics when scrolled into view, with smooth easing, suffix support, and a polished layout — designed for landing pages and marketing sites. # Instructions 1. Create the stats section layout: - Full-width section with dark background and subtle top/bottom borders - 4 stat items in a horizontal row, evenly spaced - Centered content with max-width constraint (1200px) - Generous vertical padding for visual breathing room 2. Design each stat item: - Large number display (3rem+) in bold, accent-colored text - Support for suffixes and prefixes: "10K+", "$2.5M", "99.9%", "150+" - Descriptive label beneath the number in muted, smaller text (e.g., "Active Users", "Revenue", "Uptime", "Countries") - Optional: small icon above the number related to the metric 3. Implement the counting animation: - Numbers start at 0 and count up to the target value - Trigger: animation starts when the section enters the viewport (Intersection Observer) - Easing: use ease-out curve so counting decelerates toward the end - Duration: 2 seconds per counter - Stagger: each counter starts 150ms after the previous one - Animate only once — do not re-trigger on subsequent scrolls 4. Handle number formatting: - Integers: no decimal places (e.g., "10,000") - Decimals: respect the target's decimal places (e.g., "99.9") - Thousands separator: add commas for readability - Preserve prefix/suffix throughout the animation 5. Add subtle background polish: - Faint grid pattern or dot matrix behind the stats - Subtle gradient overlay for depth - Optional: counter numbers have a faint glow on completion # Constraints - Use `IntersectionObserver` to trigger animations — no scroll event listeners - `requestAnimationFrame` for smooth counting — no `setInterval` - Ease-out timing using a cubic bezier or manual easing function - `font-variant-numeric: tabular-nums` on all numbers to prevent layout shift during counting - Semantic HTML with `<section>` and descriptive `aria-label` - Dark mode only - Responsive: 2×2 grid on tablet, single column on mobile # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include 4 realistic stat examples with varied formats (integer, decimal, with prefix/suffix) - Well-commented code with sections: layout, Intersection Observer, counting logic, easing function

# Role You are a Senior Frontend Developer and Animation Expert specializing in premium SaaS landing pages, motion design, and high-fidelity UI implementation. # Objective Create a modern SaaS landing page hero section inspired by Stripe's design language — featuring smooth gradient backgrounds, animated wave elements, clean typography, and a visually dense layered dark-mode aesthetic. # Instructions 1. Build a full-viewport hero section: - Dark background with layered gradient effects (multiple overlapping gradients) - Animated wave or mesh elements using CSS or SVG (subtle, continuous motion) - Depth through overlapping translucent layers 2. Add the content area (centered, max-width constrained): - Overline text: small label or badge (e.g., "Now Available" or "v2.0") - Headline: large, bold, clean typography with a modern font stack - Subtitle: 1–2 lines in muted color beneath the headline - Dual CTA buttons: primary (filled gradient) and secondary (ghost/outline) 3. Implement animated elements: - Smooth gradient background shift (slow, infinite animation) - Floating wave or blob shapes in the background (CSS animation or SVG) - Optional: subtle particle or dot grid effect 4. Typography requirements: - Modern font stack: `Inter`, `-apple-system`, `BlinkMacSystemFont`, `sans-serif` - Large headline: `clamp(2.5rem, 5vw, 4.5rem)` for responsive sizing - Proper font weights: 700–800 for headline, 400 for body 5. Ensure visual density: - Multiple overlapping layers create depth (not flat or sparse) - Accent glow effects behind CTAs or headline - Subtle noise texture overlay (optional) for richness # Constraints - Tailwind CSS for layout and typography; custom CSS for animations - Dark mode only — no light mode variant - Animations must be smooth and GPU-accelerated (`will-change`, `transform`) - Performance: no heavy libraries — CSS animations and SVG only - Responsive: works on all screen sizes with fluid typography - Keep animations subtle — they should enhance, not distract # Output Format - Single HTML file with Tailwind CSS CDN and embedded `<style>` for animations - Include realistic SaaS placeholder content (fintech or developer platform theme) - Well-commented code separating layout, animations, and content sections

# Role You are a Senior Software Engineer and Performance Expert specializing in theme systems, CSS transitions, and client-side state management. # Objective Create a theme switcher component with an animated sun/moon toggle, system preference detection, localStorage persistence, and smooth color transitions across the entire page. # Instructions 1. Build the toggle button: - Circular button containing a sun icon (light mode) and moon icon (dark mode) - Smooth morph transition between icons: combine rotate (360°) + scale (0 → 1) - Transition duration: 300ms ease - Button styled with subtle border, hover effect 2. Implement theme detection and initialization: - On page load, check localStorage for saved preference - If no saved preference, detect system preference using `window.matchMedia('(prefers-color-scheme: dark)')` - Apply the resolved theme immediately (before paint to avoid flash) 3. Handle theme switching: - Toggle adds/removes `.dark` class on `<html>` element - Save the user's choice to `localStorage` as one of: `'light'`, `'dark'`, or `'system'` - Apply `transition: background-color 300ms, color 300ms` to body and key elements 4. Support three states (optional enhancement): - Light → Dark → System → Light cycle - System mode listens to `matchMedia` changes and updates in real-time 5. Add the toggle to a sample page: - Position in the top-right corner (fixed or absolute) - Include sample content sections to demonstrate theme changes # Constraints - Vanilla HTML, CSS, and JavaScript — no frameworks - Apply theme class to `<html>` before DOM renders to prevent flash of wrong theme (script in `<head>`) - Use `matchMedia` for system preference detection — not user-agent parsing - Store preference as `'light'`, `'dark'`, or `'system'` string in localStorage - Icon transition must be smooth — no abrupt swaps - Respect `prefers-reduced-motion`: skip animation if reduced motion is preferred # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include a sample page with header, text, and cards to demonstrate theme switching - Well-commented code with the theme initialization script in `<head>` and interactive logic before `</body>`

# 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 an Elite Creative Technologist and Animation Expert specializing in text effects, CSS animation, and performant JavaScript-driven visual interactions. # Objective Create a typewriter text effect component that types out strings character by character, supports multiple strings with delete-and-retype cycling, and features a blinking CSS cursor — configurable and performant. # Instructions 1. Build the typewriter display element: - Container element with monospace or display font - Text content area that grows as characters are typed - Blinking cursor at the end using pure CSS (`@keyframes blink`) - Cursor as a `::after` pseudo-element or `<span>` (thin vertical bar) 2. Implement the typing logic in JavaScript: - Type out a string character by character - Default typing speed: 80ms per character (configurable) - Delete speed: 40ms per character (faster than typing for natural feel) - After completing a string, pause for 1.5 seconds - Then delete the string character by character - Move to the next string in the array and repeat - Loop infinitely through the string array 3. Support configuration: - Array of strings to cycle through - Typing speed (ms per character) - Delete speed (ms per character) - Pause duration between strings 4. Create the blinking cursor: - Pure CSS animation: `opacity: 1 → 0` every 600ms - Cursor visible during pauses, steady (not blinking) during typing 5. Use `requestAnimationFrame` for timing: - More performant than `setInterval` or `setTimeout` - Track elapsed time for frame-accurate character reveals # Constraints - Vanilla JavaScript only — no libraries or frameworks - Pure CSS for the cursor animation — no JavaScript-driven cursor - Use `requestAnimationFrame` instead of `setInterval` for smoother performance - Must work with any font and container width - Keep the JavaScript under 60 lines for easy reuse - Include `aria-label` with the full text on the container for accessibility # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include a demo with 3–4 sample strings (developer/SaaS theme) - Well-commented code with a clear configuration section at the top

# Role You are a Senior Frontend Developer and Visual Design Engineer specializing in data-rich widget design, glassmorphism, and compact information display. # Objective Build a glassmorphic weather widget card displaying current conditions, temperature, a 5-day forecast strip, and atmospheric details — styled with depth, translucency, and polished typography. # Instructions 1. Create the main weather card: - Glassmorphism effect: semi-transparent background with `backdrop-filter: blur(20px)` - Rounded corners (20px), subtle white border at low opacity - Background: gradient overlay simulating sky conditions (dark blue for night theme) - Max-width: 400px, centered on the page 2. Build the current conditions section (top half): - Location name and date (e.g., "San Francisco · Tue, Mar 28") - Large temperature display: `72°` in bold, oversized font (4rem+) - Weather condition icon (CSS-only: sun, cloud, rain using shapes and gradients) - Condition text: "Partly Cloudy" - High/Low temperatures: "H: 76° L: 58°" 3. Add the 5-day forecast strip (middle): - Horizontal row of 5 day cards - Each card shows: day abbreviation (Mon, Tue...), small weather icon, high/low temps - Active day (today) highlighted with accent background - Scrollable on overflow for narrow screens 4. Build the atmospheric details grid (bottom): - 2×2 grid of detail cards: - Wind: speed + direction (e.g., "12 mph NW") - Humidity: percentage with a small bar indicator - UV Index: number with severity label (Low/Moderate/High) - Visibility: distance in miles - Each detail has a label, value, and subtle icon 5. Animations: - Gentle floating animation on the weather condition icon - Numbers fade in on load (staggered, 100ms delay each) # Constraints - CSS-only weather icons — no icon fonts, SVGs, or images - Glassmorphism: must use `backdrop-filter: blur()` with fallback for unsupported browsers - Use `font-variant-numeric: tabular-nums` for all temperature values - Semantic HTML with proper use of `<article>`, `<section>`, `<dl>` for details - Dark theme only — night sky aesthetic - Responsive: card stretches to full-width on mobile # Output Format - Single HTML file with embedded `<style>` block - Include realistic weather data for a sample location - Well-commented CSS with sections: glassmorphism, weather icons, forecast strip, details grid - Use CSS custom properties for theming

# Role You are a Senior Media/Graphics Engineer specializing in custom media players, HTML5 Video API, and interactive media controls. # Objective Design a custom HTML5 video player with styled controls including play/pause, seek bar, volume, time display, and fullscreen — with auto-hiding controls and a polished dark-mode design. # Instructions 1. Build the video container: - Rounded container with subtle border and overflow hidden - Video element filling the container width - Hide native browser controls (override with custom UI) 2. Create the custom control bar at the bottom: - **Play/Pause button**: icon toggles between play (▶) and pause (⏸) SVG icons - **Progress bar**: clickable and draggable seek bar showing playback position - Filled portion in accent color, buffered portion in muted color - Hover preview: show time tooltip on hover position - **Time display**: current time / total duration in `MM:SS` format - **Volume control**: volume icon + horizontal slider - Click icon to toggle mute (icon changes to muted state) - Slider adjusts volume level (0–100%) - **Fullscreen button**: expand icon to toggle fullscreen mode 3. Implement auto-hide behavior: - Controls visible on hover or during interaction - Auto-hide after 3 seconds of mouse inactivity - Show controls on any mouse movement or tap - Cursor also hides with controls 4. Add interaction polish: - Space bar toggles play/pause - Left/Right arrows seek forward/backward 10 seconds - Up/Down arrows adjust volume - Click on video area toggles play/pause - Double-click toggles fullscreen # Constraints - Use the HTML5 Video API for all control interactions - Hide native controls with CSS: `::-webkit-media-controls { display: none }` - Vanilla HTML, CSS, and JavaScript only — no libraries - All icons as inline SVG for consistent styling - Dark mode design: dark control bar with semi-transparent background - Accessible: keyboard controls, `aria-label` on all buttons, `role="slider"` on progress bar # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Use a placeholder video source (or public domain sample URL) - Well-commented code with clear sections for markup, styles, controls logic