# Kiln UI

Build or change anything under app/web_ui with Kiln's house controls and styles only.

- Repository: https://github.com/Kiln-AI/Kiln (5247 stars)
- Category: Writing
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add Kiln-AI/Kiln --skill kiln-ui -g -a claude-code -y`
Codex: `npx skills add Kiln-AI/Kiln --skill kiln-ui -g -a codex -y`
Cursor: `npx skills add Kiln-AI/Kiln --skill kiln-ui -g -a cursor -y`
Gemini CLI: `npx skills add Kiln-AI/Kiln --skill kiln-ui -g -a gemini-cli -y`

## Description

Build or change anything under app/web_ui 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# kiln-ui: house controls or justify

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 next screen copies it. This skill exists because that happened repeatedly on the eval builder while every unit passed review and visual sign-off. The fix is not "read the guide harder": it is to write down which control each element is, before code, and to prove it at handback in a form that does not need eyes.

For code structure (stores, API calls, module layout), also follow `kiln-conventions` → `references/web_ui.md` (`.agents/skills/kiln-conventions/references/web_ui.md`).

## 0. Read, every time (5 minutes)

1. `.agents/frontend_design_guide.md` and `.agents/frontend_controls.md`.
2. `.agents/card_style.md` and `.agents/tables_style.md`.
3. The control list below. Open the source of every control you plan to use; the props are the contract.

## 1. The house controls and when each is the answer

The rest: https://github.com/Kiln-AI/Kiln/blob/HEAD/.agents/skills/kiln-ui/SKILL.md