Skip to content
Back to skills

577 Microsim Add Icons A110cd10

ASecurity

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.

  • 9 stars
  • 0 votes
  • 0 copies
  • 0 views
  • Added October 11, 2026
developmentjavascriptjava

Works with

  • cli

Security analysis

A100/100

Scanned October 11, 2026

npx -y skills add tools-only/X-Skills --skill 577-microsim-add-icons_a110cd10 --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of 577 Microsim Add Icons A110cd10?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for 577 Microsim Add Icons A110cd10
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/tools-only-577-microsim-add-icons-a110cd10/badge)](https://www.skillsdirectory.com/skills/tools-only-577-microsim-add-icons-a110cd10)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

SKILL.md
# 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.

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.