Agent skill

Ktui Select

KtUI Select (KTSelect) — rich searchable multi-select dropdown replacing native select.

MITAuto-check passedDevelopment

Install Ktui Select

skills CLI

$ npx skills add keenthemes/ktui --skill ktui-select -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install keenthemes/ktui ktui-select --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/keenthemes/ktui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/ktui-select .claude/skills/ktui-select && rm -rf skills-src

Use ~/.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/

Paste into Claude Code

Install the "ktui-select" agent skill from https://github.com/keenthemes/ktui/tree/main/skills/ktui-select into .claude/skills/ktui-select/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ktui-select", 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

$skill-installer install https://github.com/keenthemes/ktui/tree/main/skills/ktui-select

Type 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.

skills CLI

$ npx skills add keenthemes/ktui --skill ktui-select -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install keenthemes/ktui ktui-select --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/keenthemes/ktui.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/ktui-select .agents/skills/ktui-select && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "ktui-select" agent skill from https://github.com/keenthemes/ktui/tree/main/skills/ktui-select into .agents/skills/ktui-select/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ktui-select", 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.

skills CLI

$ npx skills add keenthemes/ktui --skill ktui-select -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install keenthemes/ktui ktui-select --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/keenthemes/ktui.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/ktui-select .cursor/skills/ktui-select && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "ktui-select" agent skill from https://github.com/keenthemes/ktui/tree/main/skills/ktui-select into .cursor/skills/ktui-select/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ktui-select", 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

$ gemini skills install https://github.com/keenthemes/ktui.git --path skills/ktui-select

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add keenthemes/ktui --skill ktui-select -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install keenthemes/ktui ktui-select --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/keenthemes/ktui.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/ktui-select .gemini/skills/ktui-select && rm -rf skills-src

Use ~/.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/

Paste into Gemini CLI

Install the "ktui-select" agent skill from https://github.com/keenthemes/ktui/tree/main/skills/ktui-select into .gemini/skills/ktui-select/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ktui-select", 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.

GitHub CLI

$ gh skill install keenthemes/ktui ktui-select

Installs 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).

skills CLI

$ npx skills add keenthemes/ktui --skill ktui-select -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/keenthemes/ktui.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/ktui-select .github/skills/ktui-select && rm -rf skills-src

Use ~/.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/

Paste into GitHub Copilot

Install the "ktui-select" agent skill from https://github.com/keenthemes/ktui/tree/main/skills/ktui-select into .github/skills/ktui-select/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ktui-select", 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.

skills CLI

$ npx skills add keenthemes/ktui --skill ktui-select -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install keenthemes/ktui ktui-select --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/keenthemes/ktui.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/ktui-select .opencode/skills/ktui-select && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "ktui-select" agent skill from https://github.com/keenthemes/ktui/tree/main/skills/ktui-select into .opencode/skills/ktui-select/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ktui-select", 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: ktui-select
GitHub stars: 151
Token cost: ~1.9k tokens
SKILL.md length: 492 words
Files: 1
Skills in repo: 4
Repo updated: Jun 17, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

KtUI Select (KTSelect) — rich searchable multi-select dropdown replacing native select.

Works in 12 steps: Basic Usage → Key Features → Global Config → …
Customizing Select components
SKILL.md covers 1. Basic Usage, 2. Key Features, 3. Global Config and 4. Programmatic API, plus 9 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Ktui Select is an agent skill from keenthemes/ktui. KtUI Select (KTSelect) — rich searchable multi-select dropdown replacing native select. Tags, combobox, remote data, pagination, select-all, events, and programmatic API. Use this skill when building, debugging, or customizing Select components.

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development. The repository describes itself as: Open-source collection of customizable UI components for Tailwind CSS and vanilla JavaScript. The licence is MIT.

When your agent uses it

Customizing Select components

Example prompts

“/ktui-select”

Workflow steps

12 steps, taken from the step headings in SKILL.md.

Basic Usage
Key Features
Global Config
Programmatic API
Events
Remote Data
Tags Mode
Combobox Mode
Select All
Keyboard Navigation
Architecture
Common Pitfalls

What it can do on your machine

