Generated banner for Legacy Circuit Mockups
Generated logo for Legacy Circuit Mockups

Legacy Circuit Mockups

GitHubOfficialFirst committed by jhaugaDistributed by GitHub

  • Skill
  • Content generator
  • Design and creative
  • MIT
  • No issues found

From the author

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.
— the description by jhauga

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

Legacy Circuit Mockups is a specialized tool for creating visual representations of electronic circuits. It uses HTML5 Canvas to render breadboard layouts, making it ideal for documenting retro computing builds like 6502 systems, 555 timer circuits, and various logic gate configurations. The skill provides a structured approach to component placement, wiring, and labeling, ensuring that complex electronics projects can be visualized clearly for educational or documentation purposes.

What it does

  • Generates breadboard circuit mockups using HTML5 Canvas.
  • Supports a wide range of vintage components including 6502 microprocessors, 555 timers, and 7400-series logic.
  • Provides a grid-based system for precise component placement.
  • Allows for the visualization of wire connections with color-coded conventions.
  • Includes reference data for component pinouts and electrical formulas.
  • Facilitates the creation of educational visuals for electronics and retro computing.

When to use it

  • When you need to create a visual breadboard layout for a circuit design.
  • When documenting 6502 microprocessor or retro computer builds.
  • When you need to visualize component placement and wiring for educational purposes.
  • When designing or troubleshooting 555 timer or logic gate circuits.
  • When you require a clear diagram to explain electronic connections.

Advantages

  • Standardizes circuit visualization using a consistent grid system.
  • Simplifies the documentation of complex retro computing hardware.
  • Provides built-in support for common vintage ICs and passive components.
  • Enables clear communication of wiring and pinout configurations.
  • Reduces ambiguity in circuit assembly through visual guides.

Usage examples

“Create a breadboard mockup for a 555 timer astable blinker circuit.”
The agent generates a visual diagram showing the 555 timer IC, resistors, capacitor, and LED correctly wired on a breadboard grid.
“Show me how to wire a W65C02S microprocessor on a breadboard.”
The agent produces a layout diagram illustrating the placement of the CPU, power connections, and essential address/data bus wiring.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/github/legacy-circuit-mockups/download
  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip legacy-circuit-mockups.zip -d .agents/skills

Documentation by jhauga

Legacy Circuit Mockups

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.

When to Use This Skill

  • User asks to "create a breadboard layout" or "mockup a circuit"

  • User wants to visualize component placement on a breadboard

  • User needs a visual reference for building a 6502 computer

  • User asks to "draw a circuit" or "diagram electronics"

  • User wants to create educational electronics visuals

  • User mentions Ben Eater tutorials or retro computing projects

  • User asks to mockup 555 timer circuits or LED projects

  • User needs to visualize wire connections between components

Prerequisites

  • Understanding of component pinouts from bundled reference files

  • Knowledge of breadboard layout conventions (rows, columns, power rails)

Supported Components

Microprocessors & Memory
ComponentPinsDescription
W65C02S40-pin DIP8-bit microprocessor with 16-bit address bus
28C25628-pin DIP32KB parallel EEPROM
W65C2240-pin DIPVersatile Interface Adapter (VIA)
6225628-pin DIP32KB static RAM
Logic & Timer ICs
ComponentPinsDescription
NE5558-pin DIPTimer IC for timing and oscillation
740014-pin DIPQuad 2-input NAND gate
740214-pin DIPQuad 2-input NOR gate
740414-pin DIPHex inverter (NOT gate)
740814-pin DIPQuad 2-input AND gate
743214-pin DIPQuad 2-input OR gate
Passive & Active Components
ComponentDescription
LEDLight emitting diode (various colors)
ResistorCurrent limiting (configurable values)
CapacitorFiltering and timing (ceramic/electrolytic)
CrystalClock oscillator
SwitchToggle switch (latching)
ButtonMomentary push button
PotentiometerVariable resistor
PhotoresistorLight-dependent resistor
Grid System
// Standard breadboard grid: 20px spacing
const gridSize = 20;
const cellX = Math.floor(x / gridSize) * gridSize;
const cellY = Math.floor(y / gridSize) * gridSize;
Component Rendering Pattern
// 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 Connections
// Wire connection format:
{
  start: { x: startX, y: startY },
  end: { x: endX, y: endY },
  color: '#ff0000'  // Wire color coding
}

