Skills
skills/smithery.ai/tesla-dashboard-ui

tesla-dashboard-ui

SKILL.md

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を実装する際の必須手順：

  1. テーマプロバイダー設定

    @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
        ])
    }
}

  2. Info.plist設定

    • NSLocationWhenInUseUsageDescription - 位置情報アクセス理由
    • NSLocationAlwaysAndWhenInUseUsageDescription - 常時位置情報（必要な場合）
    • UIBackgroundModes - audio (音楽再生用)

  3. フレームワークインポート

    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 + RemoteCommand
  • references/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 - 車両情報画面
Weekly Installs
1
Source
smithery.ai/ski…board-ui
First Seen
8 days ago
Installed on
qwen-code1