Assets

Shared resources ensuring consistency across frameworks.

Structure

Icons: assets/icons/ - Weather condition icons (sunny, rainy, cloudy, etc.) - App icons and favicons - Framework logos and badges - SVG format for scalability

Styles: assets/styles/
- CSS custom properties (colors, typography) - Shared component styles - Design system tokens - Theme definitions

Mock Data: assets/mocks/ - Weather API responses - Location databases - Error scenarios - Test data variations

Sync Process

Script: scripts/setup/sync_assets.py - Copies assets to all framework directories - Maintains consistent branding - Preserves framework-specific customizations - Updates on asset changes

Target locations: - apps/{framework}/public/ - Static assets - apps/{framework}/src/assets/ - Source assets - apps/{framework}/src/mocks/ - Mock data

Asset Types

Design System

Colors: Consistent palette across frameworks - Primary/secondary brand colors - Weather condition colors - UI state colors (error, success, warning) - Neutral grays and backgrounds

Typography: Font definitions - Font family selections - Size scales and line heights - Weight variations - Responsive scaling

Spacing: Layout consistency - Margin/padding scales - Grid systems - Component spacing - Responsive breakpoints

Weather Icons

Conditions: Complete weather icon set - Clear/sunny conditions - Cloudy variations - Rain and snow - Storm conditions - Wind indicators

Formats: Multiple formats for framework compatibility - SVG for modern frameworks - PNG fallbacks - Icon fonts where needed - Accessibility considerations

Mock Data

Realistic responses: Comprehensive weather data - Current conditions - Forecasts (hourly/daily) - Location information - Weather alerts

Error scenarios: Testing edge cases - Network failures - Invalid locations
- Service unavailable - Timeout conditions

Framework Integration

React/Preact: JSX-compatible assets Vue: Vue template integration Angular: Angular asset pipeline Svelte: Svelte asset handling Others: Standard web asset patterns

Assets are adapted for each framework's build system while maintaining visual consistency.