# Svelte And Sveltekit General Rules

> [Applies to: **/*.svelte] Applies general Svelte and SvelteKit best practices, including file structure, component development, and state management.

- Skill: `tryboy869/svelte-and-sveltekit-general-rules` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add tryboy869/svelte-and-sveltekit-general-rules`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tryboy869/svelte-and-sveltekit-general-rules/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Tryboy869 (https://skillmd.com/u/tryboy869)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/tryboy869/svelte-and-sveltekit-general-rules

---


- Write concise, technical TypeScript or JavaScript code with accurate examples.
- Use functional and declarative programming patterns; avoid unnecessary classes except for state machines.
- Prefer iteration and modularization over code duplication.
- Structure files: component logic, markup, styles, helpers, types.
- Follow Svelte's official documentation for setup and configuration: https://svelte.dev/docs
- Use lowercase with hyphens for component files (e.g., `components/auth-form.svelte`).
- Use PascalCase for component names in imports and usage.
- Use camelCase for variables, functions, and props.
- Implement proper component composition and reusability.
- Use Svelte's props for data passing.
- Leverage Svelte's reactive declarations for local state management.
- Ensure proper semantic HTML structure in Svelte components.
- Implement ARIA attributes where necessary.
- Ensure keyboard navigation support for interactive elements.
- Use Svelte's bind:this for managing focus programmatically.
- Embrace Svelte's simplicity and avoid over-engineering solutions.
- Use SvelteKit for full-stack applications with SSR and API routes.
- Prioritize Web Vitals (LCP, FID, CLS) for performance optimization.
- Follow Svelte's best practices for component composition and state management.
- Ensure cross-browser compatibility by testing on multiple platforms.
- Keep your Svelte and SvelteKit versions up to date.