AGENTS.md

1# AGENTS.md
2 
3Extra information, specific to the frontend codebase. Use this when doing any frontend work.
4 
5- When reviewing CSS/SCSS/Vue changes in `@n8n/design-system` or `editor-ui`, always use `n8n:design-system` skill.
6- ALWAYS follow the guides in `@n8n/design-system/src/styleguide/*.mdx`
7- PREFER using **semantic tokens** for styling from `@n8n/design-system/src/css/_tokens.scss` or `@n8n/design-system/src/css/_primitives.scss`.
8- AVOID using legacy tokens from `@n8n/design-system/src/css/_tokens.legacy.scss`
9- PREFER using existing components from `@n8n/design-system` over creating new ones
10- When rendering `el-plus` popovers/dropdowns/selects inside `N8nDialog`, prefer to keep them in the dialog stacking context with `:teleported="false"` unless they intentionally need to escape.
11- Available icon names are in `packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts`.
12  Use keys from `updatedIconSet` only — `deprecatedIconSet` entries must not be used in new code.
13- Use centralized constants from `@/app/constants/durations` instead of hardcoding:
14 
15```typescript
16import { DEBOUNCE_TIME } from '@/app/constants';
17import { getDebounceTime } from '@n8n/composables/useDebounce';
18 
19useDebounceFn(() => { ... }, getDebounceTime(DEBOUNCE_TIME.INPUT.SEARCH));
20```
21 
22Categories: `UI`, `INPUT`, `API`, `TELEMETRY`, `COLLABORATION`, `CONNECTION`.
23