Agent skill

Eisland Dev Refactor Module Split

by JNTMTMTM in JNTMTMTM/eIsland

Refactor a monolithic React component file into a standardized module structure with components/, hooks/, utils/, and config/ subdirectories.

GPL-3.0Auto-check passedFrontend & Design

Install Eisland Dev Refactor Module Split

skills CLI
$ npx skills add JNTMTMTM/eIsland --skill eisland-dev-refactor-module-split -a claude-code

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

GitHub CLI
$ gh skill install JNTMTMTM/eIsland eisland-dev-refactor-module-split --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/JNTMTMTM/eIsland.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/eisland-dev-refactor-module-split .claude/skills/eisland-dev-refactor-module-split && 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
eisland-dev-refactor-module-split
GitHub stars
320
Token cost
~2.2k tokens
SKILL.md length
935 words
Files
4 (incl. references)
Skills in repo
11
Repo updated
First seen
Licence
GPL-3.0

At a glance

Refactor a monolithic React component file into a standardized module structure with components/, hooks/, utils/, and config/ subdirectories.

  • Works in 5 steps: Analyze the source file → Create the extracted files → Rewrite the source file → …
  • The user asks to split
  • SKILL.md covers When to use, Process, Directory structure example and Acceptance criteria, plus 1 more section
  • Calls npm and npx

What it does

Eisland Dev Refactor Module Split is an agent skill from JNTMTMTM/eIsland. Refactor a monolithic React component file into a standardized module structure with components/, hooks/, utils/, and config/ subdirectories. Use this skill whenever the user asks to "split", "refactor", "拆分", "拆解", or "restructure" a component file into subdirectories, or when they mention organizing code into utils/hooks/config/components folders.

Its SKILL.md is about 2.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including reference files (for example `evals/evals.json`, `references/COMMENT_STANDARDS.md` and `references/FRONTEND_STANDARDS.md`).

It sits in Frontend & Design, covering Refactoring and React components. It works with React. The repository describes itself as: eIsland - A sleek, Apple Dynamic Island inspired floating widget for Windows, built with Electron. The licence is GPL-3.0.

When your agent uses it

  • The user asks to split
  • Restructure a component file into subdirectories
  • They mention organizing code into utils/hooks/config/components folders

Example prompts

  • “refactor”
  • “restructure”
  • “/eisland-dev-refactor-module-split”

Requirements

  • Node.js

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Analyze the source file
  2. Create the extracted files
  3. Rewrite the source file
  4. Verify
  5. Commit

What it can do on your machine

Read from SKILL.md and the folder at commit 411adb9. 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
    • npx

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

  • Network

    No URLs in SKILL.md. Its commands use npm and npx, which can reach the network depending on how they are called.

    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

Eisland Dev Refactor Module Split loads about 2.2k tokens when it runs, and up to ~14k if it reads all its reference files. Until then it costs about 96 tokens; SKILL.md has 935 words of instructions outside code blocks.

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

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 JNTMTMTM/eIsland at commit 411adb9, republished under its GPL-3.0 licence (© JNTMTMTM). 935 words, ~2,170 tokens.

Download SKILL.mdSave it as .claude/skills/eisland-dev-refactor-module-split/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
eisland-dev-refactor-module-split
description
Refactor a monolithic React component file into a standardized module structure with components/, hooks/, utils/, and config/ subdirectories. Use this skill whenever the user asks to "split", "refactor", "拆分", "拆解", or "restructure" a component file into subdirectories, or when they mention organizing code into utils/hooks/config/components folders.
author
JNTMTMTM

Refactor Module Split

Split a monolithic React component file into a clean module structure with four subdirectories: components/, hooks/, utils/, and config/.

When to use

  • A single .tsx file has grown large and contains multiple concerns (utility functions, hooks, sub-components, constants)
  • The user explicitly asks to split/refactor a component into subdirectories
  • The file is a React component that mixes UI rendering, state management, utility logic, and configuration

Process

Step 1: Analyze the source file

Read the target file in full. Categorize every piece of code into one of four buckets:

