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