skills.rest
endo-ly
endo-lyCOMMUNITY
Explore all skills by this author →
GitHub

music-theory-visual-design

Define UI typography, color, spacing, and motion rules for React/Next.js music theory components.

4|Updated Jun 6, 2025
Search Tags:#typography#accessibility#tailwind css#ui design#color system#framer motion#music theory
One-click install
npx skills add https://github.com/endo-ly/harmonic-orbit --skill music-theory-visual-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: music-theory-visual-design
Source: https://github.com/endo-ly/harmonic-orbit/tree/main/.claude/skills/music-theory-visual-design
Command: npx skills add https://github.com/endo-ly/harmonic-orbit --skill music-theory-visual-design

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about music-theory-visual-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I establish consistent UI typography and color systems for a music theory visualization app?▼

To establish consistent UI typography and color systems for a music theory visualization app, apply standardized font hierarchies, CSS-variable-based theming, and music-aware color variables for pitches and modes to ensure visual clarity.

What's the best way to handle CSS variables and transparency for layered music theory visualizations?▼

Handling CSS variables and transparency for layered music theory visualizations involves defining pitch and mode-specific color variables and applying transparency rules to distinguish overlapping interactive layers and visual states effectively.

How do I apply Framer Motion transitions and Tailwind CSS conventions to interactive React components?▼

Applying Framer Motion transitions and Tailwind CSS conventions to interactive React components requires setting standardized motion patterns for hover and selection states, alongside consistent className practices for layout and spacing.

Does this UI design approach support WCAG-friendly focus and contrast guidelines for React components?▼

Yes, this UI design approach supports WCAG-friendly focus and contrast guidelines by enforcing accessibility-safe focus behaviors and visual contrast rules directly within the React/Next.js component styling conventions.

Can I use this visual design system to update existing Next.js components that display music modes and circles?▼

Yes, you can use this visual design system to update existing Next.js components by applying the unified typography, color variables, and motion rules to refine the display of music modes, circles, and interactive states.

Related Skills

Explore More Design & Creative Skills→
BenAIOSBenAIOS

design-taste-frontend

Generate high-end UI/UX interfaces with React, Tailwind CSS, and Framer Motion.

Official
Advanced
mauriciodelriomauriciodelrio
3

animations-and-transitions

Implement performant UI animations in React/Next.js with Framer Motion and CSS transitions.

Community
Intermediate
Boise-State-DevelopmentBoise-State-Development
16

tailwind-ui

Build accessible, theme-aware UI components with Tailwind CSS v4.1.

Official
Intermediate
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic