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 Composition

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

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

MITAuto-check passedFrontend & Design

Install React Render Types Composition

skills CLI
$ npx skills add HorusGoul/eslint-plugin-react-render-types --skill react-render-types-composition -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-composition --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-composition .claude/skills/react-render-types-composition && 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-composition
GitHub stars
111
Token cost
~1.1k tokens
SKILL.md length
241 words
Files
5 (incl. references)
Skills in repo
2
Repo updated
First seen
Licence
MIT

At a glance

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

  • Writing React components that need @renders JSDoc annotations
  • SKILL.md covers Annotation Syntax Quick…, Pattern Categories, Design System Patterns and Wrapper Patterns, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Building a design system with enforced component composition (e.g.

What it does

React Render Types Composition is an agent skill from HorusGoul/eslint-plugin-react-render-types. Composition patterns for building React components with @renders type annotations from eslint-plugin-react-render-types. Use when: (1) writing React components that need @renders JSDoc annotations, (2) building a design system with enforced component composition (e.g., Menu only accepts MenuItem), (3) deciding which @renders modifier to use (required, optional, many, unchecked), (4) creating wrapper or transparent components, (5) annotating slot props like children/header/footer, (6) using render chains, union…

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including reference files (for example `references/patterns/advanced.md`, `references/patterns/app-composition.md` and `references/patterns/design-system.md`).

It sits in Frontend & Design, covering Linting and formatting, React components and Design systems. It works with React, ESLint and TypeScript. 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

  • Writing React components that need @renders JSDoc annotations
  • Building a design system with enforced component composition (e.g.
  • Menu only accepts MenuItem)
  • Deciding which @renders modifier to use (required

Example prompts

  • “/react-render-types-composition”

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

    No scripts in the folder and no shell commands in SKILL.md.

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

  • Network

    No URLs in SKILL.md.

    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 Composition loads about 1.1k tokens when it runs, and up to ~6k if it reads all its reference files. Until then it costs about 165 tokens; SKILL.md has 241 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~165
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~6k

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). 241 words, ~1,052 tokens.

Download SKILL.mdSave it as .claude/skills/react-render-types-composition/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
react-render-types-composition
description
Composition patterns for building React components with @renders type annotations from eslint-plugin-react-render-types. Use when: (1) writing React components that need @renders JSDoc annotations, (2) building a design system with enforced component composition (e.g., Menu only accepts MenuItem), (3) deciding which @renders modifier to use (required, optional, many, unchecked), (4) creating wrapper or transparent components, (5) annotating slot props like children/header/footer, (6) using render chains, union types, or type aliases with @renders, or (7) building app layouts that consume a @renders-annotated design system.

React Render Types — Composition Patterns

Patterns for building React components with @renders type annotations. Covers design system primitives, app-level composition, and advanced techniques.

Annotation Syntax Quick Reference

@renders {X}           Required — must return X
@renders? {X}          Optional — may return X or null
@renders* {X}          Many — zero or more X
@renders! {X}          Unchecked — declares X, skips return validation
@renders {A | B}       Union — must return A or B
@renders {MyAlias}     Type alias — resolves type MyAlias = A | B at lint time
@transparent           Wrapper — plugin looks through to validate children
                       (or use additionalTransparentComponents setting for built-ins)

Pattern Categories

PriorityCategoryWhen to read
1Design System PatternsBuilding constrained component APIs
2Wrapper PatternsCreating transparent or conditional wrappers
3App Composition PatternsConsuming a design system in app layouts
4Advanced PatternsUnions, chains, dynamic rendering, expressions

Design System Patterns

Core patterns for building component libraries with enforced composition.

  • constrained-children — Restrict children to specific component types (Menu → MenuItem)
  • typed-slot-props — Enforce types on named slot props (header, footer, sidebar)
  • component-variants — Create specialized variants that satisfy a base render type

Read detailed examples: references/patterns/design-system.md

Wrapper Patterns

Patterns for components that wrap other content without breaking composition.

  • transparent-wrappers — Mark layout/styling wrappers with @transparent
  • conditional-rendering — Use @renders? and @renders* for optional/repeated content

Read detailed examples: references/patterns/wrappers.md

App Composition Patterns

Patterns for building app-level layouts that consume design system components.

  • page-layouts — Compose pages with typed header/content/footer slots
  • dashboard-composition — Build dashboards with constrained card/widget areas
  • navigation-structure — Typed sidebar/nav with enforced nav item types

Read detailed examples: references/patterns/app-composition.md

Advanced Patterns

Techniques for complex scenarios.

  • union-types — Accept multiple component types in a single slot
  • type-aliases — Define reusable type unions for @renders annotations
  • render-chains — Satisfy render types transitively through intermediate components
  • unchecked-escape-hatch — Use @renders! for dynamic rendering the plugin can't analyze
  • expression-analysis — Ternary, logical AND, and .map() in annotated returns

Read detailed examples: references/patterns/advanced.md

Choosing the Right Modifier

Can the slot be empty?
├── No → Must always render something
│   ├── Exactly one component → @renders {X}
│   └── One of several types  → @renders {A | B}
└── Yes
    ├── Zero or one component  → @renders? {X}
    └── Zero or more instances → @renders* {X}

Can the plugin analyze the return?
├── Yes → use the modifier above
└── No (dynamic/registry) → add ! → @renders! {X}, @renders?! {X}, @renders*! {X}

© 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

SKILL.md and 4 other files (references) in skills/react-render-types-composition of HorusGoul/eslint-plugin-react-render-types.

  • SKILL.md
  • references/patterns/advanced.md
  • references/patterns/app-composition.md
  • references/patterns/design-system.md
  • references/patterns/wrappers.md

Open the folder on GitHubat commit eae86d5

Compare with similar skills

React Render Types Composition 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 Composition compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React Render Types Composition this skillHorusGoul/eslint-plugin-react-render-types111—~1.1kAutomated safety check: PassMIT
DaleuiDaleStudy/daleui119—~675Automated safety check: PassMIT
Typescript Styletjx666/vscode-mcp106—~961Automated safety check: PassCustom licence
Typescript Rulessoftspark/ai-toolkit179—~2.7kAutomated safety check: NotesApache-2.0
Animated React Component LibrariesHainrixz/editor-pro-max2601 repos~5.7kAutomated safety check: PassCustom licence
Fast Typescript Checkinternet-development/www-sacred1.6k—~4.3kAutomated safety check: PassMIT

Similar skills

  • Daleui

    DaleStudy/daleui

    Use the daleui React design system with semantic Panda CSS tokens and accessible components.

    119 GitHub stars~675 tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Typescript Style

    tjx666/vscode-mcp

    TypeScript code style and repo conventions for VSCode MCP — inference vs explicit types, ESM import suffixes, zod schema contracts, async VSCode/Node APIs, JSON-safe IPC results, JSDoc for public…

    106 GitHub stars~961 tokensUpdated 2 mo ago
    DevelopmentAuto-check passed

  • Typescript Rules

    softspark/ai-toolkit

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

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

  • Animated React Component Libraries

    Hainrixz/editor-pro-max

    Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.

    260 GitHub starsUsed in 1 repo~5.7k tokens
    Frontend & DesignAuto-check passed

  • Fast Typescript Check

    internet-development/www-sacred

    Keep www-sacred's TypeScript fast to type-check and fast to run.

    1.6k GitHub stars~4.3k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Wonder Blocks

    Khan/wonder-blocks

    Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library.

    163 GitHub stars~3.2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

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

  • React Render Types Setup

    HorusGoul/eslint-plugin-react-render-types

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

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

Works with

Categories

Questions about React Render Types Composition

What does React Render Types Composition do?

Composition patterns for building React components with @renders type annotations from eslint-plugin-react-render-types. React Render Types Composition is an agent skill from HorusGoul/eslint-plugin-react-render-types. Composition patterns for building React components with @renders type annotations from eslint-plugin-react-render-types.

When should I use React Render Types Composition?

React Render Types Composition fits situations like: writing React components that need @renders JSDoc annotations; building a design system with enforced component composition (e.g; menu only accepts MenuItem); deciding which @renders modifier to use (required.

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

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

How do I install React Render Types Composition in Codex?

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

Can I use React Render Types Composition 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-composition -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-composition, .gemini/skills/react-render-types-composition, .github/skills/react-render-types-composition and .opencode/skills/react-render-types-composition in your project.

What does React Render Types Composition need to run?

SKILL.md names no scripts, command-line tools or credentials: React Render Types Composition is instructions for the agent only.

Does React Render Types Composition access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is React Render Types Composition 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 Composition use?

React Render Types Composition 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 Composition use?

About 1.1k tokens (SKILL.md is roughly 4.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 4.9k tokens, read only when the agent opens those files.

What are the alternatives to React Render Types Composition?

Skills that share tags, products or a category with React Render Types Composition: Daleui (DaleStudy/daleui, 119 stars), Typescript Style (tjx666/vscode-mcp, 106 stars), Typescript Rules (softspark/ai-toolkit, 179 stars) and Animated React Component Libraries (Hainrixz/editor-pro-max, 260 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 Composition?

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.