BucketCriteriaTarget directory
Pure functionsNo React hooks, no side effects, deterministic input→outpututils/
React hooksUses useState, useEffect, useMemo, useCallback, or custom hookshooks/
Sub-componentsReturns JSX, used within the main componentcomponents/
Constantsconst values, config keys, i18n keys/defaults, type-only definitions used across modulesconfig/

Also check if the file's sibling directories already exist (e.g., components/ or hooks/ may already have files from prior refactoring). Don't duplicate existing extractions.

Step 2: Create the extracted files

For each extracted piece, create a new file in the appropriate directory. Every file must include:

  1. License header — copy the exact GPL-3.0 block from the source file
  2. File-level JSDoc — @file, @description, @author tags
  3. Function/type JSDoc — @param, @returns for all exported functions
  4. Correct imports — relative paths back to shared types or store slices

Naming conventions:

  • utils/ — camelCase function name as filename (e.g., findCurrentIndex.ts, formatDatetime.ts)
  • hooks/ — camelCase with use prefix (e.g., useBeijingClock.ts, useLyricsSettings.ts)
  • components/ — PascalCase component name (e.g., KaraokeSyllableLine.tsx, AnnouncementHeader.tsx)
  • config/ — camelCase descriptive name (e.g., lyricsConstants.ts, announcementDefaults.ts)
Step 3: Rewrite the source file

Replace the extracted code in the original file with imports from the new modules. The source file should become a thin composition layer that:

  • Imports from ./hooks/, ./components/, ./utils/, ./config/
  • Calls hooks at the top level
  • Renders sub-components in JSX
  • Contains no extracted logic
Step 4: Verify

Run these checks in order — all must pass before committing:

bash
# 1. TypeScript compilation
npx tsc --noEmit --pretty

# 2. Comment standards compliance (file headers, JSDoc)
npm run comment:check

# 3. i18n completeness (all t() keys exist in both zh-CN and en-US)
npm run i18n:check

# 4. Unit tests
npm run test

If any check fails, fix the issue before proceeding. Common failures:

  • comment:check — missing license header, missing @file/@description/@author, missing JSDoc on exported functions
  • i18n:check — a t('key') call references a key not present in both locale files
  • test — a refactored import path broke a test, or an extracted function changed behavior
Step 5: Commit

Use a conventional commit message:

refactor(<module-name>): extract utils, hooks, components, config from <OriginalFile>

- utils/<name>.ts: <what it does>
- components/<Name>.tsx: <what it does>
- hooks/<name>.ts: <what it does>
- config/<name>.ts: <what it contains>
- <OriginalFile>.ts: simplified from <N> to <M> lines

Directory structure example

feature/
├── FeatureContent.tsx          (thin composition layer)
├── components/
│   └── FeatureHeader.tsx       (sub-component)
├── hooks/
│   ├── useFeatureData.ts       (data fetching hook)
│   └── useFeatureSettings.ts   (settings listener hook)
├── utils/
│   └── formatValue.ts          (pure utility function)
└── config/
    └── featureConstants.ts     (i18n keys, store keys, defaults)

Acceptance criteria

Every extracted file MUST satisfy ALL of the following before the refactoring is considered complete.

Comment standards (references/COMMENT_STANDARDS.md)
#CriterionCheck
C1Every .ts/.tsx file starts with the GPL-3.0 license block (project name, URL, copyright, author, GPL notice)npm run comment:check
C2Every .ts/.tsx file has a file-level JSDoc with @file, @description, @authornpm run comment:check
C3Every exported function/class/method has JSDoc with @param and @returnsnpm run comment:check
C4@author is set to 鸡哥 (project default)Visual check
C5Comments are in Chinese, explain "why" not "what"Visual check
C6No comments on simple getters/setters, self-explanatory assignments, or template codeVisual check
Show full SKILL.md (451 more words)Show less
Frontend standards (references/FRONTEND_STANDARDS.md)
#CriterionCheck
F1Use const for constants, let for reassignable vars, never varnpm run test (lint)
F2One variable per declarationVisual check
F3No any type — use explicit types or unknownnpx tsc --noEmit
F4Interface over type for object shapes; type only for unions/tuplesVisual check
F5ES6 modules (import/export), no require()Visual check
F6Import order: builtins → external → internal (absolute) → parent relative → sibling relativeVisual check
F7No file extension in import pathsVisual check
F8Single quotes for JS/TS strings, double quotes for JSX attribute valuesVisual check
F92-space indentationVisual check
F10Semicolons at end of statementsVisual check
F11Unix line endings (\n)Visual check
F12Variables/functions: camelCase; Classes/interfaces/types/enums: PascalCase; Constants: UPPER_SNAKE_CASEVisual check
F13React components defined as named function declarations, not anonymous arrow functionsVisual check
F14No unused React import (JSX transform handles it)npx tsc --noEmit
F15Hooks called only at top level, never in conditions/loopsVisual check
i18n completeness
#CriterionCheck
I1Every t('key') in extracted files has a matching entry in both zh-CN.json and en-US.jsonnpm run i18n:check
I2No hardcoded Chinese or English strings in UI code — all wrapped in t()npm run i18n:check
Behavioral preservation
#CriterionCheck
B1TypeScript compiles with zero errorsnpx tsc --noEmit
B2All existing tests passnpm run test
B3No logic changes — the refactored code produces identical behaviornpm run test
B4Every useEffect extracted to a hook preserves the same dependency arrayVisual check against original

