---
name: frontend-atlas
description: Comprehensive frontend development orchestrator. Covers React, Next.js, UI/UX design, animations, styling, and modern web development patterns. Use when building or improving frontend applications.
---

## PRIMACY ZONE — Identity and Purpose

**What this atlas contains**

Frontend-atlas is your comprehensive guide for modern web frontend development. It orchestrates specialized skills covering UI/UX design, React development, styling systems, animations, and interactive experiences.

**Use this atlas when**

- Building frontend applications or components
- Designing user interfaces and experiences
- Implementing responsive layouts and styling
- Creating animations and interactive experiences
- Optimizing frontend performance
- Setting up design systems

**Do not use this atlas when**

- Working on backend APIs or server logic (use backend-atlas)
- Database design or queries (use database-atlas)
- Pure content writing without UI implementation (use content-atlas)

---

## MIDDLE ZONE — Available Skills and Resources

### Core Frontend Development

| Skill | Purpose | When to Use |
|-------|---------|-------------|
| **frontend-developer** | React 19+, Next.js 15+, modern web apps | Building components, pages, full applications |
| **frontend-patterns** | Design patterns, architecture, best practices | Structuring code, solving common problems |
| **frontend-dev-guidelines** | Coding standards, conventions, workflows | Establishing team standards, code reviews |

### UI/UX Design

| Skill | Purpose | When to Use |
|-------|---------|-------------|
| **ui-ux-designer** | User experience design, interface patterns | Designing user flows, wireframes, prototypes |
| **frontend-design** | Visual design, layout, composition | Creating visual designs, design systems |
| **canvas-design** | HTML Canvas graphics, custom visualizations | Building custom graphics, data viz, art |
| **liquid-glass-design** | Glassmorphism, modern UI aesthetics | Creating modern, premium UI designs |

### Styling & Design Systems

| Skill | Purpose | When to Use |
|-------|---------|-------------|
| **tailwind-design-system** | Tailwind-based design systems, tokens | Building component libraries, design systems |

### Animations & Interactions

| Skill | Purpose | When to Use |
|-------|---------|-------------|
| **magic-animator** | Animation patterns, transitions, micro-interactions | Adding animations to components |
| **scroll-experience** | Scroll-based animations, parallax effects | Creating scroll-driven experiences |

### UI Generation

| Skill | Purpose | When to Use |
|-------|---------|-------------|
| **magic-ui-generator** | Rapid UI component generation | Quickly scaffolding UI components |

### Presentations & Slides

| Skill | Purpose | When to Use |
|-------|---------|-------------|
| **frontend-slides** | Technical presentation creation | Creating slides about frontend topics |

### Security

| Skill | Purpose | When to Use |
|-------|---------|-------------|
| **frontend-security-coder** | Frontend security patterns, XSS prevention | Implementing secure frontend code |

### Visual Content Generation

**For interactive backgrounds, hero sections, and UI visuals:**

| Content Type | Use Skill | When to Use |
|--------------|-----------|-------------|
| **Background images** | image-generation | Hero sections, landing pages, decorative backgrounds |
| **Background videos** | video-generation | Interactive hero sections, immersive experiences |
| **UI illustrations** | image-generation | Icons, illustrations, custom graphics |
| **Product visuals** | image-generation | Product showcases, feature highlights |
| **Animated backgrounds** | video-generation | Dynamic landing pages, storytelling sections |

**Workflow for visual content:**
1. Design UI layout first (ui-ux-designer)
2. Generate visual assets (image-generation or video-generation)
3. Integrate into frontend (frontend-developer)
4. Optimize for performance (frontend-patterns)
5. Add interactions (magic-animator or scroll-experience)

---

## Related External Skills

These skills complement frontend-atlas and should be invoked when needed:

### React Ecosystem (react-atlas)

- **react-patterns** — React-specific patterns and best practices
- **react-state-management** — State management strategies
- **react-component-performance** — Performance optimization
- **react-nextjs-development** — Next.js specific development
- **react-best-practices** — React coding standards

**When to use:** Invoke react-atlas skills for React-specific implementation details.

### Styling & Design

