UI Pattern Source Orchestrator

Evidence-backed UI pattern and source intelligence skill for Codex and compatible agent runtimes.

It helps an agent choose practical UI patterns, component libraries, visual references, motion references, and AI UI exploration tools for a specific product brief, surface, and stack.

What It Does

ui-pattern-source-orchestrator recommends verified UI patterns, component libraries, and visual sources for a concrete task, interface type, and technology stack.

It can:

• understand the interface surface: landing page, admin panel, dashboard, web app, agent UI;
• select relevant sources such as devl.dev, coss-ui, 21st.dev, v0.app, CTA Gallery, 60fps.design, recent.design, Once UI, beUI, Magic UI, Aceternity, Tremor, and others;
• distinguish code-ready sources from inspiration/reference sources;
• check stack compatibility for React, Next.js, Tailwind, shadcn, and plain HTML/CSS/JS;
• prevent decorative motion from being recommended for dense operational admin UI;
• treat Once UI Core as a React/Next.js design-system candidate only after dependency, license, and design-system adoption review;
• produce a recommendation packet: which patterns to use, where they come from, why they fit, what risks they carry, and which downstream skill should receive them.

What It Contains

• skill/SKILL.md - main routing and usage instructions.
• skill/data/source-registry.json - source registry.
• skill/data/pattern-index.json - UI pattern index.
• skill/scripts/ - validation, search, ranking, source verification, recommendation packets, and evals.
• skill/references/ - rules for no-copy, freshness, motion gates, AI-generator gates, evidence, and handoffs.
• skill/evals/ - deterministic behavior tests.
• reports/ - validation evidence and example reports.

Tools

• local Python scripts;
• live metadata checks for public sources;
• deterministic evals;
• stack/source decision logic;
• recommendation packet generator.

Who It Helps

• UI/UX designers: quickly see which references and patterns fit the brief.
• Frontend developers: avoid guessing whether a component source is a code candidate.
• Product teams: choose UI direction by task and constraints, not taste alone.
• Agent systems: route design sources into ui-ux-pro-max, webapp-ui-skill, admin-ui-builder, and design-critic-skill.

When To Use

• before creating a design direction or prototype;
• when choosing UI libraries, reference sources, or component systems;
• when a beautiful motion/effect source may be wrong for the product surface;
• when building an admin panel, dashboard, agent UI, web app, or conversion-focused website and the stack matters.

Install For Codex

From npm:

npx @mlllm/ui-pattern-source-orchestrator install codex

From a local checkout:

node bin/ui-pattern-source-orchestrator.js install codex

Restart Codex after installation so it can pick up the new skill.

Validate

npm run check

The package includes deterministic validation for registry shape, source/pattern ranking behavior, and package sanitation.

Russian

ui-pattern-source-orchestrator - скилл, который подбирает проверенные UI-паттерны, библиотеки компонентов и визуальные источники под конкретную задачу, поверхность и стек.

Что делает:

• понимает тип интерфейса: лендинг, админка, dashboard, webapp, agent UI;
• подбирает релевантные источники: devl.dev, coss-ui, 21st.dev, v0.app, CTA Gallery, 60fps.design, recent.design, Once UI, beUI, Magic UI, Aceternity, Tremor и др.;
• отличает code-ready источники от inspiration/reference;
• проверяет совместимость со стеком: React, Next.js, Tailwind, shadcn, plain HTML/CSS/JS;
• не дает тащить декоративную анимацию туда, где нужна рабочая админка;
• рассматривает Once UI Core как кандидат на дизайн-систему только для React/Next.js и только после проверки зависимостей, лицензии и уместности внедрения;
• выдает recommendation packet: какие паттерны брать, откуда, почему, с какими рисками и кому передать дальше.

Из чего состоит:

• SKILL.md - главный сценарий использования;
• data/source-registry.json - реестр источников;
• data/pattern-index.json - индекс UI-паттернов;
• scripts/ - валидация, поиск, ранжирование, проверка источников, evals;
• references/ - правила: no-copy, freshness, motion gate, AI-generator gate;
• evals/ - тесты поведения;
• reports/ - доказательства проверок и примеры рекомендаций.

Инструменты:

• локальные Python-скрипты;
• live metadata check публичных источников;
• deterministic evals;
• stack/source decision logic;
• recommendation packet generator.

Кому полезен:

• UI/UX-дизайнеру - быстро понять, какие паттерны и референсы подходят;
• frontend-разработчику - не гадать, можно ли брать компонентный источник как code candidate;
• продуктовой команде - выбирать стиль и UI-подход не "по вкусу", а по задаче;
• агентной системе - правильно роутить дизайн-источники в ui-ux-pro-max, webapp-ui-skill, admin-ui-builder, design-critic-skill.

Когда вызывать:

• перед созданием дизайна или прототипа;
• когда нужен выбор UI-библиотек/референсов;
• когда есть риск взять красивый, но неподходящий motion/visual эффект;
• когда нужно сделать админку, dashboard, agent UI или продающий сайт и подобрать рабочие паттерны под стек.

License

Apache-2.0.