mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-13 17:10:06 +00:00
refactor: rename CLAUDE.md to AGENTS.md (#8052)
## Summary Pure rename of CLAUDE.md files to AGENTS.md (no content changes). ## Changes | Old Path | New Path | |----------|----------| | `.github/CLAUDE.md` | `.github/AGENTS.md` | | `.storybook/CLAUDE.md` | `.storybook/AGENTS.md` | | `browser_tests/CLAUDE.md` | `browser_tests/AGENTS.md` | | `src/CLAUDE.md` | `src/AGENTS.md` | | `src/components/CLAUDE.md` | `src/components/AGENTS.md` | | `src/lib/litegraph/CLAUDE.md` | `src/lib/litegraph/AGENTS.md` | Root `CLAUDE.md` deleted (content will be merged into `AGENTS.md` in follow-up PR). ## Follow-up A second PR will add glob-based guidance files and consolidate redundancies. --------- Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Christian Byrne <cbyrne@comfy.org>
This commit is contained in:
26
src/AGENTS.md
Normal file
26
src/AGENTS.md
Normal file
@@ -0,0 +1,26 @@
|
||||
# Source Code Guidelines
|
||||
|
||||
## Error Handling
|
||||
|
||||
- User-friendly and actionable messages
|
||||
- Proper error propagation
|
||||
|
||||
## Security
|
||||
|
||||
- Sanitize HTML with DOMPurify
|
||||
- Validate trusted sources
|
||||
- Never log secrets
|
||||
|
||||
## State Management (Stores)
|
||||
|
||||
- Follow domain-driven design for organizing files/folders
|
||||
- Clear public interfaces
|
||||
- Restrict extension access
|
||||
- Clean up subscriptions
|
||||
|
||||
## General Guidelines
|
||||
|
||||
- Use `es-toolkit` for utility functions
|
||||
- Use TypeScript for type safety
|
||||
- Avoid `@ts-expect-error` - fix the underlying issue
|
||||
- Use `vue-i18n` for ALL user-facing strings (`src/locales/en/main.json`)
|
||||
@@ -1,57 +1,3 @@
|
||||
# Source Code Guidelines
|
||||
|
||||
## Service Layer
|
||||
|
||||
### API Calls
|
||||
|
||||
- Use `api.apiURL()` for backend endpoints
|
||||
- Use `api.fileURL()` for static files
|
||||
|
||||
#### ✅ Correct Usage
|
||||
```typescript
|
||||
// Backend API call
|
||||
const response = await api.get(api.apiURL('/prompt'))
|
||||
|
||||
// Static file
|
||||
const template = await fetch(api.fileURL('/templates/default.json'))
|
||||
```
|
||||
|
||||
#### ❌ Incorrect Usage
|
||||
```typescript
|
||||
// WRONG - Direct URL construction
|
||||
const response = await fetch('/api/prompt')
|
||||
const template = await fetch('/templates/default.json')
|
||||
```
|
||||
|
||||
### Error Handling
|
||||
|
||||
- User-friendly and actionable messages
|
||||
- Proper error propagation
|
||||
|
||||
### Security
|
||||
|
||||
- Sanitize HTML with DOMPurify
|
||||
- Validate trusted sources
|
||||
- Never log secrets
|
||||
|
||||
## State Management (Stores)
|
||||
|
||||
### Store Design
|
||||
|
||||
- Follow domain-driven design
|
||||
- Clear public interfaces
|
||||
- Restrict extension access
|
||||
|
||||
### Best Practices
|
||||
|
||||
- Use TypeScript for type safety
|
||||
- Implement proper error handling
|
||||
- Clean up subscriptions
|
||||
- Avoid @ts-expect-error
|
||||
|
||||
## General Guidelines
|
||||
|
||||
- Use es-toolkit for utility functions
|
||||
- Implement proper TypeScript types
|
||||
- Follow Vue 3 composition API style guide
|
||||
- Use vue-i18n for ALL user-facing strings in `src/locales/en/main.json`
|
||||
<!-- We forked the path, yet here we are again—
|
||||
Maintaining two files where one would have been sane. -->
|
||||
@AGENTS.md
|
||||
|
||||
6
src/components/AGENTS.md
Normal file
6
src/components/AGENTS.md
Normal file
@@ -0,0 +1,6 @@
|
||||
# Component Guidelines
|
||||
|
||||
## Component Communication
|
||||
|
||||
- Prefer `emit/@event-name` for state changes
|
||||
- Use `defineExpose` only for imperative operations (`form.validate()`, `modal.open()`)
|
||||
@@ -1,45 +1,3 @@
|
||||
# Component Guidelines
|
||||
|
||||
## Vue 3 Composition API
|
||||
|
||||
- Use setup() function
|
||||
- Destructure props (Vue 3.5 style)
|
||||
- Use ref/reactive for state
|
||||
- Implement computed() for derived state
|
||||
- Use provide/inject for dependency injection
|
||||
|
||||
## Component Communication
|
||||
|
||||
- Prefer `emit/@event-name` for state changes
|
||||
- Use `defineExpose` only for imperative operations (`form.validate()`, `modal.open()`)
|
||||
- Events promote loose coupling
|
||||
|
||||
## UI Framework
|
||||
|
||||
- Deprecated PrimeVue component replacements:
|
||||
- Dropdown → Select
|
||||
- OverlayPanel → Popover
|
||||
- Calendar → DatePicker
|
||||
- InputSwitch → ToggleSwitch
|
||||
- Sidebar → Drawer
|
||||
- Chips → AutoComplete with multiple enabled
|
||||
- TabMenu → Tabs without panels
|
||||
- Steps → Stepper without panels
|
||||
- InlineMessage → Message
|
||||
|
||||
## Styling
|
||||
|
||||
- Use Tailwind CSS only (no custom CSS)
|
||||
- Use the correct tokens from style.css in the design system package
|
||||
- For common operations, try to use existing VueUse composables that automatically handle effect scope
|
||||
- Example: Use `useElementHover` instead of manually managing mouseover/mouseout event listeners
|
||||
- Example: Use `useIntersectionObserver` for visibility detection instead of custom scroll handlers
|
||||
|
||||
## Best Practices
|
||||
|
||||
- Extract complex conditionals to computed
|
||||
- Implement cleanup for async operations
|
||||
- Use vue-i18n for ALL UI strings
|
||||
- Use lifecycle hooks: onMounted, onUpdated
|
||||
- Use Teleport/Suspense when needed
|
||||
- Proper props and emits definitions
|
||||
<!-- "Play nice with others," mother always said,
|
||||
But Claude prefers its own file name instead. -->
|
||||
@AGENTS.md
|
||||
|
||||
41
src/lib/litegraph/AGENTS.md
Normal file
41
src/lib/litegraph/AGENTS.md
Normal file
@@ -0,0 +1,41 @@
|
||||
# Litegraph Guidelines
|
||||
|
||||
## Code Philosophy
|
||||
|
||||
- Write concise, legible, and easily maintainable code
|
||||
- Avoid repetition where possible, but not at expense of legibility
|
||||
- Prefer running single tests, not the whole suite, for performance
|
||||
|
||||
## Code Style
|
||||
|
||||
- Prefer single line `if` syntax for concise expressions
|
||||
- Take advantage of `TypedArray` `subarray` when appropriate
|
||||
- The `size` and `pos` properties of `Rectangle` share the same array buffer
|
||||
- Prefer returning `undefined` over `null`
|
||||
- Type assertions are a last resort (acceptable for legacy code interop)
|
||||
|
||||
## Circular Dependencies in Tests
|
||||
|
||||
**CRITICAL**: Always import from the barrel export for subgraph code:
|
||||
|
||||
```typescript
|
||||
// ✅ Correct - barrel import
|
||||
import { LGraph, Subgraph, SubgraphNode } from "@/lib/litegraph/src/litegraph"
|
||||
|
||||
// ❌ Wrong - causes circular dependency
|
||||
import { LGraph } from "@/lib/litegraph/src/LGraph"
|
||||
```
|
||||
|
||||
**Root cause**: `LGraph` ↔ `Subgraph` circular dependency (Subgraph extends LGraph, LGraph creates Subgraph instances).
|
||||
|
||||
## Test Helpers
|
||||
|
||||
```typescript
|
||||
import { createTestSubgraph, createTestSubgraphNode } from "./fixtures/subgraphHelpers"
|
||||
|
||||
function createTestSetup() {
|
||||
const subgraph = createTestSubgraph()
|
||||
const subgraphNode = createTestSubgraphNode(subgraph)
|
||||
return { subgraph, subgraphNode }
|
||||
}
|
||||
```
|
||||
@@ -1,62 +1,3 @@
|
||||
- This codebase has extensive eslint autofix rules and IDEs are configured to use eslint as the format on save tool. Run ESLint instead of manually figuring out whitespace fixes or other trivial style concerns. Review the results and correct any remaining eslint errors.
|
||||
- Take advantage of `TypedArray` `subarray` when appropriate.
|
||||
- The `size` and `pos` properties of `Rectangle` share the same array buffer (`subarray`); they may be used to set the rectangles size and position.
|
||||
- Prefer single line `if` syntax over adding curly braces, when the statement has a very concise expression and concise, single line statement.
|
||||
- Do not replace `&&=` or `||=` with `=` when there is no reason to do so. If you do find a reason to remove either `&&=` or `||=`, leave a comment explaining why the removal occurred.
|
||||
- You are allowed to research code on https://developer.mozilla.org/ and https://stackoverflow.com without asking.
|
||||
- When adding features, always write vitest unit tests using cursor rules in @.cursor
|
||||
- When writing methods, prefer returning idiomatic JavaScript `undefined` over `null`.
|
||||
|
||||
# Bash commands
|
||||
|
||||
- `pnpm typecheck` Run the typechecker
|
||||
- `pnpm build` Build the project
|
||||
- `pnpm lint:fix` Run ESLint
|
||||
|
||||
# Code style
|
||||
|
||||
- Always prefer best practices when writing code.
|
||||
- Write using concise, legible, and easily maintainable code.
|
||||
- Avoid repetition where possible, but not at the expense of code legibility.
|
||||
- Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code.
|
||||
|
||||
# Workflow
|
||||
|
||||
- Be sure to typecheck when you're done making a series of code changes
|
||||
- Prefer running single tests, and not the whole test suite, for performance
|
||||
|
||||
# Testing Guidelines
|
||||
|
||||
## Avoiding Circular Dependencies in Tests
|
||||
|
||||
**CRITICAL**: When writing tests for subgraph-related code, always import from the barrel export to avoid circular dependency issues:
|
||||
|
||||
```typescript
|
||||
// ✅ CORRECT - Use barrel import
|
||||
import { LGraph, Subgraph, SubgraphNode } from "@/lib/litegraph/src/litegraph"
|
||||
|
||||
// ❌ WRONG - Direct imports cause circular dependency
|
||||
import { LGraph } from "@/lib/litegraph/src/LGraph"
|
||||
import { Subgraph } from "@/lib/litegraph/src/subgraph/Subgraph"
|
||||
import { SubgraphNode } from "@/lib/litegraph/src/subgraph/SubgraphNode"
|
||||
```
|
||||
|
||||
**Root cause**: `LGraph` and `Subgraph` have a circular dependency:
|
||||
- `LGraph.ts` imports `Subgraph` (creates instances with `new Subgraph()`)
|
||||
- `Subgraph.ts` extends `LGraph`
|
||||
|
||||
The barrel export (`@/litegraph`) handles this properly, but direct imports cause module loading failures.
|
||||
|
||||
## Test Setup for Subgraphs
|
||||
|
||||
Use the provided test helpers for consistent setup:
|
||||
|
||||
```typescript
|
||||
import { createTestSubgraph, createTestSubgraphNode } from "./fixtures/subgraphHelpers"
|
||||
|
||||
function createTestSetup() {
|
||||
const subgraph = createTestSubgraph()
|
||||
const subgraphNode = createTestSubgraphNode(subgraph)
|
||||
return { subgraph, subgraphNode }
|
||||
}
|
||||
```
|
||||
<!-- The graphs connect, the nodes align with grace,
|
||||
Yet Claude alone won't join the commonplace. -->
|
||||
@AGENTS.md
|
||||
|
||||
Reference in New Issue
Block a user