guitar-fretboard

Guitar Fretboard Visualization Skill

Create interactive React artifacts for guitar fretboard visualizations with proper music theory.

Core Music Theory Reference

Notes and Intervals

const NOTES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'] const STANDARD_TUNING = ['E', 'A', 'D', 'G', 'B', 'E'] // low to high (6th to 1st string)

// Semitone intervals from root const INTERVALS = { root: 0, minor2nd: 1, major2nd: 2, minor3rd: 3, major3rd: 4, perfect4th: 5, tritone: 6, perfect5th: 7, minor6th: 8, major6th: 9, minor7th: 10, major7th: 11, octave: 12 }

Scale Formulas (semitones from root)

const SCALES = { major: [0, 2, 4, 5, 7, 9, 11], // W-W-H-W-W-W-H minor: [0, 2, 3, 5, 7, 8, 10], // W-H-W-W-H-W-W (natural minor) majorPentatonic: [0, 2, 4, 7, 9], // 1-2-3-5-6 minorPentatonic: [0, 3, 5, 7, 10], // 1-b3-4-5-b7 blues: [0, 3, 5, 6, 7, 10], // minor pentatonic + b5 dorian: [0, 2, 3, 5, 7, 9, 10], // mode 2 phrygian: [0, 1, 3, 5, 7, 8, 10], // mode 3 lydian: [0, 2, 4, 6, 7, 9, 11], // mode 4 mixolydian: [0, 2, 4, 5, 7, 9, 10], // mode 5 locrian: [0, 1, 3, 5, 6, 8, 10], // mode 7 harmonicMinor: [0, 2, 3, 5, 7, 8, 11], melodicMinor: [0, 2, 3, 5, 7, 9, 11] }

CAGED System Forms

The CAGED system uses 5 moveable chord shapes (C, A, G, E, D) that connect across the fretboard:

const CAGED_ROOT_POSITIONS = { // Fret offsets where root appears for each form (relative to form position) C: { string6: null, string5: 3, string4: null, string3: null, string2: 1, string1: null }, A: { string6: null, string5: 0, string4: 2, string3: 2, string2: null, string1: null }, G: { string6: 3, string5: null, string4: 0, string3: 0, string2: null, string1: 3 }, E: { string6: 0, string5: null, string4: 2, string3: null, string2: 0, string1: 0 }, D: { string6: null, string5: null, string4: 0, string3: 2, string2: 3, string1: null } }

Fretboard Component Architecture

Core Helper Functions

// Get note at any fret position const getNoteAtFret = (openNote, fret) => { const startIndex = NOTES.indexOf(openNote) return NOTES[(startIndex + fret) % 12] }

// Check if note is in scale const isNoteInScale = (note, rootNote, scaleFormula) => { const rootIndex = NOTES.indexOf(rootNote) const noteIndex = NOTES.indexOf(note) const interval = (noteIndex - rootIndex + 12) % 12 return scaleFormula.includes(interval) }

// Get interval name from root const getInterval = (rootNote, note) => { const rootIndex = NOTES.indexOf(rootNote) const noteIndex = NOTES.indexOf(note) return (noteIndex - rootIndex + 12) % 12 }

// Get degree in scale (1-7 for diatonic, 1-5 for pentatonic) const getScaleDegree = (note, rootNote, scaleFormula) => { const interval = getInterval(rootNote, note) return scaleFormula.indexOf(interval) + 1 }

Fretboard Layout Constants

const FRETS = 15 // Standard display: 15 frets const STRINGS = 6 // 6-string guitar const FRET_MARKERS = [3, 5, 7, 9, 12, 15, 17, 19, 21, 24] // Single dot positions const DOUBLE_MARKERS = [12, 24] // Double dot positions

Implementation Patterns

Pattern 1: Complete Fretboard with Scale Highlighting

Display all frets with selected scale notes highlighted:

const Fretboard = ({ rootNote, scale, tuning = STANDARD_TUNING }) => { const scaleFormula = SCALES[scale]

return ( <div className="fretboard"> {/* Nut (open strings) */} <div className="nut"> {tuning.map((note, string) => ( <NoteMarker key={string} note={note} isRoot={note === rootNote} inScale={isNoteInScale(note, rootNote, scaleFormula)} /> ))} </div>

  {/* Frets */}
  {Array.from({ length: FRETS }, (_, fret) => (
    &#x3C;div key={fret} className="fret">
      {tuning.map((openNote, string) => {
        const note = getNoteAtFret(openNote, fret + 1)
        return (
          &#x3C;NoteMarker
            key={string}
            note={note}
            isRoot={note === rootNote}
            inScale={isNoteInScale(note, rootNote, scaleFormula)}
            showDegree={true}
            degree={getScaleDegree(note, rootNote, scaleFormula)}
          />
        )
      })}
    &#x3C;/div>
  ))}
&#x3C;/div>

) }

Pattern 2: Pentatonic Box Patterns

Display the 5 pentatonic patterns:

// Pattern positions for minor pentatonic (frets relative to pattern start) const PENTATONIC_PATTERNS = { pattern1: { // Root position (minor) / Pattern 5 (relative major) startFret: 0, // relative to root positions: [ [0, 3], [0, 3], [0, 2], [0, 2], [0, 3], [0, 3] // [fret offsets per string] ] }, pattern2: { startFret: 3 }, pattern3: { startFret: 5 }, pattern4: { startFret: 7 }, pattern5: { startFret: 10 } }

Pattern 3: CAGED Chord Forms

const CAGEDChord = ({ form, rootNote, tonality = 'major' }) => { // Calculate fret position based on root note and form const getFormPosition = () => { // Each CAGED form has specific root string and offset const formRoots = { C: 5, A: 5, G: 6, E: 6, D: 4 } // ... calculate position }

return ( <div className="caged-form"> {/* Render chord shape at calculated position */} </div> ) }

Pattern 4: Triad Visualizations

const TRIADS = { major: [0, 4, 7], // R-3-5 minor: [0, 3, 7], // R-b3-5 diminished: [0, 3, 6], // R-b3-b5 augmented: [0, 4, 8] // R-3-#5 }

// String groupings for triads const TRIAD_SETS = [ [1, 2, 3], // strings 1-2-3 [2, 3, 4], // strings 2-3-4 [3, 4, 5], // strings 3-4-5 [4, 5, 6] // strings 4-5-6 ]

Styling Guidelines

Color Schemes for Notes

/* Recommended semantic colors / .root { background: #ef4444; } / Red - root note / .third { background: #22c55e; } / Green - 3rd / .fifth { background: #3b82f6; } / Blue - 5th / .seventh { background: #a855f7; } / Purple - 7th / .blue-note { background: #06b6d4; } / Cyan - blues note / .scale-note { background: #6b7280; } / Gray - other scale notes */

Fretboard CSS Structure

.fretboard { display: flex; flex-direction: row; background: linear-gradient(to bottom, #78350f, #451a03); border-radius: 4px; padding: 8px; }

.string { height: 2px; background: linear-gradient(to bottom, #d4d4d4, #a3a3a3); }

.fret-wire { width: 3px; background: #a8a29e; }

.fret-marker { width: 12px; height: 12px; background: #fafaf9; border-radius: 50%; opacity: 0.3; }

Feature Implementations

Interactive Features

Note Selection: Click to highlight/select notes
Scale Selector: Dropdown for root note + scale type
Pattern Navigation: Buttons to cycle through patterns
Audio Playback: Optional Tone.js integration for note sounds
Hover Information: Show note name, interval, scale degree

Display Modes

All Notes: Show every note on fretboard
Scale Only: Show only notes in selected scale
Intervals: Show interval numbers instead of note names
Degrees: Show scale degrees (1, 2, 3, etc.)
Patterns: Highlight specific positional patterns

Usage Examples

User Request: "Show me the A minor pentatonic scale on the fretboard" → Render fretboard with A minor pentatonic highlighted, root notes emphasized

User Request: "Create a CAGED chord diagram for C major"

→ Show all 5 CAGED forms for C major across the fretboard

User Request: "Visualize the 5 pentatonic box patterns in E minor" → Create 5 separate fretboard sections showing each pattern position

User Request: "Show me all the triads in G major" → Display triads on different string sets with chord quality labels

guitar-fretboard

Safety Notice

Copy this and send it to your AI assistant to learn

Source Transparency

Related Skills

threejs-scene-builder

guitar-fretboard-mastery

game-feel

frontend-performance-reviewer