svelte-frontend by windmill-labs/windmill
npx skills add https://github.com/windmill-labs/windmill --skill svelte-frontend在 frontend/ 目录下编写 Svelte 代码时,请应用这些 Windmill 特定的模式。对于通用的 Svelte 5 语法(如 runes、snippets、事件处理),请使用 Svelte MCP 服务器。
始终使用 Windmill 的设计系统组件。切勿使用原始的 HTML 元素。
<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} />
属性:variant?: 'accent' | 'accent-secondary' | 'default' | 'subtle', unifiedSize?: 'sm' | 'md' | 'lg', startIcon?: { icon: SvelteComponent }, iconOnly?: boolean,
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
disabled?: boolean<TextInput><script>
import { TextInput } from '$lib/components/common'
</script>
<TextInput bind:value={val} placeholder="Enter value" />
属性:value?: string | number (可绑定), placeholder?: string, disabled?: boolean, error?: string | boolean, size?: 'sm' | 'md' | 'lg'
<Select><script>
import Select from '$lib/components/select/Select.svelte'
</script>
<Select items={[{ label: 'Jan', value: 1 }]} bind:value={selected} />
属性:items?: Array<{ label?: string; value: any }>, value (可绑定), placeholder?: string, clearable?: boolean, size?: 'sm' | 'md' | 'lg'
lucide-svelte切勿编写内联 SVG。从 lucide-svelte 导入:
<script>
import { ChevronLeft, X } from 'lucide-svelte'
</script>
<ChevronLeft size={16} />
表单组件(TextInput、Toggle、Select 等)放在一起时,应使用统一的尺寸系统。
frontend/brand-guidelines.md)处理 Svelte 代码时,请使用 Svelte MCP 工具:
每周安装量
83
代码仓库
GitHub 星标
16.1K
首次出现
2026年2月13日
安全审计
安装于
github-copilot83
amp83
codex83
kimi-cli83
gemini-cli83
opencode83
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.
Always use Windmill's design-system components. Never use raw HTML elements.
<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
<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'
<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 }>, value (bindable), placeholder?: string, clearable?: boolean, size?: 'sm' | 'md' | 'lg'
lucide-svelteNever write inline SVGs. Import from lucide-svelte:
<script>
import { ChevronLeft, X } from 'lucide-svelte'
</script>
<ChevronLeft size={16} />
Form components (TextInput, Toggle, Select, etc.) should use the unified size system when placed together.
frontend/brand-guidelines.md)Use the Svelte MCP tools when working on Svelte code:
Weekly Installs
83
Repository
GitHub Stars
16.1K
First Seen
Feb 13, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
github-copilot83
amp83
codex83
kimi-cli83
gemini-cli83
opencode83
shadcn UI组件库:36个Radix UI + Tailwind CSS预构建组件,无缝集成json-render
512 周安装