🤖 Agent file location rules (and CSS prohibition) #7691
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ripts Add rule to avoid `!important` Add more rules around temporary files
dosubot
bot
added
the
size:S
Contributor
📝 WalkthroughWalkthroughUpdated AGENTS.md to add agent-focused guidelines: disallow Tailwind Changes
Possibly related PRs
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used🧠 Learnings (16)📓 Common learnings📚 Learning: 2025-12-18T20:39:30.137ZApplied to files:
📚 Learning: 2025-12-17T01:01:03.609ZApplied to files:
📚 Learning: 2025-12-09T21:40:19.792ZApplied to files:
📚 Learning: 2025-12-18T02:07:44.374ZApplied to files:
📚 Learning: 2025-12-16T17:30:29.719ZApplied to files:
📚 Learning: 2025-12-13T11:03:21.073ZApplied to files:
📚 Learning: 2025-12-05T06:11:09.383ZApplied to files:
📚 Learning: 2025-12-11T12:25:24.164ZApplied to files:
📚 Learning: 2025-12-17T01:01:03.609ZApplied to files:
📚 Learning: 2025-12-17T01:01:03.609ZApplied to files:
📚 Learning: 2025-11-24T19:47:34.324ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-12-17T01:01:03.609ZApplied to files:
📚 Learning: 2025-12-17T01:01:03.609ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
🔇 Additional comments (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/21/2025, 03:39:55 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results✅ All tests passed! ⏰ Completed at: 12/21/2025, 03:45:33 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.22 MB (baseline 3.22 MB) • ⚪ 0 BMain entry bundles and manifests
Graph Workspace — 993 kB (baseline 993 kB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Panels & Settings — 297 kB (baseline 297 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
UI Components — 186 kB (baseline 186 kB) • ⚪ 0 BReusable component library chunks
Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Utilities & Hooks — 1.41 kB (baseline 1.41 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Vendor & Third-Party — 9.1 MB (baseline 9.1 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.44 MB (baseline 3.44 MB) • ⚪ 0 BBundles that do not match a named category
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
AGENTS.md(1 hunks)
🧰 Additional context used
🧠 Learnings (10)
📚 Learning: 2025-12-17T01:01:03.609Z
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
Applied to files:
AGENTS.md
📚 Learning: 2025-12-17T01:01:03.609Z
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`)
Applied to files:
AGENTS.md
📚 Learning: 2025-12-17T01:01:03.609Z
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
Applied to files:
AGENTS.md
📚 Learning: 2025-12-18T20:39:30.137Z
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.
Applied to files:
AGENTS.md
📚 Learning: 2025-12-09T21:40:19.792Z
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.
Applied to files:
AGENTS.md
📚 Learning: 2025-11-24T19:47:45.616Z
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)
Applied to files:
AGENTS.md
📚 Learning: 2025-12-17T01:01:03.609Z
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/**/*.{ts,tsx,vue} : ESLint rules: Vue + TS rules, no floating promises, unused imports disallowed, i18n raw text restrictions in templates
Applied to files:
AGENTS.md
📚 Learning: 2025-12-17T01:01:03.609Z
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/**/*.{ts,tsx,vue,js} : Indent with 2 spaces, use single quotes, no trailing semicolons, line width 80 - see `.prettierrc`
Applied to files:
AGENTS.md
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{vue,ts,tsx} : Follow Vue 3 composition API style guide
Applied to files:
AGENTS.md
📚 Learning: 2025-11-24T19:47:02.860Z
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
Applied to files:
AGENTS.md
🪛 LanguageTool
AGENTS.md
[grammar] ~272-~272: Use a hyphen to join words.
Context: ... corrections of those instead. ## Agent only rules Rules for agent based coding...
(QB_NEW_EN_HYPHEN)
[grammar] ~274-~274: Use a hyphen to join words.
Context: ...d. ## Agent only rules Rules for agent based coding tasks. ### Temporary Files...
(QB_NEW_EN_HYPHEN)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: test
- GitHub Check: lint-and-format
- GitHub Check: collect
Comment on lines
+269
to
+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. |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find . -name "Load3DScene.vue" -type fRepository: 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
fiRepository: 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 -20Repository: 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.
Contributor
There was a problem hiding this comment.
I think the concern is valid here.
Contributor
There was a problem hiding this comment.
@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
!importantusage - Explicitly permit the Load3DScene.vue case and similar scenarios
- Require documentation for any exceptions to prevent abuse
- Guide agents to distinguish between unnecessary
!importantdeclarations 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.
Contributor
Author
There was a problem hiding this comment.
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.
Contributor
There was a problem hiding this comment.
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!
Contributor
Author
There was a problem hiding this comment.
@coderabbitai don't you have a history of lying about exceptional cases being necessary in responses to PRs?
Contributor
There was a problem hiding this comment.
@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.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
huchenlei
approved these changes
Dec 21, 2025
christian-byrne
approved these changes
Dec 21, 2025
Yourz
pushed a commit
that referenced
this pull request
Dec 24, 2025
Add rule for agents to use the gitignored temp directory for plans/scripts Add rule to avoid `!important` Add more rules around temporary files ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7691-Agent-file-location-rules-and-CSS-prohibition-2d06d73d365081a6b3a2f619cd67cb91) by [Unito](https://www.unito.io) --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Add rule for agents to use the gitignored temp directory for plans/scripts
Add rule to avoid
!importantAdd more rules around temporary files
┆Issue is synchronized with this Notion page by Unito