AlexandrAI AGENTS.md
agents-md

AlexandrAI Tools CSS Gradient Generator Agent Guide

Agent guide for linear and radial gradient string assembly.

AGENTS.md

Guidance for coding agents working on AlexandrAI Tools CSS Gradient Generator in the alexandrai-tools project.

Project overview

This guide covers src/tools/css-gradient-generator/index.ts. The tool builds CSS gradient value strings from color stops, optional percentage positions, linear angle, and gradient type, then wraps non-empty gradients in a background property declaration.

Primary source files

  • src/tools/css-gradient-generator/index.ts defines meta, GradientType, GradientStop, buildGradient, and gradientCss.
  • src/tools/css-gradient-generator/index.test.ts covers explicit positions, implicit positions, radial gradients, three stops, empty stops, single stops, and background property wrapping.
  • src/tools/css-gradient-generator/Body.astro owns browser controls.
  • src/tools/css-gradient-generator/i18n.ts owns localized copy.
  • src/lib/tools.ts registers metadata.

Setup commands

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

Change rules

  • Return an empty string for zero stops.
  • Preserve provided color strings without validation unless a validator is added.
  • Include position suffix only when position is defined.
  • Use angle only for linear gradients.
  • Use circle radial gradients for radial mode.
  • Keep gradientCss as a thin wrapper around buildGradient.
  • If stop sorting or clamping is added, update behavior and tests together.

Testing

Test linear gradients, radial gradients, explicit positions, omitted positions, angle changes, empty stops, single stop, multiple stops, invalid stop behavior if validation is added, and CSS property wrapping.

PR checklist

  • npm test passes for css-gradient-generator.
  • Pure string or color logic stays independent from DOM preview code.
  • Generated CSS remains copy-ready.
  • Browser-local behavior is preserved.