@aylith/inspekt-skill 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +29 -0
  2. package/SKILL.md +81 -0
  3. package/package.json +21 -0
package/README.md ADDED
@@ -0,0 +1,29 @@
1
+ # @aylith/inspekt-skill
2
+
3
+ Inspekt's [Claude Code](https://docs.claude.com/en/docs/claude-code/) skill,
4
+ installable via [`npx skills`](https://skillsmp.com).
5
+
6
+ ## Install
7
+
8
+ ```bash
9
+ npx skills add aylith-labs/inspekt@skill -g -a claude-code -y
10
+ ```
11
+
12
+ This drops `SKILL.md` into `~/.claude/skills/inspekt/`. Then run:
13
+
14
+ ```bash
15
+ npx @aylith/inspekt setup
16
+ ```
17
+
18
+ to register the `inspekt` MCP server with Claude Code so the skill's tool
19
+ calls (`grab_latest`, `list_grabs`, etc.) resolve.
20
+
21
+ ## What it does
22
+
23
+ When you reference a UI element you grabbed with the Inspekt Chrome extension
24
+ (via phrases like "this button", "fix this", "make this red"), Claude calls
25
+ `grab_latest()` automatically and uses the returned file/line/snippet to
26
+ answer your request.
27
+
28
+ See the [Inspekt repository](https://github.com/aylith-labs/inspekt)
29
+ for the full agent-grab story.
package/SKILL.md ADDED
@@ -0,0 +1,81 @@
1
+ ---
2
+ name: inspekt
3
+ description: Use when the user references a UI element they grabbed with Inspekt — phrases like "this button", "the thing I just grabbed", "fix this element", "change this", or any deixis after an Inspekt grab. Call grab_latest() first, then act on the file/line returned. Avoid calling proactively if the user hasn't grabbed anything in this session.
4
+ allowed-tools: mcp__inspekt__grab_latest, mcp__inspekt__list_grabs, mcp__inspekt__get_grab, mcp__inspekt__mark_grab_processed, mcp__inspekt__open_grab_in_editor
5
+ ---
6
+
7
+ # Inspekt grabs
8
+
9
+ The user has the [Inspekt](https://github.com/aylith-labs/inspekt)
10
+ Chrome extension installed. When they click a UI element, Inspekt captures the
11
+ source file path, line/column, component name, surrounding source snippet, and
12
+ the page URL, then queues it on the local daemon. This skill makes that queue
13
+ available to you via the `inspekt` MCP server.
14
+
15
+ ## Prerequisites
16
+
17
+ The user has run `npx @aylith/inspekt setup` once, which registered the `inspekt` MCP
18
+ server with Claude Code's config. If the MCP tools below aren't available, ask
19
+ the user to run that command and restart Claude Code.
20
+
21
+ ## When to use
22
+
23
+ Call `grab_latest()` automatically (without asking permission) when the user
24
+ references a recent UI grab. Triggers include:
25
+ - "this element", "this button", "the thing I just grabbed"
26
+ - "fix this", "change this", "make this red", "what's wrong with this"
27
+ - Any vague request right after they mentioned using Inspekt
28
+
29
+ If the request is unrelated to a UI element (e.g. infrastructure, build
30
+ tooling, deployment), do NOT call `grab_latest` — they probably haven't
31
+ grabbed anything.
32
+
33
+ ## After fetching
34
+
35
+ 1. Read the file at the returned `path:line`.
36
+ 2. Confirm what you found in 1-2 sentences before editing.
37
+ 3. Make the change they asked for.
38
+ 4. Optionally call `mark_grab_processed(id)` once you've fully addressed
39
+ the grab so future `grab_latest()` calls don't pick it up again.
40
+
41
+ ## Tools
42
+
43
+ - `grab_latest()` — single most recent grab. Use this first.
44
+ - `list_grabs(since?, limit?)` — recent grabs, filterable by timestamp + count.
45
+ - `get_grab(id)` — full payload by ID.
46
+ - `mark_grab_processed(id)` — mark as consumed (optional bookkeeping).
47
+ - `open_grab_in_editor(id)` — open the grab in the user's IDE (only on request).
48
+
49
+ ## Grab payload shape
50
+
51
+ Each grab returns JSON with at least:
52
+
53
+ ```json
54
+ {
55
+ "id": "01H...",
56
+ "timestamp": 1715200000000,
57
+ "url": "http://localhost:5173/dashboard",
58
+ "element": {
59
+ "filePath": "src/components/Button.tsx",
60
+ "line": 42,
61
+ "column": 5,
62
+ "componentName": "Button",
63
+ "tagName": "button",
64
+ "classList": ["btn", "btn-primary"],
65
+ "id": "submit",
66
+ "snippet": {
67
+ "startLine": 37,
68
+ "endLine": 47,
69
+ "targetLine": 42,
70
+ "lines": ["export function Button(...) {", " ...", ...],
71
+ "language": "tsx",
72
+ "source": "devserver"
73
+ }
74
+ },
75
+ "comment": "user-added note (optional)",
76
+ "source": "extension"
77
+ }
78
+ ```
79
+
80
+ The `snippet` field is the surrounding source — read it directly before
81
+ opening the file if it's enough context to act on, to save tool calls.
package/package.json ADDED
@@ -0,0 +1,21 @@
1
+ {
2
+ "name": "@aylith/inspekt-skill",
3
+ "version": "0.1.0",
4
+ "description": "Inspekt skill package — installable via `npx skills add` for Claude Code and other skill-aware agents",
5
+ "type": "module",
6
+ "files": [
7
+ "SKILL.md",
8
+ "README.md"
9
+ ],
10
+ "scripts": {
11
+ "build": "echo no build needed",
12
+ "test": "vitest run --passWithNoTests"
13
+ },
14
+ "devDependencies": {
15
+ "vitest": "^4.1.10"
16
+ },
17
+ "license": "MIT",
18
+ "publishConfig": {
19
+ "access": "public"
20
+ }
21
+ }