# 577 Microsim Add Icons A110cd10

> MicroSim Add Icons

- Skill: `tools-only/577-microsim-add-icons-a110cd10` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add tools-only/577-microsim-add-icons-a110cd10`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tools-only/577-microsim-add-icons-a110cd10/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tools-only (https://skillmd.com/u/tools-only)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/tools-only/577-microsim-add-icons-a110cd10

---

# MicroSim Add Icons

The microsim-add-icons skill adds clickable Creative Commons license and fullscreen
navigation icons to the control region of an existing p5.js MicroSim. The icons
appear in the lower right corner using distance-based click detection.

## Key Capabilities

This skill enhances MicroSims with:

- **Creative Commons Icon**: Links to license information
- **Fullscreen Icon**: Enables fullscreen viewing mode
- **Distance-based Click Detection**: Responsive icon interaction
- **Consistent Positioning**: Lower right corner placement

## When to Use

Use this skill when:

- Adding license information access to a MicroSim
- Enabling fullscreen mode via an icon
- Enhancing a MicroSim with clickable UI elements
- Following the icons demo pattern from the MicroSims repository
- Standardizing icon behavior across multiple MicroSims

## What Gets Added

The skill adds approximately 40 lines of code including:

1. **Icon Variables**: Position and size declarations
2. **Draw Functions**: Icon rendering in the draw loop
3. **Click Handler**: `mousePressed()` function for icon interaction
4. **Position Updates**: Icon repositioning in `windowResized()`

## Prerequisites

The target file should be a p5.js MicroSim following the standard pattern with:

- Global variables section
- `setup()` function
- `draw()` function
- `windowResized()` function

## Workflow

1. Identify the target MicroSim JavaScript file
2. Read the existing file to understand its structure
3. Add icon variables to the global section
4. Add icon drawing code to the `draw()` function
5. Add or update the `mousePressed()` function
6. Update icon positions in `windowResized()`

## Icon Appearance

The icons use simple geometric shapes:

- **CC Icon**: Circle with "CC" text
- **Fullscreen Icon**: Four corner brackets

Both icons change appearance on hover to indicate interactivity.

## Integration

This skill is typically used after a MicroSim is functionally complete
to add polish and standard navigation elements before publication.