uisnap 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.1.1] - 2026-01-02
+
+### Changed
+
+**Improved npm package discoverability and onboarding:**
+
+- **Package description** - Now explicitly states "CLI debugging tool designed for AI coding agents"
+- **Keywords** - Added "ai", "ai-agent", "cursor" for better npm search results
+- **README intro** - Added "Why uisnap?" section with token efficiency comparison
+- **Installation guide** - Clearer Claude Code skill installation steps with benefits explained
+- **Postinstall message** - Now emphasizes AI agent use case and includes skill installation instructions
+
+No functional changes - purely documentation and messaging improvements.
+
 ## [0.1.0] - 2026-01-02
 
 **Initial release of uisnap** (formerly playwright-debug-toolkit)
@@ -93,4 +107,5 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `.claude/skills/uisnap/` - Skill definition and reference docs
 - `examples/` - Sample scripts for common debugging workflows
 
+[0.1.1]: https://github.com/tonyhschu/uisnap/releases/tag/v0.1.1
 [0.1.0]: https://github.com/tonyhschu/uisnap/releases/tag/v0.1.0

package/README.md

@@ -1,24 +1,43 @@
 # uisnap
 
-UI snapshot debugging for frontend development. Capture browser state to disk once, query efficiently many times.
+**CLI debugging tool designed for AI coding agents**
+
+Stop having your AI assistant repeatedly reload pages and parse megabytes of DOM. Capture browser state once, query efficiently many times.
+
+## Why uisnap?
+
+When AI agents debug frontend issues, they typically:
+1. 🔴 Load the full page HTML (~15K tokens)
+2. 🔴 Parse console logs (~8K tokens)
+3. 🔴 Analyze network requests (~5K tokens)
+4. 🔴 Repeat for every question
+
+**uisnap changes this:**
+1. ✅ Capture once: ~2K tokens
+2. ✅ Query many times: ~200 tokens each
+3. ✅ **17x token reduction**
 
 ## Philosophy
 
-**Capture once, query many** - Expensive browser operations write to disk once. Cheap local queries analyze data repeatedly without re-running the browser. Achieves ~17x token reduction vs. traditional debugging approaches.
+**Capture once, query many** - Expensive browser operations write to disk once. Cheap local queries analyze data repeatedly without re-running the browser.
+
+**Built for**: Claude Code, Cursor, Aider, and other AI coding assistants.
 
 ## Installation
 
+### 1. Install the CLI tool
+
 ```bash
 npm install -g uisnap
 npx playwright install chromium
 ```
 
-### Installing the Claude Code Skill
+### 2. Install Claude Code Skill (Recommended for Claude Code users)
 
-To teach Claude Code when and how to use this toolkit:
+**Teach Claude when and how to use uisnap automatically:**
 
 ```bash
-# For team sharing (recommended):
+# For team sharing (recommended - commit to git):
 mkdir -p .claude/skills
 cp -r node_modules/uisnap/.claude/skills/uisnap .claude/skills/
 git add .claude/skills/
@@ -28,6 +47,15 @@ mkdir -p ~/.claude/skills
 cp -r node_modules/uisnap/.claude/skills/uisnap ~/.claude/skills/
 ```
 
+Once installed, Claude Code will automatically know:
+- ✅ When to capture browser state vs. parse HTML
+- ✅ How to use each analysis command
+- ✅ Best practices for token-efficient debugging
+
+**Without the skill:** You'll need to manually tell Claude which commands to use.
+
+**With the skill:** Just say "debug console errors on example.com" and Claude handles the rest.
+
 See [SKILL-INSTALLATION.md](./SKILL-INSTALLATION.md) for details.
 
 ## Quick Start

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "uisnap",
-  "version": "0.1.0",
-  "description": "UI snapshot debugging for frontend development. Capture browser state to disk once, query efficiently many times.",
+  "version": "0.1.1",
+  "description": "CLI debugging tool designed for AI coding agents. Captures browser state to disk for token-efficient analysis. Works with Claude Code, Cursor, and other AI assistants.",
   "author": "Tony Chu",
   "license": "MIT",
   "keywords": [
-    "uisnap",
-    "snapshot",
-    "capture",
+    "ai",
+    "ai-agent",
+    "claude-code",
+    "cursor",
     "debugging",
     "frontend",
-    "ui",
     "playwright",
-    "browser",
-    "claude-code"
+    "snapshot",
+    "browser-automation",
+    "testing"
   ],
   "repository": {
     "type": "git",
@@ -53,7 +54,7 @@
     "test:coverage": "vitest run --coverage",
     "prepublishOnly": "npm run clean && npm run build",
     "dev": "npm run build && node dist/pw.js",
-    "postinstall": "echo '\n✓ uisnap installed!\n\nNext step: Install Chromium browser:\n  npx playwright install chromium\n\nThen try:\n  uisnap snapshot https://example.com\n'"
+    "postinstall": "echo '\n✓ uisnap installed!\n\n📌 IMPORTANT: This tool is designed for AI coding agents.\n\nQuick start:\n  1. Install Chromium: npx playwright install chromium\n  2. Install Claude Code skill (optional but recommended):\n     mkdir -p .claude/skills\n     cp -r node_modules/uisnap/.claude/skills/uisnap .claude/skills/\n  3. Try it: uisnap snapshot https://example.com\n\nSee: https://github.com/tonyhschu/uisnap#installing-the-claude-code-skill\n'"
   },
   "dependencies": {
     "adm-zip": "^0.5.16",