Agent skill

Ktui Install

Install, configure, and initialize KtUI (Keenthemes Tailwind UI) in any project.

Install Ktui Install

skills CLI

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

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

GitHub CLI

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

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-install -a codex

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

GitHub CLI

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

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

GitHub CLI

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

--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-install -a gemini-cli

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

GitHub CLI

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

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

At a glance

Install, configure, and initialize KtUI (Keenthemes Tailwind UI) in any project.

Works in 8 steps: Install the package → Tailwind CSS config → Import styles → …
Setting up KtUI for the first time
SKILL.md covers 1. Install the package, 2. Tailwind CSS config, 3. Import styles and 4. Import and initialize…, plus 5 more sections
Calls npm

What it does

Ktui Install is an agent skill from keenthemes/ktui. Install, configure, and initialize KtUI (Keenthemes Tailwind UI) in any project. Use this skill when setting up KtUI for the first time, adding it to a new project, configuring Tailwind for KtUI, or troubleshooting initialization issues.

Its SKILL.md is about 990 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 Frontend & Design, covering CSS and styling and Theming and dark mode. It works with Tailwind CSS. 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

Setting up KtUI for the first time
Adding it to a new project
Configuring Tailwind for KtUI
Troubleshooting initialization issues

Example prompts

“/ktui-install”

Requirements

Node.js

Workflow steps

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

Install the package
Tailwind CSS config
Import styles
Import and initialize components
TypeScript types
CSS variables (theming)
Dark mode setup
Troubleshooting

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
Shell commands in SKILL.md call:
- npm
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 Install loads about 994 tokens when it runs. Until then it costs about 63 tokens; SKILL.md has 256 words of instructions outside code blocks.

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

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). 256 words, ~994 tokens.

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

name: ktui-install
description: Install, configure, and initialize KtUI (Keenthemes Tailwind UI) in any project. Use this skill when setting up KtUI for the first time, adding it to a new project, configuring Tailwind for KtUI, or troubleshooting initialization issues.

KtUI Installation & Setup

1. Install the package

bash

npm install @keenthemes/ktui

2. Tailwind CSS config

Add KtUI source paths to your Tailwind content array so Tailwind scans KtUI classes:

// tailwind.config.js
module.exports = {
  content: [
    './node_modules/@keenthemes/ktui/src/**/*.{ts,js}',
    // your app files...
  ],
};

3. Import styles

Import KtUI's built-in CSS (or use your own build of the source):

import '@keenthemes/ktui/dist/styles.css';

4. Import and initialize components

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

// Call once after DOM is ready
KTComponents.init();

Per-framework placement

Framework	Where to call `KTComponents.init()`
Vanilla JS	`DOMContentLoaded` listener or `<script>` at bottom of `<body>`
React	`useEffect(() => { KTComponents.init(); }, [])`
Vue 3	`onMounted(() => { KTComponents.init(); })`
Next.js	Inside a client component's `useEffect` (never during SSR)
Nuxt	Inside `onMounted` or a client-only plugin
Laravel Livewire	Automatic — `livewire:navigate` triggers re-init

SSR safety

Never call init() during server-side rendering. Guard with:

if (typeof window !== 'undefined') {
  KTComponents.init();
}

Dynamic content (SPAs, lazy-loaded views)

After injecting new KtUI markup (route change, AJAX-loaded modal, etc.), re-initialize:

// Re-init everything (safe — existing instances are skipped)
KTComponents.init();

// Or per-component
import { KTModal } from '@keenthemes/ktui';
KTModal.init();

5. TypeScript types

All config and interface types are exported from the package root — no deep paths:

import type {
  KTModalConfigInterface,
  KTDataTableConfigInterface,
  KTDropdownConfigInterface,
  KTSelectConfigInterface,
  KTToastConfigInterface,
  // ... etc
} from '@keenthemes/ktui';

6. CSS variables (theming)

KtUI requires CSS custom variables defined on :root. At minimum:

css

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(14.1% 0.005 285.823);
  --primary: oklch(62.3% 0.214 259.815);
  --primary-foreground: oklch(1 0 0);
  --border: oklch(92% 0.004 264.531);
  --radius: 0.5rem;
}

See the ktui skill or ktui.io/docs/theming for the full variable list.

7. Dark mode setup

Add the Tailwind dark variant:

css

@custom-variant dark (&:is(.dark *));

Override the same CSS variables under .dark:

css

.dark {
  --background: oklch(14.1% 0.005 285.823);
  --foreground: oklch(98.5% 0 0);
  --primary: oklch(70.7% 0.165 254.624);
  --primary-foreground: oklch(14.1% 0.005 285.823);
}

