music-theory-visual-design

此技能為 Harmonic Orbit 音樂理論平台提供了量身定制的全面設計系統與 UI 實作指南。旨在協助開發人員與設計師維護一致的「音樂廳遇見數位樂器」美學。本技能強制執行特定的 CSS 變數、Tailwind CSS 工具類別模式，以及與應用程式現代、簡潔且具備音樂知識的視覺語言相符的元件結構。它確保從版面面板到互動式音樂視覺化效果的所有 UI 元素，皆符合嚴格的無障礙與效能標準。

• 定義了使用 Noto Sans JP 與 Noto Serif JP 的字體層級，並具備清晰的字重對比指導原則。

• 實作了專門的音樂配色系統，使用 CSS 變數 (如 bg-key-{pitch}-{mode}) 以視覺化方式呈現調性關係。

• 使用 Tailwind CSS 標準化間距與版面配置，強調行動優先的響應式設計。

• 整合 Framer Motion 以呈現細緻且精緻的動畫，在提供使用者回饋的同時維持效能。

• 強制執行配色對比、焦點狀態及互動元素行為的無障礙標準 (WCAG AA)。

• 提供 shadcn/ui 元件的具體實作模式，包括使用 twMerge 與 clsx 進行正確的 className 管理。

• 區分父層級的大小/定位與子層級的外觀，以確保元件的模組化與可重複使用性。

• 指導包括卡片、面板與全高版面等互動元素的實作，以支援應用程式獨特的音樂領域需求。

• 始終優先使用 CSS 變數而非硬編碼的十六進位色碼，以支援全域主題一致性。

• 審慎使用規定的 84 色音樂縮放系統，以避免在複雜圖表中造成視覺凌亂。

• 對於桌面端的響應式調整，請使用 md: 前綴，以確保應用程式在所有裝置尺寸上均能正常運作。

• 在開發新 UI 時，請遵循規定的元件 props 模式 (className?: string) 以及 twMerge/clsx 工具模式。

• 確保所有互動元件皆包含符合設計哲學的懸停 (hover)、啟用 (active) 與焦點 (focus) 狀態。

• 在呈現音樂概念的視覺化內容時，利用定義好的基於圖層的透明度與網格系統，以維持結構清晰度。