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 —
Props:
variant?: 'accent' | 'accent-secondary' | 'default' | 'subtle'
,
unifiedSize?: 'sm' | 'md' | 'lg'
,
startIcon?: { icon: SvelteComponent }
,
iconOnly?: boolean
,
disabled?: boolean
Text inputs —
Props: items?: Array<{ label?: string; value: any }> , value (bindable), placeholder?: string , clearable?: boolean , size?: 'sm' | 'md' | 'lg' Icons — lucide-svelte Never write inline SVGs. Import from lucide-svelte :
- Form Components
- Form components (TextInput, Toggle, Select, etc.) should use the unified size system when placed together.
- Styling
- Use Tailwind CSS for all styling — no custom CSS
- Use Windmill's theming classes for colors/surfaces (see
- frontend/brand-guidelines.md
- )
- Read component props JSDoc before using them
- Svelte MCP Server
- Use the Svelte MCP tools when working on Svelte code:
- list-sections
-
- Call first to discover available docs
- get-documentation
-
- Fetch relevant sections based on use_cases
- svelte-autofixer
-
- MUST use on all Svelte code before finalizing — keep calling until no issues
- playground-link
- Only after user confirms and code was NOT written to project files