Toggle .dark on <html> or use the KTThemeSwitch component.

8. Troubleshooting

Problem	Cause	Fix
Components not interactive	`init()` not called	Call `KTComponents.init()` after DOM ready
Tailwind classes not applied	Missing content path	Add `ktui/src/**` to Tailwind config
Styles look broken	CSS variables not defined	Define required variables on `:root`
SSR hydration mismatch	`init()` on server	Guard with `typeof window !== 'undefined'`
Re-init after navigation	SPA didn't re-init	Call `KTComponents.init()` after route change

Documentation

Installation: ktui.io/docs/installation
Theming: ktui.io/docs/theming
Dark mode: ktui.io/docs/dark-mode
TypeScript: ktui.io/docs/typescript

Files

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

Open the folder on GitHubat commit 74a8e60

Compare with similar skills

Ktui Install 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 Install compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Ktui Install this skillkeenthemes/ktui	151	—	~994	Automated safety check: Pass	MIT	3 mo ago
Tailwindcss Developmentanonaddy/anonaddy	4.9k	10 repos	~865	Automated safety check: Pass	MIT	2 days ago
UI StylingOhh-889/skyroc	795	13 repos	~2.5k	Automated safety check: Pass	MIT	1 mo ago
MCP Developmentcoollabsio/coolify	63k	1 repos	~949	Automated safety check: Pass	MIT	today
DaisyUI 5 Color Rulessaadeghi/daisyui	43k	—	~1.7k	Automated safety check: Pass	MIT	today
Tailwind Theme Builderjezweb/claude-skills	1.1k	1 repos	~3.2k	Automated safety check: Pass	MIT	3 days ago

Similar skills

Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
4.9k GitHub starsUsed in 10 repos~865 tokens
Frontend & DesignAuto-check passed
UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
795 GitHub starsUsed in 13 repos~2.5k tokens
Frontend & DesignAuto-check passed
MCP Development
coollabsio/coolify
A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.
63k GitHub starsUsed in 1 repo~949 tokens
Frontend & DesignAuto-check passed
DaisyUI 5 Color Rules
saadeghi/daisyui
Rules for using daisyUI 5's semantic color names, such as primary and base-100, so interfaces stay readable across themes.
43k GitHub stars~1.7k tokensUpdated today
Frontend & DesignAuto-check passed
Tailwind Theme Builder
jezweb/claude-skills
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. An agent skill from jezweb/claude-skills.
1.1k GitHub starsUsed in 1 repo~3.2k tokens
Frontend & DesignAuto-check passed
Ask Sonner
leepokai/Codync
Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and…
182 GitHub starsUsed in 4 repos~1.8k tokens
Frontend & DesignAuto-check: warnings

Questions about Ktui Install

What does Ktui Install do?

Install, configure, and initialize KtUI (Keenthemes Tailwind UI) in any project. Ktui Install is an agent skill from keenthemes/ktui. Install, configure, and initialize KtUI (Keenthemes Tailwind UI) in any project.

When should I use Ktui Install?

Ktui Install fits situations like: setting up KtUI for the first time; adding it to a new project; configuring Tailwind for KtUI; troubleshooting initialization issues.

How do I install Ktui Install in Claude Code?

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

How do I install Ktui Install in Codex?

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

Can I use Ktui Install 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-install -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-install, .gemini/skills/ktui-install, .github/skills/ktui-install and .opencode/skills/ktui-install in your project.

What does Ktui Install need to run?

Going by SKILL.md and its folder, Ktui Install needs the command-line tools its instructions call (npm). Our summary lists: Node.js.

Does Ktui Install 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 Install 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 Install use?

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

About 994 tokens (SKILL.md is roughly 4k 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 Install?

Skills that share tags, products or a category with Ktui Install: Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), UI Styling (Ohh-889/skyroc, 795 stars), MCP Development (coollabsio/coolify, 63k stars) and DaisyUI 5 Color Rules (saadeghi/daisyui, 43k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ktui Install?

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 Install

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

KtUI Installation & Setup

1. Install the package

2. Tailwind CSS config

3. Import styles

4. Import and initialize components

Per-framework placement

SSR safety

Dynamic content (SPAs, lazy-loaded views)

5. TypeScript types

6. CSS variables (theming)

7. Dark mode setup

8. Troubleshooting

Documentation

Files

Compare with similar skills

Similar skills

More from keenthemes/ktui

Related

Questions about Ktui Install