skillui 1.1.2 → 1.1.4
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 +20 -15
- package/dist/cli.js +105073 -194
- package/package.json +15 -6
- package/dist/cli.d.ts +0 -3
- package/dist/extractors/components.d.ts +0 -11
- package/dist/extractors/components.js +0 -455
- package/dist/extractors/framework.d.ts +0 -4
- package/dist/extractors/framework.js +0 -126
- package/dist/extractors/tokens/computed.d.ts +0 -7
- package/dist/extractors/tokens/computed.js +0 -249
- package/dist/extractors/tokens/css.d.ts +0 -3
- package/dist/extractors/tokens/css.js +0 -510
- package/dist/extractors/tokens/http-css.d.ts +0 -14
- package/dist/extractors/tokens/http-css.js +0 -1689
- package/dist/extractors/tokens/tailwind.d.ts +0 -3
- package/dist/extractors/tokens/tailwind.js +0 -353
- package/dist/extractors/tokens/tokens-file.d.ts +0 -3
- package/dist/extractors/tokens/tokens-file.js +0 -229
- package/dist/extractors/ultra/animations.d.ts +0 -21
- package/dist/extractors/ultra/animations.js +0 -527
- package/dist/extractors/ultra/components-dom.d.ts +0 -13
- package/dist/extractors/ultra/components-dom.js +0 -149
- package/dist/extractors/ultra/interactions.d.ts +0 -14
- package/dist/extractors/ultra/interactions.js +0 -222
- package/dist/extractors/ultra/layout.d.ts +0 -14
- package/dist/extractors/ultra/layout.js +0 -123
- package/dist/extractors/ultra/pages.d.ts +0 -16
- package/dist/extractors/ultra/pages.js +0 -228
- package/dist/font-resolver.d.ts +0 -10
- package/dist/font-resolver.js +0 -280
- package/dist/modes/dir.d.ts +0 -6
- package/dist/modes/dir.js +0 -213
- package/dist/modes/repo.d.ts +0 -6
- package/dist/modes/repo.js +0 -76
- package/dist/modes/ultra.d.ts +0 -22
- package/dist/modes/ultra.js +0 -281
- package/dist/modes/url.d.ts +0 -14
- package/dist/modes/url.js +0 -161
- package/dist/normalizer.d.ts +0 -11
- package/dist/normalizer.js +0 -867
- package/dist/playwright-loader.d.ts +0 -10
- package/dist/playwright-loader.js +0 -71
- package/dist/screenshot.d.ts +0 -9
- package/dist/screenshot.js +0 -94
- package/dist/types-ultra.d.ts +0 -157
- package/dist/types-ultra.js +0 -4
- package/dist/types.d.ts +0 -182
- package/dist/types.js +0 -4
- package/dist/writers/animations-md.d.ts +0 -17
- package/dist/writers/animations-md.js +0 -313
- package/dist/writers/components-md.d.ts +0 -8
- package/dist/writers/components-md.js +0 -151
- package/dist/writers/design-md.d.ts +0 -7
- package/dist/writers/design-md.js +0 -704
- package/dist/writers/interactions-md.d.ts +0 -8
- package/dist/writers/interactions-md.js +0 -146
- package/dist/writers/layout-md.d.ts +0 -8
- package/dist/writers/layout-md.js +0 -120
- package/dist/writers/skill.d.ts +0 -12
- package/dist/writers/skill.js +0 -1006
- package/dist/writers/tokens-json.d.ts +0 -11
- package/dist/writers/tokens-json.js +0 -164
package/README.md
CHANGED
|
@@ -1,8 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
```
|
|
2
|
+
░██████╗██╗░░██╗██╗██╗░░░░░██╗░░░░░██╗░░░██╗██╗
|
|
3
|
+
██╔════╝██║░██╔╝██║██║░░░░░██║░░░░░██║░░░██║██║
|
|
4
|
+
╚█████╗░█████═╝░██║██║░░░░░██║░░░░░██║░░░██║██║
|
|
5
|
+
░╚═══██╗██╔═██╗░██║██║░░░░░██║░░░░░██║░░░██║██║
|
|
6
|
+
██████╔╝██║░╚██╗██║███████╗███████╗╚██████╔╝██║
|
|
7
|
+
╚═════╝░╚═╝░░╚═╝╚═╝╚══════╝╚══════╝░╚═════╝░╚═╝
|
|
8
|
+
```
|
|
9
|
+
> Reverse-engineer any design system. Pure static analysis. No AI, no API keys.
|
|
4
10
|
|
|
5
|
-
Point
|
|
11
|
+
Point skillui at any website, git repo, or local project and get exact colors, fonts, spacing, components, and animations packaged as a `.skill` file Claude can read.
|
|
6
12
|
|
|
7
13
|
```bash
|
|
8
14
|
npm install -g skillui
|
|
@@ -16,7 +22,7 @@ skillui --url https://yoursite.com --mode ultra
|
|
|
16
22
|
skillui crawls your target and extracts:
|
|
17
23
|
|
|
18
24
|
| Output | Contents |
|
|
19
|
-
|
|
25
|
+
|---|---|
|
|
20
26
|
| `DESIGN.md` | Colors, typography, spacing, border radius, components |
|
|
21
27
|
| `ANIMATIONS.md` | CSS keyframes, scroll triggers, GSAP/Lottie/Three.js detection |
|
|
22
28
|
| `LAYOUT.md` | Flex/grid containers, page structure, spacing relationships |
|
|
@@ -63,6 +69,7 @@ skillui --url https://linear.app --mode ultra
|
|
|
63
69
|
```
|
|
64
70
|
|
|
65
71
|
Ultra mode adds:
|
|
72
|
+
|
|
66
73
|
- 7 scroll journey screenshots showing the page at each scroll depth
|
|
67
74
|
- Hover/focus interaction state diffs
|
|
68
75
|
- Full CSS keyframe extraction
|
|
@@ -83,9 +90,7 @@ skillui --dir ./my-app
|
|
|
83
90
|
skillui --repo https://github.com/org/repo
|
|
84
91
|
```
|
|
85
92
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
## All flags
|
|
93
|
+
### All flags
|
|
89
94
|
|
|
90
95
|
```
|
|
91
96
|
skillui --url <url> Crawl a live website
|
|
@@ -114,7 +119,7 @@ Then ask Claude:
|
|
|
114
119
|
|
|
115
120
|
> "Build me a dashboard that matches the Linear design system"
|
|
116
121
|
|
|
117
|
-
Claude will read DESIGN.md
|
|
122
|
+
Claude will read `DESIGN.md`, `ANIMATIONS.md`, `LAYOUT.md`, `COMPONENTS.md`, and all scroll journey screenshots to reconstruct the exact visual language of the site.
|
|
118
123
|
|
|
119
124
|
---
|
|
120
125
|
|
|
@@ -174,12 +179,12 @@ skillui --url https://linear.app --out ./design-systems
|
|
|
174
179
|
|
|
175
180
|
## How it works
|
|
176
181
|
|
|
177
|
-
skillui uses pure static analysis
|
|
182
|
+
skillui uses pure static analysis. No AI, no API keys, no cloud.
|
|
178
183
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
184
|
+
- **URL mode** fetches HTML, crawls all linked CSS files, extracts computed styles via Playwright DOM inspection
|
|
185
|
+
- **Dir mode** scans all `.css`, `.scss`, `.ts`, `.tsx`, `.js`, `.jsx` files for design tokens, Tailwind config, CSS variables, and component patterns
|
|
186
|
+
- **Repo mode** clones the repo to a temp directory and runs dir mode
|
|
187
|
+
- **Ultra mode** runs Playwright to capture scroll journey screenshots, detect animation libraries from `window.*` globals, extract `@keyframes` from `document.styleSheets`, capture hover/focus state diffs, and fingerprint DOM components
|
|
183
188
|
|
|
184
189
|
---
|
|
185
190
|
|
|
@@ -192,4 +197,4 @@ skillui uses pure static analysis — no AI, no API keys, no cloud.
|
|
|
192
197
|
|
|
193
198
|
## License
|
|
194
199
|
|
|
195
|
-
MIT
|
|
200
|
+
MIT
|