Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
NaiveTab 浏览器扩展的全局命令快捷键开发指南。当用户要新增/修改命令快捷键(如新增 tab 操作、页面滚动、窗口操作等命令)时使用。涵盖需要修改的完整文件清单、执行环境分类、类型注册等,防止遗漏关键步骤。
$ npx skills add GXFG/newtab-naivetab --skill add-command -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install GXFG/newtab-naivetab add-command --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "add-command" agent skill from https://github.com/GXFG/newtab-naivetab/tree/main/.claude/skills/add-command into .claude/skills/add-command/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-command", 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 install https://github.com/GXFG/newtab-naivetab/tree/main/.claude/skills/add-commandType 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.
$ npx skills add GXFG/newtab-naivetab --skill add-command -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install GXFG/newtab-naivetab add-command --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/GXFG/newtab-naivetab.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/add-command .agents/skills/add-command && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "add-command" agent skill from https://github.com/GXFG/newtab-naivetab/tree/main/.claude/skills/add-command into .agents/skills/add-command/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-command", 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.
$ npx skills add GXFG/newtab-naivetab --skill add-command -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install GXFG/newtab-naivetab add-command --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/GXFG/newtab-naivetab.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/add-command .cursor/skills/add-command && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "add-command" agent skill from https://github.com/GXFG/newtab-naivetab/tree/main/.claude/skills/add-command into .cursor/skills/add-command/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-command", 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 https://github.com/GXFG/newtab-naivetab.git --path .claude/skills/add-command--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add GXFG/newtab-naivetab --skill add-command -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install GXFG/newtab-naivetab add-command --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/GXFG/newtab-naivetab.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/add-command .gemini/skills/add-command && rm -rf skills-srcUse ~/.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/
Install the "add-command" agent skill from https://github.com/GXFG/newtab-naivetab/tree/main/.claude/skills/add-command into .gemini/skills/add-command/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-command", 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.
$ gh skill install GXFG/newtab-naivetab add-commandInstalls 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).
$ npx skills add GXFG/newtab-naivetab --skill add-command -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/GXFG/newtab-naivetab.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/add-command .github/skills/add-command && rm -rf skills-srcUse ~/.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/
Install the "add-command" agent skill from https://github.com/GXFG/newtab-naivetab/tree/main/.claude/skills/add-command into .github/skills/add-command/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-command", 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.
$ npx skills add GXFG/newtab-naivetab --skill add-command -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install GXFG/newtab-naivetab add-command --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/GXFG/newtab-naivetab.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/add-command .opencode/skills/add-command && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "add-command" agent skill from https://github.com/GXFG/newtab-naivetab/tree/main/.claude/skills/add-command into .opencode/skills/add-command/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-command", 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.
add-commandNaiveTab 浏览器扩展的全局命令快捷键开发指南。当用户要新增/修改命令快捷键(如新增 tab 操作、页面滚动、窗口操作等命令)时使用。涵盖需要修改的完整文件清单、执行环境分类、类型注册等,防止遗漏关键步骤。
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.
5 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit ae78a42. It shows what the files ask for, not the result of running them.
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.
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.
Links to these hosts (documentation or services it may open):
icon-sets.iconify.designFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from GXFG/newtab-naivetab at commit ae78a42, republished under its GPL-3.0 licence (© GXFG). 199 words, ~1,165 tokens.
.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.新增命令快捷键需按以下步骤完成。核心原则:COMMAND_CATEGORIES 是单一数据源,所有命令类型从它派生。
新增命令 → 确定执行环境:
└─ 'sw' → Service Worker 执行(chrome.tabs 等浏览器 API)
└─ 'cs' → Content Script 执行(DOM 操作:滚动、复制、刷新页面)
└─ 'newtab' → NaiveTab 页面执行(localConfig / globalState 操作)src/logic/constants/icons.ts在 COMMAND_ICONS 中定义图标:
export const COMMAND_ICONS = {
// ... 已有图标 ...
myCommand: 'mdi:some-valid-icon', // ← 先在这里定义
}图标来自 Iconify,需验证图标名存在。可以复用已有图标(如多个命令共用
mdi:pin-outline)。
src/logic/shortcut/shortcut-command.ts ⚠️ 核心文件2-A:在 COMMAND_CATEGORIES 对应分类中添加命令
{
categoryKey: 'commandCategory.tabManagement',
commands: [
// ... 已有命令 ...
{ command: 'myCommand', iconName: COMMAND_ICONS.myCommand },
// 如果非 SW 执行,需标注 execEnv:
// { command: 'myDomCommand', execEnv: 'cs' as const, iconName: COMMAND_ICONS.myDomCommand },
],
}2-B:如果是新分类,新建一个分类对象:
{
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 中添加默认按键绑定:
keymap: {
// ... 已有绑定 ...
KeyX: { command: 'myCommand' }, // ← 新增
}2-E:(仅滚动命令)添加到 REPEATABLE_SCROLL_COMMANDS
如果命令支持按住持续触发(如 scrollUp/Down/Left/Right):
export const REPEATABLE_SCROLL_COMMANDS = new Set([
'scrollUp',
'scrollDown',
'scrollLeft',
'scrollRight',
'myRepeatableCommand', // ← 新增
] as const)execEnv 实现命令逻辑execEnv: 'sw',默认值)在 src/background/commands/registry.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类型约束)。
execEnv: 'cs')在 src/contentScripts/index.ts 的 commandExecutors 中添加:
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)。
execEnv: 'newtab')在 src/logic/shortcut/shortcut-executor.ts 中添加执行器:
// 控制类命令(操作 localConfig / globalState)
const newtabControlExecutors: Record<string, () => void> = {
// ... 已有执行器 ...
myCommand: () => {
localState.value.isFocusMode = !localState.value.isFocusMode
},
}
newtabCommandExecutors用于 CS 命令在 newtab 页面的执行(或静默忽略)。如果命令在 newtab 页面无意义,在newtabCommandExecutors中添加空函数() => {}静默忽略。
src/types/messages.ts消息类型通常不需要修改。MSG_KEYDOWN、MSG_EXECUTE_COMMAND、MSG_INIT_COMPLETE、MSG_HELLO 已覆盖所有场景。
仅在需要新增消息类型时才修改此文件。
src/locales/zh-CN.json 和 en-US.json命令名称(必须):
{
"command": {
"myCommand": "我的命令"
}
}分类名称(如果新建了分类):
{
"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
SKILL.md and 1 other file in .claude/skills/add-command of GXFG/newtab-naivetab.
Open the folder on GitHubat commit ae78a42
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Add Command this skillGXFG/newtab-naivetab | 137 | — | ~1.2k | Automated safety check: Pass | GPL-3.0 | |
| Web Artifacts Builderanthropics/skills | 180k | 41 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| React Doctormakeplane/plane | 61k | 12 repos | ~657 | Automated safety check: Pass | AGPL-3.0 | |
| Impeccablebestofjs/bestofjs | 3.1k | 27 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Web Interface Guidelines Reviewervercel-labs/openreview | 1.7k | 97 repos | ~308 | Automated safety check: Pass | None |
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
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.
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…
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.
vercel-labs/openreview
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
GXFG/newtab-naivetab
NaiveTab 浏览器扩展的 Widget 开发指南。当用户要在 newtab-naivetab 项目中新增 Widget 组件、添加新功能组件时使用。涵盖需要修改的完整文件清单、配置规范、类型注册等,防止遗漏关键步骤。
GXFG/newtab-naivetab
NaiveTab 浏览器扩展的 i18n 国际化开发指南。当用户要新增/修改翻译文本、添加多语言 key 时使用。涵盖中英文同步更新规则、变量替换模式等,防止遗漏或格式错误。
GXFG/newtab-naivetab
NaiveTab 浏览器扩展的 Setting 面板开发指南。当用户要新增 Setting 设置面板、添加新的设置页时使用。涵盖需要修改的完整文件清单、注册规范等,防止遗漏关键步骤。
GXFG/newtab-naivetab
NaiveTab 浏览器扩展的配置迁移开发指南。当用户要修改持久化配置结构(新增/重命名/删除字段、修改类型)时使用。强制走 handleAppUpdate 迁移流程,防止破坏老用户数据。
Categories
NaiveTab 浏览器扩展的全局命令快捷键开发指南。当用户要新增/修改命令快捷键(如新增 tab 操作、页面滚动、窗口操作等命令)时使用。涵盖需要修改的完整文件清单、执行环境分类、类型注册等,防止遗漏关键步骤。. Add Command is an agent skill from GXFG/newtab-naivetab.
Add Command fits situations like: frontend & Design work in your project.
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.
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.
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.
SKILL.md names no scripts, command-line tools or credentials: Add Command is instructions for the agent only.
SKILL.md names 1 domain. As links in the text: icon-sets.iconify.design. This is read from the text; nothing was executed.
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.
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.
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.
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.
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.