AGENTS.md

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

Project overview

This guide covers src/tools/css-filter-generator/index.ts. The tool defines filter defaults, emits only non-default filter functions in a stable order, returns none when all values are defaults, and wraps the result in a filter property declaration.

Primary source files

• src/tools/css-filter-generator/index.ts defines meta, FilterParams, DEFAULTS, buildFilter, and filterCss.
• src/tools/css-filter-generator/index.test.ts covers default none, non-default inclusion, output order, hue rotation, multi-value chains, omitted defaults, sepia, and declaration wrapping.
• src/tools/css-filter-generator/Body.astro owns browser controls and preview.
• src/tools/css-filter-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

• Omit default filter values from buildFilter output.
• Return none when every parameter equals DEFAULTS.
• Keep function order stable: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia.
• Keep unit suffixes on blur and hue-rotate.
• Keep filterCss as a wrapper around buildFilter.
• Do not clamp values in pure logic unless the UI and tests change together.
• When adding a new filter function, add it to defaults, type, order, tests, and UI controls.

Testing

Test default output, each non-default filter, stable ordering, declaration wrapping, unit suffixes, omitted defaults, multiple values, and any newly added filter function.

PR checklist

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