legacy-circuit-mockups_skill

Overview

This skill generates breadboard circuit mockups and visual diagrams using HTML5 Canvas drawing techniques. It renders vintage components, wire color coding, and grid-aligned placements to produce clear, buildable layouts for retro computing and electronics projects. Use it to quickly visualize component placement, wiring, and basic annotations before physically prototyping.

How this skill works

The skill maps components to a standard breadboard grid and renders each part as a canvas object with position, size, rotation, and properties. Wires are drawn between anchor coordinates with selectable colors and routing; power rails, labels, and pinout overlays are included. It supports common DIP ICs, passive components, and bus coloring conventions so layouts match conventional electronics practices.

When to use it

• You need a visual breadboard layout before wiring a physical prototype
• Designing or documenting a 6502-based retro computer or similar vintage build
• Mocking up 555 timer circuits, LED blinkers, or simple TTL logic layouts
• Teaching electronics with clear, grid-aligned diagrams and pin labels
• Creating reference diagrams for addressing, data buses, and control signals

Best practices

• Align components to the grid (20px spacing) for consistent wiring and readable diagrams
• Use standard wire color coding (red=Vcc, black=GND, blue=address, green=data) to avoid confusion
• Place power rails and ground rails first, then add ICs and passive parts to minimize crossing wires
• Annotate pin names and key signals (RESB, PHI2, R/W) for microprocessor layouts
• Group related components (decoupling caps, pull-ups) close to their IC pins for realistic builds

Example use cases

• Generate a breadboard mockup for a single-LED circuit with resistor and power rails
• Visualize a NE555 astable blinker showing resistor/capacitor placement and output wiring
• Layout a W65C02S microprocessor with 28C256 EEPROM, VIA, and address decoding gates
• Produce educational diagrams for Ben Eater-style tutorials and retro computer workshops
• Create color-coded bus routing for address and data lines to aid debugging