/frontend dev (HTML/CSS)・founder/decentralized data wrangler /blockhead・contributor /ethglobal /walletbeat・hackathon bounty hunter・music maker・dropout・nomad・25

Claude is getting quite decent at it. Still not perfect – needs a bit of nudging from system prompts, especially for the more recent syntax additions.

Someone made a test suite called SvelteBench if you want to follow along:

This is mine:

For Svelte:
• keep value of `$state()` and `$derived()` indented on their own line
• preserve existing double line breaks before comments in `<script>`
• within `<script>`, annotate and order groups of imports and local definitions into sections as follows: Types/constants, Props, Functions, State, Actions, Components, Styles, Transitions/animations
• within a section, sort imports by path, with types placed before values
• always order as `<script>`, `<svelte:head>`, template markup, and `<style>`, with two empty lines between each
• prefer `let { ... }: { ... } = $props()` over `let { ... } = $props<{ ... }>()`; comma after every destructured prop (except ...rest prop)
• prefer inlining logic and derived variables that are only used once into the markup using `{@const}`
• {@const} must be the immediate child of {#snippet}, {#if}, {:else if}, {:else}, {#each}, {:then}, {:catch}, <svelte:fragment>, <svelte:boundary> or <Component>

Do you have any CLAUDE.md or other rules setup for svelte ?

Claude is getting quite decent at it. Still not perfect – needs a bit of nudging from system prompts, especially for the more recent syntax additions.

Someone made a test suite called SvelteBench if you want to follow along:

https://khromov.github.io/svelte-bench/benchmark-results-merged.html

https://github.com/khromov/svelte-bench

yea as long as you feed it the proper context for svelte 5. without it, it defaults to svelte 4.