diff --git a/.agents/skills b/.agents/skills new file mode 120000 index 00000000000..c1dd3b0f40d --- /dev/null +++ b/.agents/skills @@ -0,0 +1 @@ +../.claude/plugins/n8n/skills \ No newline at end of file diff --git a/.claude/plugins/n8n/skills/content-design/SKILL.md b/.claude/plugins/n8n/skills/content-design/SKILL.md index 0ef01d02b2a..60a7ff461f0 100644 --- a/.claude/plugins/n8n/skills/content-design/SKILL.md +++ b/.claude/plugins/n8n/skills/content-design/SKILL.md @@ -1,4 +1,5 @@ --- +name: n8n:content-design description: > Product content designer for UI copy. Use when writing, reviewing, or auditing user-facing text: button labels, error messages, tooltips, empty states, modal copy, diff --git a/.claude/plugins/n8n/skills/conventions/SKILL.md b/.claude/plugins/n8n/skills/conventions/SKILL.md index 71d8eafdc9a..583cc13115b 100644 --- a/.claude/plugins/n8n/skills/conventions/SKILL.md +++ b/.claude/plugins/n8n/skills/conventions/SKILL.md @@ -1,4 +1,5 @@ --- +name: n8n:conventions description: Quick reference for n8n patterns. Full docs /AGENTS.md --- diff --git a/.claude/plugins/n8n/skills/create-community-node-lint-rule/SKILL.md b/.claude/plugins/n8n/skills/create-community-node-lint-rule/SKILL.md index e7a2f511fd6..ef70e7c6c9e 100644 --- a/.claude/plugins/n8n/skills/create-community-node-lint-rule/SKILL.md +++ b/.claude/plugins/n8n/skills/create-community-node-lint-rule/SKILL.md @@ -1,4 +1,5 @@ --- +name: n8n:create-community-node-lint-rule description: >- Create new ESLint rules for the @n8n/eslint-plugin-community-nodes package. Use when adding a lint rule, creating a community node lint, or working on diff --git a/.claude/plugins/n8n/skills/create-issue/SKILL.md b/.claude/plugins/n8n/skills/create-issue/SKILL.md index c47465ad4cf..f10a2779c23 100644 --- a/.claude/plugins/n8n/skills/create-issue/SKILL.md +++ b/.claude/plugins/n8n/skills/create-issue/SKILL.md @@ -1,4 +1,5 @@ --- +name: n8n:create-issue description: Create Linear tickets or GitHub issues following n8n conventions. Use when the user asks to create a ticket, file a bug, open an issue, or says /create-issue. argument-hint: "[linear|github] " compatibility: diff --git a/.claude/plugins/n8n/skills/create-pr/SKILL.md b/.claude/plugins/n8n/skills/create-pr/SKILL.md index 57ddceb4854..a39e7122d62 100644 --- a/.claude/plugins/n8n/skills/create-pr/SKILL.md +++ b/.claude/plugins/n8n/skills/create-pr/SKILL.md @@ -1,4 +1,5 @@ --- +name: n8n:create-pr description: Creates GitHub pull requests with properly formatted titles that pass the check-pr-title CI validation. Use when creating PRs, submitting changes for review, or when the user says /pr or asks to create a pull request. allowed-tools: Bash(git:*), Bash(gh:*), Read, Grep, Glob --- diff --git a/.claude/plugins/n8n/skills/create-skill/SKILL.md b/.claude/plugins/n8n/skills/create-skill/SKILL.md index c3336caaf8c..080664bde63 100644 --- a/.claude/plugins/n8n/skills/create-skill/SKILL.md +++ b/.claude/plugins/n8n/skills/create-skill/SKILL.md @@ -1,4 +1,5 @@ --- +name: n8n:create-skill description: >- Guides users through creating effective Agent Skills. Use when you want to create, write, or author a new skill, or asks about skill structure, best diff --git a/.claude/plugins/n8n/skills/design-system-rules/SKILL.md b/.claude/plugins/n8n/skills/design-system-rules/SKILL.md deleted file mode 100644 index b70a481bbfe..00000000000 --- a/.claude/plugins/n8n/skills/design-system-rules/SKILL.md +++ /dev/null @@ -1,62 +0,0 @@ -# Design System Style Review Rules - -Use these rules when working in `packages/frontend/` and `packages/frontend/@n8n/design-system/`. -Always follow guidance in `packages/frontend/@n8n/design-system/src/styleguide/*.mdx`. - -## 1) Token source priority - -Prefer this order when choosing visual values: - -1. Semantic tokens from - `packages/frontend/@n8n/design-system/src/css/_tokens.scss` -2. Primitives from - `packages/frontend/@n8n/design-system/src/css/_primitives.scss` -3. Hard-coded values only when no suitable token exists - -If no token exists, request a short rationale in the PR. - -## 2) Hard-coded visual values - -Flag hard-coded visual values and suggest token alternatives. This includes: - -- Colors (`#fff`, `rgb()`, `hsl()`, `oklch()`) -- Spacing and sizing (`px`, `rem`, numeric layout constants in styles) -- Radius, border widths/styles, and shadows -- Typography values (font size, weight, line-height) -- Motion values (durations and easing like `cubic-bezier(...)`) - -Severity: strong warning (expected migration to tokens/primitives when possible). - -## 3) Legacy token usage - -In `_tokens.scss`, the compatibility section labeled -"Legacy tokens (kept for compatibility)" is considered legacy usage. - -When new or modified code uses these legacy token families, flag it as a -migration opportunity and recommend semantic token usage where available. - -Severity: strong warning (discourage new usage, allow compatibility paths). - -## 4) Deprecated style and component surfaces - -Flag new usage of deprecated/legacy style surfaces in design-system components, -for example: - -- `Button.legacy.scss` and legacy button override classes -- Legacy button variants/types (for example `highlight`, `highlight-fill`) -- Legacy component variants that exist for compatibility (for example legacy - tabs variant) - -Severity: strong warning (prefer modern semantic variants/components). - -## 5) Token substitution changes - -If a PR changes one token reference to another (for example -`--text-color` -> `--text-color--subtle`), flag it as a soft warning. - -Ask for intent in the PR description/comment: - -- Intentional design adjustment, or -- Potential accidental visual regression - -Do not treat token substitution as a hard failure by default. diff --git a/.claude/plugins/n8n/skills/design-system/SKILL.md b/.claude/plugins/n8n/skills/design-system/SKILL.md new file mode 100644 index 00000000000..d07a1472338 --- /dev/null +++ b/.claude/plugins/n8n/skills/design-system/SKILL.md @@ -0,0 +1,30 @@ +--- +name: n8n:design-system +description: Guidelines on using Design System styles and components. Use when working on .vue files in packages/frontend. Triggers for tasks that include component architecture, styling, UI changes, or feature work. +--- + +# Design System + +Comprehensive guide for building, styling, and using components in the frontend. + +## When to Apply +Reference these guidelines when: +- Working on `.{vue|css|scss}` files in `packages/frontend` +- Adding new components to `packages/frontend/@n8n/design-system` +- Refactoring styles for Vue components +- Implementing new UI components or features +- Reviewing changes to UI + +## Rules +- Follow guidelines in `packages/frontend/@n8n/design-system/src/styleguide/*.mdx` +- ALWAYS use CSS variables for styles from `packages/frontend/@n8n/design-system/src/css/_tokens.scss` or `packages/frontend/@n8n/design-system/src/css/_primtivies.scss`. Use hard-coded values only when no suitable tokens. +- ALWAYS prefer using existing components from `packages/frontend/@n8n/design-system/src/components`. Prefer components that aren't marked `@deprecated`. +- When reviewing UI changes or adding new components, follow `rules/web-interface-guidelines.md` +- Use `light-dark()` when alternating colors for ligh/dark mode + +## Examples +- "Add a modal dialog for confirming workflow deletion" → Use `N8nDialog` +- "Add a dropdown to select workflow status" → Use `N8nDropdown` or `N8nSelect` +- "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. +- "Add a destructive action button" → use `N8nButton` with `variant="destructive"` +- Make background color white/black → Use `var(--background--surface)` for white on light mode and "black" on dark mode diff --git a/.claude/plugins/n8n/skills/design-system/rules/web-interface-guidelines.md b/.claude/plugins/n8n/skills/design-system/rules/web-interface-guidelines.md new file mode 100644 index 00000000000..9a037948a8f --- /dev/null +++ b/.claude/plugins/n8n/skills/design-system/rules/web-interface-guidelines.md @@ -0,0 +1,98 @@ +# Web Interface Guidelines + +This document outlines a non-exhaustive list of details that make a good (web) interface. It is a living document, periodically updated based on learnings. Some of these may be subjective, but most apply to all websites. + +The [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) spec is deliberately not duplicated in this document. However, some accessibility guidelines may be pointed out. Contributions are welcome. Edit [this file](https://github.com/raunofreiberg/interfaces/blob/main/README.md) and submit a pull request. + +## Interactivity + +- Clicking the input label should focus the input field +- Inputs should be wrapped with a `
` to submit by pressing Enter +- Inputs should have an appropriate `type` like `password`, `email`, etc +- Inputs should disable `spellcheck` and `autocomplete` attributes most of the time +- Inputs should leverage HTML form validation by using the `required` attribute when appropriate +- Input prefix and suffix decorations, such as icons, should be absolutely positioned on top of the text input with padding, not next to it, and trigger focus on the input +- Toggles should immediately take effect, not require confirmation +- Buttons should be disabled after submission to avoid duplicate network requests +- Interactive elements should disable `user-select` for inner content +- Decorative elements (glows, gradients) should disable `pointer-events` to not hijack events +- Interactive elements in a vertical or horizontal list should have no dead areas between each element, instead, increase their `padding` + +## Typography + +- Fonts should have `-webkit-font-smoothing: antialiased` applied for better legibility +- Fonts should have `text-rendering: optimizeLegibility` applied for better legibility +- Fonts should be subset based on the content, alphabet or relevant language(s) +- Font weight should not change on hover or selected state to prevent layout shift +- Font weights below 400 should not be used +- Medium sized headings generally look best with a font weight between 500-600 +- Adjust values fluidly by using CSS [`clamp()`](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp), e.g. `clamp(48px, 5vw, 72px)` for the `font-size` of a heading +- Where available, tabular figures should be applied with `font-variant-numeric: tabular-nums`, particularly in tables or when layout shifts are undesirable, like in timers +- Prevent text resizing unexpectedly in landscape mode on iOS with `-webkit-text-size-adjust: 100%` + + +## Motion + +- Switching themes should not trigger transitions and animations on elements [^1] +- Animation duration should not be more than 200ms for interactions to feel immediate +- Animation values should be proportional to the trigger size: + - Don't animate dialog scale in from 0 → 1, fade opacity and scale from ~0.8 + - Don't scale buttons on press from 1 → 0.8, but ~0.96, ~0.9, or so +- Actions that are frequent and low in novelty should avoid extraneous animations: [^2] + - Opening a right click menu + - Deleting or adding items from a list + - Hovering trivial buttons +- Looping animations should pause when not visible on the screen to offload CPU and GPU usage +- Use `scroll-behavior: smooth` for navigating to in-page anchors, with an appropriate offset + +## Touch + +- Hover states should not be visible on touch press, use `@media (hover: hover)` [^3] +- Font size for inputs should not be smaller than 16px to prevent iOS zooming on focus +- Inputs should not auto focus on touch devices as it will open the keyboard and cover the screen +- Apply `muted` and `playsinline` to `