svelte5-best-practices
Svelte 5 runes, snippets, and SvelteKit patterns for modern component development.
- Covers all Svelte 5 runes ($state, $derived, $effect, $props, $bindable, $inspect) with reactive state and computed value patterns
- Explains snippets syntax ({#snippet}, {@render}) as the replacement for slots and slot props
- Includes event handling migration from on: directives to onclick handlers and callback props, plus SvelteKit load functions and form actions
- Provides TypeScript typing for props, generic components, and SSR state isolation patterns
- Documents Svelte 4 to 5 migration paths including stores-to-runes and slots-to-snippets conversions with common pitfalls to avoid
Svelte 5 Best Practices
Quick Reference
| Topic | When to Use | Reference |
|---|---|---|
| Runes | $state, $derived, $effect, $props, $bindable, $inspect | runes.md |
| Snippets | Replacing slots, {#snippet}, {@render} | snippets.md |
| Events | onclick handlers, callback props, context API | events.md |
| TypeScript | Props typing, generic components | typescript.md |
| Migration | Svelte 4 to 5, stores to runes | migration.md |
| SvelteKit | Load functions, form actions, SSR, page typing | sveltekit.md |
| Performance | Universal reactivity, avoiding over-reactivity, streaming | performance.md |
Essential Patterns
Reactive State
More from ejirocodes/agent-skills
nestjs-best-practices
NestJS 11+ best practices for enterprise Node.js applications with TypeScript. Use when writing, reviewing, or refactoring NestJS controllers, services, modules, or APIs. Triggers on: NestJS modules, controllers, providers, dependency injection, @Injectable, @Controller, @Module, middleware, guards, interceptors, pipes, exception filters, ValidationPipe, class-validator, class-transformer, DTOs, JWT authentication, Passport strategies, @nestjs/passport, TypeORM entities, Prisma client, Drizzle ORM, repository pattern, circular dependencies, forwardRef, @nestjs/swagger, OpenAPI decorators, GraphQL resolvers, @nestjs/graphql, microservices, TCP transport, Redis transport, NATS, Kafka, NestJS 11 breaking changes, Express v5 migration, custom decorators, ConfigService, @nestjs/config, health checks, or NestJS testing patterns.
105vue-best-practices
Vue 3 and Vue.js best practices for TypeScript, vue-tsc, Volar, and component patterns. Use when writing, reviewing, or refactoring Vue 3 components with TypeScript, configuring Volar/vueCompilerOptions, extracting component types, working with defineModel/withDefaults, setting up Pinia store tests, or debugging Vue tooling issues. Triggers on Vue components, props extraction, wrapper components, template type checking, strictTemplates, vueCompilerOptions, Volar 3, CSS modules, fallthrough attributes, defineModel, withDefaults, deep watch, vue-router typed params, Pinia mocking, HMR SSR, moduleResolution bundler, useTemplateRef, onWatcherCleanup, useId, generic components, reactive props destructure.
74exa-research
Exa.ai deep research and answer generation with citations. Use when building research automation, implementing Answer API for Q&A with sources, creating research reports, or using deep search with summaries. Triggers on: Exa Answer, answer endpoint, exa.answer, deep search, research API, Exa Research, async research, research report, citation extraction, summarization with sources, fact verification, streaming answers, research tasks.
64exa-entities
Exa.ai company and people search for lead generation, competitive intelligence, and data enrichment. Use when searching for companies, finding people profiles, building lead gen tools, or implementing Websets for data collection at scale. Triggers on: Exa company search, Exa people search, category company, lead generation, company research, profile search, LinkedIn profiles, Websets API, data enrichment, company lookup, find companies, competitive intelligence, recruiting, talent search, 1B profiles.
62exa-rag
Build RAG pipelines with Exa.ai for real-time web retrieval. Use when building retrieval-augmented generation, integrating Exa with LangChain, LlamaIndex, Vercel AI SDK, or implementing AI agents with web search capabilities. Triggers on: RAG pipeline, retrieval augmented generation, Exa LangChain, Exa LlamaIndex, ExaSearchRetriever, ExaSearchResults, Exa MCP, Exa tool calling, Claude tool use, AI agent web search, grounded generation, citation generation, fact checking, hallucination detection, OpenAI compatibility, chat completions.
60exa-search
Exa.ai search API integration for neural and keyword web search with content retrieval. Use when implementing web search features, integrating Exa SDK (exa_py, exa-js), or retrieving web content. Triggers on: Exa, exa_py, exa-js, neural search, web search API, search_and_contents, searchAndContents, find_similar, findSimilar, domain filtering, date filtering, text extraction, page summaries, highlights, search auto mode, fast search, search categories, livecrawl, excluding domains, include text, exclude text, EXA_API_KEY.
59