UI Potions That Blend with Your Stack

Works with any AI coding assistant and your tools. No dependencies, no installation, no library management—just paste a link and build.

AI Agent Discovery URL:

https://uipotion.com/uipotion-manifest.json

Available Potions

Each potion is a detailed guide that AI agents can use to recreate UI components in any framework.

layouts, chat, ai, agent, conversation, messaging, responsive, a11y

A responsive AI agent chat interface layout with message history, input area, typing indicators, and conversation management. Perfect for AI assistants, chatbots, and conversational interfaces.

components, dropdown, select, combobox, listbox, form, a11y, wcag, aria, keyboard-navigation

An accessible dropdown/select component with search/filter capability, multi-select support, keyboard navigation, and full ARIA combobox/listbox pattern. Supports grouped options, loading states, and error handling.

eslint, linting, config, code-quality, developer-experience, tooling, typescript, accessibility, formatting

A comprehensive ESLint configuration generator supporting React, Vue, Angular, and Svelte with accessibility linting, TypeScript support, and Prettier integration.

validation, forms, ux, accessibility, error-handling, progressive-disclosure, patterns, user-experience

A comprehensive UX pattern for form validation covering timing strategies, error display, async validation, accessibility, and integration with form libraries.

layouts, landing-page, marketing, hero, feature-highlights, testimonials, cta, responsive, conversion

A conversion-optimized marketing landing page layout with hero section, feature highlights, social proof, and multiple CTAs. Perfect for product launches, SaaS marketing, and lead generation campaigns.

features, form, authentication, login, registration, validation, accessibility, forms

Complete authentication forms (login and registration) with real-time validation, error handling, password strength, and accessibility. Demonstrates best practices for form validation UX.

Why UI Potion?

🤖 Built for AI Agents

Guides written specifically for AI coding assistants to understand and implement, not just copy-paste code.

🎨 Works with Any Stack

React, Vue, Angular, Svelte, or any framework. AI adapts the specifications to your exact technology stack.

🚀 Zero Maintenance

No code libraries to maintain or update. Just specifications that never break when frameworks evolve.

📐 Complete Specifications

Comprehensive guides with exact dimensions, behaviors, accessibility requirements, and responsive breakpoints.

⚡ Always Current

AI generates code using the latest framework patterns and best practices, always up-to-date with your stack.

🎯 Your Styling, Your Way

Tailwind CSS, CSS Modules, Chakra UI, Material-UI, or any styling approach. AI adapts to your preferences.

How to Use

1

Find a Potion

Browse the catalog and find the UI component you need

2

Share with AI

Paste the potion URL or JSON link to your AI coding assistant

3

Customize & Generate

Tell AI your framework and styling preferences, it handles the rest