[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-955":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":8,"language":10,"languages":8,"totalLinesOfCode":8,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":8,"rankLanguage":8,"license":8,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":8,"pushedAt":8,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":15,"starSnapshotCount":15,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},955,"npxskillui","amaancoderx\u002Fnpxskillui","amaancoderx",null,"https:\u002F\u002Fskillui.vercel.app\u002F","TypeScript",852,90,5,1,0,28,86,324,84,93.88,false,"main",true,[],"2026-06-12 04:00:06","\u003Cdiv align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fskillui.vercel.app\">\n    \u003Cimg src=\"skillui.png\" alt=\"SkillUI\" width=\"620\" \u002F>\n  \u003C\u002Fa>\n  \u003Cbr \u002F>\u003Cbr \u002F>\n  \u003Cp>\u003Cstrong>Reverse-engineer any design system into a Claude-ready skill.\u003Cbr\u002F>Pure static analysis. No AI. No API keys.\u003C\u002Fstrong>\u003C\u002Fp>\n\n  [![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fskillui?color=%23e8735a&label=skillui&style=flat-square)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fskillui)\n  [![npm downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fskillui?color=%23e8735a&style=flat-square)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fskillui)\n  [![Node.js](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fnode-%3E%3D18-brightgreen?style=flat-square)](https:\u002F\u002Fnodejs.org)\n  [![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-blue?style=flat-square)](https:\u002F\u002Fgithub.com\u002Famaancoderx\u002Fnpxskillui\u002Fblob\u002Fmain\u002FLICENSE)\n  [![GitHub repo](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fsource-npxskillui-gray?style=flat-square&logo=github)](https:\u002F\u002Fgithub.com\u002Famaancoderx\u002Fnpxskillui)\n\n\u003C\u002Fdiv>\n\n---\n\n## One-shotted Notion's landing page in minutes with a single line prompt\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F4d6b63f1-8042-44a2-8f4f-a92fedadcaf9\n\n---\n\n## What is SkillUI?\n\n**SkillUI** is a CLI that crawls any website, git repo, or local codebase and extracts its complete design system - colors, typography, spacing, animations, components, screenshots - packaged into a folder Claude Code reads automatically.\n\nOpen the output folder, type `claude`, and ask Claude to build your UI. It already knows the exact design system.\n\n---\n\n## Install\n\n```bash\nnpm install -g skillui\n```\n\n> Requires **Node.js 18+**\n\nFor **ultra mode** (full visual extraction with Playwright):\n\n```bash\nnpm install playwright\nnpx playwright install chromium\n```\n\n---\n\n## Quick Start\n\n```bash\n# 1. Extract a design system from any URL\nskillui --url https:\u002F\u002Fnotion.so\n\n# 2. Open the output folder in Claude Code\ncd notion-design && claude\n\n# 3. Ask Claude to build your UI\n\"Build me a landing page that matches this design system\"\n```\n\nClaude automatically reads `CLAUDE.md` and `SKILL.md` - no manual setup needed. It uses the extracted colors, typography, spacing, components, animations, and screenshots to generate an HTML file matching the exact visual language of the site.\n\n---\n\n## Modes\n\n### Default mode - pure static analysis\n\nExtracts HTML, CSS, fonts, color tokens, spacing, and typography. Works on any site, no browser required.\n\n```bash\nskillui --url https:\u002F\u002Flinear.app\n```\n\n### Ultra mode - full cinematic extraction\n\nUses Playwright to capture scroll screenshots, interaction diffs, animation detection, layout analysis, and DOM component fingerprinting.\n\n```bash\nskillui --url https:\u002F\u002Flinear.app --mode ultra\n```\n\n### Dir mode - local project scan\n\nScans `.css`, `.scss`, `.ts`, `.tsx`, `.js`, `.jsx` for design tokens, Tailwind config, CSS variables, and component patterns.\n\n```bash\nskillui --dir .\u002Fmy-app\n```\n\n### Repo mode - clone and scan\n\nClones any public git repository and runs dir mode automatically.\n\n```bash\nskillui --repo https:\u002F\u002Fgithub.com\u002Forg\u002Frepo\n```\n\n---\n\n## What You Get\n\n| Feature | Default | Ultra |\n|---|:---:|:---:|\n| Color tokens (CSS vars + JSON) | ✅ | ✅ |\n| Typography scale | ✅ | ✅ |\n| Spacing grid | ✅ | ✅ |\n| Google Fonts bundled locally | ✅ | ✅ |\n| `CLAUDE.md` + `SKILL.md` auto-generated | ✅ | ✅ |\n| `.skill` ZIP packaged | ✅ | ✅ |\n| 7 scroll journey screenshots | | ✅ |\n| Hover \u002F focus interaction diffs | | ✅ |\n| CSS keyframes + animation detection | | ✅ |\n| Flex\u002Fgrid layout extraction | | ✅ |\n| DOM component fingerprinting | | ✅ |\n\n---\n\n## Output Structure\n\n```\nnotion-design\u002F\n├── notion-design.skill       # Packaged .skill ZIP (contains everything)\n├── SKILL.md                  # Master skill file (auto-loaded by Claude)\n├── CLAUDE.md                 # Claude Code project context\n├── DESIGN.md                 # Full design system tokens\n├── references\u002F\n│   ├── ANIMATIONS.md         # Motion specs and keyframes\n│   ├── LAYOUT.md             # Layout containers and grid\n│   ├── COMPONENTS.md         # DOM component patterns\n│   ├── INTERACTIONS.md       # Hover\u002Ffocus state diffs\n│   └── VISUAL_GUIDE.md       # All screenshots embedded in sequence\n├── screens\u002F\n│   ├── scroll\u002F               # 7 scroll journey screenshots\n│   ├── pages\u002F                # Full-page screenshots (ultra)\n│   └── sections\u002F             # Section clip screenshots (ultra)\n├── tokens\u002F\n│   ├── colors.json\n│   ├── spacing.json\n│   └── typography.json\n└── fonts\u002F                    # Bundled Google Fonts (woff2)\n```\n\n---\n\n## All Flags\n\n```\nskillui --url \u003Curl>           Crawl a live website\nskillui --dir \u003Cpath>          Scan a local project directory\nskillui --repo \u003Curl>          Clone and scan a git repository\n\n--mode ultra                  Enable cinematic extraction (requires Playwright)\n--screens \u003Cn>                 Pages to crawl in ultra mode (default: 5, max: 20)\n--out \u003Cpath>                  Output directory (default: .\u002F)\n--name \u003Cstring>               Override the project name\n--format design-md|skill|both Output format (default: both)\n--no-skill                    Output DESIGN.md only, skip .skill packaging\n```\n\n---\n\n## Examples\n\n```bash\n# Full ultra extraction - Nothing.tech\nskillui --url https:\u002F\u002Fnothing.tech --mode ultra --screens 10\n\n# Scan a local Next.js app\nskillui --dir .\u002Fmy-nextjs-app --name \"MyApp\"\n\n# Clone and analyze a public repo\nskillui --repo https:\u002F\u002Fgithub.com\u002Fvercel\u002Fnext.js --name \"Next.js\"\n\n# Output only DESIGN.md, no .skill packaging\nskillui --url https:\u002F\u002Fstripe.com --format design-md\n\n# Save to a specific directory\nskillui --url https:\u002F\u002Flinear.app --out .\u002Fdesign-systems\n```\n\n---\n\n## Package Info\n\n\u003Cdiv align=\"center\">\n\n| | |\n|---|---|\n| **Package** | [npmjs.com\u002Fpackage\u002Fskillui](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fskillui) |\n| **Latest version** | `1.3.2` |\n| **First published** | April 8, 2026 |\n| **Last updated** | April 10, 2026 |\n| **License** | MIT |\n| **Author** | [Amaan](https:\u002F\u002Fgithub.com\u002Famaancoderx) |\n| **Homepage** | [skillui.vercel.app](https:\u002F\u002Fskillui.vercel.app) |\n| **Issues** | [GitHub Issues](https:\u002F\u002Fgithub.com\u002Famaancoderx\u002Fnpxskillui\u002Fissues) |\n\n\u003C\u002Fdiv>\n\n### Version History\n\n\u003Cdetails>\n\u003Csummary>View all 23 releases\u003C\u002Fsummary>\n\n| Version | Released |\n|---|---|\n| `1.3.2` ⬅ latest | April 10, 2026 |\n| `1.3.1` | April 10, 2026 |\n| `1.3.0` | April 10, 2026 |\n| `1.2.9` | April 10, 2026 |\n| `1.2.8` | April 10, 2026 |\n| `1.2.7` | April 10, 2026 |\n| `1.2.6` | April 10, 2026 |\n| `1.2.5` | April 10, 2026 |\n| `1.2.4` | April 10, 2026 |\n| `1.2.3` | April 10, 2026 |\n| `1.2.2` | April 10, 2026 |\n| `1.2.1` | April 9, 2026 |\n| `1.2.0` | April 9, 2026 |\n| `1.1.9` | April 9, 2026 |\n| `1.1.8` | April 9, 2026 |\n| `1.1.7` | April 9, 2026 |\n| `1.1.6` | April 9, 2026 |\n| `1.1.5` | April 9, 2026 |\n| `1.1.4` | April 8, 2026 |\n| `1.1.3` | April 8, 2026 |\n| `1.1.2` | April 8, 2026 |\n| `1.1.1` | April 8, 2026 |\n| `1.1.0` | April 8, 2026 |\n\n\u003C\u002Fdetails>\n\n---\n\n## How It Works\n\nSkillUI uses pure static analysis. No AI, no API keys, no cloud - everything runs locally.\n\n- **URL mode** - fetches HTML, crawls all linked CSS files, extracts computed styles via Playwright DOM inspection\n- **Dir mode** - scans `.css`, `.scss`, `.ts`, `.tsx`, `.js`, `.jsx` for design tokens, Tailwind config, CSS variables, and component patterns\n- **Repo mode** - clones the repo to a temp directory and runs dir mode\n- **Ultra mode** - runs Playwright to capture scroll screenshots, detect animation libraries from `window.*` globals, extract `@keyframes` from `document.styleSheets`, capture hover\u002Ffocus state diffs, fingerprint DOM components\n\n---\n\n## Requirements\n\n- Node.js 18+\n- For `--mode ultra`: Playwright (`npm install playwright && npx playwright install chromium`)\n\n---\n\n## Links\n\n- [npm package](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fskillui)\n- [Landing page](https:\u002F\u002Fskillui.vercel.app)\n- [Source code](https:\u002F\u002Fgithub.com\u002Famaancoderx\u002Fnpxskillui)\n- [Issues](https:\u002F\u002Fgithub.com\u002Famaancoderx\u002Fnpxskillui\u002Fissues)\n\n---\n\n## License\n\nMIT - built by [Amaan](https:\u002F\u002Fgithub.com\u002Famaancoderx)\n","SkillUI 是一个命令行工具，用于从任何网站、Git 仓库或本地代码库中提取完整的设计系统。其核心功能包括通过静态分析抓取颜色、排版、间距、动画和组件等设计元素，并将它们打包成 Claude Code 可直接读取的格式。此外，它还支持使用 Playwright 进行更全面的视觉信息提取，如滚动截图和动画检测。SkillUI 适用于需要快速复现现有网页设计风格的场景，无论是为了学习、模仿还是项目迁移，都可以显著提高开发效率。安装简单，仅需一行命令即可开始使用。",2,"2026-06-11 02:40:31","CREATED_QUERY"]