chore: Fix skills so they work with non-Claude harnesses (#29644)

.agents/skills

@@ -0,0 +1 @@
+../.claude/plugins/n8n/skills

.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,

.claude/plugins/n8n/skills/conventions/SKILL.md

@@ -1,4 +1,5 @@
 ---
+name: n8n:conventions
 description: Quick reference for n8n patterns. Full docs /AGENTS.md
 ---
 

.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

.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] <description of the issue>"
 compatibility:

.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
 ---

.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

.claude/plugins/n8n/skills/design-system-rules/SKILL.md

@@ -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.

.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

.claude/plugins/n8n/skills/design-system/rules/web-interface-guidelines.md

@@ -0,0 +1,98 @@
+# Web Interface Guidelines
+<!-- credit to https://github.com/raunofreiberg/interfaces -->
+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 `<form>` 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 `<video />` tags to auto play on iOS
+- Disable `touch-action` for custom components that implement pan and zoom gestures to prevent interference from native behavior like zooming and scrolling
+- Disable the default iOS tap highlight with `-webkit-tap-highlight-color: rgba(0,0,0,0)`, but always replace it with an appropriate alternative
+
+## Optimizations
+
+- Large `blur()` values for `filter` and `backdrop-filter` may be slow
+- Scaling and blurring filled rectangles will cause banding, use radial gradients instead
+- Sparingly enable GPU rendering with `transform: translateZ(0)` for unperformant animations
+- Toggle `will-change` on unperformant scroll animations for the duration of the animation [^4]
+- Auto-playing too many videos on iOS will choke the device, pause or even unmount off-screen videos
+- Bypass React's render lifecycle with refs for real-time values that can commit to the DOM directly [^5]
+- [Detect and adapt](https://github.com/GoogleChromeLabs/react-adaptive-hooks) to the hardware and network capabilities of the user's device
+
+## Accessibility
+
+- Disabled buttons should not have tooltips, they are not accessible [^6]
+- Focusable elements in a sequential list should be navigable with <kbd>↑</kbd> <kbd>↓</kbd>
+- Focusable elements in a sequential list should be deletable with <kbd>⌘</kbd> <kbd>Backspace</kbd>
+- To open immediately on press, dropdown menus should trigger on `mousedown`, not `click`
+- Use a svg favicon with a style tag that adheres to the system theme based on `prefers-color-scheme`
+- Icon only interactive elements should define an explicit `aria-label`
+- Tooltips triggered by hover should not contain interactive content
+- Images should always be rendered with `<img>` for screen readers and ease of copying from the right click menu
+- Illustrations built with HTML should have an explicit `aria-label` instead of announcing the raw DOM tree to people using screen readers
+- Gradient text should unset the gradient on `::selection` state
+- When using nested menus, use a "prediction cone" to prevent the pointer from accidentally closing the menu when moving across other elements.
+
+
+## Design
+
+- Optimistically update data locally and roll back on server error with feedback
+- Authentication redirects should happen on the server before the client loads to avoid janky URL changes
+- Style the document selection state with `::selection`
+- Display feedback relative to its trigger:
+  - Show a temporary inline checkmark on a successful copy, not a notification
+  - Highlight the relevant input(s) on form error(s)
+- Empty states should prompt to create a new item, with optional templates
+
+[^1]: Switching between dark mode or light mode will trigger transitions on elements that are meant for explicit interactions like hover. We can [disable transitions temporarily](https://paco.me/writing/disable-theme-transitions) to prevent this. For Next.js, use [next-themes](https://github.com/pacocoursey/next-themes) which prevents transitions out of the box.
+[^2]: This is a matter of taste but some interactions just feel better with no motion. For example, the native macOS right click menu only animates out, not in, due to the frequent usage of it.
+[^3]: Most touch devices on press will temporarily flash the hover state, unless explicitly only defined for pointer devices with [`@media (hover: hover)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover).
+[^4]: Use [`will-change`](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change) as a last resort to improve performance. Pre-emptively throwing it on elements for better performance may have the opposite effect.
+[^5]: This might be controversial but sometimes it can be beneficial to manipulate the DOM directly. For example, instead of relying on React re-rendering on every wheel event, we can track the delta in a ref and update relevant elements directly in the callback.
+[^6]: Disabled buttons do not appear in tab order in the DOM so the tooltip will never be announced for keyboard users and they won't know why the button is disabled.
+[^7]: As of 2023, Safari will not take the border radius of an element into account when defining custom outline styles. [Safari 16.4](https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes) has added support for `outline` following the curve of border radius. However, keep in mind that not everyone updates their OS immediately.

.claude/plugins/n8n/skills/linear-issue/SKILL.md

@@ -1,4 +1,5 @@
 ---
+name: n8n:linear-issue
 description: Fetch and analyze Linear issue with all related context. Use when starting work on a Linear ticket, analyzing issues, or gathering context about a Linear issue.
 argument-hint: "[issue-id]"
 compatibility:

.claude/plugins/n8n/skills/loom-transcript/SKILL.md

@@ -1,4 +1,5 @@
 ---
+name: n8n:loom-transcript
 description: Fetch and display the full transcript from a Loom video URL. Use when the user wants to get or read a Loom transcript.
 argument-hint: [loom-url]
 ---
@@ -101,4 +102,4 @@ Format and present the full transcript to the user:
 
 - No authentication or cookies are required — Loom's transcript API is publicly accessible.
 - Only English transcripts are available through this API.
-- Transcripts are auto-generated and may contain minor errors.
+- Transcripts are auto-generated and may contain minor errors.

.claude/plugins/n8n/skills/node-add-oauth/SKILL.md

@@ -1,4 +1,5 @@
 ---
+name: n8n:node-add-oauth
 description: Add OAuth2 credential support to an existing n8n node — creates the credential file, updates the node, adds tests, and keeps the CLI constant in sync. Use when the user says /node-add-oauth.
 argument-hint: "[node-name] [optional: custom-scopes flag or scope list]"
 ---

.claude/plugins/n8n/skills/protect-endpoints/SKILL.md

@@ -1,4 +1,5 @@
 ---
+name: n8n:protect-endpoints
 description: Applies n8n's RBAC scope decorators to REST endpoints. Use when creating a new @RestController, adding any @Get/@Post/@Put/@Patch/@Delete route to an existing controller, or reviewing endpoint authorization. Every authenticated endpoint must be gated by @ProjectScope or @GlobalScope.
 ---
 

.claude/plugins/n8n/skills/reproduce-bug/SKILL.md

@@ -1,4 +1,5 @@
 ---
+name: n8n:reproduce-bug
 description: Reproduce a bug from a Linear ticket with a failing test. Expects the full ticket context (title, description, comments) to be provided as input.
 ---
 

.claude/plugins/n8n/skills/setup-mcps/SKILL.md

@@ -1,4 +1,5 @@
 ---
+name: n8n:setup-mcps
 description: >-
   Configure MCP servers for n8n development. Use when the user says /setup-mcps
   or asks to set up MCP servers for n8n.

.claude/plugins/n8n/skills/spec-driven-development/SKILL.md

@@ -1,4 +1,5 @@
 ---
+name: n8n:spec-driven-development
 description: Keeps implementation and specs in sync. Use when working on a feature that has a spec in .claude/specs/, when the user says /spec, or when starting implementation of a documented feature. Also use when the user asks to verify implementation against a spec or update a spec after changes.
 ---
 

.claude/skills

@@ -0,0 +1 @@
+plugins/n8n/skills

packages/frontend/AGENTS.md

@@ -2,7 +2,7 @@
 
 Extra information, specific to the frontend codebase. Use this when doing any frontend work.
 
-- When reviewing CSS/SCSS/Vue changes in `@n8n/design-system` or `editor-ui`, always use `design-system-rules` skill.
+- When reviewing CSS/SCSS/Vue changes in `@n8n/design-system` or `editor-ui`, always use `n8n:design-system` skill.
 - ALWAYS follow the guides in `@n8n/design-system/src/styleguide/*.mdx`
 - PREFER using **semantic tokens** for styling from `@n8n/design-system/src/css/_tokens.scss` or `@n8n/design-system/src/css/_primitives.scss`.
 - AVOID using legacy tokens from `@n8n/design-system/src/css/_tokens.legacy.scss`