New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

React Render Types Setup

by HorusGoul in HorusGoul/eslint-plugin-react-render-types

Install and configure eslint-plugin-react-render-types in a TypeScript React project.

MITAuto-check passedDevelopment

Install React Render Types Setup

skills CLI
$ npx skills add HorusGoul/eslint-plugin-react-render-types --skill react-render-types-setup -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install HorusGoul/eslint-plugin-react-render-types react-render-types-setup --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/HorusGoul/eslint-plugin-react-render-types.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/react-render-types-setup .claude/skills/react-render-types-setup && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
react-render-types-setup
GitHub stars
111
Token cost
~1.8k tokens
SKILL.md length
495 words
Files
1
Skills in repo
2
Repo updated
First seen
Licence
MIT

At a glance

Install and configure eslint-plugin-react-render-types in a TypeScript React project.

  • Adding eslint-plugin-react-render-types to a project
  • SKILL.md covers Prerequisites, Install, ESLint Configuration and Typed Linting, plus 4 more sections
  • Calls npm and eslint
  • Configuring ESLint flat config with typed linting for @renders support

What it does

React Render Types Setup is an agent skill from HorusGoul/eslint-plugin-react-render-types. Install and configure eslint-plugin-react-render-types in a TypeScript React project. Use when: (1) adding eslint-plugin-react-render-types to a project, (2) configuring ESLint flat config with typed linting for @renders support, (3) troubleshooting typed linting errors or plugin configuration, (4) setting up projectService or tsconfig for the plugin, (5) understanding which rules to enable and what they do, or (6) setting up the IDE language service plugin for @renders features (unused import suppression…

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Linting and formatting and Codebase onboarding. It works with React, TypeScript and ESLint. The repository describes itself as: ESLint plugin that brings Flow's Render Types to TypeScript via JSDoc. Enforce component composition constraints like @renders {MenuItem} at lint time. The licence is MIT.

When your agent uses it

  • Adding eslint-plugin-react-render-types to a project
  • Configuring ESLint flat config with typed linting for @renders support
  • Troubleshooting typed linting errors
  • Plugin configuration

Example prompts

  • “/react-render-types-setup”

Requirements

  • Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit eae86d5. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm
    • eslint

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • typescript-eslint.io

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

React Render Types Setup loads about 1.8k tokens when it runs. Until then it costs about 153 tokens; SKILL.md has 495 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~153
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from HorusGoul/eslint-plugin-react-render-types at commit eae86d5, republished under its MIT licence (© HorusGoul). 495 words, ~1,817 tokens.

Download SKILL.mdSave it as .claude/skills/react-render-types-setup/SKILL.md (or your agent's skills folder).
name
react-render-types-setup
description
Install and configure eslint-plugin-react-render-types in a TypeScript React project. Use when: (1) adding eslint-plugin-react-render-types to a project, (2) configuring ESLint flat config with typed linting for @renders support, (3) troubleshooting typed linting errors or plugin configuration, (4) setting up projectService or tsconfig for the plugin, (5) understanding which rules to enable and what they do, or (6) setting up the IDE language service plugin for @renders features (unused import suppression, go-to-definition, hover, completions, find references, rename, diagnostics).

React Render Types — Setup

Install and configure eslint-plugin-react-render-types to enforce component composition constraints at lint time.

Prerequisites

  • ESLint >= 9 (flat config)
  • TypeScript >= 5
  • @typescript-eslint/parser >= 8
  • A working tsconfig.json

Install

bash
npm install eslint-plugin-react-render-types --save-dev

ESLint Configuration

Typed linting is required — the plugin uses TypeScript's type checker for cross-file component identity.

javascript
// eslint.config.js
import tseslint from "typescript-eslint";
import reactRenderTypes from "eslint-plugin-react-render-types";

export default [
  ...tseslint.configs.recommended,
  reactRenderTypes.configs.recommended,
  {
    languageOptions: {
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
];
Manual (pick rules individually)
javascript
// eslint.config.js
import reactRenderTypes from "eslint-plugin-react-render-types";
import tsParser from "@typescript-eslint/parser";

export default [
  {
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        projectService: true,
        ecmaFeatures: { jsx: true },
      },
    },
    plugins: {
      "react-render-types": reactRenderTypes,
    },
    rules: {
      "react-render-types/valid-render-return": "error",
      "react-render-types/valid-render-prop": "error",
      "react-render-types/valid-renders-jsdoc": "warn",
      "react-render-types/renders-uses-vars": "error",
    },
  },
];

Typed Linting

Two options — pick one:

Option 1: projectService (recommended)

javascript
parserOptions: {
  projectService: true,
}

Automatically infers tsconfig for each file.

Option 2: Explicit project path

javascript
parserOptions: {
  project: './tsconfig.json',
  // Monorepos: project: ['./tsconfig.json', './packages/*/tsconfig.json'],
}

Rules

RuleDefaultPurpose
valid-render-returnerrorComponent return matches its @renders declaration
valid-render-properrorProps/children receive compatible components
valid-renders-jsdocwarn@renders syntax is well-formed (braces, PascalCase)
renders-uses-varserrorPrevents no-unused-vars on @renders references
require-renders-annotationoffRequires @renders on all components
Enabling require-renders-annotation for specific paths
javascript
export default [
  reactRenderTypes.configs.recommended,
  {
    files: ["src/design-system/**/*.tsx"],
    rules: {
      "react-render-types/require-renders-annotation": "error",
    },
  },
];

Settings

additionalTransparentComponents

Specify component names to treat as transparent wrappers without @transparent JSDoc. Useful for built-in components like Suspense or third-party components you can't annotate. Note that @transparent annotations are resolved cross-file automatically, so settings are only needed for components without JSDoc.

String entries default to looking through children. Object entries specify which props to look through:

javascript
// eslint.config.js
export default [
  reactRenderTypes.configs.recommended,
  {
    languageOptions: {
      parserOptions: { projectService: true },
    },
    settings: {
      "react-render-types": {
        additionalTransparentComponents: [
          "Suspense",
          "ErrorBoundary",
          { name: "Flag", props: ["off", "children"] },
        ],
      },
    },
  },
];

For member expressions like <React.Suspense>, use the dotted form: "React.Suspense".

These merge with @transparent JSDoc annotations — both sources are combined. @transparent annotations work cross-file automatically via TypeScript's type checker.

additionalComponentWrappers

The plugin recognizes forwardRef and memo as component wrappers by default. If you use other wrapper functions (e.g., MobX's observer, styled-components' styled), add them so the plugin can detect @renders annotations on wrapped components:

javascript
settings: {
  "react-render-types": {
    additionalComponentWrappers: ["observer", "styled"],
  },
},

This matches both direct calls (observer(...)) and member expressions (mobx.observer(...)).

Show full SKILL.md (246 more words)Show less

IDE Integration: Language Service Plugin

The plugin includes a TypeScript Language Service Plugin that enhances the IDE experience for @renders annotations.

Add to tsconfig.json:

json
{
  "compilerOptions": {
    "plugins": [
      { "name": "eslint-plugin-react-render-types/lsp" }
    ]
  }
}

Then restart the TypeScript server (VS Code: Ctrl+Shift+P → "TypeScript: Restart TS Server").

Features:

  • Unused import suppression — Imports referenced only in @renders annotations are kept visible and won't be auto-removed by "organize imports"
  • Go-to-definition — Cmd+Click on component names inside @renders annotations navigates to the component definition
  • Hover info — Hovering component names inside @renders shows the same type information as hovering the import
  • Diagnostics — Warns when a component name in @renders doesn't resolve to any import or declaration in the file
  • Completions — Autocompletes component names when typing inside @renders { } braces
  • Find references — "Find All References" on a component includes @renders annotation usages across the project
  • Rename — Renaming a component updates @renders annotations that reference it

Important: This is IDE-only — it runs in the editor's TypeScript language service, not during tsc CLI builds. For CI, use @typescript-eslint/no-unused-vars with the renders-uses-vars rule.

Troubleshooting

ErrorFix
Plugin throws without type infoAdd projectService: true to parserOptions
"Cannot read file tsconfig.json"Check project path is correct relative to ESLint CWD
"File is not part of a TypeScript project"Add file to tsconfig include, or use projectService: { allowDefaultProject: ['*.tsx'] }
no-unused-vars on @renders importsEnsure renders-uses-vars rule is enabled (included in recommended)
IDE shows unused import for @renders referenceAdd the language service plugin to tsconfig.json compilerOptions.plugins (see IDE Integration above)
Performance issuesRun TIMING=1 eslint . — see typescript-eslint perf docs

© HorusGoul, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/react-render-types-setup of HorusGoul/eslint-plugin-react-render-types.

Open the folder on GitHubat commit eae86d5

Compare with similar skills

React Render Types Setup next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

React Render Types Setup compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React Render Types Setup this skillHorusGoul/eslint-plugin-react-render-types111—~1.8kAutomated safety check: PassMIT
Ultraciteagustinusnathaniel/nextarter-tailwind1252 repos~1.2kAutomated safety check: PassMIT
Typescript Tooling MigrationArize-ai/phoenix12k—~2.8kAutomated safety check: PassApache-2.0
Ultracitesecondsky/claude-skills227—~6.5kAutomated safety check: PassMIT
Eslintmanagedcode/dotnet-skills486—~1.5kAutomated safety check: PassMIT
Typescript Rulessoftspark/ai-toolkit179—~2.7kAutomated safety check: NotesApache-2.0

Similar skills

  • Ultracite

    agustinusnathaniel/nextarter-tailwind

    Ultracite is a zero-config linting and formatting preset for JavaScript/TypeScript projects.

    125 GitHub starsUsed in 2 repos~1.2k tokens
    DevelopmentAuto-check passed

  • Typescript Tooling Migration

    Arize-ai/phoenix

    Migrate or upgrade TypeScript tooling in the Phoenix monorepo.

    12k GitHub stars~2.8k tokensUpdated today
    DevelopmentAuto-check passed

  • Ultracite

    secondsky/claude-skills

    Ultracite multi-provider linting/formatting (Biome, ESLint, Oxlint).

    227 GitHub stars~6.5k tokensUpdated 9 days ago
    DevelopmentAuto-check passed

  • Eslint

    managedcode/dotnet-skills

    Use ESLint in .NET repositories that ship JavaScript, TypeScript, React, or other Node-based frontend assets.

    486 GitHub stars~1.5k tokensUpdated today
    DevelopmentAuto-check passed

  • Typescript Rules

    softspark/ai-toolkit

    TypeScript/JavaScript coding rules: style, patterns, security, testing.

    179 GitHub stars~2.7k tokensUpdated today
    Testing & QAAuto-check: notes

  • Code Quality

    redis/RedisInsight

    Official

    Code-quality standards for RedisInsight: TypeScript strictness, naming conventions (camelCase, PascalCase, UPPERSNAKECASE), linting rules, no any without reason, no !important in styles, and…

    8.9k GitHub stars~1.2k tokensUpdated 3 days ago
    DevelopmentAuto-check passed

More from HorusGoul/eslint-plugin-react-render-types

  • React Render Types Composition

    HorusGoul/eslint-plugin-react-render-types

    Composition patterns for building React components with @renders type annotations from eslint-plugin-react-render-types.

    111 GitHub stars~1.1k tokensUpdated 2 mo ago
    Auto-check passed

Works with

Categories

Questions about React Render Types Setup

What does React Render Types Setup do?

Install and configure eslint-plugin-react-render-types in a TypeScript React project. React Render Types Setup is an agent skill from HorusGoul/eslint-plugin-react-render-types. Install and configure eslint-plugin-react-render-types in a TypeScript React project.

When should I use React Render Types Setup?

React Render Types Setup fits situations like: adding eslint-plugin-react-render-types to a project; configuring ESLint flat config with typed linting for @renders support; troubleshooting typed linting errors; plugin configuration.

How do I install React Render Types Setup in Claude Code?

Run `npx skills add HorusGoul/eslint-plugin-react-render-types --skill react-render-types-setup -a claude-code`. Or copy the skill folder (skills/react-render-types-setup in HorusGoul/eslint-plugin-react-render-types) into .claude/skills/react-render-types-setup in your project. Claude Code loads it when a task matches its description.

How do I install React Render Types Setup in Codex?

Run `npx skills add HorusGoul/eslint-plugin-react-render-types --skill react-render-types-setup -a codex`. Or copy the skill folder (skills/react-render-types-setup in HorusGoul/eslint-plugin-react-render-types) into .agents/skills/react-render-types-setup in your project. Codex loads it when a task matches its description.

Can I use React Render Types Setup in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add HorusGoul/eslint-plugin-react-render-types --skill react-render-types-setup -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-render-types-setup, .gemini/skills/react-render-types-setup, .github/skills/react-render-types-setup and .opencode/skills/react-render-types-setup in your project.

What does React Render Types Setup need to run?

Going by SKILL.md and its folder, React Render Types Setup needs the command-line tools its instructions call (npm and eslint). Our summary lists: Node.js.

Does React Render Types Setup access the network?

SKILL.md names 1 domain. As links in the text: typescript-eslint.io. This is read from the text; nothing was executed.

Is React Render Types Setup safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does React Render Types Setup use?

React Render Types Setup is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React Render Types Setup use?

About 1.8k tokens (SKILL.md is roughly 7.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to React Render Types Setup?

Skills that share tags, products or a category with React Render Types Setup: Ultracite (agustinusnathaniel/nextarter-tailwind, 125 stars), Typescript Tooling Migration (Arize-ai/phoenix, 12k stars), Ultracite (secondsky/claude-skills, 227 stars) and Eslint (managedcode/dotnet-skills, 486 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React Render Types Setup?

HorusGoul (a GitHub user) maintains it in HorusGoul/eslint-plugin-react-render-types, which has 111 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on July 18, 2026.

Source: HorusGoul/eslint-plugin-react-render-types on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.