GSAP in Vue, Nuxt and Svelte
greensock/gsap-skills
Shows how to use GSAP in Vue, Nuxt, Svelte and other lifecycle-based frameworks: create after mount, scope selectors to the component, and revert on unmount.
Build or change anything under app/webui with Kiln's house controls and styles only.
Install Kiln UI
$ npx skills add Kiln-AI/Kiln --skill kiln-ui -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Kiln-AI/Kiln kiln-ui --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/Kiln-AI/Kiln.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/kiln-ui .claude/skills/kiln-ui && 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 "kiln-ui" agent skill from https://github.com/Kiln-AI/Kiln/tree/main/.agents/skills/kiln-ui into .claude/skills/kiln-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "kiln-ui", 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/Kiln-AI/Kiln/tree/main/.agents/skills/kiln-uiType 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 Kiln-AI/Kiln --skill kiln-ui -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Kiln-AI/Kiln kiln-ui --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Kiln-AI/Kiln.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/kiln-ui .agents/skills/kiln-ui && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "kiln-ui" agent skill from https://github.com/Kiln-AI/Kiln/tree/main/.agents/skills/kiln-ui into .agents/skills/kiln-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "kiln-ui", 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 Kiln-AI/Kiln --skill kiln-ui -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Kiln-AI/Kiln kiln-ui --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Kiln-AI/Kiln.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/kiln-ui .cursor/skills/kiln-ui && 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 "kiln-ui" agent skill from https://github.com/Kiln-AI/Kiln/tree/main/.agents/skills/kiln-ui into .cursor/skills/kiln-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "kiln-ui", 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/Kiln-AI/Kiln.git --path .agents/skills/kiln-ui--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 Kiln-AI/Kiln --skill kiln-ui -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Kiln-AI/Kiln kiln-ui --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Kiln-AI/Kiln.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/kiln-ui .gemini/skills/kiln-ui && 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 "kiln-ui" agent skill from https://github.com/Kiln-AI/Kiln/tree/main/.agents/skills/kiln-ui into .gemini/skills/kiln-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "kiln-ui", 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 Kiln-AI/Kiln kiln-uiInstalls 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 Kiln-AI/Kiln --skill kiln-ui -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Kiln-AI/Kiln.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/kiln-ui .github/skills/kiln-ui && 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 "kiln-ui" agent skill from https://github.com/Kiln-AI/Kiln/tree/main/.agents/skills/kiln-ui into .github/skills/kiln-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "kiln-ui", 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 Kiln-AI/Kiln --skill kiln-ui -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Kiln-AI/Kiln kiln-ui --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Kiln-AI/Kiln.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/kiln-ui .opencode/skills/kiln-ui && 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 "kiln-ui" agent skill from https://github.com/Kiln-AI/Kiln/tree/main/.agents/skills/kiln-ui into .opencode/skills/kiln-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "kiln-ui", 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
kiln-ui- GitHub stars
- 5.2k
- Token cost
- ~2.9k tokens
- SKILL.md length
- 1,442 words
- Files
- 3
- Skills in repo
- 14
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
Build or change anything under app/webui with Kiln's house controls and styles only.
- Works in 8 steps: Read, every time (5 minutes) → The house controls and when each is the… → Component plan, before code (required) → …
- Tasks that involve Frontend development
- SKILL.md covers 0. Read, every time (5 minutes), 1. The house controls and when…, 2. Component plan, before code… and 3. Build rules, plus 4 more sections
- Runs Shell scripts from its folder; calls bash
What it does
Kiln UI is an agent skill from Kiln-AI/Kiln. Build or change anything under app/webui with Kiln's house controls and styles only. Invoke before touching any .svelte file, and before writing a task that names a screen, dialog, card, form, button, header or progress state. Produces a component plan, a sibling-screen comparison, a gate run and a handback a reviewer can verify without looking at pixels.
Its SKILL.md is about 2.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `ui_gate.sh`).
It sits in AI & LLM Engineering, covering Frontend development. It works with Svelte. The repository describes itself as: Build, Evaluate, and Optimize AI Systems. Includes evals, RAG, agents, fine-tuning, synthetic data generation, dataset management, MCP, and more.
When your agent uses it
- Tasks that involve Frontend development
Example prompts
- “/kiln-ui”
Requirements
- A Bash shell
- Pre-approved tools (allowed-tools): Read, Grep, Glob, Bash
Workflow steps
8 steps, taken from the step headings in SKILL.md.
- Read, every time (5 minutes)
- The house controls and when each is the answer
- Component plan, before code (required)
- Build rules
- Shared controls are a separate change
- Gate, on the diff (required)
- Review lens: house control or justify
- Handback contract (the reviewer signs off on these, not on pixels)
What it can do on your machine
Read from SKILL.md and the folder at commit 8ac9075. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
ReadGrepGlobBash
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships script files (Shell), which the agent can run.
Shell commands in SKILL.md call:
bash
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
Kiln UI loads about 2.9k tokens when it runs. Until then it costs about 92 tokens; SKILL.md has 1,442 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: notes
The automated check noted patterns worth knowing about, such as sudo or a known installer.
- NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
allowed-tools: Read, Grep, Glob, Bash
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
Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 1,442 words (~2,949 tokens).
“Kiln screens are built from a small set of shared controls and DaisyUI classes. A screen assembled from Tailwind copied off a house control looks right in a screenshot and wrong next to the rest of the app, and the…”
- name
- kiln-ui
- allowed-tools
- Read, Grep, Glob, Bash
Files
SKILL.md and 2 other files in .agents/skills/kiln-ui of Kiln-AI/Kiln.
- SKILL.md
- ui_gate.sh
- ui_gate_allow.txt
Open the folder on GitHubat commit 8ac9075
Compare with similar skills
Kiln UI 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 |
|---|---|---|---|---|---|---|
| Kiln UI this skillKiln-AI/Kiln | 5.2k | — | ~2.9k | Automated safety check: Notes | Custom licence | |
| GSAP in Vue, Nuxt and Sveltegreensock/gsap-skills | 16k | 3 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Svelte Core Best Practicesrilldata/rill | 2.9k | 4 repos | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| Uncodixfypdsuwwz/chatgpt-vue3-light-mvp | 579 | 2 repos | ~3k | Automated safety check: Pass | MIT | |
| Design StyleCastor6/tactus | 376 | 1 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Windmill Svelte Frontend Patternswindmill-labs/windmill | 18k | — | ~1.5k | Automated safety check: Pass | Custom licence |
Similar skills
Svelte Core Best Practices
rilldata/rill
Rules for writing idiomatic Svelte 5 code: when to reach for runes like state, derived and effect, and how to handle props, attachments and bindings.
Uncodixfy
pdsuwwz/chatgpt-vue3-light-mvp
Prevents generic AI/Codex UI patterns when generating frontend code.
Design Style
Castor6/tactus
A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.
Windmill Svelte Frontend Patterns
windmill-labs/windmill
Enforces Windmill-specific Svelte habits: reuse one of 1,600+ existing components, follow the brand guidelines by section, and never fall back to raw HTML elements.
Frontend UI Foundry
jiushiwon/wg-skills
A skill your agent uses when generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D), when refactoring an existing HTML/Vue/React project to a unified design system, when extracting…
More from Kiln-AI/Kiln
All 14 skills in this repoKiln Check Deprecation
Kiln-AI/Kiln
Check Kiln's model list for deprecated or sunset models across all providers.
Kiln Check Finetune Deprecation
Kiln-AI/Kiln
Check Kiln's fine-tunable model list for deprecated or unsupported base models.
Release Digest
Kiln-AI/Kiln
Post a "what's changed since the last release" recap to the release Slack channel for final QA.
Kiln Conventions
Kiln-AI/Kiln
Kiln's code conventions and per-area gotchas, plus a diff gate that enforces the mechanical ones.
Playwright
Kiln-AI/Kiln
Look at Kiln's UI in a real browser, and run its end-to-end tests.
Open PR
Kiln-AI/Kiln
Open a pull request on the Kiln repo for a human to complete.
Related
Works with
Categories
Questions about Kiln UI
What does Kiln UI do?
Build or change anything under app/webui with Kiln's house controls and styles only. Kiln UI is an agent skill from Kiln-AI/Kiln. Build or change anything under app/webui with Kiln's house controls and styles only.
When should I use Kiln UI?
Kiln UI fits situations like: tasks that involve Frontend development.
How do I install Kiln UI in Claude Code?
Run `npx skills add Kiln-AI/Kiln --skill kiln-ui -a claude-code`. Or copy the skill folder (.agents/skills/kiln-ui in Kiln-AI/Kiln) into .claude/skills/kiln-ui in your project. Claude Code loads it when a task matches its description.
How do I install Kiln UI in Codex?
Run `npx skills add Kiln-AI/Kiln --skill kiln-ui -a codex`. Or copy the skill folder (.agents/skills/kiln-ui in Kiln-AI/Kiln) into .agents/skills/kiln-ui in your project. Codex loads it when a task matches its description.
Can I use Kiln UI 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 Kiln-AI/Kiln --skill kiln-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/kiln-ui, .gemini/skills/kiln-ui, .github/skills/kiln-ui and .opencode/skills/kiln-ui in your project.
What does Kiln UI need to run?
Going by SKILL.md and its folder, Kiln UI needs a shell for the scripts in its folder and the command-line tools its instructions call (bash). Our summary lists: A Bash shell. Its frontmatter pre-approves these tools: Read, Grep, Glob, Bash.
Does Kiln UI 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 Kiln UI safe to install?
Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
What licence does Kiln UI use?
Kiln UI has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does Kiln UI use?
About 2.9k tokens (SKILL.md is roughly 12k 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 Kiln UI?
Skills that share tags, products or a category with Kiln UI: GSAP in Vue, Nuxt and Svelte (greensock/gsap-skills, 16k stars), Svelte Core Best Practices (rilldata/rill, 2.9k stars), Uncodixfy (pdsuwwz/chatgpt-vue3-light-mvp, 579 stars) and Design Style (Castor6/tactus, 376 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Kiln UI?
Kiln-AI (a GitHub organization) maintains it in Kiln-AI/Kiln, which has 5,181 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on October 9, 2026.
Source: Kiln-AI/Kiln on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.