Agent skill

Eisland Dev Add Maxexpand Tab

by JNTMTMTM in JNTMTMTM/eIsland

为 eIsland 灵动岛的 MaxExpand(全展开)模式添加一个新的 Tab 页面。当用户要求创建新的 MaxExpand 页面、添加全展开界面组件(如计算器、时钟、天气面板、便签、日历等)时使用此 skill。

GPL-3.0Auto-check passedFrontend & Design

Install Eisland Dev Add Maxexpand Tab

skills CLI
$ npx skills add JNTMTMTM/eIsland --skill eisland-dev-add-maxexpand-tab -a claude-code

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

GitHub CLI
$ gh skill install JNTMTMTM/eIsland eisland-dev-add-maxexpand-tab --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-add-maxexpand-tab .claude/skills/eisland-dev-add-maxexpand-tab && 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-add-maxexpand-tab
GitHub stars
320
Token cost
~1.4k tokens
SKILL.md length
195 words
Files
2
Skills in repo
11
Repo updated
First seen
Licence
GPL-3.0

At a glance

为 eIsland 灵动岛的 MaxExpand(全展开)模式添加一个新的 Tab 页面。当用户要求创建新的 MaxExpand 页面、添加全展开界面组件(如计算器、时钟、天气面板、便签、日历等)时使用此 skill。

  • Works in 7 steps: 创建 Tab 组件 → 注册类型 → 注册设置配置 → …
  • Tasks that involve Internationalization
  • SKILL.md covers 前置确认, 目录结构, 实现步骤 and 文件清单, plus 1 more section
  • Calls npx; reaches github.com

What it does

Eisland Dev Add Maxexpand Tab is an agent skill from JNTMTMTM/eIsland. 为 eIsland 灵动岛的 MaxExpand(全展开)模式添加一个新的 Tab 页面。当用户要求创建新的 MaxExpand 页面、添加全展开界面组件(如计算器、时钟、天气面板、便签、日历等)时使用此 skill。 即使用户只说"新建一个 maxexpand 界面"、"加个全展开页面"、"在 maxexpand 里加个 XX", 也应触发。此 skill 覆盖从类型注册、设置配置、懒加载/即时加载渲染到 i18n 国际化的全部 8 个 修改点,确保新 Tab 完整可用且可在设置中拖拽排序与切换可见性。

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `evals/evals.json`).

It sits in Frontend & Design, covering Internationalization. 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

  • Tasks that involve Internationalization

Example prompts

  • “新建一个 maxexpand 界面”
  • “加个全展开页面”
  • “在 maxexpand 里加个 XX”
  • “/eisland-dev-add-maxexpand-tab”

Requirements

  • Node.js

Workflow steps

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

  1. 创建 Tab 组件
  2. 注册类型
  3. 注册设置配置
  4. 注册懒加载渲染
  5. 注册即时加载渲染
  6. 添加 i18n 翻译
  7. 验证

What it can do on your machine

Read from SKILL.md and the folder at commit 075561e. 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:

    • npx

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

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • github.com

    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 Add Maxexpand Tab loads about 1.4k tokens when it runs. Until then it costs about 71 tokens; SKILL.md has 195 words of instructions outside code blocks.

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

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 075561e, republished under its GPL-3.0 licence (© JNTMTMTM). 195 words, ~1,392 tokens.

Download SKILL.mdSave it as .claude/skills/eisland-dev-add-maxexpand-tab/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
eisland-dev-add-maxexpand-tab
description
为 eIsland 灵动岛的 MaxExpand(全展开)模式添加一个新的 Tab 页面。当用户要求创建新的 MaxExpand 页面、添加全展开界面组件(如计算器、时钟、天气面板、便签、日历等)时使用此 skill。 即使用户只说"新建一个 maxexpand 界面"、"加个全展开页面"、"在 maxexpand 里加个 XX", 也应触发。此 skill 覆盖从类型注册、设置配置、懒加载/即时加载渲染到 i18n 国际化的全部 8 个 修改点,确保新 Tab 完整可用且可在设置中拖拽排序与切换可见性。

eIsland: 添加 MaxExpand Tab 页面

为灵动岛的全展开(MaxExpand)模式添加一个新的 Tab 页面。

前置确认

在开始前,向用户确认以下信息:

  1. Tab 名称 — kebab-case 目录名(如 calculator、weather、calendar)
  2. Tab 显示名 — 中文标签(如 计算器、天气、日历),用于设置界面和 i18n
  3. 内容策略 — 选择一种:
    • placeholder(默认)— 创建空占位组件,后续填充
    • skeleton — 带基本骨架布局的占位组件

目录结构

每个 MaxExpand Tab 遵循统一的模块结构:

src/renderer/components/states/maxExpand/components/<tabName>/
├── index.ts                          # 模块入口,导出 Tab 组件
└── components/
    └── <TabName>Tab.tsx              # Tab 主组件

实现步骤

Step 1: 创建 Tab 组件

1a. 创建目录和组件文件:

src/renderer/components/states/maxExpand/components/<tabName>/components/<TabName>Tab.tsx

