Agent Skills › fmaclen/canutin › svelte5

svelte5

GitHub

定义Svelte 5代码库的前端编写规范，涵盖Runes状态管理、事件处理、内容传递及导航最佳实践。

.agents/skills/svelte5/SKILL.md fmaclen/canutin

Trigger Scenarios

前端开发代码审查

Install

npx skills add fmaclen/canutin --skill svelte5 -g -y

More Options

Non-standard path

npx skills add https://github.com/fmaclen/canutin/tree/master/.agents/skills/svelte5 -g -y

Use without installing

npx skills use fmaclen/canutin@svelte5

指定 Agent (Claude Code)

npx skills add fmaclen/canutin --skill svelte5 -a claude-code -g -y

安装 repo 全部 skill

npx skills add fmaclen/canutin --all -g -y

预览 repo 内 skill

npx skills add fmaclen/canutin --list

SKILL.md

Frontmatter

{
    "name": "svelte5",
    "description": "Frontend writing conventions in this Svelte 5 codebase"
}

Svelte 5 Conventions

Overview

This project uses Svelte 5 with runes. Never use Svelte 4 patterns.

Runes (State Management)

Rune	Purpose	Replaces
`$state()`	Reactive variable	`let x = 0`
`$derived()`	Computed value	`$: x = y * 2`
`$effect()`	Side effects	`onMount`, `$: { }`
`$props()`	Component props	`export let`

Event Handling

Event handlers are properties:

onclick={handler}
oninput={handler}
onsubmit={handler}

For custom events, pass callback props.

Content Passing (Snippets)

Render passed-in content with snippets:

{@render children?.()} for default content
{#snippet name()}...{/snippet} for named blocks

Access default content via children prop:

let {children} = $props();
{@render children?.()}

Navigation

Always use resolve() with goto() for static paths:

import { goto } from '$app/navigation';
import { resolve } from '$app/paths';

goto(resolve('/accounts')); // Correct
goto('/accounts'); // Wrong - won't work with base paths

For dynamic URLs (e.g., from sessionStorage), resolve() can't be used. Disable the lint rule with explanation:

// eslint-disable-next-line svelte/no-navigation-without-resolve -- dynamic URL from sessionStorage
goto(storedUrl);

Reactivity style

Use runes for all component state - $state, $derived, $effect, $props.
Prefer reactive dependencies ($effect, $derived) over imperative setTimeout / setInterval.