Important rules

  • All four directories must exist. If a directory has no files, create a .gitkeep placeholder. The user expects the full structure.
  • Extract ALL hooks. Every useEffect, useState, useMemo, useCallback block in the original file must end up in a hook file. The main component should have zero useEffect calls after refactoring (unless the effect is trivially tied to a single prop and extracting it would overcomplicate the code — justify with a comment).
  • Extract ALL pure functions. If a function has no React hooks and no side effects, it belongs in utils/. Don't leave pure functions in the component.
  • Match existing style. Use the same comment density, naming patterns, and import ordering as the rest of the project.
  • Preserve behavior exactly. This is a pure structural refactor — no logic changes, no new features, no "improvements" to adjacent code.
  • Relative imports from subdirectories. A file in hooks/ that needs a store type uses ../../../../store/types, not an alias.
  • i18n keys stay in components. The t() calls remain in the JSX; only the default values and key constants move to config/.
  • Run all four verification commands before committing. Do not skip any check. If a check fails, fix it before committing.

© JNTMTMTM, 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

SKILL.md and 3 other files (references) in .agents/skills/eisland-dev-refactor-module-split of JNTMTMTM/eIsland.

  • SKILL.md
  • evals/evals.json
  • references/COMMENT_STANDARDS.md
  • references/FRONTEND_STANDARDS.md

Open the folder on GitHubat commit 411adb9

Compare with similar skills

Eisland Dev Refactor Module Split 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.

Eisland Dev Refactor Module Split compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Eisland Dev Refactor Module Split this skillJNTMTMTM/eIsland320—~2.2kAutomated safety check: PassGPL-3.0
Vercel React Best Practicessanity-io/sanity6.4k130 repos~1.6kAutomated safety check: PassMIT
Dify Component Writing Guidelanggenius/dify158k—~626Automated safety check: PassCustom licence
React Best Practicesmastra-ai/mastra29k—~1.9kAutomated safety check: PassCustom licence
No Use Effectfastrepl/anarlog9.5k—~825Automated safety check: PassMIT
React Best Practicesryokun6/ryos1.3k—~2kAutomated safety check: PassMIT

Similar skills

  • Official

    React and Next.js performance optimization guidelines from Vercel Engineering.

    6.4k GitHub starsUsed in 130 repos~1.6k tokens
    Frontend & DesignAuto-check passed
  • Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…

    158k GitHub stars~626 tokensUpdated today
    Frontend & DesignAuto-check passed
  • React Best Practices

    mastra-ai/mastra

    React performance optimization guidelines from Mastra Engineering.

    29k GitHub stars~1.9k tokensUpdated today
    Frontend & DesignAuto-check passed
  • No Use Effect

    fastrepl/anarlog

    Avoid direct React useEffect usage when writing or reviewing React components and hooks.

    9.5k GitHub stars~825 tokensUpdated today
    Frontend & DesignAuto-check passed
  • React performance optimization guidelines from Vercel Engineering (vercel-labs/agent-skills).

    1.3k GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed
  • React performance optimization guidelines. An agent skill from poteto/noodle.

    437 GitHub stars~1.4k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check passed

