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

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

# Role You are a Senior 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