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
Use when designing functions, modeling data, choosing types, drawing module boundaries, or deciding what depends on what. Use when evaluating architecture, extracting abstractions, or shaping vertical slices.
Use when writing, reviewing, or refactoring code in any language. Use for architecture decisions, system design, component boundaries, and code quality judgment. Always relevant when touching source code.
Use when writing or reviewing comments, docstrings, names, control flow, or file organization. Use when evaluating readability, choosing identifiers, splitting files, or applying naming conventions. Use when removing AI tells (slop) from code prose — comments, docs, error messages, commit messages, PR descriptions. Covers the visible surface of code.
Run kirby's review engine on a PR or a commit, OUTSIDE the orchestrator loop. Local output only — findings are presented in-conversation, nothing is posted, no Provider config needed.
Launch kirby-bot orchestrator in background, relay phase transitions live from run.jsonl.
Extract and organize existing code into reusable modules, functions, and components with thoughtful APIs.
| name | ui-sh-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).