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

Eisland Dev Add Empty State

by JNTMTMTM in JNTMTMTM/eIsland

为 eIsland 灵动岛添加一个新的空白状态机（IslandState）。当用户要求创建新状态、新页面、 新界面（如登录页、设置子页面、独立面板）时使用此 skill。即使用户只说"加个新状态"或 "创建一个 XX 页面"，也应触发。此 skill 覆盖从类型注册、窗口尺寸、CSS 样式到鼠标交互 行为的全部 12 个修改点，确保状态机完整可用。

GPL-3.0Auto-check passedFrontend & Design

Install Eisland Dev Add Empty State

skills CLI
$ npx skills add JNTMTMTM/eIsland --skill eisland-dev-add-empty-state -a claude-code

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

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

At a glance

为 eIsland 灵动岛添加一个新的空白状态机（IslandState）。当用户要求创建新状态、新页面、 新界面（如登录页、设置子页面、独立面板）时使用此 skill。即使用户只说"加个新状态"或 "创建一个 XX 页面"，也应触发。此 skill 覆盖从类型注册、窗口尺寸、CSS 样式到鼠标交互 行为的全部 12 个修改点，确保状态机完整可用。

  • Works in 10 steps: 注册类型 → 实现 setter → 窗口面积配置 → …
  • Frontend & Design work in your project
  • SKILL.md covers 前置确认, 实现步骤 and 文件清单
  • Calls npx

What it does

Eisland Dev Add Empty State is an agent skill from JNTMTMTM/eIsland. 为 eIsland 灵动岛添加一个新的空白状态机（IslandState）。当用户要求创建新状态、新页面、 新界面（如登录页、设置子页面、独立面板）时使用此 skill。即使用户只说"加个新状态"或 "创建一个 XX 页面"，也应触发。此 skill 覆盖从类型注册、窗口尺寸、CSS 样式到鼠标交互 行为的全部 12 个修改点，确保状态机完整可用。

Its SKILL.md is about 1.3k 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. 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

  • Frontend & Design work in your project

Example prompts

  • “创建一个 XX 页面”
  • “/eisland-dev-add-empty-state”

Requirements

  • Node.js

Workflow steps

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

  1. 注册类型
  2. 实现 setter
  3. 窗口面积配置
  4. 状态行为配置
  5. 创建状态组件
  6. 注册渲染
  7. CSS 窗口尺寸
  8. 认证类页面样式（如适用）
  9. 鼠标移出不收回（如适用）
  10. 验证

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:

    • npx

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

  • Network

    No URLs in SKILL.md. Its commands use 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 Add Empty State loads about 1.3k tokens when it runs. Until then it costs about 51 tokens; SKILL.md has 190 words of instructions outside code blocks.

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

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). 190 words, ~1,341 tokens.

Download SKILL.mdSave it as .claude/skills/eisland-dev-add-empty-state/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-empty-state
description
为 eIsland 灵动岛添加一个新的空白状态机（IslandState）。当用户要求创建新状态、新页面、 新界面（如登录页、设置子页面、独立面板）时使用此 skill。即使用户只说"加个新状态"或 "创建一个 XX 页面"，也应触发。此 skill 覆盖从类型注册、窗口尺寸、CSS 样式到鼠标交互 行为的全部 12 个修改点，确保状态机完整可用。

eIsland: 添加空白状态机

为灵动岛添加一个新的空白 IslandState，使其具备正确的窗口大小、样式和交互行为。

前置确认

在开始前，向用户确认以下信息：

  1. 状态名称 — kebab-case 标识符（如 musicProvidersLogin、settings wizard）
  2. 窗口大小 — 选择一种预设：
    • maxExpand（860x400）— 全展开大面板，适合设置、表单、内容页
    • expanded（860x150）— 单击展开面板
    • hover（500x60）— 悬停小面板
    • notification（500x88）— 通知面板
    • lyrics（500x42）— 歌词条
    • 自定义尺寸
  3. 鼠标移出后是否收回？ — 必须主动询问：

    "鼠标移出灵动岛后，是否自动收回至待机状态？（大多数独立页面如登录、注册、支付页面选择不收回）"

    • 不收回（推荐用于独立页面）→ 需要额外修改 AUTH_STATES、useIslandHoverInteraction.ts、useIslandSettingsSync.ts
    • 收回 → 无需额外修改
  4. 是否为认证/登录类页面？ — 如果是，需要导入 auth.css 并使用 auth-state-content 类名

