Skills
.Work. You
Rest

microsim-add-icons

Community

Add license and fullscreen icons to MicroSims.

Software Engineering#p5.js#UI#interactive#icons#microsim
Authordmccreary
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill adds clickable Creative Commons license and fullscreen icons to the control region of an existing p5.js MicroSim. The icons appear in the lower right corner and use distance-based click detection, enabling quick access to licensing and fullscreen features without cluttering the interface.

Core Features & Use Cases

  • Icon integration: Adds Creative Commons and fullscreen icons to an existing MicroSim.
  • UI consistency: Keeps a compact footprint (~40 lines of code) while enhancing usability.
  • Deterministic placement: Icons are positioned for predictable behavior across simulations.

Quick Start

  • Identify the target MicroSim JavaScript file (p5.js pattern with setup/draw/windowResized).
  • Insert icon variables and the drawIcons() function as described.
  • Call drawIcons() within draw(), and implement mousePressed() to handle clicks.

Dependency Matrix

Required Modules

None required

Components

assets

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: microsim-add-icons
Download link: https://github.com/dmccreary/claude-skills/archive/main.zip#microsim-add-icons

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.