ui-pattern-source-orchestrator

name

ui-pattern-source-orchestrator

description

Recommend UI pattern sources, component registries, visual references, and motion/runtime options for UI/UX projects with stack compatibility, freshness labels, no-copy boundaries, evidence manifests, and handoffs to design, build, critic, and progress-dashboard skills. Use when a user asks what UI libraries, references, patterns, effects, dashboards, admin components, or inspiration sources should inform a site, app, admin panel, or agent interface.

UI Pattern Source Orchestrator

This skill is an evidence-backed source-intelligence layer for UI/UX work. It can be called standalone or routed from senior-ui-ux-orchestrator, ui-ux-pro-max, webapp-ui-skill, marketing-site-skill, admin-ui-builder, or agent-progress-visualizer.

It does not create the final design by itself. It produces a recommendation packet that says which sources are usable as code, which are inspiration only, which patterns fit the project, which motion/runtime options are justified, and what risks must be carried forward.

Use When

• The user asks what UI/component/pattern sources to use for a website, SaaS app, admin surface, dashboard, or agent UI.
• The project needs references from sources such as Once UI, 21st.dev, v0.app, glass3d.dev, cta.gallery, 60fps.design, beUI, Magic UI, Aceternity, React Bits, Origin UI, devl.dev, coss-ui, 21st Agent Elements, recent.design, Tremor, Lenis, Locomotive Scroll, GSAP ScrollTrigger, CSS scroll animations, or IntersectionObserver.
• A downstream skill needs source candidates before creating 3 design directions, code, Figma concepts, or admin/progress UI.
• The team needs to know whether a source is code-ready, reference-only, stale, incompatible, too decorative, or risky to copy.

Do Not Use When

• The user only asks for a final implementation and no source/pattern decision is needed.
• The task is pure Figma canvas editing, pure SEO, pure server/deploy, or pure content writing.
• The user wants to copy a third-party design exactly. Refuse copying and extract reusable pattern language instead.

Inputs

Required:

• user brief or project goal;
• target surface, if known: marketing-site, webapp, admin, agent-progress-cockpit, portfolio, ecommerce, or unknown;
• target stack, if known: for example html/css/js, react, nextjs, tailwind, shadcn, framer-motion.

Optional:

• brand constraints;
• accessibility/performance constraints;
• accepted or forbidden sources;
• need for code-ready component candidates;
• need for live source refresh.

Output

Return a recommendation packet with:

• project classification;
• source decisions;
• selected pattern candidates;
• component/source candidates;
• visual references;
• motion/runtime decision;
• stack compatibility notes;
• originality/no-copy warnings;
• evidence manifest;
• downstream handoff instructions;
• open questions and downgrade labels.

Use assets/recommendation-packet.template.md as the human-facing structure.

Source Classes

• code-source: source can provide code or installable/copyable components when stack matches.
• shadcn-registry: source exposes shadcn-compatible registry or copy-source workflow.
• visual-reference: source is inspiration only unless separately verified.
• pattern-gallery: source helps identify UI composition patterns.
• agent-ui-components: source targets agent/chat/tool-call interfaces.
• ai-component-source: source can search, install, or generate component variants through an AI/agent workflow.
• ai-ui-generator: source generates UI/app candidates from prompts; output is never final without review.
• dashboard-components: source targets tables, charts, metrics, admin panels, or data apps.
• design-system: source provides a cohesive component/style system and should not be mixed with another design system by default.
• effect-generator: source generates a narrow CSS/visual effect candidate, not a full design system.
• conversion-reference: source provides CTA/conversion inspiration for marketing surfaces.
• template-source: source provides templates or blocks; output requires license and product-fit review.
• app-starter: source provides a starter application; output requires dependency, security, and launch-readiness review.
• motion-reference: source provides real motion examples, recipes, timing, or interaction references.
• motion-runtime: source affects scroll, animation, viewport detection, or motion choreography.
• mcp-source: source exposes MCP/agent integration; credentials and paid access require explicit approval.
• documentation: source is a technical reference or standard.