- **tailwind-patterns** — Tailwind CSS v4 patterns and utilities
- **web-design-guidelines** — Web interface guidelines compliance
- **landing-page-generator** — High-converting landing pages
- **stitch-ui-design** — Google Stitch UI generation prompts

**When to use:** For specific styling frameworks or design tool integration.

### 3D & Advanced Graphics

- **threejs-atlas** — Three.js 3D graphics and WebGL
- **spline-3d-integration** — Spline 3D scene integration

**When to use:** When adding 3D graphics or advanced visual effects.

### Native Cross-Platform (Non-Web)

- **makepad-atlas** — Makepad framework (Rust-based native desktop/mobile apps, creative tools, VR/AR)
- **react-native-architecture** (react-atlas) — React Native mobile apps (JavaScript/React)

**When to use:** 
- **Makepad** — High-performance native desktop apps, creative tools, graphics-heavy apps, VR/AR. Uses Rust + GPU shaders. Can target web via WASM but primary focus is native.
- **React Native** — Cross-platform mobile apps (iOS/Android) with JavaScript/React. Mobile-focused, not desktop.

**Note:** Both are native frameworks, not web. Frontend-atlas is for web browsers only.

### Framework-Specific

- **nextjs-turbopack** — Next.js 16+ and Turbopack optimization
- **vercel-deployment** — Vercel deployment workflows
- **vercel-ai-sdk-expert** — Vercel AI SDK integration

**When to use:** For Next.js and Vercel-specific features.

### Testing & Quality

- **e2e-testing** — End-to-end testing strategies
- **tdd-workflow** — Test-driven development
- **code-reviewer** — Code review and quality checks

**When to use:** For testing and quality assurance workflows.

### Development Tools

| Skill | Purpose | When to Use |
|-------|---------|-------------|
| **typescript-expert** | TypeScript patterns and advanced types | Language-specific expertise |
| **javascript-pro** | Modern JavaScript patterns | JavaScript development |
| **debugger** | Debugging strategies and tools | Troubleshooting issues |

### Data Extraction & Research

| Skill | Purpose | When to Use |
|-------|---------|-------------|
| **data-extraction** | Extract data from 47+ platforms (GitHub, Stack Overflow, Reddit, etc.) | Gathering real-world data for development |
| **data-extraction/developer-platforms** | GitHub repos, Stack Overflow Q&A, Hacker News trends | Researching code patterns, solutions, libraries |
| **data-extraction/social-media-content** | Reddit discussions, Medium articles | Understanding user feedback, trends |
| **data-extraction/entertainment-media** | Spotify, Steam, Goodreads data | Building entertainment-focused UIs |

**When to use:** 
- **GitHub data** — Research component libraries, UI patterns, popular repos for inspiration
- **Stack Overflow** — Find solutions to frontend problems, common patterns
- **Reddit/Medium** — Understand user discussions about frontend frameworks, tools
- **Entertainment APIs** — Build music players, game libraries, book readers with real data

**Common workflows:**
- Research UI patterns → data-extraction/developer-platforms/github
- Find component solutions → data-extraction/developer-platforms/stackoverflow
- Understand user needs → data-extraction/social-media-content/reddit
- Build with real data → data-extraction/entertainment-media (Spotify, Steam, etc.)

### Visual Content for Web UI

- **image-generation** — AI-generated images for backgrounds, hero sections, illustrations
- **video-generation** — AI-generated videos for interactive backgrounds, hero sections
- **chart-visualization** — Data visualization and charts

**When to use:** 
- **image-generation** — Hero backgrounds, landing page visuals, UI illustrations, product images, decorative elements
- **video-generation** — Interactive hero backgrounds, storytelling sections, immersive experiences, animated backgrounds
- **chart-visualization** — Data dashboards, analytics displays, data storytelling

**Integration workflow:**
1. Generate visual assets (image-generation or video-generation)
2. Optimize for web (compress images to WebP/AVIF, videos to H.264/VP9/AV1)
3. Implement with lazy loading and performance optimization
4. Add interactions (scroll-experience, magic-animator)
5. Test performance on mobile and slow connections

**Best practices:**
- **Images:** Use WebP/AVIF formats, implement responsive images with srcset, lazy load below-fold content
- **Videos:** Use H.264/VP9/AV1 codecs, provide poster images, implement autoplay with muted attribute
- **Performance:** Compress assets, use CDN, implement lazy loading, provide fallbacks
- **Accessibility:** Add alt text for images, provide captions for videos, ensure contrast ratios
- **Mobile:** Test on mobile devices, consider bandwidth limitations, provide lower-quality alternatives

**Common use cases:**
- Hero section with video background (video-generation + frontend-developer)
- Landing page with AI-generated illustrations (image-generation + landing-page-generator)
- Interactive scroll experience with parallax images (image-generation + scroll-experience)
- Data dashboard with custom charts (chart-visualization + frontend-developer)
- Immersive storytelling with animated backgrounds (video-generation + magic-animator)

---

## RECENCY ZONE — Usage Patterns

### Decision Tree

```
What are you building?

├── New application from scratch
│   └── Start with: frontend-developer + ui-ux-designer
│
├── Component library / Design system
│   └── Start with: tailwind-design-system + frontend-patterns
│
├── Landing page / Marketing site
│   └── Use: landing-page-generator + web-design-guidelines
│
├── Interactive experience / Animation-heavy
│   ├── With visual content: image-generation or video-generation
│   └── Start with: magic-animator + scroll-experience
│
├── 3D graphics / WebGL
│   └── Use: threejs-atlas + spline-3d-integration
│
└── Existing app improvements
    ├── Performance → frontend-developer + react-component-performance
    ├── Design → ui-ux-designer + frontend-design
    ├── Security → frontend-security-coder
    └── Code quality → frontend-patterns + code-reviewer
```

### Typical Workflows

**Building a new React app:**
1. frontend-developer (architecture and setup)
2. ui-ux-designer (design system and components)
3. react-patterns (implementation patterns)
4. frontend-security-coder (security review)

**Creating a design system:**
1. tailwind-design-system (token architecture)
2. frontend-design (visual design)
3. frontend-patterns (component patterns)
4. frontend-dev-guidelines (documentation)

**Building an interactive experience:**
1. ui-ux-designer (user flow and wireframes)
2. image-generation or video-generation (visual assets)
3. frontend-developer (base implementation)
4. magic-animator (animations and transitions)
5. scroll-experience (scroll interactions)

**Creating a landing page with visual content:**
1. ui-ux-designer (layout and design)
2. image-generation (hero background, illustrations)
3. video-generation (hero video background if needed)
4. frontend-developer (implementation)
5. scroll-experience (scroll-triggered animations)
6. web-design-guidelines (accessibility and compliance check)

---

## Quick Reference

**Most commonly used skills:**
- frontend-developer (general React/Next.js development)
- ui-ux-designer (design and user experience)
- tailwind-design-system (styling and design tokens)
- frontend-patterns (architecture and best practices)

**When to invoke external skills:**
- React-specific → react-atlas
- Styling frameworks → tailwind-patterns, web-design-guidelines
- 3D graphics → threejs-atlas, spline-3d-integration
- Testing → e2e-testing, tdd-workflow
- Deployment → vercel-deployment, vercel-automation

**Remember:** Frontend-atlas focuses on web UI development. For backend, APIs, or databases, use their respective atlases.

---

## Interactive Backgrounds & Visual Content Guide

### Image Backgrounds

**Use cases:**
- Hero sections with parallax effects
- Section backgrounds with overlay text
- Decorative patterns and textures
- Product showcases and feature highlights

**Workflow:**
1. **Generate image** (image-generation)
   - Specify: resolution (1920x1080 or higher), style, mood, composition
   - Request: "high-resolution hero background, [style], [mood], suitable for web overlay text"
   
2. **Optimize for web** (frontend-developer)
   ```html
   <picture>
     <source srcset="hero.avif" type="image/avif">
     <source srcset="hero.webp" type="image/webp">
     <img src="hero.jpg" alt="Hero background" loading="lazy">
   </picture>
   ```

3. **Add interactions** (scroll-experience or magic-animator)
   - Parallax scrolling
   - Fade-in on scroll
   - Zoom effects
   - Color overlays

**Performance tips:**
- Use WebP/AVIF formats (70-90% smaller than JPEG)
- Implement lazy loading for below-fold images
- Use CSS `background-image` with `background-size: cover` for full-width backgrounds
- Provide low-quality image placeholders (LQIP) for progressive loading

