Breadboard circuit mockups via HTML5 Canvas. Use when creating circuit layouts, visualizing 6502/retro electronics components, drawing breadboard diagrams, or designing vintage computer schematics with discrete parts.
.github/skills/C:/Users/LOQ/.codex/skills/ for Codex or C:/Users/LOQ/.agents/skills/ for the shared mirrorA 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:
This skill is written to stay usable across GitHub Copilot, Claude Code, Codex, and Gemini CLI.
$CODEX_HOME/skills/<skill-name> and restart Codex after major changes./skills:legacy-circuit-mockups from this skill. Rebuild commands with python scripts/export-gemini-skill.py legacy-circuit-mockups and then run /commands reload inside Gemini CLI.No dedicated MCP server is required for the normal workflow in this skill.
| Skill | Relationship |
|---|---|
| canvas-design | Canvas drawing techniques and visual design |
| excalidraw-diagram-generator | Alternative diagram generation approach |