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