cssprobe-cli 0.2.9 → 0.2.11
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.
package/bin/cssprobe-cli.js
CHANGED
|
File without changes
|
package/dist/daemonEntry.js
CHANGED
|
@@ -31,7 +31,7 @@ var require_package = __commonJS({
|
|
|
31
31
|
"package.json"(exports2, module2) {
|
|
32
32
|
module2.exports = {
|
|
33
33
|
name: "cssprobe-cli",
|
|
34
|
-
version: "0.2.
|
|
34
|
+
version: "0.2.11",
|
|
35
35
|
description: "Runtime CSS probe \u2014 inspect layout, colors, backgrounds, fonts and more in a live browser. AI agents and shell automation.",
|
|
36
36
|
keywords: [
|
|
37
37
|
"css",
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* cssprobe-cli
|
|
2
|
+
* cssprobe-cli Agent Skill templates.
|
|
3
3
|
*
|
|
4
|
-
* Installed into agent-specific skill directories via `cssprobe-cli
|
|
5
|
-
* Teaches agents how to use cssprobe-cli
|
|
4
|
+
* Installed into agent-specific skill directories via `cssprobe-cli skill-install`.
|
|
5
|
+
* Teaches agents how to use cssprobe-cli for runtime CSS inspection — layout,
|
|
6
6
|
* scroll, overflow, colors, backgrounds, fonts — with confidence levels.
|
|
7
7
|
*/
|
|
8
8
|
export declare function buildSkillMd(): string;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
/**
|
|
3
|
-
* cssprobe-cli
|
|
3
|
+
* cssprobe-cli Agent Skill templates.
|
|
4
4
|
*
|
|
5
|
-
* Installed into agent-specific skill directories via `cssprobe-cli
|
|
6
|
-
* Teaches agents how to use cssprobe-cli
|
|
5
|
+
* Installed into agent-specific skill directories via `cssprobe-cli skill-install`.
|
|
6
|
+
* Teaches agents how to use cssprobe-cli for runtime CSS inspection — layout,
|
|
7
7
|
* scroll, overflow, colors, backgrounds, fonts — with confidence levels.
|
|
8
8
|
*/
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
@@ -15,20 +15,20 @@ const BT3 = '```'; // triple backtick
|
|
|
15
15
|
function buildSkillMd() {
|
|
16
16
|
return [
|
|
17
17
|
FRONTMATTER_DELIM,
|
|
18
|
-
'name: cssprobe-cli
|
|
18
|
+
'name: cssprobe-cli',
|
|
19
19
|
'description: >',
|
|
20
|
-
' Runtime CSS probe for layout/scroll/overflow inspection. Use cssprobe-cli
|
|
20
|
+
' Runtime CSS probe for layout/scroll/overflow inspection. Use cssprobe-cli to',
|
|
21
21
|
' diagnose CSS issues in live browsers — height chains, scroll containers,',
|
|
22
22
|
' overflow, flex constraints, containing block hijacks. Produces structured',
|
|
23
23
|
' reports with DEFINITE/INDEFINITE/UNVERIFIABLE confidence levels.',
|
|
24
24
|
'metadata:',
|
|
25
25
|
' requires:',
|
|
26
|
-
' bins: ["cssprobe-cli
|
|
26
|
+
' bins: ["cssprobe-cli", "playwright"]',
|
|
27
27
|
FRONTMATTER_DELIM,
|
|
28
28
|
'',
|
|
29
|
-
'# cssprobe-cli
|
|
29
|
+
'# cssprobe-cli -- Runtime CSS Probe Skill',
|
|
30
30
|
'',
|
|
31
|
-
'Use cssprobe-cli
|
|
31
|
+
'Use cssprobe-cli to inspect the runtime CSS of any web page. It launches a real',
|
|
32
32
|
'browser, captures computed styles and DOM structure, and produces a structured',
|
|
33
33
|
'report with confidence levels.',
|
|
34
34
|
'',
|
|
@@ -47,9 +47,9 @@ function buildSkillMd() {
|
|
|
47
47
|
'Do NOT memorize all commands. Use:',
|
|
48
48
|
'',
|
|
49
49
|
BT3 + 'bash',
|
|
50
|
-
'cssprobe-cli
|
|
51
|
-
'cssprobe-cli
|
|
52
|
-
'cssprobe-cli
|
|
50
|
+
'cssprobe-cli --help # all commands grouped by category',
|
|
51
|
+
'cssprobe-cli inspect --help # specific command: args, options, description',
|
|
52
|
+
'cssprobe-cli state-import --help # cookie import command',
|
|
53
53
|
BT3,
|
|
54
54
|
'',
|
|
55
55
|
'## Core Workflow: Inspect a Page',
|
|
@@ -83,11 +83,10 @@ function buildSkillMd() {
|
|
|
83
83
|
'### Option B: Interactive login',
|
|
84
84
|
'',
|
|
85
85
|
BT3 + 'bash',
|
|
86
|
-
'cssprobe-cli
|
|
87
|
-
'# Browser opens -> complete login manually ->
|
|
88
|
-
'# State saved to ~/.cssprobe-cli/states/mysite.com.json',
|
|
86
|
+
'cssprobe-cli open https://mysite.com --headed',
|
|
87
|
+
'# Browser opens -> complete login manually -> continue inspection',
|
|
89
88
|
'',
|
|
90
|
-
'cssprobe-cli inspect
|
|
89
|
+
'cssprobe-cli inspect .target',
|
|
91
90
|
BT3,
|
|
92
91
|
'',
|
|
93
92
|
'### Option C: Merge cookies into existing state',
|
|
@@ -108,15 +108,10 @@ cssprobe-cli inspect https://mysite.com/page ".target" --state ~/.cssprobe-cli/s
|
|
|
108
108
|
### Option B: Interactive Login
|
|
109
109
|
|
|
110
110
|
```bash
|
|
111
|
-
cssprobe-cli
|
|
112
|
-
# Browser opens
|
|
113
|
-
# State saved to ~/.cssprobe-cli/states/mysite.com.json
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
Then use:
|
|
111
|
+
cssprobe-cli open https://mysite.com --headed
|
|
112
|
+
# Browser opens -> complete login manually -> continue inspection
|
|
117
113
|
|
|
118
|
-
|
|
119
|
-
cssprobe-cli inspect https://mysite.com/page ".target" --state ~/.cssprobe-cli/states/mysite.com.json
|
|
114
|
+
cssprobe-cli inspect .target
|
|
120
115
|
```
|
|
121
116
|
|
|
122
117
|
### Option C: Merge Cookies into Existing State
|
|
@@ -125,39 +120,36 @@ cssprobe-cli inspect https://mysite.com/page ".target" --state ~/.cssprobe-cli/s
|
|
|
125
120
|
cssprobe-cli state-import new-cookies.txt --merge existing-state.json --out updated.json
|
|
126
121
|
```
|
|
127
122
|
|
|
128
|
-
### Option D:
|
|
129
|
-
|
|
130
|
-
For pages that require clicking a button or opening a dialog before inspection:
|
|
123
|
+
### Option D: Open with Saved State
|
|
131
124
|
|
|
132
125
|
```bash
|
|
133
|
-
|
|
134
|
-
|
|
126
|
+
# Import cookies first
|
|
127
|
+
cssprobe-cli state-import cookies.txt --name mysite
|
|
128
|
+
|
|
129
|
+
# Open browser with saved state
|
|
130
|
+
cssprobe-cli open https://mysite.com --state ~/.cssprobe-cli/states/mysite.json
|
|
131
|
+
|
|
132
|
+
# Then inspect
|
|
133
|
+
cssprobe-cli inspect .target
|
|
135
134
|
```
|
|
136
135
|
|
|
137
136
|
---
|
|
138
137
|
|
|
139
|
-
## Step 5:
|
|
138
|
+
## Step 5: Session Mode
|
|
140
139
|
|
|
141
140
|
For inspecting multiple areas of the same page without re-opening the browser:
|
|
142
141
|
|
|
143
142
|
```bash
|
|
144
|
-
cssprobe-cli
|
|
145
|
-
```
|
|
143
|
+
cssprobe-cli open https://mysite.com --state ~/.cssprobe-cli/states/mysite.json
|
|
146
144
|
|
|
147
|
-
|
|
145
|
+
# Run multiple inspections
|
|
146
|
+
cssprobe-cli tree .dialog-A
|
|
147
|
+
cssprobe-cli layout .sidebar-B
|
|
148
|
+
cssprobe-cli findings .modal
|
|
149
|
+
cssprobe-cli inspect .dialog-A --json
|
|
148
150
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
inspect> layout .sidebar-B # ASCII layout diagram
|
|
152
|
-
inspect> sketch .content # Tree sketch (issues only)
|
|
153
|
-
inspect> findings .modal # Findings only
|
|
154
|
-
inspect> json .dialog-A # JSON output
|
|
155
|
-
inspect> report .dialog-A # Full report
|
|
156
|
-
inspect> .dialog-A # Shorthand for report
|
|
157
|
-
inspect> navigate https://other.com # Navigate to new URL
|
|
158
|
-
inspect> depth 10 # Set depth
|
|
159
|
-
inspect> help # Show help
|
|
160
|
-
inspect> quit # Exit
|
|
151
|
+
# Close when done
|
|
152
|
+
cssprobe-cli close
|
|
161
153
|
```
|
|
162
154
|
|
|
163
155
|
---
|
|
@@ -228,7 +220,7 @@ confidence: DEFINITE 8 | INDEFINITE 0 | UNVERIFIABLE 1
|
|
|
228
220
|
→ This is expected. Declared values from blocked sheets are marked UNVERIFIABLE. Computed values from getComputedStyle() are still accurate.
|
|
229
221
|
|
|
230
222
|
**Page needs login**
|
|
231
|
-
→ Use `cssprobe-cli
|
|
223
|
+
→ Use `cssprobe-cli open <url> --headed` for interactive login, or `cssprobe-cli state-import cookies.txt --name mysite` to import cookies.
|
|
232
224
|
|
|
233
225
|
---
|
|
234
226
|
|
package/package.json
CHANGED