uisnap 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 (91) hide show
  1. package/.claude/settings.local.json +26 -0
  2. package/.claude/skills/uisnap/README.md +48 -0
  3. package/.claude/skills/uisnap/REFERENCE.md +1261 -0
  4. package/.claude/skills/uisnap/SETUP.md +75 -0
  5. package/.claude/skills/uisnap/SKILL.md +130 -0
  6. package/.claude/skills/uisnap/snapshot-capture-and-analysis.md +452 -0
  7. package/.claude/skills/uisnap/trace-capture-and-analysis.md +472 -0
  8. package/CHANGELOG.md +96 -0
  9. package/LICENSE +21 -0
  10. package/README.md +394 -0
  11. package/SKILL-INSTALLATION.md +103 -0
  12. package/dist/analyze-console.d.ts +3 -0
  13. package/dist/analyze-console.d.ts.map +1 -0
  14. package/dist/analyze-console.js +153 -0
  15. package/dist/analyze-console.js.map +1 -0
  16. package/dist/analyze-network.d.ts +3 -0
  17. package/dist/analyze-network.d.ts.map +1 -0
  18. package/dist/analyze-network.js +156 -0
  19. package/dist/analyze-network.js.map +1 -0
  20. package/dist/chrome-trace-analyze.d.ts +3 -0
  21. package/dist/chrome-trace-analyze.d.ts.map +1 -0
  22. package/dist/chrome-trace-analyze.js +119 -0
  23. package/dist/chrome-trace-analyze.js.map +1 -0
  24. package/dist/chrome-trace-import.d.ts +3 -0
  25. package/dist/chrome-trace-import.d.ts.map +1 -0
  26. package/dist/chrome-trace-import.js +90 -0
  27. package/dist/chrome-trace-import.js.map +1 -0
  28. package/dist/commands/snapshot.d.ts +4 -0
  29. package/dist/commands/snapshot.d.ts.map +1 -0
  30. package/dist/commands/snapshot.js +154 -0
  31. package/dist/commands/snapshot.js.map +1 -0
  32. package/dist/diagnose.d.ts +3 -0
  33. package/dist/diagnose.d.ts.map +1 -0
  34. package/dist/diagnose.js +244 -0
  35. package/dist/diagnose.js.map +1 -0
  36. package/dist/index.d.ts +4 -0
  37. package/dist/index.d.ts.map +1 -0
  38. package/dist/index.js +26 -0
  39. package/dist/index.js.map +1 -0
  40. package/dist/pw.d.ts +3 -0
  41. package/dist/pw.d.ts.map +1 -0
  42. package/dist/pw.js +289 -0
  43. package/dist/pw.js.map +1 -0
  44. package/dist/query-a11y.d.ts +3 -0
  45. package/dist/query-a11y.d.ts.map +1 -0
  46. package/dist/query-a11y.js +208 -0
  47. package/dist/query-a11y.js.map +1 -0
  48. package/dist/trace-import.d.ts +3 -0
  49. package/dist/trace-import.d.ts.map +1 -0
  50. package/dist/trace-import.js +93 -0
  51. package/dist/trace-import.js.map +1 -0
  52. package/dist/types.d.ts +70 -0
  53. package/dist/types.d.ts.map +1 -0
  54. package/dist/types.js +3 -0
  55. package/dist/types.js.map +1 -0
  56. package/dist/utils/chromeTraceAnalyze.d.ts +40 -0
  57. package/dist/utils/chromeTraceAnalyze.d.ts.map +1 -0
  58. package/dist/utils/chromeTraceAnalyze.js +113 -0
  59. package/dist/utils/chromeTraceAnalyze.js.map +1 -0
  60. package/dist/utils/chromeTraceHelpers.d.ts +4 -0
  61. package/dist/utils/chromeTraceHelpers.d.ts.map +1 -0
  62. package/dist/utils/chromeTraceHelpers.js +68 -0
  63. package/dist/utils/chromeTraceHelpers.js.map +1 -0
  64. package/dist/utils/chromeTraceImport.d.ts +14 -0
  65. package/dist/utils/chromeTraceImport.d.ts.map +1 -0
  66. package/dist/utils/chromeTraceImport.js +77 -0
  67. package/dist/utils/chromeTraceImport.js.map +1 -0
  68. package/dist/utils/helpers.d.ts +3 -0
  69. package/dist/utils/helpers.d.ts.map +1 -0
  70. package/dist/utils/helpers.js +88 -0
  71. package/dist/utils/helpers.js.map +1 -0
  72. package/dist/utils/projectRoot.d.ts +2 -0
  73. package/dist/utils/projectRoot.d.ts.map +1 -0
  74. package/dist/utils/projectRoot.js +56 -0
  75. package/dist/utils/projectRoot.js.map +1 -0
  76. package/dist/utils/traceHelpers.d.ts +4 -0
  77. package/dist/utils/traceHelpers.d.ts.map +1 -0
  78. package/dist/utils/traceHelpers.js +67 -0
  79. package/dist/utils/traceHelpers.js.map +1 -0
  80. package/dist/utils/traceImport.d.ts +20 -0
  81. package/dist/utils/traceImport.d.ts.map +1 -0
  82. package/dist/utils/traceImport.js +124 -0
  83. package/dist/utils/traceImport.js.map +1 -0
  84. package/dist/utils/webVitals.d.ts +9 -0
  85. package/dist/utils/webVitals.d.ts.map +1 -0
  86. package/dist/utils/webVitals.js +54 -0
  87. package/dist/utils/webVitals.js.map +1 -0
  88. package/examples/login-flow.js +37 -0
  89. package/examples/scroll-perf-trace.js +43 -0
  90. package/examples/simple-capture.js +28 -0
  91. package/package.json +74 -0