### Video Backgrounds

**Use cases:**
- Hero sections with motion
- Immersive storytelling experiences
- Product demonstrations
- Ambient background motion

**Workflow:**
1. **Generate video** (video-generation)
   - Specify: duration (10-30 seconds for loops), resolution (1920x1080), style, motion
   - Request: "looping background video, [duration], [style], subtle motion, suitable for hero section"

2. **Optimize for web** (frontend-developer)
   ```html
   <video autoplay muted loop playsinline poster="poster.jpg">
     <source src="background.webm" type="video/webm">
     <source src="background.mp4" type="video/mp4">
   </video>
   ```

3. **Add overlay and content** (frontend-developer)
   ```css
   .video-background {
     position: relative;
     overflow: hidden;
   }
   .video-background video {
     position: absolute;
     top: 50%;
     left: 50%;
     min-width: 100%;
     min-height: 100%;
     transform: translate(-50%, -50%);
     z-index: -1;
   }
   .video-overlay {
     position: relative;
     z-index: 1;
     background: rgba(0, 0, 0, 0.4); /* Dark overlay for text readability */
   }
   ```

**Performance tips:**
- Keep videos under 5MB for hero sections
- Use H.264 codec for broad compatibility
- Provide poster image for initial load
- Disable video on mobile (use static image instead)
- Use `preload="metadata"` to reduce initial load
- Consider using animated WebP or AVIF as lightweight alternative

### Interactive Patterns

**Parallax scrolling with images:**
```javascript
// Use scroll-experience skill for implementation
// Example pattern:
window.addEventListener('scroll', () => {
  const scrolled = window.pageYOffset;
  const parallax = document.querySelector('.parallax-bg');
  parallax.style.transform = `translateY(${scrolled * 0.5}px)`;
});
```

**Scroll-triggered animations:**
- Fade-in images as they enter viewport (magic-animator)
- Zoom effects on scroll (scroll-experience)
- Color transitions (magic-animator)
- Reveal animations (scroll-experience)

**Mouse-interactive backgrounds:**
- Cursor-following effects (frontend-developer + magic-animator)
- Hover-triggered animations (magic-animator)
- Mouse parallax (frontend-developer)

### Accessibility Considerations

**Images:**
- Always provide meaningful alt text
- Ensure sufficient contrast between text and background
- Use `aria-hidden="true"` for purely decorative images
- Provide text alternatives for important visual information

**Videos:**
- Provide captions for videos with audio
- Use `aria-label` to describe video purpose
- Ensure autoplay videos are muted (required by browsers)
- Provide pause/play controls for accessibility
- Consider users with motion sensitivity (respect `prefers-reduced-motion`)

```css
@media (prefers-reduced-motion: reduce) {
  video {
    animation: none;
    transition: none;
  }
}
```

### Mobile Optimization

**Images:**
- Serve smaller images on mobile (use srcset with sizes)
- Use lower resolution for mobile devices
- Consider using solid colors or gradients instead of images on mobile

**Videos:**
- Disable video backgrounds on mobile (use static image)
- If video is essential, serve heavily compressed version
- Use poster image as fallback

```javascript
// Disable video on mobile
if (window.innerWidth < 768) {
  document.querySelector('video').remove();
}
```

### Example Workflows

**Hero section with video background:**
1. video-generation (generate looping background video)
2. frontend-developer (implement video element with overlay)
3. ui-ux-designer (design overlay content and CTA)
4. magic-animator (add fade-in animation for content)
5. web-design-guidelines (accessibility check)

**Landing page with parallax images:**
1. image-generation (generate hero and section backgrounds)
2. frontend-developer (implement responsive images)
3. scroll-experience (add parallax scrolling effects)
4. frontend-patterns (optimize performance)
5. e2e-testing (test on various devices)

**Interactive product showcase:**
1. image-generation (generate product images and backgrounds)
2. frontend-developer (implement image gallery)
3. magic-animator (add hover effects and transitions)
4. ui-ux-designer (design interaction patterns)
5. frontend-security-coder (ensure secure image loading)

---

**Remember:** Frontend-atlas focuses on web UI development. For backend, APIs, or databases, use their respective atlases.
