| name | tesla-dashboard-ui |
| description | This skill should be used when the user asks to "create Tesla-style dashboard",
"implement car dashboard UI", "add vehicle status display", "create dark modern UI",
"implement touchscreen interface", "build automotive dashboard", "add navigation map UI",
"create media player controls", "implement climate control UI", "add EV battery display",
"create glassmorphism UI", "implement SwiftData persistence", "add remote command support",
"Tesla風ダッシュボードを作成", "車載ダッシュボードUI", "ダークモダンUI",
"タッチスクリーンインターフェース", "車両ステータス表示", "ナビゲーションマップUI",
"メディアプレーヤーコントロール", "空調コントロールUI", "EVバッテリー表示",
"ガラスモーフィズムUI", "SwiftData永続化", "リモートコマンド対応",
or needs guidance on Tesla-inspired dashboard interfaces with atomic design principles,
dark theme, custom controls, MapKit navigation, AVFoundation media playback,
SwiftData persistence, and automotive UI patterns for iPad applications targeting iOS 17+.
|
| version | 1.0.0 |
Tesla Dashboard UI
iOS 17+ iPad向けSwiftUIアプリケーションにおける、Tesla風ダッシュボードUIコンポーネントライブラリの実装ガイド。
Overview
Target Platform: iPad専用 / iOS 17+ / Swift 5.9+
Design Principles:
- アトミックデザイン原則（Atoms → Molecules → Organisms → Templates → Pages）
- Teslaデザイン言語（ダークテーマ、ガラスモーフィズム、クリーンなタイポグラフィ）
- 高コントラスト・高視認性（車載ダッシュボード向け）
- 完全アクセシビリティ対応（VoiceOver, Dynamic Type, Reduce Motion）
Core Features:
- カスタムテーマシステム（@Observable + Environment）
- SF Symbols + カスタムSVGアイコン
- SwiftData永続化（設定・お気に入り・走行履歴・エネルギー統計）
- MapKit完全統合（ルート検索・LookAround・音声案内）
- AVFoundation音楽再生（MPRemoteCommandCenter対応）
- KeyframeAnimator/PhaseAnimatorによる高度なアニメーション
Quick Start Checklist
Tesla Dashboard UIを実装する際の必須手順：
-
テーマプロバイダー設定
@main
struct MyApp: App {
@State private var theme = TeslaTheme()
var body: some Scene {
WindowGroup {
TeslaMainDashboard()
.environment(\.teslaTheme, theme)
.preferredColorScheme(.dark)
}
.modelContainer(for: [
TeslaSettings.self,
TeslaFavoriteLocation.self,
TeslaTripHistory.self,
TeslaEnergyStats.self
])
}
}
-
Info.plist設定
NSLocationWhenInUseUsageDescription - 位置情報アクセス理由NSLocationAlwaysAndWhenInUseUsageDescription - 常時位置情報（必要な場合）UIBackgroundModes - audio (音楽再生用)
-
フレームワークインポート
import SwiftUI
import SwiftData
import MapKit
import CoreLocation
import AVFoundation
import MediaPlayer
Component Hierarchy
Atoms（原子）- 最小UI単位
- TeslaColors - ダークテーマカラーパレット（blur 30, opacity 0.16）
- TeslaTypography - Tesla風タイポグラフィ（Display 57pt〜）
- TeslaIcons - SF Symbols + カスタムアイコン
- TeslaAnimation - KeyframeAnimator/PhaseAnimatorカーブ
Molecules（分子）- 機能的UI部品
- TeslaIconButton - ガラスモーフィズムアイコンボタン
- TeslaSlider - アクセシビリティ対応カスタムスライダー
- TeslaToggle - トグルスイッチ
- TeslaBrightnessControl - 明るさ調整コントロール
Organisms（生物）- 複合コンポーネント
- TeslaNavigationBar - ナビゲーションバー
- TeslaVehicleStatus - 完全車両データビュー（速度/バッテリー/航続距離）
- TeslaQuickActionsToolbar - 9項目クイックアクション + ドライブモード
- TeslaMusicBar - AVFoundation + MPRemoteCommandCenter統合
- TeslaClimateControl - スライダーベース空調（プリコンディショニング対応）
- TeslaTouchscreenMenu - 5タブメニュー
- TeslaMapView - MapKit + AVSpeechSynthesizer音声案内
Models（モデル）- データ層
- TeslaError - Result<T, TeslaError>用エラー定義
- VehicleDataProvider - 車両データprotocol
- TeslaVehicleData - @Model 車両データ
- TeslaSettings - @Model 設定データ
- TeslaFavoriteLocation - @Model お気に入り地点
- TeslaTripHistory - @Model 走行履歴
- TeslaEnergyStats - @Model エネルギー統計
Templates（テンプレート）- レイアウト構造
- TeslaDashboardLayout - iPad向けダッシュボードレイアウト
- TeslaSplitViewLayout - 分割ビューレイアウト
- TeslaThemeProvider - @Observableテーマプロバイダー
Pages（ページ）- 完成画面
- TeslaMainDashboard - メインダッシュボード
- TeslaNavigationScreen - モード切り替えナビゲーション
- TeslaMediaScreen - メディア再生画面
- TeslaClimateScreen - 空調設定画面
- TeslaVehicleScreen - 車両情報画面
Color Palette
| 用途 | 変数名 | HEX | 説明 |
|---|
| Background | background | #141416 | メイン背景色 |
| Surface | surface | #1E1E22 | カード・パネル背景 |
| Surface Elevated | surfaceElevated | #28282C | 浮き上がった要素 |
| Accent | accent | #3399FF | Tesla Blue（主要アクション） |
| Status Green | statusGreen | #4DD966 | 正常・充電完了 |
| Status Orange | statusOrange | #FF9933 | 注意・後進 |
| Status Red | statusRed | #F24D4D | エラー・緊急 |
| Text Primary | textPrimary | #FFFFFF | メインテキスト |
| Text Secondary | textSecondary | #B3B3B3 | サブテキスト |
| Glass Background | glassBackground | #FFFFFF14 | ガラスモーフィズム背景 |
Typography Scale
| スタイル | サイズ | ウェイト | 用途 |
|---|
| Display Large | 57pt | Regular | 速度表示 |
| Display Medium | 45pt | Regular | バッテリー残量 |
| Display Small | 36pt | Regular | 航続距離 |
| Headline Large | 32pt | Semibold | セクション見出し |
| Headline Medium | 28pt | Semibold | カードタイトル |
| Title Large | 22pt | Medium | サブセクション |
| Title Medium | 18pt | Medium | リスト項目 |
| Body Large | 16pt | Regular | 本文 |
| Body Medium | 14pt | Regular | 説明文 |
| Label Large | 14pt | Medium | ボタンラベル |
| Label Small | 10pt | Medium | 補助テキスト |
Glassmorphism Effect
強いガラスモーフィズム効果を使用：
.background(.ultraThinMaterial)
.background(TeslaColors.glassBackground)
.blur(radius: 30)
または Material を使用：
.background(.ultraThinMaterial)
Error Handling
Result型ベースのエラーハンドリング：
enum TeslaError: Error, LocalizedError {
case locationPermissionDenied
case routeNotFound
case audioSessionFailed
case dataNotFound
var errorDescription: String? {
switch self {
case .locationPermissionDenied: return "位置情報の権限が必要です"
case .routeNotFound: return "ルートが見つかりませんでした"
case .audioSessionFailed: return "オーディオセッションの開始に失敗しました"
case .dataNotFound: return "データが見つかりませんでした"
}
}
}
typealias TeslaResult<T> = Result<T, TeslaError>
Preview Data Pattern
extension + static var preview パターン：
extension TeslaVehicleData {
static var preview: TeslaVehicleData {
TeslaVehicleData(
speed: 65,
batteryLevel: 85,
range: 340,
isCharging: false,
driveMode: .comfort
)
}
}
#Preview {
TeslaVehicleStatus(data: .preview)
.environment(\.teslaTheme, TeslaTheme())
}
Additional Resources
Reference Files
references/design-system.md - デザインシステム完全ガイド（日英）references/atomic-design-patterns.md - アトミックデザインパターン詳細references/theme-configuration.md - テーマプロバイダー実装詳細references/swiftdata-models.md - SwiftDataモデル設計ガイドreferences/animation-guidelines.md - Keyframe/Phaseアニメーションreferences/accessibility-guide.md - 完全アクセシビリティガイドreferences/mapkit-integration.md - MapKit + 音声案内統合references/avfoundation-integration.md - AVFoundation + RemoteCommandreferences/error-handling.md - Result<T, TeslaError>パターンreferences/troubleshooting.md - トラブルシューティング
Example Files
実装サンプルは examples/ ディレクトリを参照：
Atoms:
examples/atoms/tesla-colors.swift - カラーパレット定義examples/atoms/tesla-typography.swift - タイポグラフィスケールexamples/atoms/tesla-icons.swift - アイコン定義examples/atoms/tesla-animation.swift - アニメーションカーブ
Molecules:
examples/molecules/tesla-icon-button.swift - アイコンボタンexamples/molecules/tesla-slider.swift - スライダーexamples/molecules/tesla-toggle.swift - トグルexamples/molecules/tesla-brightness-control.swift - 明るさ調整
Models:
examples/models/tesla-error.swift - エラー定義examples/models/vehicle-data-provider.swift - データプロバイダーexamples/models/tesla-vehicle-data.swift - 車両データexamples/models/tesla-settings.swift - 設定examples/models/tesla-favorite-location.swift - お気に入りexamples/models/tesla-trip-history.swift - 走行履歴examples/models/tesla-energy-stats.swift - エネルギー統計
Organisms:
examples/organisms/tesla-navigation-bar.swift - ナビゲーションバーexamples/organisms/tesla-vehicle-status.swift - 車両ステータスexamples/organisms/tesla-quick-actions-toolbar.swift - クイックアクションexamples/organisms/tesla-music-bar.swift - 音楽バーexamples/organisms/tesla-climate-control.swift - 空調コントロールexamples/organisms/tesla-touchscreen-menu.swift - タッチスクリーンメニューexamples/organisms/tesla-map-view.swift - マップビュー
Templates:
examples/templates/tesla-dashboard-layout.swift - ダッシュボードレイアウトexamples/templates/tesla-split-view-layout.swift - 分割ビューexamples/templates/tesla-theme-provider.swift - テーマプロバイダー
Pages:
examples/pages/tesla-main-dashboard.swift - メインダッシュボードexamples/pages/tesla-navigation-screen.swift - ナビゲーション画面examples/pages/tesla-media-screen.swift - メディア画面examples/pages/tesla-climate-screen.swift - 空調画面examples/pages/tesla-vehicle-screen.swift - 車両情報画面
