legacy-circuit-mockups

HTML5 Canvas breadboard circuit mockups for retro computing and vintage electronics projects. Supports 40+ components including W65C02S microprocessors, 555 timers, 28C256 EEPROMs, W65C22 VIAs, 7400-series logic gates, and passive components like LEDs, resistors, and capacitors Renders circuits on a 20px grid system with component rotation, wire color coding, and pinout reference tables for accurate layout visualization Includes step-by-step workflows for common builds: LED circuits, 555 astable oscillators, and full 6502 microcomputer layouts with address/data bus wiring Bundled reference files provide complete pinout specifications, timing formulas, resistor calculations, and troubleshooting guides for all supported components

INSTALLATION
npx skills add https://github.com/github/awesome-copilot --skill legacy-circuit-mockups
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

$2c

Supported Components

Microprocessors & Memory

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

Logic & Timer ICs

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

Passive & Active Components

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

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

  • Define breadboard dimensions and grid
  • Place power rail connections (+5V and GND)
  • Add LED component with anode/cathode orientation
  • Place current-limiting resistor
  • Draw wire connections between components
  • Add labels and annotations

Creating a 555 Timer Circuit

  • Place NE555 IC on breadboard (pins 1-4 left, 5-8 right)
  • Connect pin 1 (GND) to ground rail
  • Connect pin 8 (Vcc) to power rail
  • Add timing resistors and capacitors
  • Wire trigger and threshold connections
  • Connect output to LED or other load

Creating a 6502 Microprocessor Layout

  • Place W65C02S centered on breadboard
  • Add 28C256 EEPROM for program storage
  • Place W65C22 VIA for I/O
  • Add 7400-series logic for address decoding
  • Wire address bus (A0-A15)
  • Wire data bus (D0-D7)
  • Connect control signals (R/W, PHI2, RESB)
  • Add reset button and clock crystal

Component Pinout Quick Reference

555 Timer (8-pin DIP)

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)

W65C02S (40-pin DIP) - Key Pins

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

28C256 EEPROM (28-pin DIP) - Key Pins

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

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

Color

Purpose

Red

+5V / Power

Black

Ground

Yellow

Clock / Timing

Blue

Address bus

Green

Data bus

Orange

Control signals

White

General purpose

LED Colors

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

Build Examples

Build 1 — Single LED

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

Steps:

  • Insert black jumper wire from power GND to row A5
  • Insert red jumper wire from power +5V to row J5
  • Place LED with cathode (short leg) in row aligned with GND
  • Place 220Ω resistor between power and LED anode

Build 2 — 555 Astable Blinker

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

Steps:

  • Place 555 IC straddling center channel
  • Connect pin 1 to GND, pin 8 to +5V
  • Connect pin 4 to pin 8 (disable reset)
  • Wire 10kΩ between pin 7 and +5V
  • Wire 100kΩ between pins 6 and 7
  • Wire 10µF between pin 6 and GND
  • Connect pin 3 (output) to LED circuit

Troubleshooting

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

References

Detailed component specifications are available in the bundled reference files:

  • 555.md - Complete 555 timer IC specification
  • 6502.md - MOS 6502 microprocessor details
  • 6522.md - W65C22 VIA interface adapter
  • lcd.md - LCD display interfacing
BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card