skills.rest
HorusGoulHorusGoulCommunity·5 Agent Skills Included

eslint-plugin-react-render-types

Enforce React component composition rules at lint time

Enforces which React components can render inside others using simple @renders JSDoc annotations, checked automatically at lint time. Catches wrong children, invalid slot props, and broken design system rules before code ships, without manual code review. Includes setup, composition patterns, and IDE integration so teams adopt typed component constraints quickly.
110|3
↗
npx skills add HorusGoul/eslint-plugin-react-render-types --all -g -y
Available:

Gives your AI agent the project architecture, build and test commands, and workflow rules it needs to correctly develop and validate changes to this ESLint plugin.

All Skills in This Repository (5)

Pure Emerald Level Indicators
📦 In Repo
HorusGoulHorusGoul

web-design-guidelines

Enforce Web Interface Guidelines compliance across UI code and design artifacts.

Community
Intermediate
📦 In Repo
HorusGoulHorusGoul

vercel-react-best-practices

Apply React and Next.js performance best practices to rendering, data fetching, and bundle size.

Community
Advanced
📦 In Repo
HorusGoulHorusGoul

vercel-composition-patterns

Refactor React component libraries using compound components and context-driven composition.

Community
Intermediate
📦 In Repo
HorusGoulHorusGoul

react-render-types-composition

Enforce React component composition constraints with @renders type annotations in lint-time checks.

Community
Intermediate
📦 In Repo
HorusGoulHorusGoul

react-render-types-setup

Configure eslint-plugin-react-render-types with flat ESLint configs in TypeScript React projects.

Community
Advanced

Frequently Asked Questions

FAQPage Schema
How to install eslint-plugin-react-render-types?▼

Run `npx skills add HorusGoul/eslint-plugin-react-render-types --all -g -y` in your terminal to install all skills in this suite globally.

What does eslint-plugin-react-render-types do?▼

It brings Flow-style Render Types to TypeScript through @renders JSDoc annotations, so ESLint errors when a component renders the wrong child, such as a Button inside a Menu that only accepts MenuItem.

How do I restrict which components a React component accepts?▼

Add an @renders annotation like `/** @renders {MenuItem} */` to the component or prop, and the plugin validates every usage at lint time, including cross-file cases.

Does it require special ESLint configuration?▼

Yes, it requires typed linting with `projectService: true` in your flat config so the plugin can use TypeScript's type checker for cross-file component resolution.

Does it work with AI coding assistants?▼

Yes. The included skills teach your AI agent the setup steps and composition patterns, and the IDE language service plugin adds go-to-definition, hover, and rename support for @renders annotations.

Related Repositories in Software Engineering

View All in Software Engineering→
openclawopenclaw
388.4k

openclaw

Run a personal AI assistant across your devices and chat apps

Official📦 120 Skills
obraobra
280.0k

superpowers

Gives coding agents a disciplined workflow from idea to merged code

Community📦 15 Skills
facebookfacebook
248.4k

react

AI agent skills for building, testing, and porting React core

Official📦 14 Skills