mcpbeat Sign in

Tsconfigs Agent Skill

>- Locate and modify TypeScript configuration in RedisInsight. Use when adding path aliases, introducing a new TS area, debugging webpack/ts-node/ESLint path resolution, or the user asks about tsconfig, path mappings, or where TypeScript is configured.

1k tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
8685
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/redis/RedisInsight --skill tsconfigs

The instruction itself

10 sections, as written by the author

TypeScript Configuration

RedisInsight has no root tsconfig.json. Config is split per area, each owning its own paths, includes, and consumers. ESLint uses parserOptions.project: true to auto-discover the nearest tsconfig for each linted file.

Layout

| File | Owns | Consumers |

| - | - | - |

| redisinsight/ui/tsconfig.json | UI source, uiSrc/*, apiClient paths | Vite (UI build), ESLint UI override, npm run type-check:ui |

| redisinsight/api/tsconfig.json | API source, src/*, tests/* paths | NestJS build, ESLint API override |

| redisinsight/api/tsconfig.check.json | Same as base + strict: true (with strictPropertyInitialization and useUnknownInCatchVariables off) and noEmit: true | npm run type-check:api only — kept separate so strict mode doesn't break nest build. See the type-check-baselines skill. |

| redisinsight/desktop/tsconfig.json | Desktop source. Paths desktopSrc/*, apiSrc/*, uiSrc/*, apiClient, apiClient/* for TypeScript / IDE intellisense | ESLint for desktop files, TS language server |

| configs/tsconfig.json | Compiler options (module: CommonJS, esModuleInterop) used by ts-node to load the .ts webpack configs | ts-node via TS_NODE_PROJECT set in build:main / build:main:stage / build:stage |

| .storybook/tsconfig.json | Storybook framework files, extends UI tsconfig | Storybook + ESLint |

| stories/tsconfig.json | Story files. Extends UI tsconfig; rewires uiSrc/* to resolve from redisinsight/ui | Storybook + ESLint |

| tests/e2e-playwright/tsconfig.json | Playwright E2E suite | E2E runner (sub-project with own package.json, eslint-ignored at root) |

Webpack path resolution (configs/webpack.config.base.ts)

Webpack uses explicit resolve.alias entries (not tsconfig-paths-webpack-plugin):

alias: {
  desktopSrc: webpackPaths.desktopSrcPath,
  apiSrc: resolve(webpackPaths.apiPath, 'src'),
  uiSrc: webpackPaths.uiSrcPath,
  apiClient: resolve(webpackPaths.riPath, 'api-client'),
  // ...
}

If you add a new path alias used by desktop code, add it in both places: redisinsight/desktop/tsconfig.json (for TypeScript / ESLint / IDE) and configs/webpack.config.base.ts resolve.alias (for the electron bundle).

ts-node and webpack TS configs

The webpack configs in configs/ are .ts files with type annotations. When webpack --config ./configs/*.ts runs, ts-node compiles them. Three package.json scripts set TS_NODE_PROJECT=./configs/tsconfig.json so ts-node uses the right compiler options:

  • build:main
  • build:main:stage
  • build:stage

configs/tsconfig.json deliberately does not set allowJs. Any .js file inside scripts/ or configs/ must be CommonJS (require / module.exports) — Node 22's module syntax detection will treat ESM-syntax .js files as ESM and break references to __dirname. Two scripts converted for this reason: scripts/prebuild.js, scripts/DeleteSourceMaps.js.

ESLint

.eslintrc.js:

  • Root parserOptions.project: true — auto-discovers the nearest tsconfig per file.
  • API override: parserOptions.project: redisinsight/api/tsconfig.json (explicit).
  • UI override: parserOptions.project: redisinsight/ui/tsconfig.json (explicit).
  • Files in .storybook/, .github/, etc. are not linted by eslint . because ESLint skips dot-prefixed paths during directory expansion.

If you add a top-level TS folder that ESLint will reach, drop a tsconfig in it or parserOptions.project: true will fail to find one.

Common tasks

Adding a path alias used by desktop / electron

  • Add the alias to redisinsight/desktop/tsconfig.json compilerOptions.paths.
  • If the alias is also used by UI code, add it to redisinsight/ui/tsconfig.json.
  • If the alias is also used by API code, add it to redisinsight/api/tsconfig.json.
  • For aliases used by the electron bundle (anything imported from redisinsight/desktop/**), also mirror the alias into configs/webpack.config.base.ts resolve.alias. Vite resolves UI aliases from redisinsight/ui/tsconfig.json automatically.

Adding a new top-level TS folder

Create a tsconfig.json in it. Bare minimum:

{
  "extends": "../redisinsight/ui/tsconfig.json",
  "include": ["**/*"]
}

Without it, ESLint's parserOptions.project: true will error on those files.

Adding a new .ts webpack config under configs/

No action needed — configs/tsconfig.json includes **/*.

Adding a Node script that needs to run without ts-node

Place under scripts/ as CommonJS (require/module.exports). Do not use ESM syntax — configs/tsconfig.json no longer has allowJs and Node 22 will load ESM-syntax .js files as ESM (no __dirname).

Other skills for the same job

different authors, same section of the catalogue
MCP Builder
by anthropics
vendor ×13

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

30k tokens scripts
Changelog Generator
by frostant
×9

Automatically creates user-facing changelogs from git commits by analyzing commit history, categorizing changes, and transforming technical commits into clear, customer-friendly release notes. Turns hours of manual changelog writing into minutes of automated generation.

774 tokens
Finishing A Development Branch
by ZhanlinCui
×7

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup

1k tokens
MCP Builder
by JayZeeDesign
×7

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

37k tokens scripts
Vercel React Native Skills
by vercel-labs
vendor ×6

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

39k tokens
Vercel React Best Practices
by ratacat
×5

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

34k tokens
Next Best Practices
by vercel-labs
vendor ×4

Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling

20k tokens
Using Git Worktrees
by ZhanlinCui
×4

Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification

1k tokens

How to use it

Copy the folder

Take redis/tsconfigs from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.