AgentHubAgentHub

add-e2e-selectors Skill Install & Guide

SkillSkillsMP

io.github.grafana/grafana/add-e2e-selectors

Add reliable @grafana/e2e-selectors to interactive elements and key containers in the Grafana frontend. Use when adding e2e selectors, data-testid attributes, or test selectors to React components, when a file or component lacks selectors for testing, or when asked to make elements testable. Also use when given a Grafana Pathfinder interactive guide (a guide directory or content.json) to audit or fix — it extracts the guide's reftarget selectors, identifies weak ones, and fixes them at the source in Grafana's JSX. Defines versioned selectors in the e2e-selectors package and wires data-testid into JSX. Accepts a file path, a list of targets, a directory, a pathfinder guide, or the current/open file.

View on SkillsMP ↗Repository ↗

Copy the install config on this page first, then verify docs and permissions upstream.

Popularity

Repo stars77.3k

Overview

Add reliable @grafana/e2e-selectors to interactive elements and key containers in the Grafana frontend. Use when adding e2e selectors, data-testid attributes, or test selectors to React components, when a file or component lacks selectors for testing, or when asked to make elements testable. Also use when given a Grafana Pathfinder interactive guide (a guide directory or content.json) to audit or fix — it extracts the guide's reftarget selectors, identifies weak ones, and fixes them at the source in Grafana's JSX. Defines versioned selectors in the e2e-selectors package and wires data-testid into JSX. Accepts a file path, a list of targets, a directory, a pathfinder guide, or the current/open file. add-e2e-selectors is a Agent Skill listed from SkillsMP. This page includes an overview, setup tutorial, install commands, and use cases for Trae, Tongyi Lingma, Cursor, Claude Code, and VS Code.

Use cases

Code review & GitHubTesting & QACursor essentials

AgentHub Verified AvailabilityTested & Ready

Automated pipeline validated install commands, protocol & client compatibility

Verified At2026-10-22
Install Snippets TestedCLI & JSON config syntax verified
Protocol Handshake ReadyComplies with JSON-RPC 2.0 specifications
Origin Registry ActiveSourced from skillsmp
Verified ClientsClaude Code、Claude Desktop、Cursor 等
Security Tier: A 级 · 源码开放合规 (A)·Scanned for high-risk vulnerabilities. Recommended to run with project-scoped permissions.

Send this prompt to your AI to install the Skill

Recommended
Target client (auto-optimizes prompt):
PROMPT >

Follow the install guide at https://myagenthub.cn/install/skill.md?lang=en to automatically detect the current IDE and install the skill "grafana/grafana@add-e2e-selectors" without asking, and tell me how to verify it afterwards.

💡Paste into your AI coding assistant (Cursor, Trae, Claude Code) — the agent will handle download and configuration automatically.

Copy by platformAlternative

Choose your platform

Choose install method

Click to copy snippet
# 改 -a 切换客户端：trae | lingma | codebuddy | kimi-code-cli | qwen-code | cursor | claude-code | windsurf | cline | github-copilot | codex
npx skills add grafana/grafana@add-e2e-selectors -a cursor -y

Setup tutorial

  1. Open the add-e2e-selectors page and confirm the source is SkillsMP.
  2. Copy the install command for Trae, Lingma, Cursor, Claude Code, or universal CLI.
  3. Run it, or place SKILL.md under .trae/skills/, .lingma/skills/, or .cursor/skills/.
  4. Reload the client, then describe your task so the agent can match this skill.

Install commands

Install commands and setup steps are in the HTML so search engines and no-JS browsers can read them without running client JavaScript.

Universal — Skills CLI (recommended)

Skills CLI

# 改 -a 切换客户端：trae | lingma | codebuddy | kimi-code-cli | qwen-code | cursor | claude-code | windsurf | cline | github-copilot | codex
npx skills add grafana/grafana@add-e2e-selectors -a cursor -y

AgentHub CLI (change --ai)

# 改 --ai 切换客户端：trae | lingma | workbuddy | kimi | qwen | cursor | claude-code | windsurf | cline | vscode | codex | openclaw
curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node --input-type=module - init grafana/grafana@add-e2e-selectors --ai cursor -y

Cursor

Skills CLI

npx skills add grafana/grafana@add-e2e-selectors -a cursor -y

AgentHub CLI (change --ai)

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node --input-type=module - init grafana/grafana@add-e2e-selectors --ai cursor -y

Project directory

mkdir -p .cursor/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o .cursor/skills/add-e2e-selectors/SKILL.md
# 如有 scripts/ references/ assets/ 请一并复制

User directory

mkdir -p ~/.cursor/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o ~/.cursor/skills/add-e2e-selectors/SKILL.md

