fumiya-kume/toy-poodle-love
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.
FAQ
The guidance targets iPad and iOS 17+ layouts; many components are reusable on iPhone but layout templates are optimized for larger screens.
How do I persist user settings and trips?
Use SwiftData @Model types for TeslaSettings, TeslaTripHistory, TeslaFavoriteLocation, and TeslaEnergyStats, and configure modelContainer in the App entry.
6 skills
This skill helps you design and implement a Tesla-inspired dashboard UI for iPad using atomic design, dark glassmorphism, MapKit navigation, and media controls.
This skill guides building macOS apps with SwiftUI on Sonoma, covering window management, menus, settings, and document-based patterns.
This skill guides macOS MapKit integration in SwiftUI/AppKit apps, enabling map display, location, routing, search, and Look Around features.
This skill helps you implement MapKit in SwiftUI for iOS 17+, enabling maps, user location, markers, routes, and geocoding.
This skill helps you create and host DocC documentation for Swift projects, including catalogs, tutorials, and API comments, with streamlined setup and
This skill guides iOS 17+ app development with SwiftUI, MVVM, SwiftData, networking, testing, accessibility, and CI/CD for reliable apps.