Step-by-Step Workflows

Creating a Basic LED Circuit Mockup
  1. Define breadboard dimensions and grid

  2. Place power rail connections (+5V and GND)

  3. Add LED component with anode/cathode orientation

  4. Place current-limiting resistor

  5. Draw wire connections between components

  6. Add labels and annotations

Creating a 555 Timer Circuit
  1. Place NE555 IC on breadboard (pins 1-4 left, 5-8 right)

  2. Connect pin 1 (GND) to ground rail

  3. Connect pin 8 (Vcc) to power rail

  4. Add timing resistors and capacitors

  5. Wire trigger and threshold connections

  6. Connect output to LED or other load

Creating a 6502 Microprocessor Layout
  1. Place W65C02S centered on breadboard

  2. Add 28C256 EEPROM for program storage

  3. Place W65C22 VIA for I/O

  4. Add 7400-series logic for address decoding

  5. Wire address bus (A0-A15)

  6. Wire data bus (D0-D7)

  7. Connect control signals (R/W, PHI2, RESB)

  8. Add reset button and clock crystal

Component Pinout Quick Reference

555 Timer (8-pin DIP)
PinNameFunction
1GNDGround (0V)
2TRIGTrigger (< 1/3 Vcc starts timing)
3OUTOutput (source/sink 200mA)
4RESETActive-low reset
5CTRLControl voltage (bypass with 10nF)
6THRThreshold (> 2/3 Vcc resets)
7DISDischarge (open collector)
8VccSupply (+4.5V to +16V)
W65C02S (40-pin DIP) - Key Pins
PinNameFunction
8VDDPower supply
21VSSGround
37PHI2System clock input
40RESBActive-low reset
34RWBRead/Write signal
9-25A0-A15Address bus
26-33D0-D7Data bus
28C256 EEPROM (28-pin DIP) - Key Pins
PinNameFunction
14GNDGround
28VCCPower supply
20CEChip enable (active-low)
22OEOutput enable (active-low)
27WEWrite enable (active-low)
1-10, 21-26A0-A14Address inputs
11-19I/O0-I/O7Data bus

Formulas Reference

Resistor Calculations
  • Ohm's Law: V = I × R

  • LED Current: R = (Vcc - Vled) / Iled

  • Power: P = V × I = I² × R

555 Timer Formulas

Astable Mode:

  • Frequency: f = 1.44 / ((R1 + 2×R2) × C)

  • High time: t₁ = 0.693 × (R1 + R2) × C

  • Low time: t₂ = 0.693 × R2 × C

  • Duty cycle: D = (R1 + R2) / (R1 + 2×R2) × 100%

Monostable Mode:

  • Pulse width: T = 1.1 × R × C

Capacitor Calculations
  • Capacitive reactance: Xc = 1 / (2πfC)

  • Energy stored: E = ½ × C × V²

Color Coding Conventions

Wire Colors
ColorPurpose
Red+5V / Power
BlackGround
YellowClock / Timing
BlueAddress bus
GreenData bus
OrangeControl signals
WhiteGeneral purpose
LED Colors
ColorForward Voltage
Red1.8V - 2.2V
Green2.0V - 2.2V
Yellow2.0V - 2.2V
Blue3.0V - 3.5V
White3.0V - 3.5V

Build Examples

Build 1 — Single LED

Components: Red LED, 220Ω resistor, jumper wires, power source