Trae (ByteDance)

  1. Trae natively supports Skill specs: project-level in .trae/skills/<name>/, global in ~/.trae/skills/
  2. Copy and run the command in your project terminal to download SKILL.md
  3. Reload Trae window, then describe your task in AI chat to activate automatically

Skills CLI

npx skills add grafana/grafana@add-e2e-selectors -a trae -y

AgentHub CLI (change --ai)

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node --input-type=module - init grafana/grafana@add-e2e-selectors --ai trae -y

Project directory

mkdir -p .trae/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o .trae/skills/add-e2e-selectors/SKILL.md

User directory

mkdir -p ~/.trae/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o ~/.trae/skills/add-e2e-selectors/SKILL.md

Tongyi Lingma (Alibaba)

  1. Tongyi Lingma supports skills in project .lingma/skills/<name>/ or global ~/.lingma/skills/
  2. Run the command to install SKILL.md
  3. In Lingma Agent mode, prompt your task and the skill will be automatically loaded

Skills CLI

npx skills add grafana/grafana@add-e2e-selectors -a lingma -y

AgentHub CLI (change --ai)

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node --input-type=module - init grafana/grafana@add-e2e-selectors --ai lingma -y

Project directory

mkdir -p .lingma/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o .lingma/skills/add-e2e-selectors/SKILL.md

User directory

mkdir -p ~/.lingma/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o ~/.lingma/skills/add-e2e-selectors/SKILL.md

WorkBuddy / CodeBuddy (Tencent)

  1. WorkBuddy reads skills only from .workbuddy/skills/<name>/ (user-level ~/.workbuddy/skills/); .codebuddy/skills/ belongs to CodeBuddy
  2. The Skills CLI command installs with -a codebuddy and appends a copy step into .workbuddy/skills
  3. AgentHub CLI (--ai workbuddy) syncs it for you; reload the chat panel so the skill gets indexed

Skills CLI

npx skills add grafana/grafana@add-e2e-selectors -a codebuddy -y
# WorkBuddy 读取 .workbuddy/skills，把上游写入 .codebuddy/skills 的结果同步一份
mkdir -p .workbuddy/skills && cp -R .codebuddy/skills/add-e2e-selectors .workbuddy/skills/

AgentHub CLI (change --ai)

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node --input-type=module - init grafana/grafana@add-e2e-selectors --ai workbuddy -y

Project directory

mkdir -p .workbuddy/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o .workbuddy/skills/add-e2e-selectors/SKILL.md

Claude Code

Project directory

mkdir -p .claude/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o .claude/skills/add-e2e-selectors/SKILL.md

User directory

mkdir -p ~/.claude/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o ~/.claude/skills/add-e2e-selectors/SKILL.md

Skills CLI

npx skills add grafana/grafana@add-e2e-selectors -a claude-code -y

Kimi Code (Moonshot AI)

  1. Kimi Code supports standard Agent Skills: project-level in .agents/skills/<name>/, global in ~/.agents/skills/
  2. Run the command to install
  3. In Kimi Code CLI, describe your task to trigger the skill

Skills CLI

npx skills add grafana/grafana@add-e2e-selectors -a kimi-code-cli -y

AgentHub CLI (change --ai)

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node --input-type=module - init grafana/grafana@add-e2e-selectors --ai kimi -y

Project directory

mkdir -p .agents/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o .agents/skills/add-e2e-selectors/SKILL.md

User directory

mkdir -p ~/.agents/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o ~/.agents/skills/add-e2e-selectors/SKILL.md

Qwen Code (Alibaba)

  1. Qwen Code supports project .qwen/skills/<name>/ and global ~/.qwen/skills/
  2. Run the command to deploy SKILL.md
  3. Prompt the agent to trigger the skill

Skills CLI

npx skills add grafana/grafana@add-e2e-selectors -a qwen-code -y

AgentHub CLI (change --ai)

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node --input-type=module - init grafana/grafana@add-e2e-selectors --ai qwen -y

Project directory

mkdir -p .qwen/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o .qwen/skills/add-e2e-selectors/SKILL.md

User directory

mkdir -p ~/.qwen/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o ~/.qwen/skills/add-e2e-selectors/SKILL.md

Windsurf

  1. Windsurf supports project-level .windsurf/skills/<name>/ or global ~/.codeium/windsurf/skills/
  2. Run the install command and refresh Cascade
  3. Cascade will auto-activate the skill based on its description

Skills CLI

npx skills add grafana/grafana@add-e2e-selectors -a windsurf -y

AgentHub CLI (change --ai)

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node --input-type=module - init grafana/grafana@add-e2e-selectors --ai windsurf -y

Project directory

mkdir -p .windsurf/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o .windsurf/skills/add-e2e-selectors/SKILL.md

