UI Sift helps coding agents choose suitable components, find official skills and MCP tools, and turn those components into a coherent product. Its focus is clear hierarchy, restrained motion, real interactions, and a consistent visual language.

It adapts to your project’s framework, design system, and constraints. Use it for a small polish pass, a new page, an AI interface, a document workspace, or a UI review.

Framework support

React is the primary focus. Most curated components target the React ecosystem, including many shadcn/ui and Tailwind-based implementations. The catalog also contains a few sources for other frameworks; components are not interchangeable across frameworks.

The skill checks the target framework before selecting components. Design guidance can transfer between stacks; source code must match the target project. See the catalog for component-level boundaries.

Install in one command

Run this from your project directory. The installer lets you choose your coding agent:

npx skills add Ciao1019/ui-sift --skill ui-sift

For a non-interactive install targeting a specific agent:

npx --yes skills add Ciao1019/ui-sift --skill ui-sift --agent codex --yes

Replace codex with claude-code, cursor, or another supported agent. Add --global to install for that agent across projects; installation is project-scoped by default. Use --copy if you prefer copies to symlinks.

The current installer requires Node.js 22.20+, npm/npx, and Git. The skill itself is Markdown and JSON; its optional helper scripts use Python 3.9+ with no third-party Python dependencies.

List the skill before installing:

npx skills add Ciao1019/ui-sift --list

For a manual install, download the source or a release, put the complete ui-sift folder in your agent’s supported skill directory, and preserve its file structure. The entry point is SKILL.md. Reload skills if your agent requires it.

Ask for a better interface

Use $ui-sift to refine this dashboard. Keep the existing design system,
make filters and empty states easier to use, and avoid new dependencies.

Use $ui-sift to build a document review page. Selecting a field should
locate its source, save failures should preserve edits, and the primary
workflow must work on narrow screens.

Use $ui-sift to review this page. Report the three issues that most affect
usability, with evidence. Do not change the code yet.

Invocation syntax varies by agent; you can also ask it to read SKILL.md. The detailed skill guidance and reference library are currently written in Simplified Chinese. These English examples can be used with agents that understand that guidance; translations are welcome.

What it brings

The curated library

The catalog explains strengths, promising components, and tradeoffs. The acquisition guide records official skills/MCP discovery and source retrieval paths. Entries are research notes, not claims that every integration has been tested. Verify the selected component’s current API, compatibility, and license before use.

Four optional tools

Run these from the installed skill folder or a clone of this repository. Output filenames are examples; use a task-specific directory.

# Inspect a target package without running its scripts
python3 scripts/profile_project.py /path/to/frontend-package > profile.json

# Find compatible candidates using the package profile
python3 scripts/recommend.py "document review" --framework auto --profile profile.json

# Download one official reference to a new file; does not execute or install it
python3 scripts/fetch_reference.py moumen --out moumen-llms.txt

# Check the completeness of an evidence record
python3 scripts/check_delivery.py report.json --evidence-root /path/to/evidence

Scanning and recommendation run offline. Downloading is limited to recorded official hosts, checks redirects and payloads, and refuses to overwrite files. A complete evidence record does not mean the interface has passed a visual or functional review.

See the tool manual for options and limits. On Windows, use your available Python launcher, such as py -3.

Inside the skill

ui-sift/
├── SKILL.md                 # Agent entry point and task routing
├── agents/                  # Optional agent UI metadata
├── references/              # Design, catalog, acquisition, integration, review
├── data/                    # Sources, component candidates, intent vocabulary
├── scripts/                 # Four standard-library Python tools
├── templates/               # Design brief and evidence record
├── tests/                   # Deterministic tool regression tests
└── evals/                   # Routing cases and end-to-end evaluation scenarios

Supporting documents load when needed. A minor component adjustment does not require a full brief, every tool, or a JSON report.

Validation and contributing

python3 -m unittest discover -s tests -v

The tool suite contains 28 tests, including a regression test that exercises 18 routing cases. These check framework filtering, local scanning, download handling, and evidence references. Seven end-to-end agent scenarios are supplied for future evaluation; their design outcomes have not been validated.

Contributions are welcome: focused component recommendations, updated official access paths, translations, and reproducible failures. When adding a source, include its framework, a concrete strength, how it differs from existing entries, and official evidence. Keep the catalog, acquisition guide, and data consistent, then run the relevant tests.

Acknowledgments and license

The workflow draws organizational lessons from Anthropic frontend-design, Vercel agent-skills, and Vibe-Skills. The research notes explain the scope and verification limits. UI Sift does not bundle those projects’ skills or third-party component source.

🙏 致谢

感谢 LinuxDo 社区的支持。

MIT for UI Sift’s original code and documentation. Referenced libraries, components, templates, and paid assets retain their own licenses.