More from JNTMTMTM/eIsland

All 11 skills in this repo
  • Generate a release announcement markdown for eIsland. An agent skill from JNTMTMTM/eIsland.

    320 GitHub stars~1k tokensUpdated today
    Auto-check passed
  • Refactor a monolithic React component file into a standardized module structure with components/, hooks/, utils/, types/, and config/ subdirectories.

    320 GitHub stars~3.2k tokensUpdated today
    Auto-check passed
  • Add a new empty subpage (tab) to an existing eIsland settings section with page navigation support.

    320 GitHub stars~2.3k tokensUpdated today
    Auto-check passed
  • Eisland Dev Add SVG Icon

    JNTMTMTM/eIsland

    Add a new SVG icon to the project's icon enum system with matching test assertions.

    320 GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Eisland Dev Git Commit

    JNTMTMTM/eIsland

    Analyze the current git status, review all staged and unstaged changes, and create a commit with a proper English commit message following conventional commit format.

    320 GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Eisland Dev Update Docs

    JNTMTMTM/eIsland

    Update or create documentation in the eIsland VuePress docs site (web/eisland-web-docs).

    320 GitHub stars~1.4k tokensUpdated today
    Auto-check passed

Works with

Questions about Eisland Dev Refactor Module Split

What does Eisland Dev Refactor Module Split do?

Refactor a monolithic React component file into a standardized module structure with components/, hooks/, utils/, and config/ subdirectories. Eisland Dev Refactor Module Split is an agent skill from JNTMTMTM/eIsland. Refactor a monolithic React component file into a standardized module structure with components/, hooks/, utils/, and config/ subdirectories.

When should I use Eisland Dev Refactor Module Split?

Eisland Dev Refactor Module Split fits situations like: the user asks to split; restructure a component file into subdirectories; they mention organizing code into utils/hooks/config/components folders.

How do I install Eisland Dev Refactor Module Split in Claude Code?

Run `npx skills add JNTMTMTM/eIsland --skill eisland-dev-refactor-module-split -a claude-code`. Or copy the skill folder (.agents/skills/eisland-dev-refactor-module-split in JNTMTMTM/eIsland) into .claude/skills/eisland-dev-refactor-module-split in your project. Claude Code loads it when a task matches its description.

How do I install Eisland Dev Refactor Module Split in Codex?

Run `npx skills add JNTMTMTM/eIsland --skill eisland-dev-refactor-module-split -a codex`. Or copy the skill folder (.agents/skills/eisland-dev-refactor-module-split in JNTMTMTM/eIsland) into .agents/skills/eisland-dev-refactor-module-split in your project. Codex loads it when a task matches its description.

Can I use Eisland Dev Refactor Module Split 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 JNTMTMTM/eIsland --skill eisland-dev-refactor-module-split -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/eisland-dev-refactor-module-split, .gemini/skills/eisland-dev-refactor-module-split, .github/skills/eisland-dev-refactor-module-split and .opencode/skills/eisland-dev-refactor-module-split in your project.

What does Eisland Dev Refactor Module Split need to run?

Going by SKILL.md and its folder, Eisland Dev Refactor Module Split needs the command-line tools its instructions call (npm and npx). Our summary lists: Node.js.

Does Eisland Dev Refactor Module Split access the network?

SKILL.md contains no URLs. Its commands use npm and npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Eisland Dev Refactor Module Split 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 Eisland Dev Refactor Module Split use?

Eisland Dev Refactor Module Split 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 Eisland Dev Refactor Module Split use?

About 2.2k tokens (SKILL.md is roughly 8.7k 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 11k tokens, read only when the agent opens those files.

What are the alternatives to Eisland Dev Refactor Module Split?

Skills that share tags, products or a category with Eisland Dev Refactor Module Split: Vercel React Best Practices (sanity-io/sanity, 6.4k stars), Dify Component Writing Guide (langgenius/dify, 158k stars), React Best Practices (mastra-ai/mastra, 29k stars) and No Use Effect (fastrepl/anarlog, 9.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Eisland Dev Refactor Module Split?

JNTMTMTM (a GitHub user) maintains it in JNTMTMTM/eIsland, which has 320 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on October 7, 2026.

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