From 653e68aae168bd51917815e6188297d3e3a7005d Mon Sep 17 00:00:00 2001 From: maebeale Date: Sat, 7 Mar 2026 06:13:45 -0500 Subject: [PATCH 1/7] Add Stimulus and Tailwind preferences to AI instruction files AI agents should always use Stimulus over raw JS and Tailwind over custom CSS. Added to CLAUDE.md, AGENTS.md, and copilot-instructions.md so all AI tools follow the same frontend conventions. --- .github/copilot-instructions.md | 7 +++++++ AGENTS.md | 6 ++++++ CLAUDE.md | 5 +++-- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 33a2a88fd..21bf48894 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -1,5 +1,12 @@ # This project is a Ruby on Rails application. +# Frontend requirements: +- Always use Stimulus for JavaScript behavior — do not write raw/inline JS or jQuery +- Always use Tailwind CSS utility classes for styling — do not write custom CSS unless absolutely necessary +- Prefer Turbo for navigation and form submissions before reaching for Stimulus +- ES6+ syntax, ESM imports/exports +- Stimulus controller naming: `[name]_controller.js` + # Code style requirements: - Use modern Ruby syntax - Prefer early returns and guard clauses diff --git a/AGENTS.md b/AGENTS.md index e3cd2a1fd..0e1908d1c 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -208,6 +208,12 @@ end ## Frontend +### Preferences + +- **Always use Stimulus** for JavaScript behavior — do not write raw/inline JS or jQuery +- **Always use Tailwind CSS** utility classes for styling — do not write custom CSS unless absolutely necessary +- Prefer Turbo for navigation and form submissions before reaching for Stimulus + ### Stimulus Controllers (32) Key controllers: diff --git a/CLAUDE.md b/CLAUDE.md index f3ac1e1c6..66f7fc076 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -149,10 +149,11 @@ bundle exec bundle-audit check --update ## JavaScript - ES6+ syntax, ESM imports/exports -- Prefer Stimulus + Turbo for new interactive features +- **Always use Stimulus** for JavaScript behavior — do not write raw/inline JS or jQuery +- **Always use Tailwind CSS** utility classes for styling — do not write custom CSS unless absolutely necessary +- Prefer Turbo for navigation and form submissions before reaching for Stimulus - Controller naming: `[name]_controller.js` - Keep controllers focused and small -- Use Tailwind CSS v4 utility classes - **Use Stimulus targets and data attributes** to reference DOM elements — avoid `this.element.querySelector` and direct DOM queries. Declare `static targets = [...]` and use `data-[controller]-target` attributes in views. - **Use Stimulus shorthand action descriptors and shorthand pairs** — omit the event when it's the default for that element (e.g., `input` for ``/`