ReddRadar
Agent skill
svelte-components
Use this skill when writing Svelte 5 components — using runes ($state, $derived, $effect, $props), handling events, composing with snippets ({@render}), or integrating with shadcn-svelte. Apply when creating new components, refactoring to Svelte 5 patterns, or debugging reactivity issues in the frontend.
Install this agent skill to your Project
npx add-skill https://github.com/exceptionless/Exceptionless/tree/main/.agents/skills/svelte-components
SKILL.md
Svelte Components
Documentation: svelte.dev | Use
context7for API reference
Visual Validation with Chrome MCP
Always verify UI changes visually using the Chrome MCP:
- After making component changes, use Chrome MCP to take a snapshot or screenshot
- Verify the component renders correctly and matches expected design
- Test interactive states (hover, focus, disabled) when applicable
- Check responsive behavior at different viewport sizes
- Default to the
/nextsite path for verification
This visual validation loop catches styling issues, layout problems, and accessibility regressions that automated tests may miss.
File Organization
Naming Conventions
- kebab-case for all component files:
stack-status-badge.svelte,user-profile-card.svelte - Co-locate with feature slice, aligned with API controllers
Directory Structure
src/lib/features/
├── organizations/ # Matches OrganizationController
│ ├── components/
│ │ ├── organization-card.svelte
│ │ └── organization-switcher.svelte
│ ├── api.svelte.ts
│ ├── models.ts
│ └── schemas.ts
├── stacks/ # Matches StackController
│ └── components/
│ └── stack-status-badge.svelte
└── shared/ # Shared across features
└── components/
├── data-table/
├── navigation/
└── typography/
Always Use shadcn-svelte Components
Never use native HTML for buttons, inputs, or form elements:
<script lang="ts">
import { Button } from '$comp/ui/button';
import { Input } from '$comp/ui/input';
import * as Card from '$comp/ui/card';
</script>
<!-- ✅ Use shadcn components -->
<Card.Root>
<Card.Header>
<Card.Title>Settings</Card.Title>
</Card.Header>
<Card.Content>
<Input placeholder="Enter value" />
</Card.Content>
<Card.Footer>
<Button>Save</Button>
</Card.Footer>
</Card.Root>
<!-- ❌ Never use native HTML -->
<button class="...">Save</button>
<input type="text" />
Runes
$state - Reactive State
<script lang="ts">
let count = $state(0);
let user = $state<User | null>(null);
let items = $state<string[]>([]);
</script>
$derived - Computed Values
<script lang="ts">
let count = $state(0);
let doubled = $derived(count * 2);
let isEven = $derived(count % 2 === 0);
// Complex derived
let summary = $derived.by(() => {
return items.filter(i => i.active).map(i => i.name).join(', ');
});
</script>
$effect - Side Effects
<script lang="ts">
let searchTerm = $state('');
$effect(() => {
console.log('Search term changed:', searchTerm);
return () => console.log('Cleaning up');
});
</script>
Props
<script lang="ts">
interface Props {
name: string;
count?: number;
onUpdate?: (value: number) => void;
children?: import('svelte').Snippet;
}
let { name, count = 0, onUpdate, children }: Props = $props();
</script>
Event Handling
Use onclick instead of on:click:
<Button onclick={() => handleClick()}>Click me</Button>
<Input oninput={(e) => (value = e.currentTarget.value)} />
Snippets (Content Projection)
Replace <slot> with snippets. From src/Exceptionless.Web/ClientApp/src/routes/(auth)/login/+page.svelte:
<form.Subscribe selector={(state) => state.errors}>
{#snippet children(errors)}
<ErrorMessage message={getFormErrorMessages(errors)}></ErrorMessage>
{/snippet}
</form.Subscribe>
<form.Field name="email">
{#snippet children(field)}
<Field.Field data-invalid={ariaInvalid(field)}>
<Field.Label for={field.name}>Email</Field.Label>
<Input
id={field.name}
value={field.state.value}
oninput={(e) => field.handleChange(e.currentTarget.value)}
/>
<Field.Error errors={mapFieldErrors(field.state.meta.errors)} />
</Field.Field>
{/snippet}
</form.Field>
Class Merging
Use array syntax for conditional classes:
<div class={['flex items-center', expanded && 'bg-muted', className]}>
Content
</div>
<Button class={['w-full', isActive && 'bg-primary']}>Save</Button>
Keyboard Accessibility
All interactive components must be keyboard accessible:
- Use
Buttoncomponent (provides focus handling automatically) - Ensure custom interactions have
tabindexand keyboard handlers - Test with keyboard-only navigation
See accessibility for WCAG guidelines.
Imports
<script lang="ts">
// Use $app/state instead of $app/stores
import { page } from '$app/state';
// Access page data
let currentPath = $derived(page.url.pathname);
</script>
References
- shadcn-svelte — UI component patterns and trigger snippets
- accessibility — WCAG guidelines and keyboard navigation
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
exceptionless/Exceptionless
foundatio-repositories
exceptionless/Exceptionless
releasenotes
Generate formatted changelogs from git history since the last release tag. Use when preparing release notes that categorize changes into breaking changes, features, fixes, and other sections.
exceptionless/Exceptionless
e2e-testing
Use this skill when writing or running end-to-end browser tests with Playwright. Covers Page Object Model patterns, selector strategies (data-testid, getByRole, getByLabel), fixtures, and accessibility audits with axe-playwright. Apply when adding E2E test coverage, debugging flaky tests, or testing user flows through the browser.
exceptionless/Exceptionless
tanstack-query
Use this skill when fetching data, managing server state, or handling API mutations in the Svelte frontend. Covers createQuery, createMutation, query keys, cache invalidation, optimistic updates, and WebSocket-driven refetching. Apply when adding API calls, managing loading/error states, or coordinating cache updates after mutations.
exceptionless/Exceptionless
dogfood
Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.
exceptionless/Exceptionless
storybook
Use this skill when creating or updating Storybook stories for Svelte components. Covers Svelte CSF story format, defineMeta, argTypes, snippet-based customization, and autodocs. Apply when adding visual documentation for components, setting up story files, or running Storybook for development.
Didn't find tool you were looking for?