Integrating shadcn/ui Components
google-labs-code/stitch-skills
Guides finding, installing, customizing and wiring up shadcn/ui components in a project, with MCP tools for the component catalog and registries.
Standardizes how a desktop app's UI lets a person choose one or more already-configured AI models, through a single grouped dropdown component.
Install Model Selection Component
$ npx skills add leookun/cursor-byok --skill model-selection -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install leookun/cursor-byok model-selection --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/leookun/cursor-byok.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/model-selection .claude/skills/model-selection && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "model-selection" agent skill from https://github.com/leookun/cursor-byok/tree/main/.agents/skills/model-selection into .claude/skills/model-selection/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "model-selection", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/leookun/cursor-byok/tree/main/.agents/skills/model-selectionType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add leookun/cursor-byok --skill model-selection -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install leookun/cursor-byok model-selection --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/leookun/cursor-byok.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/model-selection .agents/skills/model-selection && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "model-selection" agent skill from https://github.com/leookun/cursor-byok/tree/main/.agents/skills/model-selection into .agents/skills/model-selection/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "model-selection", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add leookun/cursor-byok --skill model-selection -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install leookun/cursor-byok model-selection --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/leookun/cursor-byok.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/model-selection .cursor/skills/model-selection && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "model-selection" agent skill from https://github.com/leookun/cursor-byok/tree/main/.agents/skills/model-selection into .cursor/skills/model-selection/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "model-selection", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/leookun/cursor-byok.git --path .agents/skills/model-selection--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add leookun/cursor-byok --skill model-selection -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install leookun/cursor-byok model-selection --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/leookun/cursor-byok.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/model-selection .gemini/skills/model-selection && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "model-selection" agent skill from https://github.com/leookun/cursor-byok/tree/main/.agents/skills/model-selection into .gemini/skills/model-selection/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "model-selection", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install leookun/cursor-byok model-selectionInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add leookun/cursor-byok --skill model-selection -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/leookun/cursor-byok.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/model-selection .github/skills/model-selection && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "model-selection" agent skill from https://github.com/leookun/cursor-byok/tree/main/.agents/skills/model-selection into .github/skills/model-selection/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "model-selection", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add leookun/cursor-byok --skill model-selection -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install leookun/cursor-byok model-selection --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/leookun/cursor-byok.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/model-selection .opencode/skills/model-selection && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "model-selection" agent skill from https://github.com/leookun/cursor-byok/tree/main/.agents/skills/model-selection into .opencode/skills/model-selection/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "model-selection", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
model-selection- GitHub stars
- 3.2k
- Token cost
- ~1.3k tokens
- SKILL.md length
- 496 words
- Files
- 1
- Skills in repo
- 7
- Repo updated
- First seen
- Licence
- MIT
At a glance
Standardizes how a desktop app's UI lets a person choose one or more already-configured AI models, through a single grouped dropdown component.
- Adding a new place in the desktop app where someone picks a configured model
- SKILL.md covers Component boundary, Option contract, Modes and Floating-menu invariants, plus 1 more section
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Building a multi-model selection filter with supplier grouping
What it does
Sets a rule for a desktop application: every place that lets someone pick from already-configured models must use one shared `ModelSelect` component rather than a generic select or a new dropdown. The component is presentation-only, so the page that embeds it owns the model and plugin state, the filtering logic, and persisting the chosen value.
Each selectable option is built with a stable identifier (a model hash for built-in models, a plugin's own id for plugin models), a display label, a supplier group name and an icon when available. Supplier order follows the order suppliers first appear in the data. Single-selection mode closes the menu immediately after a choice; multiple-selection mode supports toggling, select-all and select-none per supplier group, with an indeterminate state on a partially selected group's header checkbox.
When your agent uses it
- Adding a new place in the desktop app where someone picks a configured model
- Building a multi-model selection filter with supplier grouping
- Reviewing whether a new dropdown should reuse ModelSelect instead of a custom one
- Removing an old model-selection component once nothing references it
Example prompts
- “Add a model filter to the settings page using the shared ModelSelect component.”
- “I need multi-select for choosing which models to benchmark. Use ModelSelect in multiple mode.”
- “Delete the old provider dropdown now that commit settings use ModelSelect.”
What it can do on your machine
Read from SKILL.md and the folder at commit 9a8fde2. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Model Selection Component loads about 1.3k tokens when it runs. Until then it costs about 84 tokens; SKILL.md has 496 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from leookun/cursor-byok at commit 9a8fde2, republished under its MIT licence (© leookun). 496 words, ~1,309 tokens.
Download SKILL.mdSave it as
.claude/skills/model-selection/SKILL.md (or your agent's skills folder).- name
- model-selection
- description
- Implement and review desktop selection of configured models through the unified grouped ModelSelect component. Use when adding or changing model dropdowns, model filters, Commit model settings, single-model selection, multi-model selection, provider grouping, or configured-model option construction under apps/desktop.
Model Selection
Use one presentation component for every UI that selects from already configured models:
apps/desktop/src/
├── shared/ui/
│ ├── ModelSelect.tsx # Single/multiple selection behavior and grouped floating menu
│ └── ModelSelect.module.scss # Trigger, provider headers, checkbox rows, and footer
├── shared/utils/
│ └── modelProvider.ts # Built-in model provider display name
└── features/
├── home/ # Builds overview multi-select options
└── settings/ # Builds Commit single-select options and persists selection
server/src/
├── cursor/services/commit_message.rs # Validates built-in/plugin IDs and creates Commit invocation
├── provider/router.rs # Routes stable IDs to built-in or plugin providers
└── plugin/registry.rs # Resolves plugin model IDs and executes plugin streamsComponent boundary
- Use
ModelSelectwhen choosing one or more existing configured models. - Do not implement another model dropdown, reuse generic
Select, or add a compatibility wrapper for configured-model selection. - Keep
ModelSelectpresentation-only. Pages own model/plugin state, option construction, filtering, and persistence. - Keep editable model-ID entry in
Combobox; creating or editing a model identifier is input, not configured-model selection. - Delete replaced model-selection components, exports, styles, helpers, and compatibility paths once references are gone.
Option contract
Construct every ModelSelectOption with:
value: stable persisted/request identifier. Built-in models usemodel_hash; plugin models use plugin modelid.label: user-facing model display name.group: supplier display name.icon/iconSrc: model/provider icon when available.
For built-in models, derive group with modelProviderName(model). It uses the configured group_name first and the API hostname otherwise. For plugin models, use the localized provider display name.
Preserve source order within each supplier. The first occurrence of a supplier determines group order.
Modes
Single owner value: string
└── <ModelSelect mode="single"> ── choose one ── close ── persist
Multiple owner value: string[]
└── <ModelSelect mode="multiple"> ── toggle many ── remain open ── apply/filter- Both modes render classic checkbox controls in option rows.
- Single mode allows exactly one checked option and closes immediately after selection.
- Multiple mode supports toggling, clearing, selecting all, and selecting none.
- In multiple mode, every supplier header has a checkbox: unchecked means none selected, checked means all selected, and indeterminate means some selected. Toggling it selects or clears that supplier.
- Indent child model rows relative to their supplier header so hierarchy remains visible.
- Commit always uses single mode and includes both configured built-in and configured plugin models. Its
直连option has value"", belongs to theCursorgroup, and is the first option. - Commit settings follow the settings-card edit-state pattern: read mode shows the persisted model, Edit creates a local draft, selection only changes that draft, Cancel restores the persisted value, and Save persists once before returning to read mode.
- Persist the stable plugin model
idunchanged. Commit generation validates that identifier throughPluginRegistry, then letsProviderRouterdispatch it; do not query the built-in model table for plugin IDs. - Overview filtering uses multiple mode.
Show full SKILL.md (159 more words)Show less
Floating-menu invariants
Also apply the project floating-ui and frontend skills:
- Render the menu through a body portal and position it with
@floating-ui/dom. - Keep supplier headers and checkbox options inside the virtualized list; keep multi-select bulk actions outside it.
- Close on Escape and outside pointer interaction, then restore trigger focus.
- Preserve
aria-expanded,aria-controls,aria-haspopup, listbox semantics, and multi-select semantics. - Keep the trigger's open/focus border visible while the portaled menu owns focus.
Review checklist
- Search the repository for old model-selection components and zero-reference model option helpers; delete them instead of retaining fallbacks.
- Confirm all configured-model selectors import
shared/ui/ModelSelect. - Confirm no feature implements checkbox selection, supplier grouping, portal positioning, or bulk actions independently.
- Confirm single/multiple value types cannot be mixed.
- Confirm Commit has
直连first and cannot select multiple values. - Confirm supplier labels are based on supplier identity, not request protocol type.
- Follow the user's validation instruction; when automated tests are not requested, report manual checks without running test or build commands.
© leookun, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/model-selection of leookun/cursor-byok.
Open the folder on GitHubat commit 9a8fde2
Compare with similar skills
Model Selection Component next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Model Selection Component this skillleookun/cursor-byok | 3.2k | — | ~1.3k | Automated safety check: Pass | MIT | |
| Integrating shadcn/ui Componentsgoogle-labs-code/stitch-skills | 8.4k | 4 repos | ~2.3k | Automated safety check: Notes | Apache-2.0 | |
| Creative Tim UI Blockscreativetimofficial/ui | 12k | — | ~2.1k | Automated safety check: Notes | MIT | |
| Dashboard Builder for holaOSholaboss-ai/holaOS | 11k | — | ~6.3k | Automated safety check: Pass | Custom licence | |
| Ant Design CLIant-design/antd-skill | 136 | — | ~2.2k | Automated safety check: Pass | MIT | |
| Videoohad6k/emulo | 293 | 1 repos | ~8.3k | Automated safety check: Pass | MIT |
Similar skills
- Official
Creative Tim UI Blocks
creativetimofficial/ui
Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.
Dashboard Builder for holaOS
holaboss-ai/holaOS
Builds the visual layer of a holaOS dashboard app with TanStack Start and @holaboss/ui, starting from a bundled reference instead of a blank page.
Ant Design CLI
ant-design/antd-skill
Looks up antd component props, docs, demos and changelogs with the offline @ant-design/cli, and helps debug, migrate between versions and audit usage in a project.
Video
ohad6k/emulo
A skill your agent uses when a brief has to become a film. An agent skill from ohad6k/emulo.
UX Semantics Audit
rome-os/rome
Audit an existing UI/UX design (React/JSX/TSX components, HTML, or generated app code) against a tiered ruleset of verifiable UX principles, and produce structured, evidence-cited findings that a…
More from leookun/cursor-byok
Cursor BYOK Prefix Stability
leookun/cursor-byok
Guides changes to the cursor-byok server so provider conversation history stays append-only and each turn's history remains an exact prefix of the next, protecting prefix caches.
Cursor BYOK Database Schema
leookun/cursor-byok
Guides SQLite schema changes in the Cursor BYOK server, keeping SQLx migrations, the Rust store, API contracts and fixtures aligned.
Cursor BYOK Frontend Guide
leookun/cursor-byok
Sets the rules for building the Cursor BYOK desktop app's React and Tauri frontend, especially its HTTP boundary and component state architecture.
Cursor BYOK Desktop Release
leookun/cursor-byok
Guides releases of the Cursor BYOK desktop app on GitHub, with strict rules on who may publish and how version tags, updater manifests and signing are handled.
Desktop i18n for Cursor BYOK
leookun/cursor-byok
Rules for localizing the Cursor BYOK desktop app: the global t() function, complete locale catalogs, system-language selection and the scan-and-check commands.
Floating UI Overlays
leookun/cursor-byok
Rules for building dropdowns, popovers, tooltips and menus in the desktop app with @floating-ui/dom, covering portals, positioning, dismissal and ARIA state.
Related
Categories
Questions about Model Selection Component
What does Model Selection Component do?
Standardizes how a desktop app's UI lets a person choose one or more already-configured AI models, through a single grouped dropdown component. Sets a rule for a desktop application: every place that lets someone pick from already-configured models must use one shared `ModelSelect` component rather than a generic select or a new dropdown. The component is presentation-only, so the page that embeds it owns the model and plugin state, the filtering logic, and persisting the chosen value.
When should I use Model Selection Component?
Model Selection Component fits situations like: adding a new place in the desktop app where someone picks a configured model; building a multi-model selection filter with supplier grouping; reviewing whether a new dropdown should reuse ModelSelect instead of a custom one; removing an old model-selection component once nothing references it.
How do I install Model Selection Component in Claude Code?
Run `npx skills add leookun/cursor-byok --skill model-selection -a claude-code`. Or copy the skill folder (.agents/skills/model-selection in leookun/cursor-byok) into .claude/skills/model-selection in your project. Claude Code loads it when a task matches its description.
How do I install Model Selection Component in Codex?
Run `npx skills add leookun/cursor-byok --skill model-selection -a codex`. Or copy the skill folder (.agents/skills/model-selection in leookun/cursor-byok) into .agents/skills/model-selection in your project. Codex loads it when a task matches its description.
Can I use Model Selection Component in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add leookun/cursor-byok --skill model-selection -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/model-selection, .gemini/skills/model-selection, .github/skills/model-selection and .opencode/skills/model-selection in your project.
What does Model Selection Component need to run?
SKILL.md names no scripts, command-line tools or credentials: Model Selection Component is instructions for the agent only.
Does Model Selection Component access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Model Selection Component safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Model Selection Component use?
Model Selection Component is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Model Selection Component use?
About 1.3k tokens (SKILL.md is roughly 5.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Model Selection Component?
Skills that share tags, products or a category with Model Selection Component: Integrating shadcn/ui Components (google-labs-code/stitch-skills, 8.4k stars), Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Dashboard Builder for holaOS (holaboss-ai/holaOS, 11k stars) and Ant Design CLI (ant-design/antd-skill, 136 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Model Selection Component?
leookun (a GitHub user) maintains it in leookun/cursor-byok, which has 3,151 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on September 28, 2026.
Source: leookun/cursor-byok on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.