ui-potion-consumer

name	ui-potion-consumer
description	Discover and apply UI Potion component and layout guides, load JSON specs, and adapt them to the project's framework and styling system. Use when the user requests a UI component, layout, or feature, or provides a UI Potion URL.
license	MIT
metadata	{"author":"ui-potion","version":"1.0"}
compatibility	Requires network access to fetch https://uipotion.com manifests and guides.

UI Potion Consumer

Purpose

Use UI Potion's structured guides to implement UI components in the user's stack.

When to use

• The user asks for a UI component, layout, or feature
• The user mentions UI Potion or provides a UI Potion URL
• You need a framework-agnostic spec to implement UI

Inputs

• User intent keywords (for lookup in the index)
• Project framework and styling system
• Optional: direct guide URL or potion ID

Steps

1. Load the UI Potion manifest: https://uipotion.com/uipotion-manifest.json
2. Search the potions index: https://uipotion.com/potions-index.json
3. Fetch the guide: https://uipotion.com/potions/[category]/[id].json
4. Read aiAgentInstructions and outputConstraints (if present)
5. Detect the project's framework and styling system from the repo
6. Map the guide's specs to the project's conventions and tokens
7. Implement using only the detected framework and styling approach

Constraints

• Use only the project's existing framework and styling system
• Do not introduce new UI libraries or styling approaches
• If vanilla CSS is used, define classes in a stylesheet (no inline styles)
• If React is used, split concerns into single-purpose hooks
• Follow accessibility requirements specified by the guide

Outputs

• A component implementation adapted to the project
• Notes about any uncertain detection or assumptions