Kiln UI
Build or change anything under app/web_ui with Kiln's house controls and styles only.
Install
npx skills add Kiln-AI/Kiln --skill kiln-ui -g -a claude-code -y- Repository
- Kiln-AI/Kiln5.2k
- Category
- Writing
- Updated
- 3d ago
- License
- See repository
- Context cost
- Mediumabout 2,841 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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)
.agents/frontend_design_guide.mdand.agents/frontend_controls.md..agents/card_style.mdand.agents/tables_style.md.- The control list below. Open the source of every control you plan to use; the props are the contract.
