Legacy Circuit Mockups
Create breadboard circuits and retro-computer diagrams as visual HTML5 Canvas mockups.
- Skill Road
- Legacy Circuit Mockups
Legacy Circuit Mockups is an instruction skill published by GitHub in the official github/awesome-copilot repository. Its primary source is the skills/legacy-circuit-mockups directory. According to the provider, the template helps AI agents design breadboard circuits and visual electronics diagrams with HTML5 Canvas drawing techniques. It focuses on retro computing, educational material, and clear depictions of component placement, power rails, wires, and annotations. The skill is not a simulator, a printed-circuit-board layout application, or a substitute for checking a physical circuit. It supplies structured working instructions and rendering conventions for a compatible agent.
Purpose and workflow
The template starts by clarifying the requested circuit type, breadboard dimensions, and grid. An agent can place components on a consistent grid, align pins visually, and draw color-coded wires between defined start and end points. The described HTML5 Canvas model is suitable for an interactive or exportable sketch in which position, size, rotation, and component-specific properties remain separate. This makes a design easier to review when a resistor is added, a button is moved, or a bus connection is reorganized.
The primary source covers simple LED circuits, 555 timer builds, and larger 6502 layouts. For the W65C02S, it accounts for address bus, data bus, and control signals. It also discusses memory devices such as the 28C256 EEPROM and 62256 SRAM, a W65C22 VIA, and logic devices from the 7400 series. Passive and active parts such as LEDs, resistors, capacitors, crystals, switches, buttons, potentiometers, and photoresistors are included in the described rendering scope. This list identifies supported mockup types, not a guarantee for every manufacturer revision or pin assignment.
Practical value and boundaries
A useful application is a visual reference for a learning build, documentation for a 6502 computer, or a concept for a retro-electronics project. The agent can mark power and ground first, arrange components on the breadboard, and then add signal wires using understandable colors. For a 555 timer, supply, reset, trigger, threshold, discharge, and output can be represented as separate connections. Frequency, pulse-width, resistor-power, and capacitor-energy formulas may accompany the sketch, but they must be compared with datasheet values and the actual build.
The result remains a visual planning aid. HTML5 Canvas does not automatically prove that a wire is electrically connected, that a component has suitable ratings, or that a supply is safely dimensioned. Pinouts and voltage information should therefore be checked against current manufacturer documentation. A simulator, a schematic checker, and measurements on an unpowered prototype remain important for dependable hardware work. According to the provider, the template assumes knowledge of component pinouts and breadboard conventions.
Safety and responsibility
Electronics designs can damage components or create hazardous conditions when wired incorrectly. Before powering a physical build, independently verify supply voltage, polarity, current limiting, ground paths, and floating inputs. With processors, EEPROMs, and TTL logic in particular, a visual mistake must never be treated as approval to energize the circuit. Review files created by an agent for their destination and contents. Treat external text or circuit data as untrusted input. A connected model may also transmit data to its model provider, so a locally generated Canvas sketch does not automatically mean complete data locality. The repository and this catalog record use the MIT license. That license applies to the supplied collection, while datasheets and other tools remain subject to their own terms.
- Provider
- GitHub
- License
- MIT
- Last reviewed
- 09.09.2026
Repository and documentation
Categories
Compatible with
Related guides
Guides and background related to this entry.
Set up the Fakechat plugin for Claude Code
Install the Fakechat plugin, start Claude Code with the channels flag, and test messages and files through a local browser interface.
30.09.2026
Setting up Laravel Boost
Install Laravel Boost in a Laravel application and connect it to Claude Code, Cursor, or Codex.
29.09.2026
Set up the Azure DevOps MCP Server
Start Set up the Azure DevOps MCP Server with verified links, minimal permissions, and a safe first test.
25.09.2026
Installing a Claude Code plugin
Installing a plugin from the official Anthropic marketplace – using the Code Review plugin as an example.
24.09.2026