AlexandrAI AGENTS.md
agents-md

AlexandrAI Tools Image Color Picker Agent Guide

Agent guide for image pixel sampling and RGB-to-hex formatting.

AGENTS.md

Guidance for coding agents working on AlexandrAI Tools Image Color Picker in the alexandrai-tools project.

Project overview

This guide covers src/tools/image-color-picker. rgbToHex converts numeric RGB channels to a lowercase hex string with two hex digits per channel. Body.astro reads images with FileReader, draws them to canvas, samples the clicked pixel with getImageData, and displays RGB plus hex values.

Primary source files

  • src/tools/image-color-picker/index.ts defines meta and rgbToHex.
  • src/tools/image-color-picker/index.test.ts covers red, green, blue, black, white, mid-gray, and single-digit padding.
  • src/tools/image-color-picker/Body.astro owns image loading, canvas click handling, pixel sampling, and result display.
  • src/tools/image-color-picker/i18n.ts owns localized labels.
  • src/lib/tools.ts registers the tool metadata.

Setup commands

npm install npm test npm run typecheck npm run build npm run dev

Change rules

  • Output hex strings in lowercase.
  • Pad every RGB channel to two hex digits.
  • Keep channel clamping, if needed, at the UI or helper boundary with tests.
  • Read image files locally with FileReader.
  • Sample one pixel with getImageData at click coordinates.
  • Display RGB and hex from the same sampled pixel.
  • Do not upload image files.

Testing

Test RGB primary colors, black, white, gray, padding, out-of-range UI guards if added, click coordinate mapping, high-DPI canvas behavior, and copied color output.

PR checklist

  • npm test passes for image-color-picker.
  • Pure helper behavior and browser UI behavior are aligned.
  • Generated CSS, Markdown, JSON, or image output remains browser-local.
  • Invalid input, copy behavior, and privacy expectations are covered.