Menu
Compare multiple UI options in-browser with the ui.sh picker.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Add dark mode with colors, shadows, and surfaces handled the way a designer would.
Generate a complete visual identity and marketing-site mockup board from a product idea.
Sort, normalize, deduplicate, and resolve conflicting Tailwind utility classes.
Extract and organize existing UI into reusable components with thoughtful APIs.
Create dark-mode variants of raster images for dark UI contexts.
Design and build new UI with the complete ui.sh design guideline system.
| name | ideas |
| description | Compare multiple UI options in-browser with the ui.sh picker. |
Use this when the user wants to use the ui.sh picker to see and pick between multiple UI implementations while previewing them in the browser.
data-uidotsh-pick and data-uidotsh-optionWhile running this skill, keep the user informed so longer runs do not look stuck.
Suggested phase updates:
hidden attributes, and picker wrappers/attributes that are no longer needed.Define picker decision points before coding:
Hero style, Pricing layout).(current) (for example: Minimal (current)).Annotate each decision with UI picker attributes:
data-uidotsh-pick="Human readable label"data-uidotsh-option="Human readable option"(current) in its option label.hiddencontents class to wrapper and option nodes so wrappers do not affect layoutAfter all variants are annotated, inject the toolbar script once in a shared app layout/root shell:
resources/views/layouts/app.blade.php exists, inject the script there once, right before </body>.src/routes/__root.tsx and inject the picker via the scripts array returned from the head option in createRootRoute (do not add a raw <script> tag in the route component markup).useHead composable in the root app.vue (or a layout file such as layouts/default.vue) to inject the script.index.html exists in the project root, inject the script there once, right before </body>.next/script (plain <script> in JSX can fail to execute until a full refresh in dev):import Script from 'next/script'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script src="https://ui.sh/ui-picker.js" />
</body>
</html>
)
}
</body>:<script src="https://ui.sh/ui-picker.js"></script>
Let the user preview variants in-browser with the picker toolbar.
If the toolbar cannot load (for example CSP/offline), skip preview and ask for selection in chat using labels and descriptions.
Ask for selection in the agent using the question tool:
(current) suffix in the label.Type your own answer remains available).Finalize after selection:
hidden attributes and empty wrappers created only for picker scaffolding.id attributes across surviving markup.<div data-uidotsh-pick="Hero style" class="contents">
<div data-uidotsh-option="Minimal" class="contents">...</div>
<div data-uidotsh-option="Bold" class="contents" hidden>...</div>
<div data-uidotsh-option="Editorial" class="contents" hidden>...</div>
</div>
<div data-uidotsh-pick="Hero style" className="contents">
<div data-uidotsh-option="Minimal" className="contents">
...
</div>
<div data-uidotsh-option="Bold" className="contents" hidden>
...
</div>
</div>
data-uidotsh-pick + data-uidotsh-option markers for every decision.contents class on wrapper and option nodes.(current) in its label.hidden.next/script).