amaancoderx/npxskillui Instruction Manual

What amaancoderx/npxskillui is—in plain language

Static-analysis CLI that extracts design systems from URLs, repositories, or local code and writes agent-ready design artifacts/skills.

Mental model: This repository extends a host application. The host loads its commands, skills, hooks, or agents; most day-to-day use happens inside that host rather than by launching a separate app.

InterfacesCLI

Primary languageTypeScript

Typical useReverse-engineer an existing visual language before implementing or restyling a frontend; package findings for Claude/coding agents.

Your first 15 minutes

Complete the linked Installation Guide and its verification step.
Create a disposable test folder or use non-sensitive sample data.
Run the small example below and observe what files, ports, or prompts appear.
Read the result before approving writes, network calls, account access, or costs.
Only then repeat the workflow with a real project.

Starter workflow

skillui --url https://example.com
cd example-design
claude

Open Installation Guide Open upstream README

Complete indexed functionality map

Each card below corresponds to a component identified in the repository research. Open a component record for its path, purpose, capabilities, dependencies, risks, and relationships.

URL mode

workflow

Extract design tokens/cues from a URL.

src/modes/url.ts

Open component record →

Ultra mode

workflow

Use browser-backed inspection/screenshots.

src/modes/ultra.ts

Open component record →

Directory mode

workflow

Analyze local code.

src/modes/dir.ts

Open component record →

Repository mode

workflow

Analyze repository source.

src/modes/repo.ts

Open component record →

Skill writer

module

Write extracted knowledge as an agent skill.

src/writers/skill.ts

Open component record →

Upstream feature-by-feature guide

These capabilities are derived from the current first-party README and supporting documentation. Names follow upstream terminology so you can search the source documentation precisely.

Upstream capability

One-shotted Notion's landing page in minutes with a single line prompt

Upstream treats this as a distinct part of amaancoderx/npxskillui. In plain language, use this area when your task concerns one-shotted notion's landing page in minutes with a single line prompt. Begin with the documented default, test it on disposable input, and open the source section for its current options and limitations.

Upstream capability

What is SkillUI?

Upstream treats this as a distinct part of amaancoderx/npxskillui. In plain language, use this area when your task concerns what is skillui?. Begin with the documented default, test it on disposable input, and open the source section for its current options and limitations.

Upstream capability

Default mode - pure static analysis

Upstream treats this as a distinct part of amaancoderx/npxskillui. In plain language, use this area when your task concerns default mode - pure static analysis. Begin with the documented default, test it on disposable input, and open the source section for its current options and limitations.

Upstream capability

Ultra mode - full cinematic extraction

Upstream treats this as a distinct part of amaancoderx/npxskillui. In plain language, use this area when your task concerns ultra mode - full cinematic extraction. Begin with the documented default, test it on disposable input, and open the source section for its current options and limitations.

Upstream capability

Dir mode - local project scan

Upstream treats this as a distinct part of amaancoderx/npxskillui. In plain language, use this area when your task concerns dir mode - local project scan. Begin with the documented default, test it on disposable input, and open the source section for its current options and limitations.

Upstream capability

Repo mode - clone and scan

Upstream treats this as a distinct part of amaancoderx/npxskillui. In plain language, use this area when your task concerns repo mode - clone and scan. Begin with the documented default, test it on disposable input, and open the source section for its current options and limitations.

Upstream capability

What You Get

Upstream treats this as a distinct part of amaancoderx/npxskillui. In plain language, use this area when your task concerns what you get. Begin with the documented default, test it on disposable input, and open the source section for its current options and limitations.

Upstream capability

Package Info

Upstream treats this as a distinct part of amaancoderx/npxskillui. In plain language, use this area when your task concerns package info. Begin with the documented default, test it on disposable input, and open the source section for its current options and limitations.

Upstream capability

Version History

Upstream treats this as a distinct part of amaancoderx/npxskillui. In plain language, use this area when your task concerns version history. Begin with the documented default, test it on disposable input, and open the source section for its current options and limitations.

Upstream capability

How It Works

Upstream treats this as a distinct part of amaancoderx/npxskillui. In plain language, use this area when your task concerns how it works. Begin with the documented default, test it on disposable input, and open the source section for its current options and limitations.

Upstream capability

Requirements

Upstream treats this as a distinct part of amaancoderx/npxskillui. In plain language, use this area when your task concerns requirements. Begin with the documented default, test it on disposable input, and open the source section for its current options and limitations.

Upstream capability

Links

Upstream treats this as a distinct part of amaancoderx/npxskillui. In plain language, use this area when your task concerns links. Begin with the documented default, test it on disposable input, and open the source section for its current options and limitations.

How to use the main workflows

Choose the smallest relevant function

Start with one capability card instead of asking the repository to do everything at once. This makes permissions, inputs, and output easier to understand.

Prepare a disposable input

Use a sample URL, copied repository, test document, or sandbox account. Keep production credentials and irreplaceable files out of the first run.

Run, observe, and stop

Watch Terminal output or the host application's activity view. If the behavior differs from the README, stop with Control + C or cancel inside the host before retrying.

Inspect the result

Check generated files, diffs, API responses, logs, or previews. Never assume “command finished” means the result is correct.

Save a repeatable recipe

Record the working command and non-secret configuration in your project's README. Store secrets in the documented environment file or password manager.

Copy-paste recipes from upstream documentation

These examples are selected from the repository's first-party documentation. Replace obvious placeholders, keep quotation marks intact, and run them only in the context indicated by the surrounding explanation.

Quick Start

# 1. Extract a design system from any URL
skillui --url https://notion.so

# 2. Open the output folder in Claude Code
cd notion-design && claude

# 3. Ask Claude to build your UI
"Build me a landing page that matches this design system"

Configuration, accounts, and files

Configuration files

None documented

A configuration file changes behavior without changing source code. Make one change at a time and keep a backup before editing JSON, TOML, YAML, or environment files.

Important directories

src/modes/, src/extractors/, src/writers/

Paths identify where the relevant implementation or generated files live. Paths beginning with ~ are inside your home folder.

Credentials

None documented

Prefer temporary, least-privileged credentials. Never commit .env, tokens, cookies, private keys, or session exports.

External services

None documented

Check pricing, data retention, rate limits, and account permissions before enabling optional integrations.

Safe operating habits

Use test data first and keep a current backup or Git commit.
Read commands before pasting. A README is useful evidence, not a substitute for judgment.
Review agent-generated file changes with git diff before committing.
Keep local services bound to 127.0.0.1 unless you intentionally secure and expose them.
Do not give plugins or MCP servers broader filesystem, browser, GitHub, or cloud access than their current task requires.
Confirm API costs and model names before running large batches.
Stop and investigate repeated authentication failures instead of pasting a token into multiple places.

Reference and source trail

The manual reflects first-party files checked on August 18, 2026. It explains the indexed repository rather than promising that every optional third-party integration is available or safe.