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