The Prompt Vault.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, animated Accordion component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML (details/summary or button/div with proper aria-expanded and aria-controls attributes). - Design: Clean, minimalist borders with a subtle background color change on hover. - Interaction: Smooth height transition when opening/closing (use CSS grid or max-height tricks). - Icon: A chevron on the right side that rotates 180 degrees when expanded. - Accessibility: Must be fully keyboard navigable (Tab to focus, Space/Enter to toggle) and screen reader friendly. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Alert component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML (role="alert" or role="status" and aria-live="polite"). - Design: Clean, modern aesthetic with distinct variants (success, error, warning, info) using appropriate background colors, text colors, and left border accents. - Interaction: Include an accessible close button (with aria-label="Close alert") that seamlessly dismisses the alert with a fade-out or slide-up animation. - Icon: Provide distinct SVGs or icons for each variant (e.g. checkmark for success, exclamation mark for error). - Accessibility: Must be fully screen reader friendly. The close button must be keyboard focusable (Tab to focus, Space/Enter to activate). - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Avatar component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML (img for image avatars, div/span with aria-label for initials/icons). - Design: Clean, modern aesthetic with support for different sizes (small, medium, large) and shapes (circle, rounded square). Include fallback styles (e.g., initials or default icon) when an image fails to load. - Interaction: Include an optional notification badge or status indicator (e.g., online, offline) positioned at the bottom right or top right corner. - Accessibility: Must be fully screen reader friendly. Include appropriate alt text for images. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Badge component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A small label, generally appearing inside or in close proximity to another larger component, representing a status, property, or metadata. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Bento Grid component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A layout of modular, unequal-sized cards arranged in a grid. Perfect for showcasing features, services, or dashboards in a premium way. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Breadcrumbs component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A horizontal list of links showing the location of the current page in the site's navigational hierarchy, allowing quick upward movement. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Button component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: Buttons trigger an action such as submitting a form or opening a dialog. They should look clickable and visually indicate their priority. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Button Group component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A wrapper for multiple, related buttons. Often used for toggling views or providing related actions in a compact space. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Card component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A contained block of content representing a single entity. Can include images, text, and actions. Used heavily in grids. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Carousel component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A means of displaying multiple slides of content, one or more at a time. Navigation is controlled via swiping or arrow buttons. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Checkbox component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: An input for choosing from predefined options. Used alone for a binary choice, or in a group to select multiple values. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Dialog / Modal component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A window that overlays the main page, dimming the background and requiring interaction before the user can return to the main context. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Divider component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A thin horizontal or vertical line used to group content and visually separate different sections of a layout. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Dropdown component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A contextual menu that appears upon interaction (click or hover), displaying a list of selectable actions or links. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a modern, highly responsive Hero section in HTML and CSS. Requirements: - Use semantic HTML (e.g. <header> or <section>). - Layout: A balanced split-screen or centered layout. The left side (or center) should feature a prominent <h1> headline, a readable <p> subheadline, and a primary Call-To-Action (CTA) button next to a secondary outline button. - Visuals: Include a placeholder on the right side for a high-quality product image or illustration. - Design: Clean aesthetic, generous padding (e.g., 80px+ vertical), modern typography (sans-serif), and subtle hover effects on the buttons. - Responsive: The layout must stack gracefully on mobile devices (image below or hidden, text centered). - Provide a single HTML file containing all necessary styles.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Input component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A basic form control allowing the user to type in a single line of text data (like a name, email, or password). - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Navbar component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: The consistent top bar of a website containing the brand logo, primary navigational links, and sometimes user actions like search or login. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Pagination component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: Controls that allow the user to navigate through a large set of content broken into separate pages. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Popover component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A transient view that appears above other content, usually pointing to the element that triggered it. Great for rich tooltips or mini-forms. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Progress component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A visual indicator showing the completion status of a task or process, usually displayed as a horizontal filled track. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Radio component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: An input for selecting exactly one option from a predefined list of mutually exclusive options. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Select component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A form control that allows the user to choose one value from a collapsed list of options that expands on click. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Skeleton component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A placeholder representation of content before the actual data has loaded. Reduces perceived loading time by mapping out the layout. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Slider component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: An input control that lets the user select a value (or range of values) from a continuous scale by dragging a thumb along a track. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Spinner component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: An animated, looping graphic (like a spinning circle) indicating that a background process is running. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Switch component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A control that allows the user to immediately turn a specific setting on or off, functioning like a physical light switch. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Table component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A structured arrangement of data into rows and columns, used to display and compare datasets. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Tabs component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A navigational pattern allowing the user to switch between different views within the same context, saving vertical space. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Toast component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A brief, non-blocking popup message providing feedback about an operation. Usually disappears automatically after a few seconds. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Tooltip component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A small, contextual text box that appears when hovering or focusing on an element, providing supplementary information. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Date input component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A means of inputting a date – often separated into multiple individual fields for day/month/year. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Datepicker component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A visual way to choose a date using a calendar view. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Drawer component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A panel which slides out from the edge of the screen. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Empty state component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: An indication to the user that there is no data to display in the current view; often includes an alternative action. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Fieldset component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A wrapper for related form fields to group them visually and semantically. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive File upload component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: An input which allows users to upload a file from their device. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Footer component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: Commonly appearing at the bottom of a page, used to display copyright, legal information, or secondary links. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Form component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A grouping of input controls that allow a user to submit information to a server. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Heading component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A title or caption used to introduce a new section. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Icon component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A graphic symbol designed to visually indicate the purpose of an interface element. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Image component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: An element for embedding images. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Label component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A text label for form inputs. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Link component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A reference to a resource. This can be external or internal to the current document. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive List component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: Used for grouping a collection of related items sequentially. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Quote component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: Used to display a quotation from a person or another source. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Rating component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: Lets users see and/or set a star rating for a product or other item. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Search input component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: Allows users to find content by entering a search term. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Segmented control component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A hybrid between a button group, radio buttons, and tabs; used to switch between views. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Skip link component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: Invisible links that become visible on keyboard focus for skipping to another section. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Stack component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A wrapper component for adding a consistent margin between components. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Stepper component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A control for editing a numeric value with buttons for decrementing / incrementing. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Textarea component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A form control for editing multi-line text. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Tree view component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: A component for displaying nested hierarchical information, such as a directory structure. - Provide a single HTML file containing all necessary styles and scripts.

