| name | svelte-frontend |
| description | Svelte coding guidelines for the Windmill frontend. MUST use when writing or modifying code in the frontend directory. |
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.
Windmill UI Components (MUST use)
Always use Windmill's design-system components. Never use raw HTML elements.
Buttons — <Button>
<script>
import { Button } from '$lib/components/common'
import { ChevronLeft } from 'lucide-svelte'
</script>
<Button variant="default" onclick={handleClick}>Label</Button>
<Button startIcon={{ icon: ChevronLeft }} iconOnly onclick={prev} />
Props: variant?: 'accent' | 'accent-secondary' | 'default' | 'subtle', unifiedSize?: 'sm' | 'md' | 'lg', startIcon?: { icon: SvelteComponent }, iconOnly?: boolean, disabled?: boolean
Text inputs — <TextInput>
<script>
import { TextInput } from '$lib/components/common'
</script>
<TextInput bind:value={val} placeholder="Enter value" />
Props: value?: string | number (bindable), placeholder?: string, disabled?: boolean, error?: string | boolean, size?: 'sm' | 'md' | 'lg'
Selects — <Select>
<script>
import Select from '$lib/components/select/Select.svelte'
</script>
<Select items={[{ label: 'Jan', value: 1 }]} bind:value={selected} />
Props: items?: Array<{ label?: string; value: any }>, (bindable), , ,