Steps:

  1. Insert black jumper wire from power GND to row A5

  2. Insert red jumper wire from power +5V to row J5

  3. Place LED with cathode (short leg) in row aligned with GND

  4. Place 220Ω resistor between power and LED anode

Build 2 — 555 Astable Blinker

Components: NE555, LED, resistors (10kΩ, 100kΩ), capacitor (10µF)

Steps:

  1. Place 555 IC straddling center channel

  2. Connect pin 1 to GND, pin 8 to +5V

  3. Connect pin 4 to pin 8 (disable reset)

  4. Wire 10kΩ between pin 7 and +5V

  5. Wire 100kΩ between pins 6 and 7

  6. Wire 10µF between pin 6 and GND

  7. Connect pin 3 (output) to LED circuit

Troubleshooting

IssueSolution
LED doesn't lightCheck polarity (anode to +, cathode to -)
Circuit doesn't powerVerify power rail connections
IC not workingCheck VCC and GND pin connections
555 not oscillatingVerify threshold/trigger capacitor wiring
Microprocessor stuckCheck RESB is HIGH after reset pulse

References

Detailed component specifications are available in the bundled reference files:

Files

references/connecting-electronic-components.md

Connecting Electronic Components

This guide provides step-by-step instructions for building electronic circuits on a breadboard. Each build progressively introduces new components and concepts.


Basic Component Build Instructions

Build 1 — Single LED

Components: Red LED, black jumper wire, red jumper wire, battery with holder

Steps:

  1. Insert the black jumper wire into the breadboard from A5 to A14.

  2. Insert the red jumper wire into the breadboard from J5 to J14.

  3. Place the red LED into row 14 with the positive leg (the longer of the two legs) on the right side, aligned with the red wire, and the negative leg on the left, aligned with the black wire.

  4. Insert the battery into its holder and place it in the breadboard, connecting negative to black and positive to red.

Result: When you insert the battery, the LED will light up.

Troubleshooting:

  • Is your LED inserted backwards?

  • Are the jumper wires in the same row as the LED leads?

  • Are the jumper wires in the same row as the battery terminals?


Build 2 — Single Push Button

Components: Red LED, push button, black jumper wire, red jumper wire, battery with holder

Steps:

  1. Insert the black jumper wire into the breadboard from A5 to A16.

  2. Insert the red jumper wire into the breadboard from J5 to J12.

  3. Place the red LED into the breadboard with the positive leg (the longer of the two legs) inserted into H15 and the negative leg into G17.

  4. Place the push button horizontally in the middle of the breadboard so the bottom-left pin is on row 16 (aligned with the black jumper wire) and the top-right pin is on row 14 (aligned with the negative leg of the red LED).

  5. Insert the battery into its holder and place it in the breadboard, connecting negative to black and positive to red.

Result: When you press the push button, the LED will light up.

Troubleshooting:

  • Is your LED inserted backwards?

  • Are the jumper wires in the same row as the LED leads?

  • Are the jumper wires in the same row as the battery terminals?


Build 3 — Photoresistor-Dimmed LED

Components: Green LED, photoresistor, black jumper wire, red jumper wire, battery with holder

Steps:

  1. Insert the black jumper wire into the breadboard from A5 to A12.

  2. Insert the red jumper wire into the breadboard from J5 to J13.

  3. Place the green LED into the breadboard with the positive leg (the longer of the two legs) inserted into F13 and the negative leg into E13.

  4. Insert the photoresistor into the breadboard from C12 to D13.

  5. Insert the battery into its holder and place it in the breadboard, connecting negative to black and positive to red.

Result: When you insert the battery, the LED will light up. Covering the photoresistor will cause the LED to dim.


Build 4 — Double LED Push Button

Components: Red LED, green LED, 220Ω resistor, push button, black jumper wire, red jumper wire, battery with holder

