跳到正文
cccskills
免费在 GitHub 公开

legacy-circuit-mockups

Create breadboard layout diagrams with HTML5 Canvas to show electronic components and wire connections. Use the skill for LED circuits, 555 timers, and 6502 computer projects, with component references, labels, and color-coded wiring.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

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.

查看安装方法

适用场景

  • Plan component placement for an LED circuit
  • Draw a breadboard layout for a 555 timer
  • Visualize wiring for a 6502 computer
  • Create illustrated teaching materials for electronics

包含的文件(21)

  • SKILL.md9.0 KB
  • references/28256-eeprom.md4.6 KB
  • references/555.md32.3 KB
  • references/6502.md5.7 KB
  • references/6522.md5.7 KB
  • references/6C62256.md4.1 KB
  • references/7400-series.md4.6 KB
  • references/assembly-compiler.md4.7 KB
  • references/assembly-language.md5.2 KB
  • references/basic-electronic-components.md2.7 KB
  • references/breadboard.md4.9 KB
  • references/common-breadboard-components.md6.4 KB
  • references/connecting-electronic-components.md14.9 KB
  • references/emulator-28256-eeprom.md5.1 KB
  • references/emulator-6502.md5.7 KB
  • references/emulator-6522.md6.5 KB
  • references/emulator-6C62256.md4.8 KB
  • references/emulator-lcd.md5.0 KB
  • references/lcd.md5.2 KB
  • references/minipro.md4.0 KB
  • references/t48eeprom-programmer.md4.3 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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

ComponentPinsDescription
W65C02S40-pin DIP8-bit microprocessor with 16-bit address bus
28C25628-pin DIP32KB parallel EEPROM
W65C2240-pin DIPVersatile Interface Adapter (VIA)
6225628-pin DIP32KB static RAM

Logic & Timer ICs

ComponentPinsDescription
NE5558-pin DIPTimer IC for timing and oscillation
740014-pin DIPQuad 2-input NAND gate
740214-pin DIPQuad 2-input NOR gate
740414-pin DIPHex inverter (NOT gate)
740814-pin DIPQuad 2-input AND gate
743214-pin DIPQuad 2-input OR gate

Passive & Active Components

ComponentDescription
LEDLight emitting diode (various colors)
ResistorCurrent limiting (configurable values)
CapacitorFiltering and timing (ceramic/electrolytic)
CrystalClock oscillator
SwitchToggle switch (latching)
ButtonMomentary push button
PotentiometerVariable resistor
PhotoresistorLight-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

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

Creating a 555 Timer Circuit

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

Creating a 6502 Microprocessor Layout

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

Component Pinout Quick Reference

555 Timer (8-pin DIP)

PinNameFunction
1GNDGround (0V)
2TRIGTrigger (< 1/3 Vcc starts timing)
3OUTOutput (source/sink 200mA)
4RESETActive-low reset
5CTRLControl voltage (bypass with 10nF)
6THRThreshold (> 2/3 Vcc resets)
7DISDischarge (open collector)
8VccSupply (+4.5V to +16V)

W65C02S (40-pin DIP) - Key Pins

PinNameFunction
8VDDPower supply
21VSSGround
37PHI2System clock input
40RESBActive-low reset
34RWBRead/Write signal
9-25A0-A15Address bus
26-33D0-D7Data bus

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

PinNameFunction
14GNDGround
28VCCPower supply
20CEChip enable (active-low)
22OEOutput enable (active-low)
27WEWrite enable (active-low)
1-10, 21-26A0-A14Address inputs
11-19I/O0-I/O7Data 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

ColorPurpose
Red+5V / Power
BlackGround
YellowClock / Timing
BlueAddress bus
GreenData bus
OrangeControl signals
WhiteGeneral purpose

LED Colors

ColorForward Voltage
Red1.8V - 2.2V
Green2.0V - 2.2V
Yellow2.0V - 2.2V
Blue3.0V - 3.5V
White3.0V - 3.5V

Build Examples

Build 1 — Single LED

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

Steps:

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

Build 2 — 555 Astable Blinker

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

Steps:

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

Troubleshooting

IssueSolution
LED doesn't lightCheck polarity (anode to +, cathode to -)
Circuit doesn't powerVerify power rail connections
IC not workingCheck VCC and GND pin connections
555 not oscillatingVerify threshold/trigger capacitor wiring
Microprocessor stuckCheck RESB is HIGH after reset pulse

References

Detailed component specifications are available in the bundled reference files:

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Map an existing codebase into seven documents covering its technology, structure, architecture, conventions, integrations, tests, and concerns. Link findings to file evidence, mark unknowns, and highlight differences between stated plans and the actual implementation.

中文简介正在准备中。当前显示英语简介。

  • Get oriented in an unfamiliar codebase
  • Prepare documentation for a project handover
  • Compare documented architecture with implementation
github/awesome-copilot4万2026年10月17日 更新

Assess a repository’s readiness for AI agents with AgentRC and generate a standalone HTML dashboard. Review scores across nine areas, see prioritized improvements, and optionally apply scoring policies tailored to an organization.

中文简介正在准备中。当前显示英语简介。

  • Assessing a repository’s readiness for AI agents
  • Prioritizing improvements from assessment results
  • Reviewing scores under an organization’s own policy
github/awesome-copilot4万2026年10月17日 更新

Generate coding agent instruction files from a project's actual code using AgentRC. Capture detected languages, frameworks, and conventions in one shared file or split rules by topic and project area, with a preview before writing.

中文简介正在准备中。当前显示英语简介。

  • Create project instructions for VS Code Copilot
  • Refresh agent rules after project changes
  • Split monorepo instructions by project area
github/awesome-copilot4万2026年10月17日 更新

Customize AgentRC readiness assessments to match team or organization standards. Choose or create policies that adjust check importance, disable irrelevant checks, set pass thresholds, and define requirements for automated checks in CI workflows.

中文简介正在准备中。当前显示英语简介。

  • Set shared readiness standards across an organization
  • Focus assessments on AI tooling
  • Adjust the importance of individual checks
github/awesome-copilot4万2026年10月17日 更新

Analyze supplied ad performance data to identify wasted spend, strong campaigns, and next tests. Compare channels, assess whether test differences are meaningful, and produce budget reallocation recommendations with a prioritized action plan.

中文简介正在准备中。当前显示英语简介。

  • Identify ads and keywords to pause
  • Find campaigns and audiences worth scaling
  • Assess whether A/B test results are meaningful
github/awesome-copilot4万2026年10月17日 更新

Turn code files into learning resources by adding comments that explain syntax, programming concepts, and design choices. Adjust explanation depth and repetition to the reader’s knowledge while preserving file structure, encoding, and syntax.

中文简介正在准备中。当前显示英语简介。

  • Add beginner-friendly explanations to existing code
  • Document the reasoning behind syntax and design choices
  • Adjust comment depth for readers with different experience
github/awesome-copilot4万2026年10月17日 更新

查看 github 的全部技能

报告此技能的问题