Public repository for Agent Skills
Go to file
Claude 2301f033cd
Add Music Video Note Editor - Complete Interactive Piano/Keyboard Learning Platform
Created a comprehensive web application for music education with advanced features:

CORE FEATURES:

1. 🎵 YouTube Video Integration
   - Load any YouTube video with URL parsing
   - Playback controls (play/pause, seek ±5s)
   - Real-time timeline synchronization
   - Duration tracking and display

2. 🎹 WebMIDI Integration (Real-time MIDI Input)
   - Connect MIDI keyboards directly in browser
   - Live note visualization with velocity display
   - Support for multiple MIDI devices
   - Zero-latency feedback system
   - Portuguese note name translation
   - Device detection and status monitoring

3. 🎵 Audio Transcription Framework
   - Integration-ready for Spotify Basic Pitch
   - Support for Magenta Onsets & Frames
   - Demo mode with simulated transcription
   - Confidence threshold filtering
   - Automatic note detection from video audio
   - Production deployment instructions included

4. 🎯 Intelligent Practice Mode (Educational Tutor)
   - Real-time feedback while playing
   - Performance metrics tracking:
     * Correct/wrong note counting
     * Accuracy percentage
     * Streak tracking (consecutive correct notes)
     * Timing error analysis (±500ms tolerance)
     * Pitch accuracy detection
   - Dynamic canvas visualization:
     * Shows upcoming notes (5s lookahead)
     * Highlights current note to play
     * Progress bar
   - Gamification system:
     * Streak counter with fire emoji
     * Special achievements every 5 notes
     * Detailed final reports
   - Personalized improvement tips
   - Practice session statistics

5. 📝 Sheet Music Visualization (VexFlow)
   - Automatic musical score generation
   - Treble and bass clef support
   - Color-coded notes matching timeline
   - Configurable time signatures
   - PNG export capability
   - MIDI export framework

6. ✏️ Manual Note Editor
   - 12 chromatic notes (C through B, including sharps)
   - Octave selection (1-7)
   - Duration control (0.1-5 seconds)
   - Interactive timeline with colored blocks
   - Click notes to jump to video timestamp
   - Drag-free note deletion

7. 🎨 Pedagogical Color System
   Natural notes (light colors):
   - C: Light green | D: Light blue | E: Yellow
   - F: Light red | G: Light purple | A: Light orange | B: Pink

   Sharp notes (dark colors):
   - C#: Dark green | D#: Dark blue | F#: Dark red
   - G#: Dark purple | A#: Dark orange

8. 🤖 AI-Powered Educational Prompts
   - Automatic analysis of note patterns
   - Personalized tips for:
     * Hand positioning
     * Intensity and dynamics
     * Pedal usage
     * Rhythm and timing
     * General technique
   - Context-aware suggestions based on black key usage
   - Difficulty-adjusted recommendations

9. 💾 Complete Export System
   - Save full project (JSON with all data)
   - Load saved projects
   - Export notes to CSV
   - Export sheet music to PNG
   - Preserves video URL, notes, and educational content

CODE QUALITY & ARCHITECTURE:

- Modular architecture with separate handlers:
  * app.js - Main orchestration and state management
  * midi-handler.js - WebMIDI device management
  * transcription-handler.js - Audio to MIDI conversion
  * practice-mode.js - Educational tutor with gamification
  * score-renderer.js - VexFlow sheet music rendering

- Error handling throughout:
  * Try-catch blocks for all critical operations
  * Graceful degradation when features unavailable
  * User-friendly error messages
  * Console logging for debugging

- Safe null checks:
  * Optional chaining (?.) for property access
  * Existence checks before element manipulation
  * Type validation before operations

- Performance optimizations:
  * RequestAnimationFrame for smooth canvas rendering
  * Efficient DOM manipulation
  * Event delegation where appropriate
  * Cleanup of animation frames and listeners

- Responsive design:
  * Mobile-friendly layouts
  * Flexible grid systems
  * Touch-friendly buttons
  * Adaptive canvas sizing

TECHNOLOGIES & LIBRARIES:

External Libraries (CDN):
- VexFlow 4.2.2 (MIT) - Musical notation rendering
- WebMIDI.js 3.1.6 (MIT) - MIDI device support
- YouTube IFrame API - Video playback

Framework Ready For:
- Spotify Basic Pitch (Apache 2.0) - Audio transcription
- Magenta Onsets & Frames (Apache 2.0) - Piano detection
- ByteDance Piano Transcription - High-quality backend option

DOCUMENTATION:

- Comprehensive README with:
  * Quick start guide
  * Detailed feature explanations
  * Architecture blueprint (3 operational modes)
  * Integration guides for production
  * Troubleshooting section
  * Use cases for different audiences
  * Dataset recommendations (MAESTRO, ASAP)
  * Licensing information

- Code comments explaining:
  * Complex algorithms
  * Integration points
  * Configuration options
  * Future enhancement areas

EDUCATIONAL VALUE:

Three operational modes for different scenarios:
1. MIDI-First: Real-time practice with immediate feedback
2. Mic-First: For acoustic piano without MIDI
3. Hybrid Pro: Backend processing for complex transcriptions

Use cases:
- Teachers: Create interactive educational materials
- Students: Learn with real-time feedback and metrics
- YouTubers: Produce professional piano tutorials
- Musicians: Transcribe and analyze music from videos