Steps:

  1. Insert the black jumper wire into the breadboard from A5 to A11.

  2. Insert the red jumper wire into the breadboard from J5 to J11.

  3. Insert the 220Ω resistor into the breadboard from I11 to I15.

  4. Place the push button horizontally in the middle of the breadboard so the top pins are on row 15 and on opposite sides of the breadboard.

  5. Place the red LED into the breadboard with the positive leg (the longer of the two legs) inserted into C17 and the negative leg into B11.

  6. Place the green LED into the breadboard with the positive leg inserted into G15 and the negative leg into E11.

  7. Insert the battery into its holder and place it in the breadboard, connecting negative to black and positive to red.

Result: When you insert the battery, the green LED will light up. When you press the push button, the green LED will turn off and the red LED will light up.

Build 5 - Photoresistor Blinking LEDs
  • Insert the black jumper wire into the breadboard from A3 to A12.

  • Insert the red jumper wire into the breadboard from J3 to J12.

  • Place the 555 integrated circuit chip into the middle of the breadboard with the top pins on row 12.

  • Insert a jumper wire into the breadboard connecting D15 to G12.

  • Insert a jumper wire into the breadboard connecting D13 to G14.

  • Insert the 1000Ω resistor into the breadboard from C14 to H17.

  • Insert the photoresistor into the breadboard from B14 to B15.

  • Insert the capacitor into the breadboard from A13 to B12.

  • Place the green LED into the breadboard with the positive leg (longer of the two legs) inserted into F17 and the negative leg into C12.

  • Place the red LED into the breadboard with the positive leg inserted into I12 and the negative leg into J17.

  • Insert the battery into its battery holder and place it in the breadboard, connecting negative to black and positive to red.

When you insert the battery, both LED’s will begin rapidly blinking. Covering the photoresistor from light will slow the LEDs blinking frequency.


555 Timer IC Reference

The 555 timer is a versatile integrated circuit used in timing, pulse generation, and oscillator applications. The following sections provide pinout information and internal circuit details.

555 Pinout Diagram
    ┌─────────────────────────────────────┐
    │  ●                                  │
    │  #1                             #8  │
    │  ┌──┐                         ┌──┐  │
    │  │  │                         │  │  │
    │  └──┘                         └──┘  │
    │  #2                             #7  │
    │  ┌──┐       555 TIMER         ┌──┐  │
    │  │  │                         │  │  │
    │  └──┘                         └──┘  │
    │  #3                             #6  │
    │  ┌──┐                         ┌──┐  │
    │  │  │                         │  │  │
    │  └──┘                         └──┘  │
    │  #4                             #5  │
    │  ┌──┐                         ┌──┐  │
    │  │  │                         │  │  │
    │  └──┘                         └──┘  │
    └─────────────────────────────────────┘
555 Pin Descriptions
PinSymbolFunction
1GNDGround reference (0V)
2TRIGTrigger input — starts timing cycle when voltage drops below ⅓ Vcc
3OUTOutput — provides high or low signal
4RESETReset input (active low) — forces output low when grounded
5CONTControl voltage — provides access to internal voltage divider (⅔ Vcc)
6THRESThreshold input — ends timing cycle when voltage exceeds ⅔ Vcc
7DISCHDischarge — open collector output for discharging timing capacitor
8VccSupply voltage (+4.5V to +16V)
555 Internal Block Diagram
flowchart TB
    subgraph IC["555 Timer IC"]
        direction TB

        subgraph DIVIDER["Voltage Divider"]
            R1["R (5kΩ)"]
            R2["R (5kΩ)"]
            R3["R (5kΩ)"]
            R1 --- R2 --- R3
        end

        COMP1["Comparator 1<br/>(Threshold)"]
        COMP2["Comparator 2<br/>(Trigger)"]
        FF["Flip-Flop<br/>S-R"]
        OUT_STAGE["Output<br/>Stage"]
        DISCH_TR["Discharge<br/>Transistor"]
        VREF["Vref"]
    end

    PIN8["Pin 8<br/>Vcc"] --> R1
    R3 --> PIN1["Pin 1<br/>GND"]

    R1 -.->|"2/3 Vcc"| COMP1
    R2 -.->|"1/3 Vcc"| COMP2

    PIN6["Pin 6<br/>Threshold"] --> COMP1
    PIN2["Pin 2<br/>Trigger"] --> COMP2

    COMP1 -->|R| FF
    COMP2 -->|S| FF

    FF --> OUT_STAGE
    FF --> DISCH_TR

    OUT_STAGE --> PIN3["Pin 3<br/>Output"]
    DISCH_TR --> PIN7["Pin 7<br/>Discharge"]

    PIN4["Pin 4<br/>Reset"] --> FF
    PIN5["Pin 5<br/>Control Voltage"] -.-> R2

    style PIN1 fill:#000,color:#fff
    style PIN2 fill:#f96,color:#000
    style PIN3 fill:#6f6,color:#000
    style PIN4 fill:#f66,color:#000
    style PIN5 fill:#ff6,color:#000
    style PIN6 fill:#6ff,color:#000
    style PIN7 fill:#f6f,color:#000
    style PIN8 fill:#f00,color:#fff

