ui-potion-discovery

Identify the best UI Potion guide for a requested component, layout, or feature by searching the index and returning relevant JSON guide URLs and human-readable pages. Use when the user is unsure which potion to use or asks for recommendations.

16 stars

Best use case

ui-potion-discovery is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Identify the best UI Potion guide for a requested component, layout, or feature by searching the index and returning relevant JSON guide URLs and human-readable pages. Use when the user is unsure which potion to use or asks for recommendations.

Teams using ui-potion-discovery should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/ui-potion-discovery/SKILL.md --create-dirs "https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/main/skills/design/ui-potion-discovery/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/ui-potion-discovery/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How ui-potion-discovery Compares

Feature / Agentui-potion-discoveryStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Identify the best UI Potion guide for a requested component, layout, or feature by searching the index and returning relevant JSON guide URLs and human-readable pages. Use when the user is unsure which potion to use or asks for recommendations.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# UI Potion Discovery

## Purpose
Help agents find the most relevant UI Potion guides for a user request.

## When to use
- The user asks for a UI component/layout/feature but does not name a specific potion
- The user asks for recommendations or alternatives
- You need to map intent to available UI Potion guides

## Inputs
- User intent keywords (e.g., "dashboard", "navbar", "modal")
- Optional category preference (layouts, components, features, patterns, tooling)

## Steps
1. Prefer the local index if available: `src/statics/potions-index.json`
2. Otherwise load `https://uipotion.com/potions-index.json`
3. Filter by category and tags that match the intent
4. Rank by tag overlap and relevance to the request
5. Return the top 1-3 matches with both URLs

## Output format
- Name
- Category
- JSON guide URL
- Human-readable page URL

## Constraints
- Prefer JSON guide URLs for implementation
- Provide the human page for review and context
- If no strong match exists, say so and propose the closest option

Related Skills

apify-influencer-discovery

16
from diegosouzapw/awesome-omni-skill

Find and evaluate influencers for brand partnerships, verify authenticity, and track collaboration performance across Instagram, Facebook, YouTube, and TikTok.

agent-ops-improvement-discovery

16
from diegosouzapw/awesome-omni-skill

No description provided.

agent-discovery

16
from diegosouzapw/awesome-omni-skill

Discovers all Claude Code agents in the system including built-in, plugin, project, and user-level agents. Use when you need to find which agents are available, understand the agent ecosystem, or prepare agents for Actoris registration.

bgo

10
from diegosouzapw/awesome-omni-skill

Automates the complete Blender build-go workflow, from building and packaging your extension/add-on to removing old versions, installing, enabling, and launching Blender for quick testing and iteration.

Coding & Development

web-design-guidelines

16
from diegosouzapw/awesome-omni-skill

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

voxanne-branding-expert

16
from diegosouzapw/awesome-omni-skill

Strategic branding, business development, and UI/UX design expertise for Voxanne AI. Combines business strategy, visual design principles, and market positioning to create enterprise-grade branding assets and go-to-market strategies. Use when designing logos, creating brand guidelines, developing marketing strategies, or positioning products against competitors like ChatGPT, Anthropic, and Google.

vibe-techdesign

16
from diegosouzapw/awesome-omni-skill

Create a Technical Design Document for your MVP. Use when the user wants to plan architecture, choose tech stack, or says "plan technical design", "choose tech stack", or "how should I build this".

vapor-ui

16
from diegosouzapw/awesome-omni-skill

Vapor UI design system component and icon guide, UI mockup generator, and Figma design converter. Provides component catalog, icon lookup, usage patterns, props documentation, and converts Figma designs to production-ready vapor-ui code. Use when user asks "vapor-ui components", "vapor-ui icons", "아이콘 찾기", "vapor-ui 사용법", "vapor-ui를 사용해서 시안 구현", "convert figma", "figma to code", "implement design from figma", provides a Figma URL, or mentions specific components like "Button", "Input", "Modal".

ux-visualizer

16
from diegosouzapw/awesome-omni-skill

Analyzes source code or requirements to generate high-fidelity screen and state transition diagrams. Specialized in SPA state mapping.

ux-ui-exp

16
from diegosouzapw/awesome-omni-skill

UI/UX design intelligence with Bootstrap 5, Font Awesome, SweetAlert2. Use: /ux-ui-exp {command}

ux-spec-author

16
from diegosouzapw/awesome-omni-skill

Converts UX/design intent into testable design specifications that feed requirements. Use when defining user flows, accessibility, or design constraints.

ux-expert-dialogue

16
from diegosouzapw/awesome-omni-skill

Runs interactive expert review sessions where a senior UX composite persona (Nielsen, Krug, Kahneman, Cialdini, Ilincev) challenges decisions, provides direct critique with data-backed reasoning, and brainstorms alternatives section-by-section. Use when creating a new website/landing page and need expert challenge, want section-by-section review with quantified impact estimates, need an opponent who questions assumptions, brainstorming design alternatives, or preparing for major redesign or launch. Trigger phrases include "expert review", "critique my design", "challenge my assumptions", "section-by-section review". NOT for quick fixes with known solutions (use ux-optimization), implementing proven patterns directly, or when you want agreement rather than challenge.