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 c…
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