实现步骤

Step 1: 注册类型

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

1a. 在 IslandState 联合类型末尾添加新状态名：

typescript
export type IslandState = '...' | 'newStateName';

1b. 在 IslandSlice 接口中添加 setter 方法签名：

typescript
setNewStateName: () => void;
Step 2: 实现 setter

文件： src/renderer/store/slices/islandSlice.ts

在已有的 setter 群（如 setBindEmail 之后）添加新 setter：

typescript
setNewStateName: () => set((prev) => {
  if (prev.uiStateLocked && prev.state !== 'newStateName') return prev;
  const standalone = isStandaloneRenderer();
  if (!standalone) {
    window.api?.expandWindowSettings();
    window.api?.disableMousePassthrough();
  }
  const nextAuthReturnState = (/* 已有 auth 状态列表 */ || prev.state === 'newStateName')
    ? prev.authReturnState
    : (standalone ? 'maxExpand' : prev.state);
  return { state: 'newStateName' as never, authReturnState: nextAuthReturnState };
}),

2b. 在 setIdle 的守卫条件中添加新状态（防止被强制收回）：

typescript
if (!force && (... || prev.state === 'newStateName')) return prev;

2c. 在 returnFromAuth 中：

  • 窗口展开分支（else if (target === ...)）添加新状态
  • authStates 数组中添加新状态
Step 3: 窗口面积配置

文件： src/renderer/store/constants/islandTransition.ts

在 ISLAND_STATE_AREA 中添加条目（值与所选窗口大小一致）：

typescript
newStateName: 860 * 400,  // maxExpand 尺寸
Step 4: 状态行为配置

文件： src/renderer/components/config/dynamicIslandStateConfig.ts

在 STATE_CONFIGS 中添加条目：

typescript
newStateName: {
  name: 'newStateName',
  mousePassthrough: false,
  expanded: true,
  enterDelay: 0,
  leaveDelay: 0,
},
Step 5: 创建状态组件

5a. 创建目录 src/renderer/components/states/newStateName/

5b. 创建 NewStateNameContent.tsx：

tsx
import type { ReactElement } from 'react';
// 如果是认证类页面，导入 auth.css：
// import '../../../styles/auth/auth.css';

export function NewStateNameContent(): ReactElement {
  // 认证类页面使用 auth-state-content 类
  // return <div className="auth-state-content" />;
  return <div />;
}

5c. 创建 index.ts：

ts
export { NewStateNameContent } from './NewStateNameContent';
Step 6: 注册渲染

6a. src/renderer/components/components/DynamicIslandStateContent.tsx：

tsx
import { NewStateNameContent } from '../states/newStateName';
// 在状态判断链中添加：
if (state === 'newStateName') return <NewStateNameContent />;

6b. src/renderer/components/components/StandaloneWindowViewport.tsx：

tsx
import { NewStateNameContent } from '../states/newStateName';
// 在 SettingsTab 守卫前添加：
{activeTab === 'settings' && state === 'newStateName' && <NewStateNameContent />}
// 更新 SettingsTab 排除条件：
{activeTab === 'settings' && state !== '...' && state !== 'newStateName' && <SettingsTab />}
Step 7: CSS 窗口尺寸

文件： src/renderer/styles/shell/shell.css

将新状态添加到对应尺寸的选择器组中。例如 maxExpand 尺寸：

css
.island-shell.login,
.island-shell.register,
/* ... */
.island-shell.newStateName {
  width: 860px;
  height: 400px;
  background: var(--color-island-bg);
  border-radius: 0 0 22px 22px;
  box-shadow: none;
}

同时添加 ::before 伪元素规则（隐藏光泽层）：

css
.island-shell.login::before,
/* ... */
.island-shell.newStateName::before {
  opacity: 0;
  pointer-events: none;
}
Step 8: 认证类页面样式（如适用）

文件： src/renderer/styles/auth/auth.css

将新状态添加到 auth 动画选择器组：

css
.island-shell.login .auth-state-content,
/* ... */
.island-shell.newStateName .auth-state-content {
  align-items: center;
  padding: 14px 22px;
}
Step 9: 鼠标移出不收回（如适用）

如果用户确认需要"鼠标移出后不收回"，修改以下 3 个文件：

9a. src/renderer/components/hooks/useIslandHoverInteraction.ts：

  • AUTH_STATES 集合添加新状态
  • 第 134 行的状态检查列表添加新状态

