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) 状态。

• 在呈现音乐概念的可视化内容时，利用定义好的基于图层的透明度与网格系统，以维持结构清晰度。