Agent skill

Eisland Dev Add Guide Step

创建 eIsland 引导配置窗口的新步骤页面。当用户要求在引导界面（Guide）中新增配置步骤、引导页面、引导分页时使用此 skill。

GPL-3.0Auto-check passedFrontend & Design

Install Eisland Dev Add Guide Step

skills CLI

$ npx skills add JNTMTMTM/eIsland --skill eisland-dev-add-guide-step -a claude-code

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

GitHub CLI

$ gh skill install JNTMTMTM/eIsland eisland-dev-add-guide-step --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-guide-step .claude/skills/eisland-dev-add-guide-step && 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/

Paste into Claude Code

Install the "eisland-dev-add-guide-step" agent skill from https://github.com/JNTMTMTM/eIsland/tree/main/.agents/skills/eisland-dev-add-guide-step into .claude/skills/eisland-dev-add-guide-step/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "eisland-dev-add-guide-step", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/JNTMTMTM/eIsland/tree/main/.agents/skills/eisland-dev-add-guide-step

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add JNTMTMTM/eIsland --skill eisland-dev-add-guide-step -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install JNTMTMTM/eIsland eisland-dev-add-guide-step --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/JNTMTMTM/eIsland.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/eisland-dev-add-guide-step .agents/skills/eisland-dev-add-guide-step && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "eisland-dev-add-guide-step" agent skill from https://github.com/JNTMTMTM/eIsland/tree/main/.agents/skills/eisland-dev-add-guide-step into .agents/skills/eisland-dev-add-guide-step/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "eisland-dev-add-guide-step", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add JNTMTMTM/eIsland --skill eisland-dev-add-guide-step -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install JNTMTMTM/eIsland eisland-dev-add-guide-step --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/JNTMTMTM/eIsland.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/eisland-dev-add-guide-step .cursor/skills/eisland-dev-add-guide-step && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "eisland-dev-add-guide-step" agent skill from https://github.com/JNTMTMTM/eIsland/tree/main/.agents/skills/eisland-dev-add-guide-step into .cursor/skills/eisland-dev-add-guide-step/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "eisland-dev-add-guide-step", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/JNTMTMTM/eIsland.git --path .agents/skills/eisland-dev-add-guide-step

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add JNTMTMTM/eIsland --skill eisland-dev-add-guide-step -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install JNTMTMTM/eIsland eisland-dev-add-guide-step --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/JNTMTMTM/eIsland.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/eisland-dev-add-guide-step .gemini/skills/eisland-dev-add-guide-step && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "eisland-dev-add-guide-step" agent skill from https://github.com/JNTMTMTM/eIsland/tree/main/.agents/skills/eisland-dev-add-guide-step into .gemini/skills/eisland-dev-add-guide-step/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "eisland-dev-add-guide-step", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install JNTMTMTM/eIsland eisland-dev-add-guide-step

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add JNTMTMTM/eIsland --skill eisland-dev-add-guide-step -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/JNTMTMTM/eIsland.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/eisland-dev-add-guide-step .github/skills/eisland-dev-add-guide-step && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "eisland-dev-add-guide-step" agent skill from https://github.com/JNTMTMTM/eIsland/tree/main/.agents/skills/eisland-dev-add-guide-step into .github/skills/eisland-dev-add-guide-step/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "eisland-dev-add-guide-step", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add JNTMTMTM/eIsland --skill eisland-dev-add-guide-step -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install JNTMTMTM/eIsland eisland-dev-add-guide-step --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/JNTMTMTM/eIsland.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/eisland-dev-add-guide-step .opencode/skills/eisland-dev-add-guide-step && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "eisland-dev-add-guide-step" agent skill from https://github.com/JNTMTMTM/eIsland/tree/main/.agents/skills/eisland-dev-add-guide-step into .opencode/skills/eisland-dev-add-guide-step/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "eisland-dev-add-guide-step", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: eisland-dev-add-guide-step
GitHub stars: 320
Token cost: ~728 tokens
SKILL.md length: 116 words
Files: 1
Skills in repo: 11
Repo updated: Oct 9, 2026
First seen: Oct 7, 2026
Licence: GPL-3.0

At a glance

创建 eIsland 引导配置窗口的新步骤页面。当用户要求在引导界面（Guide）中新增配置步骤、引导页面、引导分页时使用此 skill。

