[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"readme:npxskillui":3},"\u003Cdiv align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fskillui.vercel.app\" rel=\"nofollow ugc noopener\">\n    \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Famaancoderx\u002Fnpxskillui\u002FHEAD\u002Fskillui.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>\u003Cp>  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fskillui\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fskillui?color=%23e8735a&label=skillui&style=flat-square\" alt=\"npm version\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fskillui\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fskillui?color=%23e8735a&style=flat-square\" alt=\"npm downloads\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fnodejs.org\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fnode-%3E%3D18-brightgreen?style=flat-square\" alt=\"Node.js\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Famaancoderx\u002Fnpxskillui\u002Fblob\u002Fmain\u002FLICENSE\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-blue?style=flat-square\" alt=\"License: MIT\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Famaancoderx\u002Fnpxskillui\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fsource-npxskillui-gray?style=flat-square&logo=github\" alt=\"GitHub repo\" \u002F>\u003C\u002Fa>\u003C\u002Fp>\n\u003C\u002Fdiv>\u003Chr \u002F>\n\u003Ch2>One-shotted Notion's landing page in minutes with a single line prompt\u003C\u002Fh2>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F4d6b63f1-8042-44a2-8f4f-a92fedadcaf9\" rel=\"nofollow ugc noopener\">https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F4d6b63f1-8042-44a2-8f4f-a92fedadcaf9\u003C\u002Fa>\u003C\u002Fp>\n\u003Chr \u002F>\n\u003Ch2>What is SkillUI?\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>SkillUI\u003C\u002Fstrong> 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.\u003C\u002Fp>\n\u003Cp>Open the output folder, type \u003Ccode>claude\u003C\u002Fcode>, and ask Claude to build your UI. It already knows the exact design system.\u003C\u002Fp>\n\u003Chr \u002F>\n\u003Ch2>Install\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-bash\">npm install -g skillui\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cblockquote>\n\u003Cp>Requires \u003Cstrong>Node.js 18+\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>For \u003Cstrong>ultra mode\u003C\u002Fstrong> (full visual extraction with Playwright):\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">npm install playwright\nnpx playwright install chromium\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Chr \u002F>\n\u003Ch2>Quick Start\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-bash\"># 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\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Claude automatically reads \u003Ccode>CLAUDE.md\u003C\u002Fcode> and \u003Ccode>SKILL.md\u003C\u002Fcode> - 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.\u003C\u002Fp>\n\u003Chr \u002F>\n\u003Ch2>Modes\u003C\u002Fh2>\n\u003Ch3>Default mode - pure static analysis\u003C\u002Fh3>\n\u003Cp>Extracts HTML, CSS, fonts, color tokens, spacing, and typography. Works on any site, no browser required.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">skillui --url https:\u002F\u002Flinear.app\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Ultra mode - full cinematic extraction\u003C\u002Fh3>\n\u003Cp>Uses Playwright to capture scroll screenshots, interaction diffs, animation detection, layout analysis, and DOM component fingerprinting.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">skillui --url https:\u002F\u002Flinear.app --mode ultra\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Dir mode - local project scan\u003C\u002Fh3>\n\u003Cp>Scans \u003Ccode>.css\u003C\u002Fcode>, \u003Ccode>.scss\u003C\u002Fcode>, \u003Ccode>.ts\u003C\u002Fcode>, \u003Ccode>.tsx\u003C\u002Fcode>, \u003Ccode>.js\u003C\u002Fcode>, \u003Ccode>.jsx\u003C\u002Fcode> for design tokens, Tailwind config, CSS variables, and component patterns.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">skillui --dir .\u002Fmy-app\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Repo mode - clone and scan\u003C\u002Fh3>\n\u003Cp>Clones any public git repository and runs dir mode automatically.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">skillui --repo https:\u002F\u002Fgithub.com\u002Forg\u002Frepo\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Chr \u002F>\n\u003Ch2>What You Get\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Feature\u003C\u002Fth>\n\u003Cth align=\"center\">Default\u003C\u002Fth>\n\u003Cth align=\"center\">Ultra\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Color tokens (CSS vars + JSON)\u003C\u002Ftd>\n\u003Ctd align=\"center\">✅\u003C\u002Ftd>\n\u003Ctd align=\"center\">✅\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Typography scale\u003C\u002Ftd>\n\u003Ctd align=\"center\">✅\u003C\u002Ftd>\n\u003Ctd align=\"center\">✅\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Spacing grid\u003C\u002Ftd>\n\u003Ctd align=\"center\">✅\u003C\u002Ftd>\n\u003Ctd align=\"center\">✅\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Google Fonts bundled locally\u003C\u002Ftd>\n\u003Ctd align=\"center\">✅\u003C\u002Ftd>\n\u003Ctd align=\"center\">✅\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>CLAUDE.md\u003C\u002Fcode> + \u003Ccode>SKILL.md\u003C\u002Fcode> auto-generated\u003C\u002Ftd>\n\u003Ctd align=\"center\">✅\u003C\u002Ftd>\n\u003Ctd align=\"center\">✅\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>.skill\u003C\u002Fcode> ZIP packaged\u003C\u002Ftd>\n\u003Ctd align=\"center\">✅\u003C\u002Ftd>\n\u003Ctd align=\"center\">✅\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>7 scroll journey screenshots\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003C\u002Ftd>\n\u003Ctd align=\"center\">✅\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Hover \u002F focus interaction diffs\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003C\u002Ftd>\n\u003Ctd align=\"center\">✅\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>CSS keyframes + animation detection\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003C\u002Ftd>\n\u003Ctd align=\"center\">✅\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Flex\u002Fgrid layout extraction\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003C\u002Ftd>\n\u003Ctd align=\"center\">✅\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>DOM component fingerprinting\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003C\u002Ftd>\n\u003Ctd align=\"center\">✅\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Chr \u002F>\n\u003Ch2>Output Structure\u003C\u002Fh2>\n\u003Cpre>\u003Ccode>notion-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 \n\u003C\u002Fcode>\u003C\u002Fpre>\n",1784240407714]