package/.claude/settings.local.json ADDED
@@ -0,0 +1,26 @@
1
+ {
2
+ "permissions": {
3
+ "allow": [
4
+ "Bash(npm install)",
5
+ "Bash(npm run build:*)",
6
+ "Bash(node dist/pw.js:*)",
7
+ "WebFetch(domain:playwright.dev)",
8
+ "WebSearch",
9
+ "Bash(cat:*)",
10
+ "Bash(chmod:*)",
11
+ "Bash(node dist/analyze-network.js:*)",
12
+ "Bash(node dist/query-a11y.js:*)",
13
+ "Bash(npm test)",
14
+ "Bash(npm install:*)",
15
+ "Bash(node dist/trace-import.js:*)",
16
+ "Bash(duckdb:*)",
17
+ "Bash(node:*)",
18
+ "Bash(npm test:*)",
19
+ "Bash(./deploy-skill.sh:*)",
20
+ "Bash(git add:*)",
21
+ "Bash(git rm:*)",
22
+ "Bash(git commit:*)",
23
+ "Bash(find:*)"
24
+ ]
25
+ }
26
+ }
package/.claude/skills/uisnap/README.md ADDED
@@ -0,0 +1,48 @@
1
+ # Playwright Debug Skill
2
+
3
+ This skill teaches Claude Code how to efficiently debug web applications using the uisnap.
4
+
5
+ ## Files
6
+
7
+ - **SKILL.md** - Main skill file (Claude reads this)
8
+ - **SETUP.md** - Installation instructions
9
+ - **REFERENCE.md** - Detailed toolkit specification
10
+
11
+ ## Activation
12
+
13
+ This skill activates when Claude detects debugging needs:
14
+ - Frontend errors or bugs
15
+ - Console errors
16
+ - Network failures
17
+ - UI issues
18
+ - Multi-step interaction testing
19
+ - Accessibility debugging
20
+
21
+ ## Usage
22
+
23
+ Once installed, just ask Claude:
24
+ - "Debug console errors on https://myapp.com"
25
+ - "Help me test the login flow"
26
+ - "Why is the submit button not working?"
27
+ - "Check network requests on this page"
28
+
29
+ Claude will automatically use the toolkit for token-efficient debugging.
30
+
31
+ ## Key Features
32
+
33
+ - **17x token reduction** - Capture once, query many times
34
+ - **Auto-organized snapshots** - Never overwrite previous captures
35
+ - **Multi-step flows** - JavaScript with captureStep helper
36
+ - **Local analysis** - Fast queries on captured state
37
+ - **Role-based selectors** - Aligns with ARIA snapshots
38
+
39
+ ## Quick Example
40
+
41
+ ```bash
42
+ # Claude will run commands like this:
43
+ uisnap snapshot https://myapp.com
44
+ uisnap-analyze-console snapshots/myapp.com/latest/console.jsonl
45
+ uisnap-query-a11y snapshots/myapp.com/latest/a11y.yaml --buttons
46
+ ```
47
+
48
+ See SKILL.md for complete documentation and examples.