Works in 8 steps: 创建目录与文件 → 类型定义 (types/index.ts) → Hook (hooks/useXxx.ts) → …
Tasks that involve React components
SKILL.md covers 概述, 目录结构, 创建步骤 and 参考实现, plus 1 more section
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Eisland Dev Add Guide Step is an agent skill from JNTMTMTM/eIsland. 创建 eIsland 引导配置窗口的新步骤页面。当用户要求在引导界面（Guide）中新增配置步骤、引导页面、引导分页时使用此 skill。触发关键词：guide 步骤、引导页面、引导分页、Guide step、新建引导页、添加引导配置。适用于 src/renderer/components/components/ 目录下的 Guide 模块。

Its SKILL.md is about 730 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. 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 React components

Example prompts

“/eisland-dev-add-guide-step”

Workflow steps

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

创建目录与文件
类型定义 (types/index.ts)
Hook (hooks/useXxx.ts)
组件 (components/XxxStep.tsx)
公共导出 (index.ts)
i18n 翻译
CSS 样式
接入引导流程

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
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript, json and css).
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

Eisland Dev Add Guide Step loads about 728 tokens when it runs. Until then it costs about 50 tokens; SKILL.md has 116 words of instructions outside code blocks.

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

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). 116 words, ~728 tokens.

