music-theory-visual-design
CommunityDesign music theory UIs with clarity and style.
Design & Creative#typography#accessibility#tailwind css#ui design#color system#framer motion#music theory
Authorendo-ly
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill prevents inconsistent, hard-to-read, and visually disconnected UI design in the music theory application by providing a unified visual system for typography, color, spacing, and motion.
Core Features & Use Cases
- Typography consistency: Standardizes font choices, weight contrast, and text sizing hierarchy for labels, body text, and headings across components.
- Music-aware color system: Defines when and how to use CSS variables (including pitch/mode-specific colors) and how to apply transparency for layered visualizations.
- Layout, motion, and accessibility: Establishes spacing patterns, Framer Motion usage conventions, Tailwind className practices, and WCAG-friendly focus/contrast behavior.
Quick Start
Use the music-theory-visual-design skill to apply consistent typography, color variables, spacing, and subtle Framer Motion transitions when creating or updating a new music visualization component.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: music-theory-visual-design Download link: https://github.com/endo-ly/harmonic-orbit/archive/main.zip#music-theory-visual-design Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.