Menu
Compare multiple UI options in-browser with the ui.sh picker.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
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).