tesla-dashboard-ui_skill

Overview

This skill provides a Tesla-inspired dashboard UI component library and implementation guide for iPad apps running iOS 17+. It focuses on atomic design, a dark glassmorphism aesthetic, high-contrast automotive UI patterns, and built-in support for MapKit, AVFoundation, and SwiftData persistence. The content is practical and targeted at developers building touchscreen vehicle dashboards or infotainment prototypes. It includes component hierarchy, theme provider guidance, and integration checklists to get a dashboard running quickly.

How this skill works

The skill describes an atoms→molecules→organisms architecture with ready-made atoms (colors, typography, icons, animations), reusable molecules (buttons, sliders, toggles), and complex organisms (vehicle status, navigation bar, media bar, climate control). It explains environment-driven theming using @Observable + Environment, SwiftData models for settings and history, MapKit integration for routing and LookAround, and AVFoundation + MPRemoteCommandCenter playback control. Installation notes and Info.plist requirements are provided so the UI works with location and audio background modes.

When to use it

• Building an iPad-only automotive dashboard or infotainment UI for iOS 17+.
• Creating a dark, glassmorphism-styled control surface with high visibility.
• Adding vehicle status displays (speed, battery, range) and quick actions.
• Implementing MapKit navigation with voice guidance and route search.
• Integrating in-app media playback with remote command center support.

Best practices

• Follow atomic design: implement atoms first, then compose molecules and organisms.
• Provide a TeslaTheme via Environment and respect Dynamic Type and accessibility.
• Model persistent data with SwiftData for settings, favorites, trips, and stats.
• Use .ultraThinMaterial and layered blur for glassmorphism; keep contrast high for readability.
• Handle errors with a Result<T, TeslaError> pattern and provide localized messages.

Example use cases

• Main dashboard with large speed display, battery gauge, and quick-action toolbar.
• Split-screen navigation: MapKit map on one pane and climate/media controls on the other.
• Media playback screen using AVFoundation and MPRemoteCommandCenter for background audio.
• Climate control panel with accessible sliders and preconditioning presets persisted via SwiftData.
• Favorites and route history stored as SwiftData models and surfaced in a navigation screen.