n8n:ui-design

Source excerpt starting at line 1.

1---2name: n8n:ui-design3description: Guidelines on designing and building UI. Use when working in editor-ui or design-system packages. Triggers for tasks that include refactoring components, styling changes, or feature work.4---5 6# UI Design7 8Comprehensive guide for building, styling, and using components in the frontend.9 10## References11- When styling components, use `packages/frontend/@n8n/design-system/src/styleguide/*.mdx`12- For animations, use `rules/web-animation-guidelines.md`13- When reviewing UI changes, use `rules/web-interface-guidelines.md`14 15## Best practices16- ALWAYS use CSS variables for styles from `packages/frontend/@n8n/design-system/src/css/_tokens.scss` or `packages/frontend/@n8n/design-system/src/css/_primitives.scss`. Use hard-coded values only when no suitable tokens.17- ALWAYS prefer using existing components from `packages/frontend/@n8n/design-system/src/components`. Prefer components that aren't marked `@deprecated`.18- If you need to add hover/active alpha behavior to solid components, prefer `color-mix()` with explicit percentages.19- When working with animations or transitions, ALWAYS prefer using mixins from `packages/frontend/@n8n/design-system/src/css/mixins/motion.scss`20 21## Components22Use existing `design-system` components over creating custom implementations:23- "Add a modal dialog for confirming workflow deletion" → Use `N8nDialog`24- "Add a dropdown to select workflow status" → Use `N8nDropdown` or `N8nSelect`25- "Add button with + icon to add new tiem" → Wrap `N8nButton` with `iconOnly` prop with `N8nTooltip` and wrap in `N8nTooltip`. Use `N8nIcon` and proper aria-label.26- "Add a destructive action button" → use `N8nButton` with `variant="destructive"`27- "Make background color white/black" → Use `var(--background--surface)` for white on light mode and "black" on dark mode28- "Animate the title in gracefully" -> Use `fade-in-up` mixin from `motion.scss` with `var(--duration--base)`29