🤖 Agent file location rules (and CSS prohibition) #7691

coderabbitai · 2025-12-21T03:06:35Z

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

find . -name "Load3DScene.vue" -type f

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 109

🏁 Script executed:

if [ -f "src/components/load3d/Load3DScene.vue" ]; then cat -n "src/components/load3d/Load3DScene.vue" | head -100 fi

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 2302

🏁 Script executed:

# Search for other uses of !important in the codebase to understand the broader context rg "!important" --type vue src/ | head -20

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 97

Clarify the scope of the !important prohibition to account for documented exceptions.

The new rule categorically prohibits !important usage. However, existing code contains valid exceptions where !important is necessary—specifically, overriding third-party library inline styles (e.g., Three.js canvas styling in Load3DScene.vue). The rule as written may lead AI agents to incorrectly flag or attempt to remove necessary !important declarations.

Revise the rule to explicitly acknowledge exceptions for cases where dynamic inline styles from third-party libraries cannot be overridden otherwise.

🤖 Prompt for AI Agents

In AGENTS.md around lines 269 to 270, the rule blanket-prohibiting `!important` in Tailwind needs clarifying to allow documented exceptions: update the sentence to explicitly permit `!important` (or the `!` prefix) only when it is required to override unavoidable dynamic inline styles from third-party libraries (give Three.js canvas in Load3DScene.vue as an example), instruct agents to prefer fixes that remove problematic `!important` usages but to leave and document any necessary exceptions with a comment and link to the relevant component or issue explaining why it cannot be overridden.

I think the concern is valid here.

@huchenlei Thank you for confirming! You're right - the rule should account for the documented exception in Load3DScene.vue where !important is necessary to override Three.js dynamically-generated inline styles.

Here's a proposed revision for the rule (lines 269-270):

- NEVER use `!important` or the `!` important prefix for Tailwind classes - Find existing `!important` classes that are interfering with the styling and propose corrections of those instead. - Exception: `!important` may be used ONLY when required to override unavoidable dynamic inline styles from third-party libraries (e.g., Three.js canvas in `src/components/load3d/Load3DScene.vue`). Such exceptions must be documented with a comment explaining why the override cannot be avoided.

This clarification will:

Maintain the general prohibition on !important usage

Explicitly permit the Load3DScene.vue case and similar scenarios

Require documentation for any exceptions to prevent abuse

Guide agents to distinguish between unnecessary !important declarations and legitimate overrides

Would you like me to create an issue to track this clarification, or would you prefer to update it directly in this PR?

🧠 Learnings used

Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-12-17T01:01:03.609Z Learning: Applies to src/**/*.vue : Use `cn()` utility from `@/utils/tailwindUtil` to merge Tailwind class names - never use `:class="[]"` syntax

Learnt from: benceruleanlu Repo: Comfy-Org/ComfyUI_frontend PR: 7297 File: src/components/actionbar/ComfyActionbar.vue:33-43 Timestamp: 2025-12-09T21:40:19.792Z Learning: In the Comfy-Org/ComfyUI_frontend repository, inline Tailwind CSS class strings, even when long, are acceptable and preferred over extracting them to computed properties when the classes are static. This is a common Tailwind pattern and doesn't need to be flagged as a readability issue.

Learnt from: jtydhr88 Repo: Comfy-Org/ComfyUI_frontend PR: 7621 File: src/components/load3d/Load3DScene.vue:4-4 Timestamp: 2025-12-18T20:39:30.137Z Learning: In src/components/load3d/Load3DScene.vue, the scoped `<style>` block with `!important` declarations for the canvas element is necessary because Three.js dynamically creates the canvas with inline styles, preventing direct application of Tailwind classes. This is a valid exception to the Tailwind-only styling guideline.

Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-12-17T01:01:03.609Z Learning: Applies to src/**/*.vue : Never use the `dark:` Tailwind variant - use semantic values from `style.css` theme instead (e.g., `bg-node-component-surface`)

Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-12-17T01:01:03.609Z Learning: Applies to src/**/*.vue : Use Tailwind 4 utility classes for styling - avoid `<style>` blocks

Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.{vue,css} : Use Tailwind CSS only for styling (no custom CSS)

Learnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7598 File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131 Timestamp: 2025-12-18T02:07:44.374Z Learning: Comfy-Org/ComfyUI_frontend uses Tailwind CSS v4 utilities, including the new “safe” overflow-alignment classes. Do not flag items-center-safe, justify-*-safe, or place-*-safe utilities as invalid in src/**/*.vue or stories.

Learnt from: christian-byrne Repo: Comfy-Org/ComfyUI_frontend PR: 7416 File: src/stores/imagePreviewStore.ts:5-7 Timestamp: 2025-12-13T11:03:21.073Z Learning: In the Comfy-Org/ComfyUI_frontend repository, linting rules enforce keeping `import type` statements separate from regular `import` statements, even when importing from the same module. Do not suggest consolidating them into a single import statement.

Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Use Tailwind CSS for styling

Learnt from: christian-byrne Repo: Comfy-Org/ComfyUI_frontend PR: 6300 File: src/platform/updates/components/WhatsNewPopup.vue:5-13 Timestamp: 2025-12-09T03:50:03.127Z Learning: In the Comfy-Org/ComfyUI_frontend repository, when avoiding PrimeVue components, prefer using the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) rather than plain HTML buttons. These components wrap PrimeVue with custom design system styling.

Learnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7559 File: .storybook/preview.ts:61-61 Timestamp: 2025-12-16T17:30:29.719Z Learning: In .storybook/preview.ts for the Comfy-Org/ComfyUI_frontend repository, using `document.body.classList.add('[&_*]:!font-inter')` is the correct approach for applying the Inter font to all Storybook story elements. The simpler `font-inter` class alone does not work in this context. This runtime arbitrary variant pattern is valid and should not be flagged as an issue.

Learnt from: christian-byrne Repo: Comfy-Org/ComfyUI_frontend PR: 7358 File: src/components/dialog/content/signin/SignUpForm.vue:45-54 Timestamp: 2025-12-11T12:25:24.164Z Learning: The project has CI automation that handles code formatting (pnpm format) automatically, so manual formatting suggestions should not be provided in code reviews for the Comfy-Org/ComfyUI_frontend repository.

For a human being, I'd agree. But setting a bright line rule and allowing for exceptions on a case by case basis, in my experience, leads to fewer violations that could be avoided but aren't because the effort to validate them is more than just assuming that the !important must be necessary.

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!

@coderabbitai don't you have a history of lying about exceptional cases being necessary in responses to PRs?

@DrJKL You're raising a valid concern about AI judgment reliability. Yes, AI agents (including myself) can err on the side of accepting existing patterns as "necessary" without sufficiently challenging whether they could be avoided. This is particularly problematic with something like !important where there's often a better solution that just requires more effort to find.

Your approach of setting a strict rule without exceptions for AI agents is actually more pragmatic. Even when legitimate exceptions exist (like the Three.js case), having AI agents evaluate each case risks:

Accepting violations too easily based on surface-level justifications

Not pushing hard enough to find alternatives

Propagating suboptimal patterns

The bright-line rule as written ("NEVER use !important... Find existing !important classes that are interfering") correctly puts the burden on finding and fixing the root cause rather than adding more !important declarations. This is the right guideline for maintaining code quality with AI assistance.

I'll respect the rule as written and focus on identifying solutions that avoid !important rather than justifying its use.

🧠 Learnings used

Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-12-17T01:01:03.609Z Learning: Applies to src/**/*.vue : Use `cn()` utility from `@/utils/tailwindUtil` to merge Tailwind class names - never use `:class="[]"` syntax

Learnt from: benceruleanlu Repo: Comfy-Org/ComfyUI_frontend PR: 7297 File: src/components/actionbar/ComfyActionbar.vue:33-43 Timestamp: 2025-12-09T21:40:19.792Z Learning: In the Comfy-Org/ComfyUI_frontend repository, inline Tailwind CSS class strings, even when long, are acceptable and preferred over extracting them to computed properties when the classes are static. This is a common Tailwind pattern and doesn't need to be flagged as a readability issue.

Learnt from: jtydhr88 Repo: Comfy-Org/ComfyUI_frontend PR: 7621 File: src/components/load3d/Load3DScene.vue:4-4 Timestamp: 2025-12-18T20:39:30.137Z Learning: In src/components/load3d/Load3DScene.vue, the scoped `<style>` block with `!important` declarations for the canvas element is necessary because Three.js dynamically creates the canvas with inline styles, preventing direct application of Tailwind classes. This is a valid exception to the Tailwind-only styling guideline.

Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-12-17T01:01:03.609Z Learning: Applies to src/**/*.vue : Never use the `dark:` Tailwind variant - use semantic values from `style.css` theme instead (e.g., `bg-node-component-surface`)

Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-12-17T01:01:03.609Z Learning: Applies to src/**/*.vue : Use Tailwind 4 utility classes for styling - avoid `<style>` blocks

Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.{vue,css} : Use Tailwind CSS only for styling (no custom CSS)

Learnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7598 File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131 Timestamp: 2025-12-18T02:07:44.374Z Learning: Comfy-Org/ComfyUI_frontend uses Tailwind CSS v4 utilities, including the new “safe” overflow-alignment classes. Do not flag items-center-safe, justify-*-safe, or place-*-safe utilities as invalid in src/**/*.vue or stories.

Learnt from: christian-byrne Repo: Comfy-Org/ComfyUI_frontend PR: 7416 File: src/stores/imagePreviewStore.ts:5-7 Timestamp: 2025-12-13T11:03:21.073Z Learning: In the Comfy-Org/ComfyUI_frontend repository, linting rules enforce keeping `import type` statements separate from regular `import` statements, even when importing from the same module. Do not suggest consolidating them into a single import statement.

Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Use Tailwind CSS for styling

Learnt from: christian-byrne Repo: Comfy-Org/ComfyUI_frontend PR: 6300 File: src/platform/updates/components/WhatsNewPopup.vue:5-13 Timestamp: 2025-12-09T03:50:03.127Z Learning: In the Comfy-Org/ComfyUI_frontend repository, when avoiding PrimeVue components, prefer using the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) rather than plain HTML buttons. These components wrap PrimeVue with custom design system styling.

Learnt from: christian-byrne Repo: Comfy-Org/ComfyUI_frontend PR: 7358 File: src/components/dialog/content/signin/SignUpForm.vue:45-54 Timestamp: 2025-12-11T12:25:24.164Z Learning: The project has CI automation that handles code formatting (pnpm format) automatically, so manual formatting suggestions should not be provided in code reviews for the Comfy-Org/ComfyUI_frontend repository.

-Original file line number
+Diff line change
@@ Expand Up / @@ -266,3 +266,16 @@ When referencing Comfy-Org repos: @@
       - Always use `import { cn } from '@/utils/tailwindUtil'`
         - e.g. `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`
       - Use `cn()` inline in the template when feasible instead of creating a `computed` to hold the value
+    - NEVER use `!important` or the `!` important prefix for tailwind classes
+      - Find existing `!important` classes that are interfering with the styling and propose corrections of those instead.
+    ## Agent-only rules
+    Rules for agent-based coding tasks.
+    ### Temporary Files
+    - Put planning documents under `/temp/plans/`
+    - Put scripts used under `/temp/scripts/`
+    - Put summaries of work performed under `/temp/summaries/`
+    - Put TODOs and status updates under `/temp/in_progress/`

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🤖 Agent file location rules (and CSS prohibition) #7691

Uh oh!

Diff view

Diff view

There are no files selected for viewing

coderabbitai bot Dec 21, 2025 •

edited

Loading

Uh oh!

huchenlei Dec 21, 2025

Uh oh!

coderabbitai bot Dec 21, 2025

Uh oh!

DrJKL Dec 21, 2025

Uh oh!

coderabbitai bot Dec 21, 2025

Uh oh!

DrJKL Dec 21, 2025

Uh oh!

coderabbitai bot Dec 21, 2025

Uh oh!

Uh oh!

🤖 Agent file location rules (and CSS prohibition) #7691

Uh oh!

🤖 Agent file location rules (and CSS prohibition) #7691

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

coderabbitai bot Dec 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

huchenlei Dec 21, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Dec 21, 2025

Choose a reason for hiding this comment

Uh oh!

DrJKL Dec 21, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Dec 21, 2025

Choose a reason for hiding this comment

Uh oh!

DrJKL Dec 21, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Dec 21, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot Dec 21, 2025 •

edited

Loading