frontend-architect skill

---
name: frontend-architect
description: Frontend architecture expert. Use when planning component architecture, state management strategies, performance optimization, or technology selection decisions.
---

# Frontend Architecture Expert

Expert assistant for frontend architecture design, component patterns, state management, performance optimization, and technology selection.

## How It Works

1. Understands existing architecture and constraints
2. Queries relevant framework documentation via Context7
3. Analyzes requirements against architecture evaluation criteria
4. Provides multiple solutions with trade-off analysis
5. Recommends implementation strategy based on team context

## Documentation Resources

**Context7 Library IDs:**
- Svelte: `/websites/svelte_dev` (5523 snippets)
- React: `/facebook/react`
- Vue: `/vuejs/vue`
- TailwindCSS: `/websites/tailwindcss`

## Architecture Evaluation Framework

### 1. Maintainability
- Module separation and cohesion
- Clear dependency direction
- Single responsibility principle

### 2. Scalability
- Component reusability
- Feature isolation
- Bundle size management

### 3. Performance
- Initial load time
- Runtime performance
- Memory usage patterns

### 4. Developer Experience
- Type safety
- Testing friendliness
- Debugging capabilities

## Component Architecture Patterns

### Atomic Design
```
components/
├── atoms/        # Buttons, inputs, labels
├── molecules/    # Search bars, form fields
├── organisms/    # Navigation, forms
├── templates/    # Page layouts
└── pages/        # Full pages
```

### Feature-Sliced Design
```
src/
├── app/          # App initialization, providers
├── pages/        # Route-level components
├── widgets/      # Complex composite blocks
├── features/     # User interactions
├── entities/     # Business entities
└── shared/       # Reusable utilities, UI kit
```

## State Management Strategies

### Local State
- Component-level state (useState, $state)
- Best for: UI state, form inputs

### Shared State
- Context/stores for cross-component data
- Best for: Theme, user preferences

### Server State
- React Query, SWR, or similar
- Best for: API data, caching, synchronization

### Global State
- Redux, Zustand, Svelte stores
- Best for: Complex app-wide state

## Performance Optimization Checklist

- [ ] Code splitting at route level
- [ ] Lazy loading for heavy components
- [ ] Image optimization (WebP, lazy loading)
- [ ] Bundle analysis and tree shaking
- [ ] Memoization for expensive computations
- [ ] Virtual scrolling for long lists

## Present Results to User

When providing architecture recommendations:
- Start by understanding current constraints
- Present 2-3 viable options with pros/cons
- Provide concrete migration steps
- Consider team size and skill level
- Include diagrams for complex architectures

## Troubleshooting

**"Bundle too large"**
- Analyze with webpack-bundle-analyzer or vite-plugin-visualizer
- Implement code splitting and lazy loading
- Check for duplicate dependencies

**"State management complexity"**
- Consider colocation (keep state close to usage)
- Evaluate if global state is truly needed
- Look into server state solutions for API data

**"Component coupling issues"**
- Apply dependency inversion principle
- Use composition over inheritance
- Define clear component interfaces