tsx
/*
 * eIsland - A sleek, Apple Dynamic Island inspired floating widget for Windows, built with Electron.
 * https://github.com/JNTMTMTM/eIsland
 *
 * Copyright (C) 2026 JNTMTMTM
 * Copyright (C) 2026 pyisland.com
 *
 * Original author: JNTMTMTM[](https://github.com/JNTMTMTM)
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 */

/**
 * @file <TabName>Tab.tsx
 * @description 最大展开模式 — <中文描述> Tab — 占位组件(内容留白)
 * @author 鸡哥
 */

import type { ReactElement } from 'react';

/**
 * <TabName> Tab — 最大展开模式下的<中文描述>面板(占位)
 */
export function <TabName>Tab(): ReactElement {
  return <div className="max-expand-tab-panel <tabName>-panel" />;
}

1b. 创建模块入口 index.ts:

ts
/*
 * eIsland - ...(标准 GPL-3.0 头部)
 */

/**
 * @file index.ts
 * @description <中文描述>模块入口,导出 <TabName>Tab 组件
 * @author 鸡哥
 */

export { <TabName>Tab } from './components/<TabName>Tab';
Step 2: 注册类型

文件: src/renderer/store/types/index.ts

在 MaxExpandTab 联合类型中添加新 Tab ID(放在 'settings' 之前):

typescript
export type MaxExpandTab = '...' | '<tabName>' | 'settings';
Step 3: 注册设置配置

文件: src/renderer/components/states/maxExpand/components/setting/utils/settingsConfig.ts

3a. 在 MAXEXPAND_CONFIGURABLE_TABS 数组末尾添加:

typescript
export const MAXEXPAND_CONFIGURABLE_TABS: string[] = [
  // ... 已有项
  '<tabName>',
];

3b. 在 MAXEXPAND_TAB_LABELS 对象中添加:

typescript
export const MAXEXPAND_TAB_LABELS: Record<string, string> = {
  // ... 已有项
  <tabName>: '<中文标签>',
};
Step 4: 注册懒加载渲染

文件: src/renderer/components/states/maxExpand/MaxExpandContentLazy.tsx

4a. 添加 lazy import(与其他 Tab 放在一起):

typescript
const <TabName>Tab = lazy(() => import('./components/<tabName>').then((module) => ({ default: module.<TabName>Tab })));

4b. 在 renderLazyActiveTab 函数的条件链中添加(放在 settings 之前):

typescript
if (activeTab === '<tabName>') content = <<TabName>Tab />;
Step 5: 注册即时加载渲染

文件: src/renderer/components/states/maxExpand/MaxExpandContentEager.tsx

5a. 添加 import:

typescript
import { <TabName>Tab } from './components/<tabName>';

5b. 在 renderEagerActiveTab 函数的条件链中添加(放在 settings 之前):

typescript
if (activeTab === '<tabName>') return <<TabName>Tab />;
Step 6: 添加 i18n 翻译

需要在 3 个位置 添加翻译条目,遗漏任何一处都会导致 tooltip 或设置界面显示原始英文 ID。

6a. 设置界面标签 — 在两个语言文件的 settings.app.maxExpandLayout.tabLabels 对象中添加:

i18n/zh-CN.json:

json
"<tabName>": "<中文标签>"

i18n/en-US.json:

json
"<tabName>": "<English Label>"

6b. 底部导航点 tooltip — 在两个语言文件的 maxExpand.nav 对象中添加(该对象控制导航点的 title 属性):

i18n/zh-CN.json:

json
"<tabName>": "<中文标签>"

i18n/en-US.json:

json
"<tabName>": "<English Label>"

6c. 导航点默认标签回退 — 在 src/renderer/components/states/maxExpand/utils/getNavLabel.ts 的 NAV_LABEL_MAP 中添加:

typescript
<tabName>: '<中文标签>',
Step 7: 验证
bash
npx tsc --noEmit --skipLibCheck

文件清单

完成所有步骤后,验证以下文件已被修改:

  • components/states/maxExpand/components/<tabName>/index.ts — 新文件
  • components/states/maxExpand/components/<tabName>/components/<TabName>Tab.tsx — 新文件
  • store/types/index.ts — MaxExpandTab 类型
  • components/states/maxExpand/components/setting/utils/settingsConfig.ts — CONFIGURABLE_TABS + TAB_LABELS
  • components/states/maxExpand/MaxExpandContentLazy.tsx — 懒加载注册
  • components/states/maxExpand/MaxExpandContentEager.tsx — 即时加载注册
  • i18n/zh-CN.json — settings.app.maxExpandLayout.tabLabels + maxExpand.nav 两处翻译
  • i18n/en-US.json — settings.app.maxExpandLayout.tabLabels + maxExpand.nav 两处翻译
  • components/states/maxExpand/utils/getNavLabel.ts — NAV_LABEL_MAP 回退标签

