skills.rest
Mjlike123
Mjlike123COMMUNITY
Explore all skills by this author →
GitHub

quick-references

Collects and organizes real UI design references for pages, components, and flows.

Updated Aug 13, 2026
Search Tags:#design inspiration#design research#visual references#ui references#competitive examples#pattern research
One-click install
npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill quick-references-mjlike123
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: quick-references
Source: https://github.com/Mjlike123/ui-prototype-workbench/tree/main/.agents/skills/monkren-design/skills/01-research/quick-references
Command: npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill quick-references-mjlike123

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When designing a page or component, you often need real-world examples of how other products solve the same problem, but manually searching and organizing UI references is slow and unstructured. ## Core Features & Use Cases - Targeted Reference Gathering: Finds 4-8 real design references for a specific page, component, or flow, grouped into 2-4 patterns. - Verified Sources Only: Checks screenshot descriptions, page names, and source URLs so references actually match the target instead of guessing image content. - Structured Report Output: Saves results to .monkren/references/{topic}-{date}/report.md with optional images in an adjacent images/ folder using relative links. - Use Case: Ask for examples of how other apps handle onboarding paywalls, and receive a grouped report with one-line takeaways per reference plus notes on context differences that should not be copied blindly. ## Quick Start Ask the agent to find a few real UI references for a specific component or flow, such as how other products design their settings page.

Frequently Asked Questions about quick-references

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I find UI design references for a specific component?▼

Describe the target component or flow, the platform, and the dimensions you want to compare. The skill gathers 4-8 verified real-product references, groups them into 2-4 patterns, and writes a short takeaway for each.

What is the difference between quick references and full design research?▼

Quick references handle lightweight requests like finding examples or seeing how other products solve a pattern. For deeper competitive strategy analysis, the workflow hands off to the design-research skill instead.

Where are the collected UI references saved?▼

Reports are saved to .monkren/references/{topic}-{date}/report.md. When images are needed, they go into an adjacent images/ folder and are linked with relative paths so the report stays portable.

Does it work without dedicated design research tools installed?▼

Yes. It uses whatever data sources are available in the current environment, user-registered sources, or public web pages, and degrades to existing materials and verifiable pages rather than requiring specific agent tools.

How does it avoid irrelevant or mismatched design references?▼

It only keeps references whose content genuinely matches the target, cross-checking screenshot descriptions, page names, and source URLs instead of guessing what an image contains.

Related Skills

Explore More Design & Creative Skills→
propane-aipropane-ai
4

competitive-design

Compare competitor UX/UI flows, patterns, and accessibility features.

Official
Intermediate
NachoFLizaurNachoFLizaur
3

web-search

Answer simple factual questions with targeted web searches and citations.

Community
Intermediate
emirhankudun-uxemirhankudun-ux
1

seis-design

Designs and audits SEIS product surfaces, design systems, and accessible UI experiences.

Community
Intermediate
simotasimota
68

Compete

Profile competitors and compare features, pricing, and market positioning.

Community
Advanced