Read from SKILL.md and the folder at commit 74a8e60. 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 (its code samples are typescript and html).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
- ktui.io
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

Ktui Select loads about 1.9k tokens when it runs. Until then it costs about 64 tokens; SKILL.md has 492 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~64
When it runs · the whole SKILL.md, loaded when a task matches: ~1.9k

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 keenthemes/ktui at commit 74a8e60, republished under its MIT licence (© keenthemes). 492 words, ~1,928 tokens.

Download SKILL.mdSave it as .claude/skills/ktui-select/SKILL.md (or your agent's skills folder).

name: ktui-select
description: KtUI Select (KTSelect) — rich searchable multi-select dropdown replacing native select. Tags, combobox, remote data, pagination, select-all, events, and programmatic API. Use this skill when building, debugging, or customizing Select components.

KTSelect — AI Agent Reference

Full reference for the Select component in KtUI. Package: @keenthemes/ktui. Class: KTSelect. Root attribute: data-kt-select.

Always prefer ktui.io/docs/select docs and examples over guessing markup or options.

1. Basic Usage

html

<select data-kt-select="true" data-kt-select-enable-search="true">
  <option value="">Select...</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

import { KTSelect } from '@keenthemes/ktui';

const select = KTSelect.getInstance(el);

2. Key Features

Feature	Attribute	Description
Search	`data-kt-select-enable-search="true"`	Adds search input in dropdown
Multi-select	`multiple` attribute on `<select>`	Allow multiple selections
Tags mode	`data-kt-select-tags="true"`	Shows selected items as removable tags
Combobox	`data-kt-select-combobox="true"`	Allows free text input
Remote data	`data-kt-select-remote="true"`	Load options from API
Remote URL	`data-kt-select-remote-url="..."`	API endpoint for remote data
Pagination	`data-kt-select-pagination="true"`	Adds "Load More" button
Placeholder	`data-kt-select-placeholder="Choose..."`	Placeholder text
Select all	`data-kt-select-select-all="true"`	Adds "Select All" button (multi-mode)
Close on Enter	`data-kt-select-close-on-enter="true"`	Close dropdown when Enter pressed
Close on other open	`data-kt-select-close-on-other-open="true"`	Close when another select opens
Search autofocus	`data-kt-select-search-autofocus="true"`	Focus search input on open
Dispatch global events	`data-kt-select-dispatch-global-events="true"`	Dispatch events on document

3. Global Config

Set defaults for all future instances:

KTSelect.config({
  enableSearch: true,
  searchPlaceholder: 'Type to search...',
  dropdownZindex: 9999,
  height: 300,
  closeOnEnter: true,
  closeOnOtherOpen: true,
  searchAutofocus: true,
  dispatchGlobalEvents: true,
});

4. Programmatic API

const select = KTSelect.getInstance(el);

// Dropdown control
select.openDropdown();
select.closeDropdown();
select.toggleSelection(value);

// Selection
select.getSelectedOptions();      // array of selected option objects
select.setSelectedOptions([opt]); // set selection programmatically
select.clearSelection();          // clear all

// Lifecycle
select.dispose();

Instance management

Static method	Returns
`KTSelect.getInstance(el)`	Existing instance or `null`
`KTSelect.getOrCreateInstance(el, config?)`	Existing or new instance
`KTSelect.init()`	Scans DOM, creates instances
`KTSelect.config(opts)`	Set global defaults

5. Events

Events fire through dual channel:

Internal callbacks (.on()) — bare name
DOM CustomEvents — dispatched on both element and document

Confirmed events (from source)

Event	When
`show`	Dropdown opening
`close`	Dropdown closing
`change`	Selection changed
`enabled`	Component enabled
`disabled`	Component disabled
`updated`	Options updated
`updateError`	Options update failed
`reloadStart`	Remote reload started
`reloadComplete`	Remote reload finished
`reloadError`	Remote reload failed
`refreshed`	Options refreshed
`refreshError`	Options refresh failed

Namespaced events on document

document.addEventListener('kt-select:change', (e) => {
  console.log(e.detail.instance.getSelectedOptions());
});

document.addEventListener('kt-select:show', (e) => {
  console.log('Select opened', e.detail.element);
});

Element-level events

el.addEventListener('change', (e) => {
  console.log(e.detail.instance.getSelectedOptions());
});

Event detail shape

{
  instance: KTSelect,   // the select instance
  element: HTMLElement,  // the root element
  payload: { ... }       // event-specific data
}

6. Remote Data

html

<select data-kt-select="true"
        data-kt-select-remote="true"
        data-kt-select-remote-url="https://api.example.com/options"
        data-kt-select-pagination="true">
</select>

The remote provider fetches options from the URL. Use pagination: true for paginated APIs.

7. Tags Mode

html

<select data-kt-select="true"
        data-kt-select-tags="true"
        multiple>
  <option value="1">Tag 1</option>
  <option value="2">Tag 2</option>
  <option value="3">Tag 3</option>
</select>

Selected items appear as removable tag chips. Works with search and remote data.

8. Combobox Mode

html

<input type="text"
       data-kt-select="true"
       data-kt-select-combobox="true"
       data-kt-select-remote="true"
       data-kt-select-remote-url="https://api.example.com/search" />

Allows free text input alongside selecting from dropdown options.

Show full SKILL.md (195 more words)Show less

9. Select All

html

<select data-kt-select="true"
        data-kt-select-select-all="true"
        data-kt-select-enable-search="true"
        multiple>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Adds a "Select All" button at the top of the dropdown in multi-select mode.

Key	Action
`Enter`	Select focused option, close dropdown (if `closeOnEnter` enabled)
`ArrowDown`	Focus next option
`ArrowUp`	Focus previous option
`Escape`	Close dropdown
`Backspace`	Remove last tag (tags mode)

11. Architecture

Source: src/components/select/

File	Purpose
`select.ts`	Main class — `openDropdown()`, `closeDropdown()`, `clearSelection()`, `dispose()`
`dropdown.ts`	Dropdown positioning and visibility
`search.ts`	Search input filtering
`tags.ts`	Tags mode rendering and removal
`combobox.ts`	Free text input mode
`remote.ts`	Remote data provider
`option.ts`	Option element management
`templates.ts`	HTML template generation
`config.ts`	Default config constants
`utils.ts`	Shared utilities
`types.ts`	Type definitions
`index.ts`	Barrel exports

12. Common Pitfalls

Problem	Cause	Fix
Select not searchable	Missing `enable-search` attribute	Add `data-kt-select-enable-search="true"`
No tags shown	Missing `tags` attribute	Add `data-kt-select-tags="true"`
Remote not loading	Missing remote attributes	Add both `data-kt-select-remote="true"` and `data-kt-select-remote-url="..."`
Dropdown wrong position	Container overflow hidden	Use `data-kt-dropdown-container="body"` to portal
Select All not appearing	Not in multi-mode	Add `multiple` attribute to `<select>`
Events not firing on document	`dispatchGlobalEvents` disabled	Enable via config or attribute
`shown`/`hide`/`hidden` events not working	Wrong event names	Use `show`, `close`, `change` (actual events from source)

13. Documentation

Select docs: ktui.io/docs/select
Changelog: ktui.io/docs/changelog

Files

Just SKILL.md in skills/ktui-select of keenthemes/ktui.

Open the folder on GitHubat commit 74a8e60

Compare with similar skills

Ktui Select 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.

Ktui Select compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Ktui Select this skillkeenthemes/ktui	151	—	~1.9k	Automated safety check: Pass	MIT	3 mo ago
Vercel Composition Patternssupabase/supabase	111k	58 repos	~726	Automated safety check: Pass	MIT	today
Finishing a Development Branchobra/superpowers	297k	5 repos	~1.9k	Automated safety check: Pass	MIT	today
Typescript Advanced Typesrolling-scopes/rsschool-app	10k	25 repos	~4.2k	Automated safety check: Pass	MPL-2.0	5 days ago
PR Babysitteropeninterpreter/openinterpreter	69k	3 repos	~4.2k	Automated safety check: Pass	Apache-2.0	2 days ago
Code Review ChecklistshareAI-lab/learn-claude-code	78k	5 repos	~1.1k	Automated safety check: Pass	MIT	11 days ago

Similar skills

Vercel Composition Patterns
supabase/supabase
Official
React composition patterns that scale. An agent skill from supabase/supabase.
111k GitHub starsUsed in 58 repos~726 tokens
DevelopmentAuto-check passed
Finishing a Development Branch
obra/superpowers
Walks the last step of a branch: confirm tests pass, detect the git environment, ask how to integrate, carry out your choice and clean up the worktree.
297k GitHub starsUsed in 5 repos~1.9k tokens
DevelopmentAuto-check passed
Typescript Advanced Types
rolling-scopes/rsschool-app
Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications.
10k GitHub starsUsed in 25 repos~4.2k tokens
DevelopmentAuto-check passed
PR Babysitter
openinterpreter/openinterpreter
Watches an open GitHub pull request until it merges, handling review comments, diagnosing CI failures and retrying flaky checks along the way.
69k GitHub starsUsed in 3 repos~4.2k tokens
DevelopmentAuto-check passed
Code Review Checklist
shareAI-lab/learn-claude-code
Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.
78k GitHub starsUsed in 5 repos~1.1k tokens
DevelopmentAuto-check passed
Greploop
onyx-dot-app/onyx
Iteratively improves a PR (GitHub), MR (GitLab), or shelved changelist (Perforce) until Greptile gives it a 5/5 confidence score with zero unresolved comments.
32k GitHub starsUsed in 4 repos~3.3k tokens
DevelopmentAuto-check passed

Questions about Ktui Select

What does Ktui Select do?

KtUI Select (KTSelect) — rich searchable multi-select dropdown replacing native select. Ktui Select is an agent skill from keenthemes/ktui. KtUI Select (KTSelect) — rich searchable multi-select dropdown replacing native select.

When should I use Ktui Select?

Ktui Select fits situations like: customizing Select components.

How do I install Ktui Select in Claude Code?

Run `npx skills add keenthemes/ktui --skill ktui-select -a claude-code`. Or copy the skill folder (skills/ktui-select in keenthemes/ktui) into .claude/skills/ktui-select in your project. Claude Code loads it when a task matches its description.

How do I install Ktui Select in Codex?

Run `npx skills add keenthemes/ktui --skill ktui-select -a codex`. Or copy the skill folder (skills/ktui-select in keenthemes/ktui) into .agents/skills/ktui-select in your project. Codex loads it when a task matches its description.

Can I use Ktui Select 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 keenthemes/ktui --skill ktui-select -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ktui-select, .gemini/skills/ktui-select, .github/skills/ktui-select and .opencode/skills/ktui-select in your project.

What does Ktui Select need to run?

SKILL.md names no scripts, command-line tools or credentials: Ktui Select is instructions for the agent only.

Does Ktui Select access the network?

SKILL.md names 1 domain. As links in the text: ktui.io. This is read from the text; nothing was executed.

Is Ktui Select 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 Ktui Select use?

Ktui Select 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 Ktui Select use?

About 1.9k tokens (SKILL.md is roughly 7.7k 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 Ktui Select?

Skills that share tags, products or a category with Ktui Select: Vercel Composition Patterns (supabase/supabase, 111k stars), Finishing a Development Branch (obra/superpowers, 297k stars), Typescript Advanced Types (rolling-scopes/rsschool-app, 10k stars) and PR Babysitter (openinterpreter/openinterpreter, 69k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ktui Select?

keenthemes (a GitHub organization) maintains it in keenthemes/ktui, which has 151 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on June 17, 2026.

Source: keenthemes/ktui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Ktui Select

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

KTSelect — AI Agent Reference

1. Basic Usage

2. Key Features

3. Global Config

4. Programmatic API

Instance management

5. Events

Confirmed events (from source)

Namespaced events on document

Element-level events

Event detail shape

6. Remote Data

7. Tags Mode

8. Combobox Mode

9. Select All

10. Keyboard Navigation

11. Architecture

12. Common Pitfalls

13. Documentation

Files

Compare with similar skills

Similar skills

More from keenthemes/ktui

Related

Questions about Ktui Select