Act as a senior frontend engineer and UI specialist. Build a highly accessible, responsive Video component in HTML, CSS, and minimal vanilla JavaScript. Requirements: - Use semantic HTML. - Design: Clean, minimalist UI matching modern web aesthetics. Ensure spacing, typography, and contrast are refined. - Interaction: Smooth hover and active states (if applicable). - Accessibility: Must be fully keyboard navigable and screen reader friendly. Follow WAI-ARIA guidelines. - Context: Video players are used for displaying video content, often including playback controls. - Provide a single HTML file containing all necessary styles and scripts.

Act as an expert UI designer and senior frontend developer. Build a complete, responsive landing page in HTML and CSS (no frameworks). Design requirements: - Deep dark background (#0d0d0d), off-white text (#f0ede8) - A Hero section: large serif headline, short subtext, two CTA buttons (primary filled, secondary outlined) - A Features section using a Bento Grid layout - 6 cards in a 3×2 grid with rounded corners, subtle 1px white-at-10%-opacity borders - Apply a glassmorphism effect to the bento cards: background rgba(255,255,255,0.04), backdrop-filter: blur(12px) - A Testimonials section: 3 cards in a row, each with a quote, avatar initials, name, and role - All hover states should have smooth 250ms transitions - Footer with logo, nav links, and social icons Output: A single complete HTML file with all CSS in a <style> block.

Act as a UI animation specialist. Build a responsive navigation bar in HTML, CSS, and minimal vanilla JS. Requirements: - Desktop: Logo on left, 5 nav links centered, CTA button on right - Hover effect: underline that animates from center outward (transform: scaleX) - On scroll down (past 60px): the nav should shrink in height, gain a white background with 90% opacity and a subtle box-shadow, and transition smoothly - Mobile (< 768px): links collapse behind a hamburger button (3 bars → X animation), full-screen overlay menu with staggered link fade-ins - Active link should have a distinct color (use CSS custom properties so it's easy to change) Output: A single HTML file with embedded CSS and JS.

Create a responsive Features section component in HTML and CSS. Requirements: - Section title (h2) and a short subtext above the grid - 6 feature cards in a 3-column grid (collapses to 2 on tablet, 1 on mobile) - Each card has: an icon (use an emoji or simple SVG), a bold title, and 2-line description - Card style: white background, 1px light border, 12px border-radius, 32px padding - On hover: card slides up 4px, border color darkens, a 3px green top border appears - Use CSS custom properties for all colors so it's easily themeable Output: A standalone HTML + CSS file.

Act as a product designer and UI developer. Build a modern web app dashboard layout in HTML and CSS. Layout requirements: - A fixed left sidebar (240px wide) with logo, nav items with icons and labels, and a user profile at the bottom - A top header bar with a search input (center) and a notification + avatar on the right - Main content area: 4 KPI metric cards in a row (icon, number, label, % change badge), then a large chart placeholder below - Sidebar collapses to icon-only on mobile with a hamburger toggle - Color palette: white background, #f7f7f5 for the content area, dark navy (#1a1f2e) for the sidebar - Clean, minimal shadows (box-shadow: 0 1px 3px rgba(0,0,0,0.06)) - no heavy drop shadows Output: A single HTML file with all CSS embedded.

Create a modern authentication (sign-in) page in HTML and CSS. Requirements: - Full-height page split: left half is a decorative panel with a gradient background and a brand quote, right half is the form - Form contains: Email input, Password input (with show/hide toggle icon), "Forgot password?" link, Submit button, divider, and "Sign in with Google" button - Form inputs should have a clear focus state (colored border + subtle glow) - Add a loading state for the submit button (spinner icon replaces text) triggered on click - Error state: red border on invalid field + inline error message below - Mobile: stack to a single column, hide the decorative panel Output: A single HTML file with CSS and minimal JS.

Build a mobile-first onboarding flow UI with 3 steps, in HTML and CSS. Requirements: - Full-screen layout (100vw × 100dvh), designed as a phone screen frame (390px wide centered on desktop) - 3 screens: each has an illustration placeholder (colored div with icon/emoji), a bold h2 headline, a short description, and "Next" button - Navigation: back arrow, skip link, and a dot indicator showing current step - Transitions between screens: slide-in from right (translateX animation, 300ms ease) - Bottom "Next" button: large, full-width, filled color - Final screen button changes to "Get Started" and triggers a simple success state Output: A single HTML + CSS + JS file.

Create a scroll-triggered text reveal animation using vanilla JS and CSS. Requirements: - Each element with class "reveal" should start invisible (opacity: 0, translateY: 20px) - Use an IntersectionObserver to trigger the animation when the element enters the viewport (threshold: 0.15) - On trigger: transition to opacity: 1, translateY: 0 over 600ms with cubic-bezier(0.23, 1, 0.32, 1) - For elements with "reveal-stagger" class, add a delay of 100ms × child index - Respect prefers-reduced-motion: skip all animations if set Provide a working demo with 5 sections of dummy text to show the effect clearly.

Implement a magnetic hover effect for a button using vanilla JS and CSS. Requirements: - On mouse-enter: button should smoothly follow the cursor, shifting up to 12px in X and 8px in Y from its resting position - Use transform: translate(x, y) with a CSS transition of 100ms ease for smooth tracking - On mouse-leave: button returns to its original position with a 300ms ease-out spring-back - The button text should counter-translate at 40% the movement of the button (parallax inner text) - Should work on any button with class "btn-magnetic" - Fallback: on touch devices, no magnetic effect (normal button behaviour) Provide a demo with 3 different sized buttons.