Skip to main content
skill CX Codex

sap-fiori-eslint-plugin — Claude Code skill: ESLint for SAP Fiori

This skill sets up, migrates and runs ESLint with @sap-ux/eslint-plugin-fiori-tools in SAP Fiori projects. Useful when linting is missing or broken.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add SAP/open-ux-tools --skill sap-fiori-eslint-plugin -a claude-code
Open on GitHub

What sap-fiori-eslint-plugin does

The skill handles @sap-ux/eslint-plugin-fiori-tools in SAP Fiori projects — freestyle and Fiori elements, standalone or inside a CAP project. It first works out what you want: set up ESLint from scratch, migrate a legacy config, or just run a lint pass. Then it follows that path.

When the intent is unclear, the skill inspects the project itself. It looks for eslint.config.mjs, eslint.config.js and any .eslintrc* files. Nothing found means a fresh setup. A .eslintrc* file means migration to ESLint 9 flat config. An eslint.config.mjs file means run the linter. If it still can't tell, it asks you.

There is a separate app-scope mode that reports UX consistency issues for a specific app, including checks against Page Map. You need Node.js with npm, pnpm or yarn for any of this to run.

What it helps with

  • add ESLint to a SAP Fiori project that has none
  • migrate a legacy .eslintrc to ESLint 9 flat config
  • run linting and fix the errors it reports
  • list UX consistency issues for one app
  • check app issues against Page Map

Example prompts for the agent

  • set up ESLint in my SAP Fiori project
  • migrate my ESLint config to flat config
  • show UX consistency issues for my app

How to install sap-fiori-eslint-plugin

1Skills CLI (Vercel)

npx skills add SAP/open-ux-tools --skill sap-fiori-eslint-plugin -a claude-code

2Manually: put the files in place

~/.claude/skills/sap-fiori-eslint-plugin/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/sap-fiori-eslint-plugin/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about sap-fiori-eslint-plugin

How do I install sap-fiori-eslint-plugin in Claude?

Run npx skills add SAP/open-ux-tools --skill sap-fiori-eslint-plugin -a claude-code. The skill then lives at ~/.claude/skills/sap-fiori-eslint-plugin/SKILL.md.

What does sap-fiori-eslint-plugin do?

It configures ESLint with @sap-ux/eslint-plugin-fiori-tools, migrates legacy configs to flat config, and runs code checks in SAP Fiori projects.

What does the skill need to work?

Node.js with npm, pnpm or yarn. It targets SAP Fiori freestyle and Fiori elements projects, standalone or inside a CAP project.

Source text

SKILL.md · Apache-2.0
---
name: sap-fiori-eslint-plugin
description: >
  Configure, migrate, or run ESLint with @sap-ux/eslint-plugin-fiori-tools in SAP Fiori projects
  (standalone or CAP). Use when ESLint is missing and the user wants to add it or add code quality
  checks; when an existing .eslintrc or eslint@8 config needs upgrading to ESLint 9 flat config;
  when the user wants to run linting, fix lint errors, or ESLint is broken or not working; or when
  the user wants to see the application issues or UX consistency issues for a specific app — e.g.
  "show application issue(s) for my project <project_name>", "show application issues for app X",
  "UX consistency issues", "issues consistent with Page Map",
  "same issues as Application Information".
compatibility: Requires Node.js with npm, pnpm, or yarn. Designed for SAP Fiori freestyle and Fiori elements projects (standalone or inside a CAP project).
metadata:
  author: sap-fiori-tools
  version: "0.0.2"
---

# SAP Fiori ESLint Plugin

Work with `@sap-ux/eslint-plugin-fiori-tools` on SAP Fiori projects: set up ESLint from scratch, migrate from a legacy configuration, or run and fix lint issues.

## Determine which task to perform

Identify the user's intent from their request:

| User says / situation | Task | Reference |
|---|---|---|
| "Set up ESLint", "Add ESLint", no `eslint.config.mjs` exists | **Set up** | [references/setup.md](references/setup.md) |
| "Migrate ESLint", `.eslintrc` / eslint@8 present, upgrade ESLint | **Migrate** | [references/migrate.md](references/migrate.md) |
| "Run ESLint", "Check my code", "Fix lint errors", `eslint.config.mjs` exists | **Lint** | [references/lint.md](references/lint.md) |
| "Show all application issues", "show UX consistency issues", "issues for app X", "same issues as Page Map/App Info" | **App issues only** | [references/lint.md](references/lint.md) — follow the **App-scope mode** section |

If the intent is unclear, check the project state:

```bash
# Check for existing ESLint config (any format)
ls eslint.config.mjs eslint.config.js .eslintrc .eslintrc.js .eslintrc.cjs .eslintrc.json .eslintrc.yml .eslintrc.yaml 2>/dev/null
```

- **No config found** → follow [references/setup.md](references/setup.md)
- **Legacy config found** (`.eslintrc*`) → follow [references/migrate.md](references/migrate.md)
- **Flat config found** (`eslint.config.mjs`) → follow [references/lint.md](references/lint.md)


If the intent is still unclear, ask the user to clarify whether they want to set up ESLint, migrate an existing config, or run linting.

© sap-fiori-tools · Apache-2.0 · SAP/open-ux-tools

Similar skills

Everything for Frontend and UI →

From the same set5

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor