New: 98,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

Split React Components

by deadlock-mod-manager in deadlock-mod-manager/deadlock-mod-manager

Split React/TSX files containing multiple inlined components into separate single-responsibility files.

GPL-3.0Auto-check passedFrontend & Design

Install Split React Components

skills CLI
$ npx skills add deadlock-mod-manager/deadlock-mod-manager --skill split-react-components -a claude-code

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

GitHub CLI
$ gh skill install deadlock-mod-manager/deadlock-mod-manager split-react-components --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/deadlock-mod-manager/deadlock-mod-manager.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/split-react-components .claude/skills/split-react-components && 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
split-react-components
GitHub stars
574
Token cost
~1.1k tokens
SKILL.md length
330 words
Files
1
Skills in repo
25
Repo updated
First seen
Licence
GPL-3.0

At a glance

Split React/TSX files containing multiple inlined components into separate single-responsibility files.

  • Works in 5 steps: Inline sub-components defined inside… → SVG icon components inlined alongside… → Large string literals / data constants… → …
  • Asked to split components
  • SKILL.md covers What counts as slop, Workflow, File naming and Example, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Split React Components is an agent skill from deadlock-mod-manager/deadlock-mod-manager. Split React/TSX files containing multiple inlined components into separate single-responsibility files. Use when asked to "split components", "extract components", "single responsibility", "clean up component file", "too many components in one file", "component slop", or when running deslop/cleanup on React code.

Its SKILL.md is about 1.1k 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 Frontend & Design, covering React components and Humanizing AI text. It works with React. The repository describes itself as: A mod manager for the Valve game Deadlock. The licence is GPL-3.0.

When your agent uses it

  • Asked to split components
  • Extract components
  • Single responsibility
  • Clean up component file

Example prompts

  • “split components”
  • “extract components”
  • “single responsibility”
  • “/split-react-components”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Inline sub-components defined inside another component's function body. These re-create on every render and bloat the host file. Even if…
  2. SVG icon components inlined alongside the component that uses them. These belong in a dedicated icons file.
  3. Large string literals / data constants (SVG markup, config arrays, static data) taking more than ~5 lines.
  4. Interfaces/types that only exist to serve an extracted component — they travel with it.
  5. Hooks that serve a single sub-component — extract alongside it.

What it can do on your machine

Read from SKILL.md and the folder at commit 45c273c. 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 (its code samples are typescript).

    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

Split React Components loads about 1.1k tokens when it runs. Until then it costs about 84 tokens; SKILL.md has 330 words of instructions outside code blocks.

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

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 deadlock-mod-manager/deadlock-mod-manager at commit 45c273c, republished under its GPL-3.0 licence (© deadlock-mod-manager). 330 words, ~1,083 tokens.

