style-capture 0.0.1 → 0.0.3
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/README.md +77 -0
- package/dist/cli.js +1768 -0
- package/dist/cli.js.map +1 -0
- package/package.json +43 -12
- package/src/capture.ts +0 -507
- package/src/index.ts +0 -152
- package/src/run.ts +0 -106
- package/tsconfig.json +0 -20
package/README.md
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="../../.github/assets/logo.png" width="80" height="80" alt="Style Capture logo" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<h1 align="center">Style Capture CLI</h1>
|
|
6
|
+
|
|
7
|
+
<p align="center">Capture computed CSS and HTML from any web page, map the result to Tailwind utilities, and output a structured prompt for faithful UI recreation.</p>
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install style-capture
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Playwright ships its own Chromium binary. After installing, run `npx playwright install chromium` if you haven't already.
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
### Direct mode
|
|
20
|
+
|
|
21
|
+
Pass a URL and CSS selector to capture and print the result to stdout:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
style-capture https://stripe.com ".hero-section"
|
|
25
|
+
style-capture https://linear.app "main > section:nth-child(2)" --mode full
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Interactive mode
|
|
29
|
+
|
|
30
|
+
Run without arguments for an interactive prompt:
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
style-capture
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
You'll be asked for a URL, CSS selector, capture mode, and output destination (clipboard or stdout).
|
|
37
|
+
|
|
38
|
+
### Options
|
|
39
|
+
|
|
40
|
+
| Flag | Description | Default |
|
|
41
|
+
| ------------------- | -------------------------------------------------------------------- | --------- |
|
|
42
|
+
| `-m, --mode <mode>` | `curated` (common visual properties) or `full` (all computed styles) | `curated` |
|
|
43
|
+
|
|
44
|
+
## Agent Skill
|
|
45
|
+
|
|
46
|
+
Style Capture ships as a [Claude Code skill](https://docs.anthropic.com/en/docs/claude-code) that combines browser automation with the capture CLI. Instead of manually finding selectors, describe the element in natural language:
|
|
47
|
+
|
|
48
|
+
```
|
|
49
|
+
/style-capture https://stripe.com the pricing table
|
|
50
|
+
/style-capture https://linear.app the hero section with the gradient
|
|
51
|
+
/style-capture https://vercel.com/dashboard the sidebar navigation
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
The skill opens the page with `agent-browser`, takes an interactive snapshot to locate the element, derives a CSS selector, and runs the capture CLI automatically.
|
|
55
|
+
|
|
56
|
+
## Output
|
|
57
|
+
|
|
58
|
+
The CLI outputs a `<style_capture>` block containing:
|
|
59
|
+
|
|
60
|
+
- **html_capture** — sanitized, annotated HTML of the subtree
|
|
61
|
+
- **css_capture** — computed CSS grouped by element
|
|
62
|
+
- **tailwind_hints** — suggested Tailwind utility classes with confidence scores
|
|
63
|
+
- **open_questions** — low-confidence mappings flagged for review
|
|
64
|
+
|
|
65
|
+
Use this output to faithfully recreate or refactor the captured UI in code.
|
|
66
|
+
|
|
67
|
+
## Requirements
|
|
68
|
+
|
|
69
|
+
- Node.js `22+`
|
|
70
|
+
|
|
71
|
+
## Privacy
|
|
72
|
+
|
|
73
|
+
All capture, mapping, and export steps happen locally. No page data is sent to a remote service.
|
|
74
|
+
|
|
75
|
+
## License
|
|
76
|
+
|
|
77
|
+
[MIT](../../LICENSE.md)
|