# Svelte Frontend

Svelte coding guidelines for the Windmill frontend.

- Repository: https://github.com/windmill-labs/windmill (18352 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add windmill-labs/windmill --skill svelte-frontend -g -a claude-code -y`
Codex: `npx skills add windmill-labs/windmill --skill svelte-frontend -g -a codex -y`
Cursor: `npx skills add windmill-labs/windmill --skill svelte-frontend -g -a cursor -y`
Gemini CLI: `npx skills add windmill-labs/windmill --skill svelte-frontend -g -a gemini-cli -y`

## Description

Svelte coding guidelines for the Windmill frontend. MUST use when writing or modifying code in the frontend directory.

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

# Windmill Svelte Patterns

Apply these Windmill-specific patterns when writing Svelte code in `frontend/`. For general Svelte 5 syntax (runes, snippets, event handling), use the Svelte MCP server.

## Before writing any UI (MUST)

Do both of these before the first line of markup, not after, and not only when something
looks unfamiliar.

**1. Find the component that already exists.** `frontend/src/lib/components/common/index.ts`
is the design-system barrel, 28 lines, read it in full. It exports far more than the three
documented below: `Alert`, `Badge`, `Breadcrumb`, `Drawer`/`DrawerContent`, `Menu`/`MenuItem`,
`Tabs`/`Tab`/`TabContent`, `Skeleton`, `FileInput`, `RadioCard`, `Section`, `Kbd`, `ActionRow`,
`ClearableInput`, `CopyButton`, `SecondsInput`, `UndoRedo`, `Url`.

The barrel is not the full picture either: `common/` has 34 subdirectories and only 23 exports,
so `modal/`, `popup/`, `stepper/`, `tooltip/`, `checkbox/`, `table/`, `contextmenu/`,
`confirmationModal/`, `calendarPicker/`, `fileUpload/`, `toggleButton-v2/` and more exist but
must be imported by path. Selects, text inputs and melt-based primitives sit next to `common/`
in `components/select/`, `components/text_input/`, `components/meltComponents/`.

The tree holds 1,600+ components, grep `frontend/src/lib/components` for the thing you're about
to build; it almost certainly exists. Building a new one is the last resort, not the first move.

**2. Read the guideline for what you're building.** `frontend/brand-guidelines.md` is the
authority on how it should look and read. Don't load all 34k chars, jump to the section:

The rest: https://github.com/windmill-labs/windmill/blob/HEAD/.agents/skills/svelte-frontend/SKILL.md