Build 6 — Push Button Buzzer

Components: 555 timer IC, piezo speaker, 220Ω resistor, 1000Ω resistor, capacitor, push button, jumper wires, battery with holder

Steps:

  1. Insert the black jumper wire into the breadboard from A1 to A11.

  2. Insert the red jumper wire into the breadboard from J1 to J11.

  3. Place the 555 integrated circuit chip into the middle of the breadboard with the top pins on row 11.

  4. Insert a jumper wire into the breadboard connecting D12 to G13.

  5. Insert a jumper wire into the breadboard connecting D14 to G11.

  6. Insert the capacitor into the breadboard from A12 to B11.

  7. Insert the 220Ω resistor into the breadboard from C12 to C13.

  8. Place the push button horizontally in the middle of the breadboard so the top pins are on row 15 and on opposite sides of the breadboard.

  9. Insert the piezo speaker into the breadboard with the positive pin in A9 and the negative pin in A6.

  10. Insert the 1000Ω resistor into the breadboard from E6 to A13.

  11. Insert a jumper wire into the breadboard connecting C9 to D15.

  12. Insert a jumper wire into the breadboard connecting G17 to I11.

  13. Insert the battery into its holder and place it in the breadboard, connecting negative to black and positive to red.

Result: When you press the push button, the buzzer will sound.


Build 7 — Photoresistor Theremin

Components: 555 timer IC, piezo speaker, photoresistor, 1000Ω resistor, capacitor, push button, jumper wires, battery with holder

Steps:

  1. Insert the black jumper wire into the breadboard from A1 to A11.

  2. Insert the red jumper wire into the breadboard from J1 to J11.

  3. Place the 555 integrated circuit chip into the middle of the breadboard with the top pins on row 11.

  4. Insert a jumper wire into the breadboard connecting D12 to G13.

  5. Insert a jumper wire into the breadboard connecting D14 to G11.

  6. Insert the capacitor into the breadboard from A12 to B11.

  7. Insert the photoresistor into the breadboard from C12 to C13.

  8. Place the push button horizontally in the middle of the breadboard so the top pins are on row 15 and on opposite sides of the breadboard.

  9. Insert the piezo speaker into the breadboard with the positive pin in A9 and the negative pin in A6.

  10. Insert the 1000Ω resistor into the breadboard from E6 to A13.

  11. Insert a jumper wire into the breadboard connecting C9 to D15.

  12. Insert a jumper wire into the breadboard connecting G17 to I11.

  13. Insert the battery into its holder and place it in the breadboard, connecting negative to black and positive to red.

Result: When you press the push button, the buzzer will sound. Covering the photoresistor will change the pitch of the buzzer.


Build 8 — Potentiometer-Dimmed LED

Components: Green LED, potentiometer, 220Ω resistor, black jumper wire, red jumper wire, battery with holder