User directory

mkdir -p ~/.codeium/windsurf/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o ~/.codeium/windsurf/skills/add-e2e-selectors/SKILL.md

Cline

  1. Cline supports standard .agents/skills/<name>/ structure
  2. Run the command to install the skill
  3. Ask questions in the Cline panel to trigger the skill

Skills CLI

npx skills add grafana/grafana@add-e2e-selectors -a cline -y

AgentHub CLI (change --ai)

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node --input-type=module - init grafana/grafana@add-e2e-selectors --ai cline -y

Project directory

mkdir -p .agents/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o .agents/skills/add-e2e-selectors/SKILL.md

Cherry Studio

  1. Use this skill as an Assistant system prompt in Cherry Studio
  2. Copy the command to view SKILL.md text
  3. Paste the contents into Cherry Studio Assistant system prompt
# 打印 SKILL.md 指令内容并粘贴到 Cherry Studio 智能体系统提示词中
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md"

VS Code / GitHub Copilot

mkdir -p .github/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o .github/skills/add-e2e-selectors/SKILL.md

OpenAI Codex

Skills CLI

npx skills add grafana/grafana@add-e2e-selectors -a codex -g -y

User directory

mkdir -p ~/.codex/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o ~/.codex/skills/add-e2e-selectors/SKILL.md

Project directory

mkdir -p .agents/skills/add-e2e-selectors
RAW="https://raw.githubusercontent.com/grafana/grafana/main/.claude/skills/add-e2e-selectors"
curl -sL "$RAW/SKILL.md" -o .agents/skills/add-e2e-selectors/SKILL.md

Troubleshooting & Common ErrorsFAQ

Common connection errors and verified fixes for add-e2e-selectors

Getting 'connection closed' or exit code 1 in Cursor / Claude Code for add-e2e-selectors?

Usually caused by missing runtime paths or IDE environment inheritance. Fix steps: 1. Verify Node.js 18+ (npx) or Python 3.10+ (uvx) is installed; 2. Run 'which npx' or 'which uvx' in terminal, and replace 'command' with absolute path; 3. Reload or restart the client window after modifying config.

Fix Snippet
# Check binary path in terminal:
which npx
node -v
Getting 'spawn npx ENOENT' or 'command not found'?

The editor background process does not inherit your full terminal PATH. Solution: Globally install the package, or set the absolute binary path (e.g. C:\Program Files\nodejs\npx.cmd on Windows, or /usr/local/bin/npx on macOS).

Tool calls timing out or failing to download packages?

First-time package downloading might be slow or timeout due to network limits. Configure a reliable mirror or check outbound proxy settings.

Agent does not match or apply add-e2e-selectors during conversations?

Verify SKILL.md is located at .cursor/skills/add-e2e-selectors/SKILL.md (Cursor) or ~/.claude/skills/add-e2e-selectors/SKILL.md (Claude Code). You can explicitly mention the skill name in your prompt to boost match confidence.

Still not connecting? Read the MCP troubleshooting guide →

Tool Mock Playground

Sandbox

add-e2e-selectors Rule Injection & Agent Behavior Simulation · Preview tool schema & outputs without local runtime

Sandbox Ready
fn: agent_skill_runtimeInject system prompt guidelines & workflow constraints from add-e2e-selectors
Request ArgumentsJSON Schema
{
  "skill": "add-e2e-selectors",
  "rulePath": ".cursor/skills/add-e2e-selectors/SKILL.md",
  "userGoal": "请使用 add-e2e-selectors 的方法与标准帮我完成当前任务",
  "client": "Cursor / Claude Code"
}
💡Parameters generated dynamically by Agent runtime
Agent Tool Output

Click 'Run Mock' above

to preview the raw response returned to the LLM

Env: AgentHub Virtual SandboxJSON-RPC 2.0

Decision Guide: Why & When to Use

Assess suitability before installing to save trial-and-error time

Best Suited For
  • PR review
  • Changelog generation
  • Cross-repo issue search
When NOT to Use
  • Replacing human security audit
  • Unauthorized repo access
Recommended Workflow Pairing:View Scenario →

add-e2e-selectors + Scenario Prompt → Complete Agent Automation

Skill hands-on: install to visible results

Follow the full lab (expected UI/output + contrast checks). After installing this item, verify with the tutorial prompts.

Open tutorial →

An Agent Skill is a folder with SKILL.md instructions. After install, the AI loads it automatically when your task matches its description.

How to use

After installing, describe your task in chat (or mention the skill name). The agent reads the skill description to decide when to activate it, then follows the instructions in SKILL.md. Check loaded skills via /skills in Claude Code or in your client settings.

Related resources

中文公文写作

