skills.rest
dragoscirjan
dragoscirjanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

lang-svelte

Standardize Svelte 4 and 5 component reactivity and state patterns.

Updated Mar 19, 2026
Search Tags:#frontend#eslint#svelte#prettier#reusability#reactivity#stores
One-click install
npx skills add https://github.com/dragoscirjan/opencode-config --skill lang-svelte
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lang-svelte
Source: https://github.com/dragoscirjan/opencode-config/tree/main/skills/lang-svelte
Command: npx skills add https://github.com/dragoscirjan/opencode-config --skill lang-svelte

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill gives you a consistent set of Svelte development standards so you can build components, manage state, and choose the right reactive patterns without guessing.

Core Features & Use Cases

  • Modern Svelte Guidance: Use rune-based reactivity for Svelte 5 and the right legacy patterns for Svelte 4.
  • Tooling Alignment: Keep code aligned with Prettier and eslint-plugin-svelte expectations.
  • State Strategy: Use stores when state must be shared across components.
  • Use Case: A developer can ask for help converting a component from older reactive syntax to modern Svelte 5 runes while keeping shared state predictable.

Quick Start

Ask the assistant to apply the lang-svelte standards to your Svelte code and remember to load clean-code alongside it.

Frequently Asked Questions about lang-svelte

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert Svelte 4 reactive declarations to Svelte 5 runes?▼

You can convert Svelte 4 reactive declarations to Svelte 5 runes by replacing legacy reactive syntax with rune-based reactivity patterns. This standardizes component reactivity while maintaining predictable shared state management through stores.

What's the best way to manage shared state across Svelte components?▼

The best way to manage shared state across Svelte components is using stores. Stores ensure cross-component state remains predictable and aligns with standardized Svelte development patterns for both Svelte 4 and Svelte 5 applications.

How do I configure Prettier and eslint-plugin-svelte for Svelte development?▼

Configuring Prettier and eslint-plugin-svelte for Svelte development requires aligning code formatting and linting rules with Svelte-specific conventions. This ensures styling and component structure adhere to standardized Svelte development patterns.

Does this Svelte pattern guidance work for both Svelte 4 and Svelte 5?▼

Yes, this Svelte pattern guidance works for both Svelte 4 and Svelte 5. It applies rune-based reactivity for Svelte 5 and appropriate legacy reactive declarations for Svelte 4 user interface implementation and styling conventions.

When should I use stores versus runes for state in Svelte?▼

Use stores when state must be shared across components, and use runes for component-level reactivity in Svelte 5. This distinction standardizes state strategy and ensures predictable cross-component state management.

Related Skills

Explore More Software Engineering Skills→
DavidTejuDavidTeju
9

svelte-best-practices

Enforces Svelte 5 best practices for reactivity, components, and ESLint configuration.

Community
Intermediate
lepahclepahc
1

svelte-5

Provide Svelte 5 patterns for runes, SSR, and state management.

Official
Advanced
aleconstancioaleconstancio
3

svelte-best-practices

Guide Svelte 5 application development with runes, context patterns, and SvelteKit conventions.

Community
Advanced
inbharataiinbharatai
22

svelte-component

Create Svelte 5 components with runes, stores, and SvelteKit integration.

Community
Intermediate