mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
e4308a7258
## 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>
47 lines
1.4 KiB
Markdown
47 lines
1.4 KiB
Markdown
---
|
|
globs:
|
|
- '**/*.vue'
|
|
---
|
|
|
|
# Vue Component Conventions
|
|
|
|
Applies to all `.vue` files anywhere in the codebase.
|
|
|
|
## Vue 3 Composition API
|
|
|
|
- Use `<script setup lang="ts">` for component logic
|
|
- Destructure props (Vue 3.5 style with defaults) like `const { color = 'blue' } = defineProps<...>()`
|
|
- Use `ref`/`reactive` for state
|
|
- Use `computed()` for derived state
|
|
- Use lifecycle hooks: `onMounted`, `onUpdated`, etc.
|
|
|
|
## Component Communication
|
|
|
|
- Prefer `emit/@event-name` for state changes (promotes loose coupling)
|
|
- Use `defineExpose` only for imperative operations (`form.validate()`, `modal.open()`)
|
|
- Proper props and emits definitions
|
|
|
|
## VueUse Composables
|
|
|
|
Prefer VueUse composables over manual event handling:
|
|
|
|
- `useElementHover` instead of manual mouseover/mouseout listeners
|
|
- `useIntersectionObserver` for visibility detection instead of scroll handlers
|
|
- `useFocusTrap` for modal/dialog focus management
|
|
- `useEventListener` for auto-cleanup event listeners
|
|
|
|
Prefer Vue native options when available:
|
|
|
|
- `defineModel` instead of `useVModel` for two-way binding with props
|
|
|
|
## Styling
|
|
|
|
- Use inline Tailwind CSS only (no `<style>` blocks)
|
|
- Use `cn()` from `@/utils/tailwindUtil` for conditional classes
|
|
- Refer to packages/design-system/src/css/style.css for design tokens and tailwind configuration
|
|
|
|
## Best Practices
|
|
|
|
- Extract complex conditionals to `computed`
|
|
- In unmounted hooks, implement cleanup for async operations
|