This application transforms basic video annotation into a complete
educational platform with AI-powered features, professional-grade
tools, and comprehensive learning analytics.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-27 21:17:51 +00:00
.claude-plugin Add Claude Code Marketplace (#5) 2025-10-16 12:11:41 -04:00
algorithmic-art Reorganize the example skills (#1) 2025-10-16 10:02:06 -04:00
artifacts-builder Reorganize the example skills (#1) 2025-10-16 10:02:06 -04:00
brand-guidelines Reorganize the example skills (#1) 2025-10-16 10:02:06 -04:00
canvas-design Reorganize the example skills (#1) 2025-10-16 10:02:06 -04:00
document-skills Reorganize the example skills (#1) 2025-10-16 10:02:06 -04:00
internal-comms Reorganize the example skills (#1) 2025-10-16 10:02:06 -04:00
mcp-builder Reorganize the example skills (#1) 2025-10-16 10:02:06 -04:00
music-video-note-editor Add Music Video Note Editor - Complete Interactive Piano/Keyboard Learning Platform 2026-01-27 21:17:51 +00:00
skill-creator Reorganize the example skills (#1) 2025-10-16 10:02:06 -04:00
slack-gif-creator Reorganize the example skills (#1) 2025-10-16 10:02:06 -04:00
template-skill Reorganize the example skills (#1) 2025-10-16 10:02:06 -04:00
theme-factory Reorganize the example skills (#1) 2025-10-16 10:02:06 -04:00
webapp-testing Reorganize the example skills (#1) 2025-10-16 10:02:06 -04:00
.gitignore init repo 2025-10-15 17:07:32 -04:00
README.md Updates to README.md (#9) 2025-10-16 15:15:19 -04:00
THIRD_PARTY_NOTICES.md Add 3rd Party notices (#4) 2025-10-16 08:32:27 -07:00
agent_skills_spec.md Add initial Agent Skills Spec (#2) 2025-10-16 11:32:56 -04:00

README.md

Skills

Skills are folders of instructions, scripts, and resources that Claude loads dynamically to improve performance on specialized tasks. Skills teach Claude how to complete specific tasks in a repeatable way, whether that's creating documents with your company's brand guidelines, analyzing data using your organization's specific workflows, or automating personal tasks.

For more information, check out:

About This Repository

This repository contains example skills that demonstrate what's possible with Claude's skills system. These examples range from creative applications (art, music, design) to technical tasks (testing web apps, MCP server generation) to enterprise workflows (communications, branding, etc.).

Each skill is self-contained in its own directory with a SKILL.md file containing the instructions and metadata that Claude uses. Browse through these examples to get inspiration for your own skills or to understand different patterns and approaches.

The example skills in this repo are open source (Apache 2.0). We've also included the document creation & editing skills that power Claude's document capabilities under the hood in the document-skills/ folder. These are source-available, not open source, but we wanted to share these with developers as a reference for more complex skills that are actively used in a production AI application.

Note: These are reference examples for inspiration and learning. They showcase general-purpose capabilities rather than organization-specific workflows or sensitive content.

Disclaimer

These skills are provided for demonstration and educational purposes only. While some of these capabilities may be available in Claude, the implementations and behaviors you receive from Claude may differ from what is shown in these examples. These examples are meant to illustrate patterns and possibilities. Always test skills thoroughly in your own environment before relying on them for critical tasks.

Example Skills

This repository includes a diverse collection of example skills demonstrating different capabilities:

Creative & Design

  • algorithmic-art - Create generative art using p5.js with seeded randomness, flow fields, and particle systems
  • canvas-design - Design beautiful visual art in .png and .pdf formats using design philosophies
  • slack-gif-creator - Create animated GIFs optimized for Slack's size constraints

Development & Technical

  • artifacts-builder - Build complex claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui components
  • mcp-server - Guide for creating high-quality MCP servers to integrate external APIs and services
  • webapp-testing - Test local web applications using Playwright for UI verification and debugging

Enterprise & Communication

  • brand-guidelines - Apply Anthropic's official brand colors and typography to artifacts
  • internal-comms - Write internal communications like status reports, newsletters, and FAQs
  • theme-factory - Style artifacts with 10 pre-set professional themes or generate custom themes on-the-fly

Meta Skills

  • skill-creator - Guide for creating effective skills that extend Claude's capabilities
  • template-skill - A basic template to use as a starting point for new skills

Document Skills

The document-skills/ subdirectory contains skills that Anthropic developed to help Claude create various document file formats. These skills demonstrate advanced patterns for working with complex file formats and binary data:

  • docx - Create, edit, and analyze Word documents with support for tracked changes, comments, formatting preservation, and text extraction
  • pdf - Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms
  • pptx - Create, edit, and analyze PowerPoint presentations with support for layouts, templates, charts, and automated slide generation
  • xlsx - Create, edit, and analyze Excel spreadsheets with support for formulas, formatting, data analysis, and visualization

Important Disclaimer: These document skills are point-in-time snapshots and are not actively maintained or updated. Versions of these skills ship pre-included with Claude. They are primarily intended as reference examples to illustrate how Anthropic approaches developing more complex skills that work with binary file formats and document structures.

Try in Claude Code, Claude.ai, and the API

Claude Code

You can register this repository as a Claude Code Plugin marketplace by running the following command in Claude Code:

/plugin marketplace add anthropics/skills

After installing the plugin, you can use the skill by just mentioning it. For instance, if you install the document-skills plugin from the marketplace, you can ask Claude Code to do something like: "use the pdf skill to extract the form fields from path/to/some-file.pdf"

Claude.ai

These example skills are all already available to paid plans in Claude.ai.

To use any skill from this repository or upload custom skills, follow the instructions in Using skills in Claude.

Claude API

You can use Anthropic's pre-built skills, and upload custom skills, via the Claude API. See the Skills API Quickstart for more.

Creating a Basic Skill

Skills are simple to create - just a folder with a SKILL.md file containing YAML frontmatter and instructions. You can use the template-skill in this repository as a starting point:

---
name: my-skill-name
description: A clear description of what this skill does and when to use it
---

# My Skill Name

[Add your instructions here that Claude will follow when this skill is active]

## Examples
- Example usage 1
- Example usage 2

## Guidelines
- Guideline 1
- Guideline 2

The frontmatter requires only two fields:

  • name - A unique identifier for your skill (lowercase, hyphens for spaces)
  • description - A complete description of what the skill does and when to use it

The markdown content below contains the instructions, examples, and guidelines that Claude will follow. For more details, see How to create custom skills.

Partner Skills

Skills are a great way to teach Claude how to get better at using specific pieces of software. As we see awesome example skills from partners, we may highlight some of them here: