Agent skill

Add Command

by GXFG in GXFG/newtab-naivetab

NaiveTab 浏览器扩展的全局命令快捷键开发指南。当用户要新增/修改命令快捷键(如新增 tab 操作、页面滚动、窗口操作等命令)时使用。涵盖需要修改的完整文件清单、执行环境分类、类型注册等,防止遗漏关键步骤。

GPL-3.0Auto-check passedFrontend & Design

Install Add Command

skills CLI
$ npx skills add GXFG/newtab-naivetab --skill add-command -a claude-code

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

GitHub CLI
$ gh skill install GXFG/newtab-naivetab add-command --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/GXFG/newtab-naivetab.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/add-command .claude/skills/add-command && 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
add-command
GitHub stars
137
Token cost
~1.2k tokens
SKILL.md length
199 words
Files
2
Skills in repo
5
Repo updated
First seen
Licence
GPL-3.0

At a glance

NaiveTab 浏览器扩展的全局命令快捷键开发指南。当用户要新增/修改命令快捷键(如新增 tab 操作、页面滚动、窗口操作等命令)时使用。涵盖需要修改的完整文件清单、执行环境分类、类型注册等,防止遗漏关键步骤。

  • Works in 5 steps: src/logic/constants/icons.ts → src/logic/shortcut/shortcut-command.ts… → 根据 execEnv 实现命令逻辑 → …
  • Frontend & Design work in your project
  • SKILL.md covers 决策树:你的命令在哪执行?, 必须修改的文件, 新增命令的完整检查清单 and 无需手动修改(自动处理)
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Add Command is an agent skill from GXFG/newtab-naivetab. NaiveTab 浏览器扩展的全局命令快捷键开发指南。当用户要新增/修改命令快捷键(如新增 tab 操作、页面滚动、窗口操作等命令)时使用。涵盖需要修改的完整文件清单、执行环境分类、类型注册等,防止遗漏关键步骤。

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `reference.md`).

It sits in Frontend & Design. The repository describes itself as: NaiveTab - newtab extension for browser |浏览器新标签页扩展|Visual keyboard for bookmarks & browser commands — one-press access. Drag & drop layout, full customization, focus mode, and…. The licence is GPL-3.0.

When your agent uses it

  • Frontend & Design work in your project

Example prompts

  • “/add-command”

Workflow steps

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

  1. src/logic/constants/icons.ts
  2. src/logic/shortcut/shortcut-command.ts ⚠️ 核心文件
  3. 根据 execEnv 实现命令逻辑
  4. src/types/messages.ts
  5. i18n:src/locales/zh-CN.json 和 en-US.json

What it can do on your machine

Read from SKILL.md and the folder at commit ae78a42. 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 and json).

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

  • Network

    Links to these hosts (documentation or services it may open):

    • icon-sets.iconify.design

    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

Add Command loads about 1.2k tokens when it runs. Until then it costs about 30 tokens; SKILL.md has 199 words of instructions outside code blocks.

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

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 GXFG/newtab-naivetab at commit ae78a42, republished under its GPL-3.0 licence (© GXFG). 199 words, ~1,165 tokens.

Download SKILL.mdSave it as .claude/skills/add-command/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
add-command
description
NaiveTab 浏览器扩展的全局命令快捷键开发指南。当用户要新增/修改命令快捷键(如新增 tab 操作、页面滚动、窗口操作等命令)时使用。涵盖需要修改的完整文件清单、执行环境分类、类型注册等,防止遗漏关键步骤。

NaiveTab Add Command

新增命令快捷键需按以下步骤完成。核心原则:COMMAND_CATEGORIES 是单一数据源,所有命令类型从它派生。

决策树:你的命令在哪执行?

新增命令 → 确定执行环境:
  └─ 'sw'      → Service Worker 执行(chrome.tabs 等浏览器 API)
  └─ 'cs'      → Content Script 执行(DOM 操作:滚动、复制、刷新页面)
  └─ 'newtab'  → NaiveTab 页面执行(localConfig / globalState 操作)

必须修改的文件

Step 1 — src/logic/constants/icons.ts

在 COMMAND_ICONS 中定义图标:

ts
export const COMMAND_ICONS = {
  // ... 已有图标 ...
  myCommand: 'mdi:some-valid-icon',   // ← 先在这里定义
}

图标来自 Iconify,需验证图标名存在。可以复用已有图标(如多个命令共用 mdi:pin-outline)。

Step 2 — src/logic/shortcut/shortcut-command.ts ⚠️ 核心文件

2-A:在 COMMAND_CATEGORIES 对应分类中添加命令

ts
{
  categoryKey: 'commandCategory.tabManagement',
  commands: [
    // ... 已有命令 ...
    { command: 'myCommand', iconName: COMMAND_ICONS.myCommand },
    // 如果非 SW 执行,需标注 execEnv:
    // { command: 'myDomCommand', execEnv: 'cs' as const, iconName: COMMAND_ICONS.myDomCommand },
  ],
}

2-B:如果是新分类,新建一个分类对象:

ts
{
  categoryKey: 'commandCategory.myCategory',
  commands: [
    { command: 'myCommand', iconName: COMMAND_ICONS.myCommand },
  ],
}

2-C:根据 execEnv 更新类型约束(仅在需要时):

执行环境需要更新的类型说明
'cs'TCsCommandName新增联合类型成员
'newtab'TNewtabCommandName新增联合类型成员
'sw'(默认)无需额外操作自动从 TCommandName 排除 CS/newtab 命令后派生

TCommandName、TSwCommandName 会从 COMMAND_CATEGORIES 自动派生,无需手动维护。

2-D:(可选)添加默认 keymap 绑定

在 KEYBOARD_COMMAND_CONFIG.keymap 中添加默认按键绑定:

ts
keymap: {
  // ... 已有绑定 ...
  KeyX: { command: 'myCommand' },   // ← 新增
}

2-E:(仅滚动命令)添加到 REPEATABLE_SCROLL_COMMANDS

如果命令支持按住持续触发(如 scrollUp/Down/Left/Right):

ts
export const REPEATABLE_SCROLL_COMMANDS = new Set([
  'scrollUp',
  'scrollDown',
  'scrollLeft',
  'scrollRight',
  'myRepeatableCommand',   // ← 新增
] as const)
Step 3 — 根据 execEnv 实现命令逻辑
SW 命令(execEnv: 'sw',默认值)

在 src/background/commands/registry.ts 中:

ts
// 3-A:实现 handler 函数
const myCommand = (tabId: number) => {
  chrome.tabs.update(tabId, { /* ... */ }).catch(logLastError)
}

// 3-B:在 COMMAND_HANDLERS Record 中注册
const COMMAND_HANDLERS: Record<TSwCommandName, CommandHandler> = {
  // ... 已有条目 ...
  myCommand,
}

⚠️ 缺少 COMMAND_HANDLERS 注册项会导致 TS 编译报错(TSwCommandName 类型约束)。

CS 命令(execEnv: 'cs')

在 src/contentScripts/index.ts 的 commandExecutors 中添加:

ts
const commandExecutors: Record<string, () => void> = {
  // ... 已有执行器 ...
  myCommand: () => {
    // DOM 操作,例如:
    document.body.style.background = 'red'
  },
}

如果是滚动类命令,还需在 src/contentScripts/scroll.ts 中实现滚动逻辑,并在 src/logic/shortcut/shortcut-command.ts 的 REPEATABLE_SCROLL_COMMANDS 中注册(见 Step 2-E)。

NaiveTab 本地命令(execEnv: 'newtab')

在 src/logic/shortcut/shortcut-executor.ts 中添加执行器:

ts
// 控制类命令(操作 localConfig / globalState)
const newtabControlExecutors: Record<string, () => void> = {
  // ... 已有执行器 ...
  myCommand: () => {
    localState.value.isFocusMode = !localState.value.isFocusMode
  },
}

newtabCommandExecutors 用于 CS 命令在 newtab 页面的执行(或静默忽略)。如果命令在 newtab 页面无意义,在 newtabCommandExecutors 中添加空函数 () => {} 静默忽略。

Step 4 — src/types/messages.ts

消息类型通常不需要修改。MSG_KEYDOWN、MSG_EXECUTE_COMMAND、MSG_INIT_COMPLETE、MSG_HELLO 已覆盖所有场景。

仅在需要新增消息类型时才修改此文件。

Step 5 — i18n:src/locales/zh-CN.json 和 en-US.json

命令名称(必须):

json
{
  "command": {
    "myCommand": "我的命令"
  }
}

分类名称(如果新建了分类):

json
{
  "commandCategory": {
    "myCategory": "我的分类"
  }
}

⚠️ zh-CN.json 和 en-US.json 必须同步更新。


新增命令的完整检查清单

检查项SW 命令CS 命令Newtab 命令
COMMAND_ICONS 定义图标✅✅✅
COMMAND_CATEGORIES 注册✅✅✅
execEnv 标注(非 SW 时)不需要✅ execEnv: 'cs'✅ execEnv: 'newtab'
类型联合更新(TCs/TNewtab)不需要✅✅
SW handler 实现✅不需要不需要
CS executor 实现不需要✅不需要
newtab executor 实现不需要可选(或空函数忽略)✅
keymap 默认绑定可选可选可选
REPEATABLE_SCROLL_COMMANDS仅滚动命令仅滚动命令不需要
i18n 命令名称✅✅✅
i18n 分类名称(新分类时)✅✅✅

无需手动修改(自动处理)

文件机制
shortcut-command.ts 中的 TCommandName、TSwCommandName从 COMMAND_CATEGORIES 自动派生
SW_COMMANDS、CS_COMMANDS、NEWTAB_COMMANDS 运行时列表从 COMMAND_CATEGORIES 过滤派生
getCommandExecEnv()遍历 COMMAND_CATEGORIES 查找
Setting 面板的命令选择器遍历 COMMAND_CATEGORIES 分组渲染

© GXFG, 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 .claude/skills/add-command of GXFG/newtab-naivetab.

  • SKILL.md
  • reference.md

Open the folder on GitHubat commit ae78a42

Compare with similar skills

Add Command 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.

Add Command compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Add Command this skillGXFG/newtab-naivetab137—~1.2kAutomated 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.7k97 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
  • 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 97 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 GXFG/newtab-naivetab

  • Add Widget

    GXFG/newtab-naivetab

    NaiveTab 浏览器扩展的 Widget 开发指南。当用户要在 newtab-naivetab 项目中新增 Widget 组件、添加新功能组件时使用。涵盖需要修改的完整文件清单、配置规范、类型注册等,防止遗漏关键步骤。

    137 GitHub stars~1.4k tokensUpdated 2 days ago
    Auto-check passed
  • Add I18n Locale

    GXFG/newtab-naivetab

    NaiveTab 浏览器扩展的 i18n 国际化开发指南。当用户要新增/修改翻译文本、添加多语言 key 时使用。涵盖中英文同步更新规则、变量替换模式等,防止遗漏或格式错误。

    137 GitHub stars~269 tokensUpdated 2 days ago
    Auto-check passed
  • Add Setting Pane

    GXFG/newtab-naivetab

    NaiveTab 浏览器扩展的 Setting 面板开发指南。当用户要新增 Setting 设置面板、添加新的设置页时使用。涵盖需要修改的完整文件清单、注册规范等,防止遗漏关键步骤。

    137 GitHub stars~279 tokensUpdated 2 days ago
    Auto-check passed
  • Config Migration

    GXFG/newtab-naivetab

    NaiveTab 浏览器扩展的配置迁移开发指南。当用户要修改持久化配置结构(新增/重命名/删除字段、修改类型)时使用。强制走 handleAppUpdate 迁移流程,防止破坏老用户数据。

    137 GitHub stars~345 tokensUpdated 2 days ago
    Auto-check passed

Questions about Add Command

What does Add Command do?

NaiveTab 浏览器扩展的全局命令快捷键开发指南。当用户要新增/修改命令快捷键(如新增 tab 操作、页面滚动、窗口操作等命令)时使用。涵盖需要修改的完整文件清单、执行环境分类、类型注册等,防止遗漏关键步骤。. Add Command is an agent skill from GXFG/newtab-naivetab.

When should I use Add Command?

Add Command fits situations like: frontend & Design work in your project.

How do I install Add Command in Claude Code?

Run `npx skills add GXFG/newtab-naivetab --skill add-command -a claude-code`. Or copy the skill folder (.claude/skills/add-command in GXFG/newtab-naivetab) into .claude/skills/add-command in your project. Claude Code loads it when a task matches its description.

How do I install Add Command in Codex?

Run `npx skills add GXFG/newtab-naivetab --skill add-command -a codex`. Or copy the skill folder (.claude/skills/add-command in GXFG/newtab-naivetab) into .agents/skills/add-command in your project. Codex loads it when a task matches its description.

Can I use Add Command 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 GXFG/newtab-naivetab --skill add-command -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/add-command, .gemini/skills/add-command, .github/skills/add-command and .opencode/skills/add-command in your project.

What does Add Command need to run?

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

Does Add Command access the network?

SKILL.md names 1 domain. As links in the text: icon-sets.iconify.design. This is read from the text; nothing was executed.

Is Add Command 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 Add Command use?

Add Command 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 Add Command use?

About 1.2k tokens (SKILL.md is roughly 4.7k 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 Add Command?

Skills that share tags, products or a category with Add Command: 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 Add Command?

GXFG (a GitHub user) maintains it in GXFG/newtab-naivetab, which has 137 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 7, 2026.

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