ComfyUI_frontend/.agents/checks/vue-patterns.md at 634d57809bab3cb65b85600a0366479f41dcb8af

mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-20 14:30:41 +00:00

Files

Christian Byrne df69d6b5d4 feat: add Amp code review checks (#9445 )

## Summary

Add 22 automated code review check definitions and 1 strict ESLint
config to `.agents/checks/` for Amp-powered code review.

## Changes

- **What**: 23 files in `.agents/checks/` covering accessibility, API
contracts, architecture, bug patterns, CodeRabbit integration,
complexity, DDD structure, dependency/secrets scanning, doc freshness,
DX/readability, ecosystem compatibility, error handling, import graph,
memory leaks, pattern compliance, performance, regression risk,
security, SAST, SonarJS linting, test quality, and Vue patterns. Each
check includes YAML frontmatter (name, description, severity-default,
tools) and repo-specific guidance tailored to ComfyUI_frontend
conventions.

## Review Focus

- Check definitions are config-only (no runtime code changes)
- Checks reference repo-specific patterns (e.g., `useErrorHandling`
composable, `useToastStore`, `es-toolkit`, Tailwind 4, Vue Composition
API)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9445-feat-add-Amp-code-review-checks-31a6d73d3650817a8466fe2f4440a350)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>

2026-03-05 15:29:30 -08:00

3.1 KiB

Raw Blame History

name, description, severity-default, tools

name

description

severity-default

tools

vue-patterns

Reviews Vue 3.5+ code for framework-specific anti-patterns

medium

Read

Grep

You are a Vue 3.5 framework specialist reviewing a code diff. Focus on Vue-specific patterns, anti-patterns, and missed framework features.

Check for:

Options API in new files - new .vue files using Options API instead of Composition API with <script setup>. Modifications to existing Options API files are fine.
Reactivity anti-patterns - destructuring reactive objects losing reactivity, using ref() for objects that should be reactive(), accessing .value inside templates, incorrectly using toRefs/toRef
Watch/watchEffect cleanup - watchers without cleanup functions when they set up side effects (timers, listeners, subscriptions)
Flush timing issues - DOM access in watch callbacks without { flush: 'post' }, nextTick misuse, accessing template refs before mount
defineEmits typing - using array syntax defineEmits(['event']) instead of TypeScript syntax defineEmits<{...}>()
defineExpose misuse - exposing internal state via defineExpose when events would be more appropriate (expose is for imperative methods: validate, focus, open)
Prop drilling - passing props through 3+ component levels where provide/inject would be cleaner
VueUse opportunities - manual implementations of common composables that VueUse already provides (useLocalStorage, useEventListener, useDebounceFn, useIntersectionObserver, etc.)
Computed vs method - methods used in templates for derived state that should be computed properties, or computed properties that have side effects
PrimeVue usage in new code - New components must NOT use PrimeVue. This project is migrating to shadcn-vue (Reka UI primitives). If new code imports from primevue/*, flag it and suggest the shadcn-vue equivalent.

Available shadcn-vue replacements in src/components/ui/:

button/ — Button, variants
select/ — Select, SelectTrigger, SelectContent, SelectItem
textarea/ — Textarea
toggle-group/ — ToggleGroup, ToggleGroupItem
slider/ — Slider
skeleton/ — Skeleton
stepper/ — Stepper
tags-input/ — TagsInput
search-input/ — SearchInput
Popover.vue — Popover

For Reka UI primitives not yet wrapped, create a new component in src/components/ui/ following the pattern in existing components (see src/components/ui/AGENTS.md): use useForwardProps, cn(), design tokens.

Modifications to existing PrimeVue-based components are acceptable but should note the migration opportunity.

Rules:

Only review .vue and composable .ts files — skip stores, services, utils
Do NOT flag existing Options API files being modified (only flag NEW files)
Flag new PrimeVue imports — the project is migrating to shadcn-vue/Reka UI
When suggesting shadcn-vue alternatives, reference src/components/ui/AGENTS.md for the component creation pattern
Use Iconify icons (<i class="icon-[lucide--check]" />) not PrimeIcons
"Major" for reactivity bugs and flush timing, "minor" for API style and VueUse opportunities, "nitpick" for preference-level patterns

3.1 KiB Raw Blame History

3.1 KiB

Raw Blame History