Download SKILL.mdSave it as .claude/skills/eisland-dev-add-guide-step/SKILL.md (or your agent's skills folder).

name: eisland-dev-add-guide-step
description: 创建 eIsland 引导配置窗口的新步骤页面。当用户要求在引导界面（Guide）中新增配置步骤、引导页面、引导分页时使用此 skill。触发关键词：guide 步骤、引导页面、引导分页、Guide step、新建引导页、添加引导配置。适用于 src/renderer/components/components/ 目录下的 Guide 模块。

Guide Step — 引导配置步骤创建

概述

eIsland 引导配置窗口采用分步架构，每个步骤是一个独立模块，位于 src/renderer/components/components/Guide/<stepName>/。

目录结构

每个步骤模块必须包含以下子目录（参考已有的 language 和 smtc 步骤）：

Guide/<stepName>/
├── index.ts                    # 公共导出（仅导出主组件）
├── components/<StepName>.tsx   # 步骤组件
├── config/<stepName>Config.ts  # 常量配置
├── hooks/use<StepName>.ts      # 逻辑 Hook
├── types/index.ts              # 类型定义（Props 等）
└── utils/                      # 工具函数（可为空占位）

创建步骤

1. 创建目录与文件

在 src/renderer/components/components/Guide/<stepName>/ 下创建完整模块结构。

2. 类型定义 (`types/index.ts`)

所有步骤组件必须接受 StepProps，包含 onNext 和 onPrev 回调：

typescript

export interface XxxStepProps {
  onNext: () => void;
  onPrev: () => void;
}

3. Hook (`hooks/useXxx.ts`)

将业务逻辑抽离到 Hook 中，组件只负责渲染。Hook 返回状态和操作函数。

4. 组件 (`components/XxxStep.tsx`)

组件使用标准布局结构：

tsx

export function XxxStep({ onNext, onPrev }: XxxStepProps): ReactElement {
  const { t } = useTranslation();

  return (
    <div className="guide-step">
      <div className="guide-step-header">
        <h2>{t('guide.xxx.title')}</h2>
        <p>{t('guide.xxx.subtitle')}</p>
      </div>
      {/* 步骤内容区域 */}
      <div className="guide-xxx-content">
        {/* ... */}
      </div>
      <div className="guide-step-footer">
        <button className="guide-prev-btn" onClick={onPrev}>
          {t('guide.actions.prev')}
        </button>
        <button className="guide-next-btn" onClick={onNext}>
          {t('guide.actions.next')}
        </button>
      </div>
    </div>
  );
}

5. 公共导出 (`index.ts`)

typescript

export { XxxStep } from './components/XxxStep';

6. i18n 翻译

在 i18n/zh-CN.json 和 i18n/en-US.json 的 guide 对象下添加步骤翻译键：

json

{
  "guide": {
    "xxx": {
      "title": "中文标题",
      "subtitle": "中文副标题"
    }
  }
}

所有用户可见文案必须使用 t() 包裹，禁止硬编码。

7. CSS 样式

在 src/renderer/styles/guide/<stepName>.css 中编写步骤专属样式，然后在 src/renderer/styles/guide.css 入口中添加 @import：

css

@import './guide/<stepName>.css';

样式命名规范：.guide-<stepName>-*，按钮复用 .guide-next-btn 和 .guide-prev-btn。

8. 接入引导流程

在 src/renderer/guideMain.tsx 中：

导入新步骤组件
在 GuideStep 联合类型中添加新步骤名
在 JSX 中添加条件渲染
连接 onNext / onPrev 回调切换步骤

tsx

type GuideStep = 'language' | 'smtc' | 'xxx';

// JSX 中：
{step === 'xxx' && <XxxStep onNext={handleXxxNext} onPrev={handleXxxPrev} />}

参考实现

已有步骤可作为参考：

Guide/language/ — 语言选择步骤（含图标、禁用态、i18n 切换）
Guide/smtc/ — SMTC 检查步骤（含检测状态机）

注意事项

文件头必须包含 GPL-3.0 版权声明（参考已有文件）
组件使用 ReactElement 返回类型（从 react 导入）
Hook 使用 useCallback / useMemo 优化性能
CSS 使用 rgba 白色透明色系，与 maxExpand 设置页风格一致

Files

Just SKILL.md in .agents/skills/eisland-dev-add-guide-step of JNTMTMTM/eIsland.

Open the folder on GitHubat commit 075561e

Compare with similar skills

Eisland Dev Add Guide Step 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 Guide Step compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Eisland Dev Add Guide Step this skillJNTMTMTM/eIsland	320	—	~728	Automated safety check: Pass	GPL-3.0	today
Web Artifacts Builderanthropics/skills	180k	41 repos	~769	Automated safety check: Pass	Apache-2.0	today
Tailwindcss Developmentanonaddy/anonaddy	4.9k	10 repos	~865	Automated safety check: Pass	MIT	2 days ago
Core Component Library PatternsChrisWiles/claude-code-showcase	6.1k	8 repos	~1.2k	Automated safety check: Pass	None	9 mo ago
React Router Developmentremix-run/react-router	57k	1 repos	~1.5k	Automated safety check: Pass	MIT	today
React UI State PatternsChrisWiles/claude-code-showcase	6.1k	8 repos	~1.6k	Automated safety check: Pass	None	9 mo ago

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
Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
4.9k GitHub starsUsed in 10 repos~865 tokens
Frontend & DesignAuto-check passed
Core Component Library Patterns
ChrisWiles/claude-code-showcase
Reference for building UI with a token-based core component library: spacing, color and typography tokens, Box, stacks, Text, Button, Input and Card, plus layout patterns.
6.1k GitHub starsUsed in 8 repos~1.2k 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 2 days ago
Frontend & DesignAuto-check passed

Questions about Eisland Dev Add Guide Step

What does Eisland Dev Add Guide Step do?

创建 eIsland 引导配置窗口的新步骤页面。当用户要求在引导界面（Guide）中新增配置步骤、引导页面、引导分页时使用此 skill。. Eisland Dev Add Guide Step is an agent skill from JNTMTMTM/eIsland.

When should I use Eisland Dev Add Guide Step?

Eisland Dev Add Guide Step fits situations like: tasks that involve React components.

How do I install Eisland Dev Add Guide Step in Claude Code?

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

How do I install Eisland Dev Add Guide Step in Codex?

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

Can I use Eisland Dev Add Guide Step 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-guide-step -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-guide-step, .gemini/skills/eisland-dev-add-guide-step, .github/skills/eisland-dev-add-guide-step and .opencode/skills/eisland-dev-add-guide-step in your project.

What does Eisland Dev Add Guide Step need to run?

SKILL.md names no scripts, command-line tools or credentials: Eisland Dev Add Guide Step is instructions for the agent only.

Does Eisland Dev Add Guide Step 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 Eisland Dev Add Guide Step 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 Guide Step use?

Eisland Dev Add Guide Step 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 Guide Step use?

About 728 tokens (SKILL.md is roughly 2.9k 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 Guide Step?

Skills that share tags, products or a category with Eisland Dev Add Guide Step: Web Artifacts Builder (anthropics/skills, 180k stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), Core Component Library Patterns (ChrisWiles/claude-code-showcase, 6.1k stars) and React Router Development (remix-run/react-router, 57k 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 Guide Step?

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.

Install Eisland Dev Add Guide Step

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Guide Step — 引导配置步骤创建

概述

目录结构

创建步骤

1. 创建目录与文件

2. 类型定义 (types/index.ts)

3. Hook (hooks/useXxx.ts)

4. 组件 (components/XxxStep.tsx)

5. 公共导出 (index.ts)

6. i18n 翻译

7. CSS 样式

8. 接入引导流程

参考实现

注意事项

Files

Compare with similar skills

Similar skills

More from JNTMTMTM/eIsland

Related

Questions about Eisland Dev Add Guide Step

2. 类型定义 (`types/index.ts`)

3. Hook (`hooks/useXxx.ts`)

4. 组件 (`components/XxxStep.tsx`)

5. 公共导出 (`index.ts`)