9b. src/renderer/components/hooks/useIslandSettingsSync.ts：

  • 第 398 行的窗口展开分支添加新状态
Step 10: 验证
bash
npx tsc --noEmit --skipLibCheck

文件清单

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

  • store/types/index.ts — IslandState + IslandSlice
  • store/slices/islandSlice.ts — setter + setIdle 守卫 + returnFromAuth
  • store/constants/islandTransition.ts — ISLAND_STATE_AREA
  • components/config/dynamicIslandStateConfig.ts — STATE_CONFIGS
  • components/states/<name>/index.ts — 新文件
  • components/states/<name>/<Name>Content.tsx — 新文件
  • components/components/DynamicIslandStateContent.tsx — 渲染注册
  • components/components/StandaloneWindowViewport.tsx — 独立窗口渲染
  • styles/shell/shell.css — 窗口尺寸
  • styles/auth/auth.css — 如为认证页面
  • components/hooks/useIslandHoverInteraction.ts — 如需不收回
  • components/hooks/useIslandSettingsSync.ts — 如需不收回

© 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-empty-state of JNTMTMTM/eIsland.

  • SKILL.md
  • evals/evals.json

Open the folder on GitHubat commit 411adb9

Compare with similar skills

Eisland Dev Add Empty State 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 Empty State compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Eisland Dev Add Empty State this skillJNTMTMTM/eIsland320—~1.3kAutomated safety check: PassGPL-3.0
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
React Doctormakeplane/plane61k12 repos~657Automated safety check: PassAGPL-3.0
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Web Interface Guidelines Reviewervercel-labs/openreview1.7k98 repos~308Automated safety check: PassNone

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 Doctor

    makeplane/plane

    Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.

    61k GitHub starsUsed in 12 repos~657 tokens
    Frontend & DesignAuto-check passed

  • 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

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 98 repos~308 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

More from JNTMTMTM/eIsland

All 11 skills in this repo

  • Eisland Dev Generate Release Worklog

    JNTMTMTM/eIsland

    Generate a release announcement markdown for eIsland. An agent skill from JNTMTMTM/eIsland.

    320 GitHub stars~1k tokensUpdated yesterday
    Auto-check passed

  • Eisland Dev Refactor Module Split

    JNTMTMTM/eIsland

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

    320 GitHub stars~2.2k tokensUpdated yesterday
    Auto-check passed

  • Eisland Dev Refactor Module Split

    JNTMTMTM/eIsland

    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 yesterday
    Auto-check passed

  • Eisland Dev Add Empty Setting Subpage

    JNTMTMTM/eIsland

    Add a new empty subpage (tab) to an existing eIsland settings section with page navigation support.

    320 GitHub stars~2.3k tokensUpdated yesterday
    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 yesterday
    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 yesterday
    Auto-check passed

Categories

Questions about Eisland Dev Add Empty State

What does Eisland Dev Add Empty State do?

为 eIsland 灵动岛添加一个新的空白状态机（IslandState）。当用户要求创建新状态、新页面、 新界面（如登录页、设置子页面、独立面板）时使用此 skill。即使用户只说"加个新状态"或 "创建一个 XX 页面"，也应触发。此 skill 覆盖从类型注册、窗口尺寸、CSS 样式到鼠标交互 行为的全部 12 个修改点，确保状态机完整可用。. Eisland Dev Add Empty State is an agent skill from JNTMTMTM/eIsland.

When should I use Eisland Dev Add Empty State?

Eisland Dev Add Empty State fits situations like: frontend & Design work in your project.

How do I install Eisland Dev Add Empty State in Claude Code?

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

How do I install Eisland Dev Add Empty State in Codex?

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

Can I use Eisland Dev Add Empty State 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-empty-state -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-empty-state, .gemini/skills/eisland-dev-add-empty-state, .github/skills/eisland-dev-add-empty-state and .opencode/skills/eisland-dev-add-empty-state in your project.

What does Eisland Dev Add Empty State need to run?

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

Does Eisland Dev Add Empty State access the network?

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

Is Eisland Dev Add Empty State 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 Empty State use?

Eisland Dev Add Empty State 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 Empty State use?

About 1.3k tokens (SKILL.md is roughly 5.4k 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 Empty State?

Skills that share tags, products or a category with Eisland Dev Add Empty State: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (warpdotdev/warp, 65k 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 Empty State?

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.