Steps:

  1. Insert the black jumper wire into the breadboard from A1 to A13.

  2. Insert the red jumper wire into the breadboard from J1 to J9.

  3. Place the potentiometer with the two-pin side on the left, top pin in E13 and bottom pin in E15.

  4. Insert the 220Ω resistor into the breadboard from H9 to H14.

  5. Place the green LED into the breadboard with the positive leg (the longer of the two legs) inserted into C15 and the negative leg in B13.

  6. Insert the battery into its holder and place it in the breadboard, connecting negative to black and positive to red.

Result: When you insert the battery, the LED will turn on. Rotating the potentiometer will increase or decrease the brightness of the LED.


Build 9 — Push Button RGB LED

Components: RGB LED (common cathode), three push buttons, two 220Ω resistors, black jumper wire, red jumper wire, jumper wires, battery with holder

Steps:

  1. Insert the black jumper wire into the breadboard from A1 to B7.

  2. Insert the red jumper wire into the breadboard from J1 to J7.

  3. Insert the RGB LED into the breadboard from A4 to A8. The longest of the four legs is the ground and should be in A7.

  4. Place three push buttons horizontally in the middle of the breadboard with pins at:

    • Button 1: E9–F9 and E11–F11

    • Button 2: E12–F12 and E14–F14

    • Button 3: E15–F15 and E17–F17

  5. Insert a jumper wire into the breadboard connecting C5 to D9.

  6. Insert a jumper wire into the breadboard connecting C6 to C12.

  7. Insert a jumper wire into the breadboard connecting B8 to B15.

  8. Insert the first 220Ω resistor into the breadboard from G7 to G11.

  9. Insert the second 220Ω resistor into the breadboard from H7 to H14.

  10. Insert the battery into its holder and place it in the breadboard, connecting negative to black and positive to red.

Result: Pressing each push button will activate a different color channel of the RGB LED.


Build 10 — Potentiometer-Controlled Buzzer

Components: 555 timer IC, piezo speaker, potentiometer, 220Ω resistor, capacitor, push button, jumper wires, battery with holder

Steps:

  1. Insert the black jumper wire into the breadboard from A1 to A11.

  2. Insert the red jumper wire into the breadboard from J1 to J11.

  3. Place the 555 integrated circuit chip into the middle of the breadboard with the top pins on row 11.

  4. Insert a jumper wire into the breadboard connecting D12 to G13.

  5. Insert a jumper wire into the breadboard connecting D14 to G11.

  6. Insert the capacitor into the breadboard from A12 to B11.

  7. Insert the piezo speaker into the breadboard from A6 to A9 (place the positive end on the bottom).

  8. Place the push button horizontally in the middle of the breadboard so the top pins are in E15 and F15.

  9. Insert the 220Ω resistor into the breadboard from E6 to A13.

  10. Insert a jumper wire into the breadboard connecting E9 to D15.

  11. Insert a jumper wire into the breadboard connecting G17 to I11.

  12. Place the potentiometer with the two-pin side on the right, top pin in F7 and bottom pin in F9.

  13. Insert a jumper wire into the breadboard connecting D8 to B13.

  14. Insert a jumper wire into the breadboard connecting H7 to C12.

  15. Insert a jumper wire into the breadboard connecting H9 to D11.

  16. Insert the battery into its holder and place it in the breadboard, connecting negative to black and positive to red.

Result: Pressing the push button will cause the buzzer to sound. Rotating the potentiometer will alter the pitch of the buzzer.

Requirements and compatibility

Written for: GitHub Copilot

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

First committed by
GitHub avatar of jhaugajhauga
Publisher
GitHub (Official)
Distributed by
GitHub
Source
github/awesome-copilot · skills/legacy-circuit-mockups · commit 797337f
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced
Contributors
jhauga, stbenjam

AutoGineer is not affiliated with or endorsed by jhauga or GitHub.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download legacy-circuit-mockups.zip