Workflow

1. Classify the project surface and stack.
2. Search data/source-registry.json and data/pattern-index.json.
3. Run stack compatibility:
   • unknown stack means code sources default to reference-only;
   • React/Next/Tailwind/shadcn sources are code-ready only for compatible stacks;
   • HTML/static projects may use those sources as inspiration, not direct code.
   • AI generators and effect generators produce candidates only; downstream review decides whether anything is used.
   • CTA and conversion references are for marketing/conversion surfaces, not dense admin UI.
   • Once UI Core is a code candidate only for confirmed React/Next.js projects.
   • Once UI templates/blocks are manual-review candidates and require license, dependency, originality, and product-fit review.
   • Do not mix Once UI with shadcn/coss-ui by default unless the downstream implementer has a deliberate integration reason.
4. Run source evidence and freshness checks:
   • use existing reports/source-evidence.json if current enough;
   • if live freshness is required, run python3 scripts/verify_sources.py --root . --output reports/source-evidence.json;
   • never treat catalog cards, source names, or hero-only screenshots as accepted evidence.
5. Run pattern ranking with scripts/rank_patterns.py or scripts/build_recommendation_packet.py.
6. Run motion usefulness gate:
   • use motion only if it helps orientation, storytelling, affordance, progressive disclosure, or delight without harming accessibility/performance;
   • reject motion that is merely decorative for dense admin/dashboard flows.
   • use 60fps-style motion references as recipe/evidence, not as permission to animate every state.
7. Produce recommendation packet and handoff.
8. If used inside the UI/UX Skill System, pass the packet to the next skill instead of silently implementing from memory.

Evidence Rules

Accepted evidence must include:

• source URL or local artifact path;
• checked date or evidence timestamp;
• source status label: verified, partial_output, stale_data, manual_review_required, not_run, or not_applicable;
• freshness/confidence label;
• reason why the source fits this project;
• no-copy boundary.

Do not claim source freshness, code compatibility, or component availability without evidence.

Failure Labels

• tool_unavailable: browser, network, Python, or validator is missing.
• partial_output: some source evidence exists, but required evidence is missing.
• stale_data: source evidence is older than the freshness window.
• manual_review_required: account, browser, or human judgment is required.
• not_applicable: source does not fit stack, surface, or usage mode.
• copy_risk: user request would copy protected design/source material.

Handoff Rules

• To ui-ux-pro-max: provide style/source candidates and anti-patterns.
• To design-direction-synthesizer: provide candidate directions and visual reference constraints.
• To design-critic-skill: provide originality, motion, accessibility, and source-fit risks.
• To marketing-site-skill: provide marketing-page section patterns and visual references.
• To webapp-ui-skill: provide app/dashboard/admin patterns and component candidates.
• To admin-ui-builder: provide data-table, audit-log, settings, and workflow patterns.
• To agent-progress-visualizer: provide agent UI components, progress states, tool-call cards, and feedback gates.

Local Commands

Run from this skill folder:

python3 scripts/validate_registry.py --root . --output reports/validation-report.json
python3 scripts/verify_sources.py --root . --output reports/source-evidence.json
python3 scripts/search_patterns.py --root . --query "agent progress dashboard" --stack react,nextjs,tailwind,shadcn --output reports/search-report.json
python3 scripts/build_recommendation_packet.py --root . --brief "agent progress cockpit" --stack react,nextjs,tailwind,shadcn --surface agent-progress-cockpit --output reports/recommendation.md --json-output reports/recommendation.json
python3 scripts/grade_evals.py --root . --output reports/eval-results.json
python3 scripts/run_all_checks.py --root . --output reports/final-review.json

Quality Bar

This skill can be called usable when:

• registry and pattern index validate;
• recommendation packets include evidence and downgrade labels;
• evals cover incompatible stack, stale source, inspiration-only source, motion overuse, agent UI, admin UI, and marketing-site flows;
• final review records a score and caveats.

Do not call it 10/10 unless independent behavioral evals and live source evidence are collected for the claimed behavior.