What Is SkillUI? Setup, Using It with Claude Code and Its Network Calls
You give SkillUI a website, a git repository or your own project folder; it scans colors, fonts, spacing, components and animations and writes them to a design folder that Claude Code reads (SKILL.md, CLAUDE.md and DESIGN.md). Despite the name, it is not a skill itself but an MIT-licensed command-line tool (npm package) that generates skills. The README says "no AI, no API keys, no cloud"; the source code, however, shows network calls to microlink.io for screenshots and to Google Fonts for fonts. Install: npm install -g skillui (Node.js 18+).
- What it does
- Generates a design skill from a site or a repository
- Type
- Command-line tool (generates skills)
- Account/key
- Not required
- Network calls
- The code calls third-party services
- Where
- Claude Code (as documented)
- Latest version
- 1.3.4 · May 7, 2026
- Price
- Free, MIT
What does SkillUI do?
Describing the "look" of a site to Claude Code is hard. SkillUI does it for you: it scans the site whose address you give, a git repository or your own project folder, extracts the colors, fonts, spacing, components and animations, and writes them to a folder. Then you open the claude command in that folder and say "build a page that matches this design"; Claude Code reads the CLAUDE.md and SKILL.md files in the folder on its own (README).
!SkillUI is not a skill or a plugin but a command-line tool that generates skills. You run it on your own computer first, and the resulting folder behaves like a skill. The tool also copies the SKILL.md it generates into the user-level Claude Code skills folder (~/.claude/skills/); details are in the "What does it access?" section.
Who it helps: Designers and developers who want to pass a reference site's visual language to a coding agent; anyone who wants Claude Code to learn their own project's design values. Use it for inspiration and reference, not to copy someone else's site one-to-one; copyright and trademark rights are a separate matter (this is not legal advice).
What is in SkillUI's output?
| File / folder | What it is for |
|---|---|
| SKILL.md | The main design reference; Claude Code reads it at startup. |
| CLAUDE.md | Project context that says "read SKILL.md first" when the folder is opened (does not overwrite an existing one). |
| DESIGN.md | The full list of color, font and spacing values. |
<name>-design.skill | A ZIP package containing everything. |
| tokens/ and fonts/ | colors, spacing and typography JSON files plus the downloaded fonts. |
| references/ and screens/ | Notes on animation, layout, components and interactions, plus screenshots; filled in ultra mode according to the README. |
The default mode reads HTML and CSS over HTTP and needs no browser; ultra mode adds screenshots, hover/focus differences, animation and component extraction (README).
How do I install SkillUI?
Requirements: Node.js 18 or later. No account, API key or plan is needed. The commands are taken verbatim from the README.
› npm install -g skilluiExtra setup for ultra mode
Ultra mode opens a real browser and captures scrolling screenshots, hover/focus changes and animations. The README requires Playwright for this (optional).
› npm install playwright› npx playwright install chromiumThe version-pinned command on the atlas card (skillui@1.3.4) is not in the README; the official command has no version. The current version on npm is 1.3.4. No script (preinstall/postinstall) runs during install. The landing page still says v1.3.2.
How do I use SkillUI?
- Extract the design: Give it a site's address (the first command below). The output is written to a folder named
<name>-designin the folder you are working in. - Open Claude Code: Go into that folder and type
claude. Claude Code reads the CLAUDE.md and SKILL.md files on its own. - Ask: Write what you want it to do, like the sample request below.
› skillui --url https://linear.app› skillui --url https://linear.app --mode ultra› skillui --dir ./my-app› skillui --repo https://github.com/org/repo--out changes the output folder; --name gives it a name; --format asks for DESIGN.md only (design-md); --no-skill skips the .skill package.
Which agents does SkillUI work with?
| Claude CodeYes | The README tells you to open claude in the output folder. |
|---|---|
| Codex, Cursor and other agentsUnclear | The README says nothing; that does not mean it won't work. |
| Claude.ai (web chat)Unclear | The README mentions the .skill package but does not explain uploading it to claude.ai. |
| Windows, macOS, LinuxUnclear | The README does not list operating systems. |
| Turkish interfaceNo | The command-line output and the README are in English. |
What does SkillUI access, and what does it send out?
In URL mode, the target site's HTML and CSS files (in ultra mode it opens the site in a real browser via Playwright). In dir mode, the .css, .scss, .ts, .tsx, .js and .jsx files in the folder you give. In repo mode, it clones the repository you give into a temporary folder.
The output folder (<name>-design) and, in addition, a copy of SKILL.md in the user-level skills folder: ~/.claude/skills/<name>-design/SKILL.md (source code, src/cli.ts).
The source code shows no part that deletes user files; only the temporary clone in repo mode is cleaned up.
In URL mode, the target address is sent to api.microlink.io for a screenshot (skipped if it fails). Font names are queried against the Google Fonts API and the font files are downloaded. The source code (main) and the npm 1.3.4 package carry the same calls.
!The README and the landing page say "No AI, no API keys, no cloud". That is accurate about AI and keys, but "no cloud" does not match the code. Do not pass the address of a private, internal or not-yet-published site with --url: the address may go to a third-party service.
The generated SKILL.md and other files are produced from the content of the site you scanned. If you scanned a site you don't trust, look through the files before opening the folder in Claude Code.
The GitHub Security Advisories list is empty; OSV has no entry for skillui (npm) (checked October 15, 2026). No recorded advisory appears; that does not mean "safe". The npm package has no install script.
Is SkillUI free?
Yes. SkillUI is MIT-licensed open source; the README and the landing page state no fee, plan or account requirement. The agent tool you use (Claude Code) has its own plan.
The README and the npm record say the license is MIT, but the repository has no LICENSE file and the GitHub license field is empty. For business use, confirm the license file with the maker.
Common problems
| What happens | What to do |
|---|---|
| "page.goto: Timeout 30000ms" error in ultra mode, empty output | Reported by users It appeared on sites with a chat widget, tracking script or Cloudflare (repository issue #4). Version 1.3.4 fixes it as "domcontentloaded instead of networkidle, 60 s"; if you are on an older version, reinstall. |
| A cookie banner covers the screenshot | Reported by users The proposal that fixes this (PR #7) does not appear in the main branch. In ultra mode, check the result by eye. |
| Pages that require a login cannot be scanned | Reported by users The README does not describe login support; PR #1, which proposes login and single-page app discovery, is open. |
The repository has 5 open issues; one is "Why no update??" (September 11, 2026). The last commit and the last release are from May 7, 2026, so there has been no update for about five months.
How do I uninstall SkillUI?
- Remove the tool:
npm uninstall -g skillui(the README does not cover uninstalling; this is the standard npm method). - Delete the output: Delete the
<name>-designfolder it generated. - Delete the copy: Delete the
~/.claude/skills/<name>-designfolder in Claude Code's user skills folder.
Frequently asked questions
How do I use SkillUI with Claude Code?
According to the README, you first scan a site with skillui --url (or your project with --dir). You go into the resulting folder and type claude; Claude Code reads the CLAUDE.md and SKILL.md files in the folder on its own, and after that you can say "build a page that matches this design".
Where is the SkillUI GitHub repo, and how do I install it?
The repo is github.com/amaancoderx/npxskillui, and the npm package is named skillui. The README says npm install -g skillui for installation (Node.js 18+). The README and npm list the license as MIT, but the repository has no LICENSE file.
Does SkillUI work with Codex or other agents?
The README mentions only Claude Code. The documentation says nothing about Codex, Cursor or other clients; that does not mean it won't work.
Is SkillUI a plugin or a skill?
Neither: it is a command-line tool (npm package). When you run it, it generates a design folder; the SKILL.md in that folder is used as a skill in Claude Code, and the tool also copies this file into the user skills folder (~/.claude/skills).
Related guides
Sources
- amaancoderx/npxskillui README (GitHub)
- skillui package (npm)
- SkillUI landing page
- Screenshot code (src/screenshot.ts)
- Code that copies to the skills folder (src/cli.ts)
Not clear in the official sources: Whether the output works with Claude.ai (web), Codex or Cursor · supported operating systems · the missing LICENSE file on GitHub (README and npm say MIT) · the gap between the README's "no cloud" claim and the code · Turkish support. Each is covered in the relevant section.