v2.0.41

SkillClawHub10.2k

io.clawhub.gongyu0918-debug/chinese-official-writing

用于中文公文、事务性材料和新闻稿件的起草、改写、压缩、润色、审校、文种核对、去口语化、降 AI 味及 Word 格式处理，适用于机关、企事业单位、学校和新闻机构。涵盖申请、请示、报告、通知、通告、意见、决定、决议、议案、公报、命令、函、复函、批复、说明、方案、纪要、公告、公示、通报、制度、规定、办法、细则、操作规程、工作要点、总结、调研、讲话、致辞、主持词、述职、可研、审查材料、技术需求、新闻消息、编者按、新闻评论，以及采购、整改、反馈和 AI 算力等场景。

source
View on ClawHub

Planning with files

v3.25.0

SkillClawHub45.4k

io.clawhub.othmanadi/planning-with-files

Persistent file-based planning for multi-step AI-agent work. Keeps task_plan.md, findings.md, and progress.md on disk; lifecycle hooks inject selected project planning context. Automatic recovery reads project planning files only. Explicit session-catchup.py --metadata reads same-project local agent session records and emits aggregate counts only; --replay may emit bounded nonce-framed excerpts. Optional gated mode can request continuation only when the host supports it and never runs commands declared in Markdown. The skill has no network upload path. Use for research or work needing 5+ tool calls.

source
View on ClawHub

Often paired with

Keep exploring AgentHub

Most people compare similar tools or check scenario guides before installing—start here.

Browse more like thisSearch similarPick by scenarioPrompt playbooksSkill hands-onReviews & comparisons

Listing badge: put AgentHub on your site

Copy either snippet into your project homepage, docs, or GitHub README. The badge is a hotlinked SVG — nothing to host — and it links back to this page so visitors can find the install steps.

PreviewListed on AgentHub: add-e2e-selectors
HTML
<a href="https://myagenthub.cn/p/io.github.grafana/grafana/add-e2e-selectors" title="Listed on AgentHub: add-e2e-selectors" target="_blank" rel="noopener">
  <img src="https://myagenthub.cn/badge/io.github.grafana/grafana/add-e2e-selectors?lang=en" alt="Listed on AgentHub: add-e2e-selectors" height="20" style="border:0"/>
</a>
Markdown (GitHub README)
[![Listed on AgentHub: add-e2e-selectors](https://myagenthub.cn/badge/io.github.grafana/grafana/add-e2e-selectors?lang=en)](https://myagenthub.cn/p/io.github.grafana/grafana/add-e2e-selectors)

Badges are generated on the fly from /badge/<package-id>, so name and listing changes propagate automatically. Keep the link target unchanged — it is what counts as the referral.

Unified Manifest

{
  "id": "io.github.grafana/grafana/add-e2e-selectors",
  "type": "skill",
  "version": "0.0.0",
  "displayName": "add-e2e-selectors",
  "description": "Add reliable @grafana/e2e-selectors to interactive elements and key containers in the Grafana frontend. Use when adding e2e selectors, data-testid attributes, or test selectors to React components, when a file or component lacks selectors for testing, or when asked to make elements testable. Also use when given a Grafana Pathfinder interactive guide (a guide directory or content.json) to audit or fix — it extracts the guide's reftarget selectors, identifies weak ones, and fixes them at the source in Grafana's JSX. Defines versioned selectors in the e2e-selectors package and wires data-testid into JSX. Accepts a file path, a list of targets, a directory, a pathfinder guide, or the current/open file.",
  "author": {
    "name": "grafana",
    "url": "https://github.com/grafana"
  },
  "repository": {
    "url": "https://github.com/grafana/grafana",
    "source": "github",
    "subfolder": ".claude/skills/add-e2e-selectors"
  },
  "homepage": "https://skillsmp.com/creators/grafana/grafana/claude-skills-add-e2e-selectors",
  "distribution": {
    "packages": [
      {
        "registryType": "source",
        "identifier": "grafana/grafana@add-e2e-selectors",
        "version": "main",
        "runtimeHint": "npx skills add"
      }
    ],
    "remotes": []
  },
  "dependencies": [],
  "installTargets": [
    "claude-code",
    "claude-desktop",
    "cursor",
    "codex",
    "vscode"
  ],
  "keywords": [
    "repo_stars:77304"
  ],
  "provenance": {
    "origin": "skillsmp",
    "originalId": "grafana-grafana-claude-skills-add-e2e-selectors-skill-md",
    "originalUrl": "https://skillsmp.com/creators/grafana/grafana/claude-skills-add-e2e-selectors",
    "isOfficial": false,
    "status": "active"
  }
}
add-e2e-selectors Skill Install & Guide - AgentHub