Prompt Library

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

# 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