Download SKILL.mdSave it as .claude/skills/split-react-components/SKILL.md (or your agent's skills folder).
name
split-react-components
description
Split React/TSX files containing multiple inlined components into separate single-responsibility files. Use when asked to "split components", "extract components", "single responsibility", "clean up component file", "too many components in one file", "component slop", or when running deslop/cleanup on React code.
disable-model-invocation
true

Split React Components

One file, one component, its own types, its own hooks. Anything else is slop.

What counts as slop

  1. Inline sub-components defined inside another component's function body. These re-create on every render and bloat the host file. Even if they're small.
  2. SVG icon components inlined alongside the component that uses them. These belong in a dedicated icons file.
  3. Large string literals / data constants (SVG markup, config arrays, static data) taking more than ~5 lines.
  4. Interfaces/types that only exist to serve an extracted component — they travel with it.
  5. Hooks that serve a single sub-component — extract alongside it.
Do NOT split
  • Tiny styled wrappers (< 5 lines) tightly coupled to the parent's markup.
  • Next.js app router files in apps/docs only (loading.tsx, error.tsx, layout.tsx).
  • Test files.

Workflow

  1. Scan — Read the target file(s). List every component definition (named functions, arrow components, forwardRef wrappers).
  2. Classify — Primary export vs. inlined sub-component/helper.
  3. Plan — For each extraction:
    • Destination path (follow project conventions — kebab-case filenames, named exports).
    • Which imports, types, constants move with it.
    • What the parent needs to import after extraction.
  4. Execute — Create new files, remove inlined definitions, add imports in parent.
  5. Verify — No circular imports. Run lints on all modified files.

File naming

  • Match project conventions: kebab-case filenames, named exports (export const ComponentName).
  • Icon components → sibling icons.tsx or icons/ subfolder.
  • Data constants → sibling file named after the constant (e.g. logo-svg.ts).
  • Types → co-locate with the component that owns them.

Example

Before — logo-dropdown.tsx (167 lines, 5 components in one file):

tsx
import { FC, useState } from 'react';

interface DropdownItem { /* ... */ }
interface DropdownSection { /* ... */ }

export const LogoDropdown: FC = () => {
  const logoSvg = `<svg>...12 lines...</svg>`;

  const GitHubIcon: FC<{ className?: string }> = ({ className }) => (
    <svg className={className}>...</svg>
  );
  const LinkedInIcon: FC<{ className?: string }> = ({ className }) => (...);
  const TwitterIcon: FC<{ className?: string }> = ({ className }) => (...);
  const StackOverflowIcon: FC<{ className?: string }> = ({ className }) => (...);

  const sections = [/* uses all icons above */];
  return <div>{/* renders sections */}</div>;
};

After — 3 files:

social-icons.tsx (pure, no state):

tsx
import { FC } from 'react';

export const GitHubIcon: FC<{ className?: string }> = ({ className }) => (
  <svg className={className}>...</svg>
);
export const LinkedInIcon: FC<{ className?: string }> = ({ className }) => (...);
export const TwitterIcon: FC<{ className?: string }> = ({ className }) => (...);
export const StackOverflowIcon: FC<{ className?: string }> = ({ className }) => (...);

logo-svg.ts (data, not a component):

ts
export const logoSvg = `<svg>...</svg>`;

logo-dropdown.tsx (just the stateful component):

tsx
import { FC, useState } from "react";
import {
  GitHubIcon,
  LinkedInIcon,
  TwitterIcon,
  StackOverflowIcon,
} from "./social-icons";
import { logoSvg } from "./logo-svg";

interface DropdownItem {
  /* ... */
}
interface DropdownSection {
  /* ... */
}

export const LogoDropdown: FC = () => {
  // only state and rendering logic remain
  return <div>{/* renders sections */}</div>;
};

Batch mode

When asked to scan a directory or the whole project:

  1. Glob for **/*.tsx files.
  2. For each file, count component definitions. Flag files with 2+ components where at least one is not the primary export.
  3. Present a summary: | File | Components | Extractable | Reason |
  4. Ask before executing, or execute immediately if the user said to fix them all.

© deadlock-mod-manager, GPL-3.0. 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 .agents/skills/split-react-components of deadlock-mod-manager/deadlock-mod-manager.

Open the folder on GitHubat commit 45c273c

Compare with similar skills

Split React Components 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.

Split React Components compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Split React Components this skilldeadlock-mod-manager/deadlock-mod-manager574—~1.1kAutomated safety check: PassGPL-3.0
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
React Router Developmentremix-run/react-router57k1 repos~1.5kAutomated safety check: PassMIT
React UI State PatternsChrisWiles/claude-code-showcase6.1k8 repos~1.6kAutomated safety check: PassNone
Chakra UI v3 Builderchakra-ui/chakra-ui41k—~3.1kAutomated safety check: PassMIT
React Component PerformanceDimillian/Skills4k5 repos~1.2kAutomated safety check: PassMIT

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed

  • React Router Development

    remix-run/react-router

    Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

    57k GitHub starsUsed in 1 repo~1.5k tokens
    Frontend & DesignAuto-check passed

  • React UI State Patterns

    ChrisWiles/claude-code-showcase

    Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.

    6.1k GitHub starsUsed in 8 repos~1.6k tokens
    Frontend & DesignAuto-check passed

  • Chakra UI v3 Builder

    chakra-ui/chakra-ui

    Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.

    41k GitHub stars~3.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • React Component Performance

    Dimillian/Skills

    Analyze and optimize React component performance issues (slow renders, re-render thrash, laggy lists, expensive computations).

    4k GitHub starsUsed in 5 repos~1.2k tokens
    Frontend & DesignAuto-check passed

  • React View Transitions Guide

    vercel-labs/next-beats

    Official

    Guides implementing animated page and state transitions in React with the native View Transition API, covering shared elements, list reorders and directional navigation.

    167 GitHub starsUsed in 10 repos~3.1k tokens
    Frontend & DesignAuto-check passed

More from deadlock-mod-manager/deadlock-mod-manager

All 25 skills in this repo

  • Skill Creator

    deadlock-mod-manager/deadlock-mod-manager

    Create new agent skills following the Agent Skills specification.

    574 GitHub starsUsed in 1 repo~2.9k tokens
    Auto-check passed

  • Create Auth Skill

    deadlock-mod-manager/deadlock-mod-manager

    Scaffold and implement authentication in TypeScript/JavaScript apps using Better Auth.

    574 GitHub starsUsed in 4 repos~3.4k tokens
    Auto-check passed

  • Opensrc

    deadlock-mod-manager/deadlock-mod-manager

    Fetch source code for npm, PyPI, or crates.io packages and GitHub/GitLab repos to provide AI agents with implementation context beyond types and docs.

    574 GitHub stars~910 tokensUpdated today
    Auto-check passed

  • Security Review

    deadlock-mod-manager/deadlock-mod-manager

    Security code review for Tauri/Rust/TypeScript desktop apps and Hono/oRPC APIs.

    574 GitHub stars~1.8k tokensUpdated today
    Auto-check passed

  • Babysit

    deadlock-mod-manager/deadlock-mod-manager

    Stay on one pull request until it is merge-ready, fixing the highest-priority blocker and telling the user when it is green.

    574 GitHub stars~1.8k tokensUpdated today
    Auto-check passed

  • Changeset

    deadlock-mod-manager/deadlock-mod-manager

    Generate a changeset file describing the current PR's changes.

    574 GitHub stars~1.2k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Split React Components

What does Split React Components do?

Split React/TSX files containing multiple inlined components into separate single-responsibility files. Split React Components is an agent skill from deadlock-mod-manager/deadlock-mod-manager. Split React/TSX files containing multiple inlined components into separate single-responsibility files.

When should I use Split React Components?

Split React Components fits situations like: asked to split components; extract components; single responsibility; clean up component file.

How do I install Split React Components in Claude Code?

Run `npx skills add deadlock-mod-manager/deadlock-mod-manager --skill split-react-components -a claude-code`. Or copy the skill folder (.agents/skills/split-react-components in deadlock-mod-manager/deadlock-mod-manager) into .claude/skills/split-react-components in your project. Claude Code loads it when a task matches its description.

How do I install Split React Components in Codex?

Run `npx skills add deadlock-mod-manager/deadlock-mod-manager --skill split-react-components -a codex`. Or copy the skill folder (.agents/skills/split-react-components in deadlock-mod-manager/deadlock-mod-manager) into .agents/skills/split-react-components in your project. Codex loads it when a task matches its description.

Can I use Split React Components 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 deadlock-mod-manager/deadlock-mod-manager --skill split-react-components -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/split-react-components, .gemini/skills/split-react-components, .github/skills/split-react-components and .opencode/skills/split-react-components in your project.

What does Split React Components need to run?

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

Does Split React Components 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 Split React Components 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 Split React Components use?

Split React Components is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Split React Components use?

About 1.1k tokens (SKILL.md is roughly 4.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 Split React Components?

Skills that share tags, products or a category with Split React Components: Web Artifacts Builder (anthropics/skills, 180k stars), React Router Development (remix-run/react-router, 57k stars), React UI State Patterns (ChrisWiles/claude-code-showcase, 6.1k stars) and Chakra UI v3 Builder (chakra-ui/chakra-ui, 41k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Split React Components?

deadlock-mod-manager (a GitHub organization) maintains it in deadlock-mod-manager/deadlock-mod-manager, which has 574 GitHub stars. The repository holds 25 skills in this directory. The repository was last updated on October 8, 2026.

Source: deadlock-mod-manager/deadlock-mod-manager on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.