注意事项

  • Tab ID 必须放在 MaxExpandTab 联合类型的 'settings' 之前,因为渲染逻辑中 settings 通常作为兜底条件。
  • MAXEXPAND_CONFIGURABLE_TABS 中的顺序决定了默认导航排列顺序,新 Tab 默认追加到末尾。
  • 懒加载和即时加载两种模式都必须注册,否则在对应性能模式下新页面不会渲染。
  • 组件使用 max-expand-tab-panel 作为通用容器类名,与已有 Tab 保持一致。
  • 翻译必须覆盖 3 处:settings.app.maxExpandLayout.tabLabels(设置界面标签)、maxExpand.nav(底部导航点 tooltip)、getNavLabel.ts 的 NAV_LABEL_MAP(导航点中文回退)。遗漏任一处会导致对应场景显示原始英文 ID。

© 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 1 other file in .agents/skills/eisland-dev-add-maxexpand-tab of JNTMTMTM/eIsland.

  • SKILL.md
  • evals/evals.json

Open the folder on GitHubat commit 075561e

Compare with similar skills

Eisland Dev Add Maxexpand Tab 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 Add Maxexpand Tab compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Eisland Dev Add Maxexpand Tab this skillJNTMTMTM/eIsland320—~1.4kAutomated safety check: PassGPL-3.0
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Chatbox i18n Translatorchatboxai/chatbox42k—~508Automated safety check: PassGPL-3.0
Internationalization Workflow with i18niOfficeAI/AionUi33k1 repos~1.9kAutomated safety check: PassApache-2.0
Enforce Rules For I18nmoeru-ai/airi50k—~1.5kAutomated safety check: PassMIT
Claude Desktop Chinese Localizationjavaht/claude-desktop-zh-cn7.5k—~1.6kAutomated safety check: PassMIT

Similar skills

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed
  • Chatbox i18n Translator

    chatboxai/chatbox

    Translates new or changed i18n keys from a Chatbox Pro diff, staged changes or a commit range, writing the locale JSON files directly with a built-in glossary.

    42k GitHub stars~508 tokensUpdated 15 days ago
    Frontend & DesignAuto-check passed
  • Standards for keeping all user-facing text translatable: read the i18n config first, use namespaced keys, reuse shared strings and follow the key naming rules.

    33k GitHub starsUsed in 1 repo~1.9k tokens
    Frontend & DesignAuto-check passed
  • Review pending AIRI translations on Crowdin in a batch, then sync them into the repository.

    50k GitHub stars~1.5k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Claude Desktop Chinese Localization

    javaht/claude-desktop-zh-cn

    Adds missing Simplified and Traditional Chinese translations to the Claude Desktop Chinese patch across three layers, then checks how many mappings actually hit.

    7.5k GitHub stars~1.6k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed
  • Taro UI Guide

    jd-opensource/taro-ui

    Guides installing, configuring, styling and using taro-ui (At* components) in Taro apps for WeChat, Alipay, H5 and React Native.

    4.7k GitHub stars~1.3k tokensUpdated 14 days 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/, and config/ subdirectories.

    320 GitHub stars~2.2k 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

Questions about Eisland Dev Add Maxexpand Tab

What does Eisland Dev Add Maxexpand Tab do?

为 eIsland 灵动岛的 MaxExpand(全展开)模式添加一个新的 Tab 页面。当用户要求创建新的 MaxExpand 页面、添加全展开界面组件(如计算器、时钟、天气面板、便签、日历等)时使用此 skill。. Eisland Dev Add Maxexpand Tab is an agent skill from JNTMTMTM/eIsland.

When should I use Eisland Dev Add Maxexpand Tab?

Eisland Dev Add Maxexpand Tab fits situations like: tasks that involve Internationalization.

How do I install Eisland Dev Add Maxexpand Tab in Claude Code?

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

How do I install Eisland Dev Add Maxexpand Tab in Codex?

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

Can I use Eisland Dev Add Maxexpand Tab 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-add-maxexpand-tab -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-add-maxexpand-tab, .gemini/skills/eisland-dev-add-maxexpand-tab, .github/skills/eisland-dev-add-maxexpand-tab and .opencode/skills/eisland-dev-add-maxexpand-tab in your project.

What does Eisland Dev Add Maxexpand Tab need to run?

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

Does Eisland Dev Add Maxexpand Tab access the network?

SKILL.md names 1 domain. In commands or code: github.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Eisland Dev Add Maxexpand Tab 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 Add Maxexpand Tab use?

Eisland Dev Add Maxexpand Tab 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 Add Maxexpand Tab use?

About 1.4k tokens (SKILL.md is roughly 5.6k 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 Eisland Dev Add Maxexpand Tab?

Skills that share tags, products or a category with Eisland Dev Add Maxexpand Tab: Impeccable (bestofjs/bestofjs, 3.1k stars), Chatbox i18n Translator (chatboxai/chatbox, 42k stars), Internationalization Workflow with i18n (iOfficeAI/AionUi, 33k stars) and Enforce Rules For I18n (moeru-ai/airi, 50k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Eisland Dev Add Maxexpand Tab?

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 9, 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.