Generate breadboard circuit mockups and visual diagrams using HTML5 Canvas drawing techniques. Use when asked to create circuit layouts, visualize electronic component placements, draw breadboard diagrams, mockup 6502 builds, generate retro computer schematics, or design vintage electronics projects. Supports 555 timers, W65C02S microprocessors, 28C256 EEPROMs, W65C22 VIA chips, 7400-series logic gates, LEDs, resistors, capacitors, switches, buttons, crystals, and wires.
A skill for creating breadboard circuit mockups and visual diagrams for retro computing and electronics projects. This skill leverages HTML5 Canvas drawing mechanisms to render interactive circuit layouts featuring vintage components like the 6502 microprocessor, 555 timer ICs, EEPROMs, and 7400-series logic gates.
| Component | Pins | Description | |-----------|------|-------------| | W65C02S | 40-pin DIP | 8-bit microprocessor with 16-bit address bus | | 28C256 | 28-pin DIP | 32KB parallel EEPROM | | W65C22 | 40-pin DIP | Versatile Interface Adapter (VIA) | | 62256 | 28-pin DIP | 32KB static RAM |
| Component | Pins | Description | |-----------|------|-------------| | NE555 | 8-pin DIP | Timer IC for timing and oscillation | | 7400 | 14-pin DIP | Quad 2-input NAND gate | | 7402 | 14-pin DIP | Quad 2-input NOR gate | | 7404 | 14-pin DIP | Hex inverter (NOT gate) | | 7408 | 14-pin DIP | Quad 2-input AND gate | | 7432 | 14-pin DIP | Quad 2-input OR gate |
| Component | Description | |-----------|-------------| | LED | Light emitting diode (various colors) | | Resistor | Current limiting (configurable values) | | Capacitor | Filtering and timing (ceramic/electrolytic) | | Crystal | Clock oscillator | | Switch | Toggle switch (latching) | | Button | Momentary push button | | Potentiometer | Variable resistor | | Photoresistor | Light-dependent resistor |
// Standard breadboard grid: 20px spacing
const gridSize = 20;
const cellX = Math.floor(x / gridSize) * gridSize;
const cellY = Math.floor(y / gridSize) * gridSize;
// All components follow this structure:
{
type: 'component-type',
x: gridX,
y: gridY,
width: componentWidth,
height: componentHeight,
rotation: 0, // 0, 90, 180, 270
properties: { /* component-specific data */ }
}
// Wire connection format:
{
start: { x: startX, y: startY },
end: { x: endX, y: endY },
color: '#ff0000' // Wire color coding
}
| Pin | Name | Function | |:---:|:-----|:---------| | 1 | GND | Ground (0V) | | 2 | TRIG | Trigger (< 1/3 Vcc starts timing) | | 3 | OUT | Output (source/sink 200mA) | | 4 | RESET | Active-low reset | | 5 | CTRL | Control voltage (bypass with 10nF) | | 6 | THR | Threshold (> 2/3 Vcc resets) | | 7 | DIS | Discharge (open collector) | | 8 | Vcc | Supply (+4.5V to +16V) |
| Pin | Name | Function | |:---:|:-----|:---------| | 8 | VDD | Power supply | | 21 | VSS | Ground | | 37 | PHI2 | System clock input | | 40 | RESB | Active-low reset | | 34 | RWB | Read/Write signal | | 9-25 | A0-A15 | Address bus | | 26-33 | D0-D7 | Data bus |
| Pin | Name | Function | |:---:|:-----|:---------| | 14 | GND | Ground | | 28 | VCC | Power supply | | 20 | CE | Chip enable (active-low) | | 22 | OE | Output enable (active-low) | | 27 | WE | Write enable (active-low) | | 1-10, 21-26 | A0-A14 | Address inputs | | 11-19 | I/O0-I/O7 | Data bus |
Astable Mode:
Monostable Mode:
| Color | Purpose | |-------|---------| | Red | +5V / Power | | Black | Ground | | Yellow | Clock / Timing | | Blue | Address bus | | Green | Data bus | | Orange | Control signals | | White | General purpose |
| Color | Forward Voltage | |-------|-----------------| | Red | 1.8V - 2.2V | | Green | 2.0V - 2.2V | | Yellow | 2.0V - 2.2V | | Blue | 3.0V - 3.5V | | White | 3.0V - 3.5V |
Components: Red LED, 220Ω resistor, jumper wires, power source
Steps:
Components: NE555, LED, resistors (10kΩ, 100kΩ), capacitor (10µF)
Steps:
| Issue | Solution | |-------|----------| | LED doesn't light | Check polarity (anode to +, cathode to -) | | Circuit doesn't power | Verify power rail connections | | IC not working | Check VCC and GND pin connections | | 555 not oscillating | Verify threshold/trigger capacitor wiring | | Microprocessor stuck | Check RESB is HIGH after reset pulse |
Detailed component specifications are available in the bundled reference files:
Copy a source-pinned command for your client. You run it yourself.
Destination: .claude/skills/legacy-circuit-mockups · pinned to the source commit
# Run from your project root
git clone https://github.com/github/awesome-copilot.git .skillboard-tmp
git -C .skillboard-tmp checkout f11a4e441c5ff061b4f8ae37952be8c602e4034e
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/legacy-circuit-mockups" ".claude/skills/"
rm -rf .skillboard-tmpReview the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.
sudo apt update && sudo apt install -y gitnpm install -g @anthropic-ai/claude-code# Run from your project root
git clone https://github.com/github/awesome-copilot.git .skillboard-tmp
git -C .skillboard-tmp checkout f11a4e441c5ff061b4f8ae37952be8c602e4034e
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/legacy-circuit-mockups" ".claude/skills/"
rm -rf .skillboard-tmpDestination: .claude/skills/legacy-circuit-mockups
Scanner static-checks@0.1.0 · commit f11a4e441c5f. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.
No static rules matched. This is not a safety guarantee.