mcpbeat Sign in

Legacy Circuit Mockups Agent Skill

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.

37k tokens
context cost
the whole folder, loaded on every use
21
files
instructions only
1
copies elsewhere
how many repositories repackaged it
37394
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/github/awesome-copilot --skill legacy-circuit-mockups

What comes with it

139 892 bytes besides the instruction
references/28256-eeprom.md
references/555.md
references/6502.md
references/6522.md
references/6C62256.md
references/7400-series.md
references/assembly-compiler.md
references/assembly-language.md
references/basic-electronic-components.md
references/breadboard.md
references/common-breadboard-components.md
references/connecting-electronic-components.md
references/emulator-28256-eeprom.md
references/emulator-6502.md
references/emulator-6522.md
references/emulator-6C62256.md
references/emulator-lcd.md
references/lcd.md
references/minipro.md
references/t48eeprom-programmer.md

The instruction itself

30 sections, as written by the author

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

| 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
  • 28256-eeprom.md - AT28C256 EEPROM specification
  • 6C62256.md - 62256 SRAM details
  • 7400-series.md - TTL logic gate pinouts
  • assembly-compiler.md - Assembly compiler specification
  • assembly-language.md - Assembly language specification
  • basic-electronic-components.md - Resistors, capacitors, switches
  • breadboard.md - Breadboard specifications
  • common-breadboard-components.md - Comprehensive component reference
  • connecting-electronic-components.md - Step-by-step build guides
  • emulator-28256-eeprom.md - Emulating 28256-eeprom specification
  • emulator-6502.md - Emulating 6502 specification
  • emulator-6522.md - Emulating 6522 specification
  • emulator-6C62256.md - Emulating 6C62256 specification
  • emulator-lcd.md - Emulating a LCD specification
  • lcd.md - LCD display interfacing
  • minipro.md - EEPROM programmer usage
  • t48eeprom-programmer.md - T48 programmer reference

Other skills for the same job

different authors, same section of the catalogue
Hyperframes Keyframes
by aiskillstore
×1

> Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.

17k tokens
Anydesign
by uxKero
×1

Analyze images, websites, and Figma files to extract their design and generate a `design.md` with token system, component inventory, and reconstruction notes. Use this skill whenever the user wants to understand, document, replicate, or audit the design of something visual: a screenshot, a URL, a Figma link, a Pinterest reference, a mockup, a competitor's site, a component, a dashboard, a landing page. Also when they ask 'extract the design system from X', 'document the style of Y', 'analyze this visually', 'convert this image into tokens', 'help me replicate this design', 'what palette does this site use', 'how is this built'. Also for single elements: 'copy this navbar', 'recreate this illustration', 'give me a prompt to regenerate this graphic' — element mode outputs a focused element.md, with token-grounded image-model prompts when the element is visual art. If the user brings any visual source and wants to understand it at a design level — this skill should activate.

728k tokens scripts
Brandkit
by lornshrimp
×1

Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.

4k tokens
Imagegen Frontend Mobile
by lornshrimp
×1

Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.

10k tokens
Perf Web Optimization
by christophacham
×1

Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed. Use when site is slow, reducing bundle size, fixing layout shifts, improving Time to Interactive, or optimizing for Lighthouse scores. Triggers on: web performance, bundle size, page speed, slow site, lazy loading. Do NOT use for Core Web Vitals-specific fixes (use core-web-vitals), running Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).

4k tokens
Brandkit
by nexu-io

| Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.

4k tokens
Gsap Performance
by nexu-io

| Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.

1k tokens
Imagegen Frontend Mobile
by nexu-io

| Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.

10k tokens

How to use it

Copy the folder

Take github/legacy-circuit-mockups from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.