svelte-component

When creating a Svelte component, follow this template and all rules below.

Template

<script lang="ts">
    // 1. Third-party imports
    // 2. Internal imports ($lib/...)

    // Props interface — always explicit
    interface Props {
        label: string;
        disabled?: boolean;
        onclick?: () => void;
        children?: import('svelte').Snippet;
    }

    const { label, disabled = false, onclick, children }: Props = $props();