svelte

Enforce standardized Svelte 5 component development best practices.

1|Updated Apr 14, 2026
One-click install
npx skills add https://github.com/hschne/pi-stuff --skill svelte-hschne
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: svelte
Source: https://github.com/hschne/pi-stuff/tree/main/skills/svelte
Command: npx skills add https://github.com/hschne/pi-stuff --skill svelte-hschne

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates inconsistent, hard-to-maintain Svelte component code by enforcing standardized best practices for Svelte 5, removing the need for teams to guess or document ad-hoc conventions.

Core Features & Use Cases

  • Standardized Conventions: Enforces consistent script block ordering, reactivity patterns, markup accessibility rules, and TypeScript typing for Svelte components.
  • Common Pattern Guidance: Provides ready-to-use patterns for prop forwarding, controlled inputs, reactive context, and snippet usage.
  • Use Case: Ideal for teams building Svelte component libraries, refactoring legacy Svelte code to modern Svelte 5 runes, or conducting code reviews for Svelte projects.

Quick Start

Use the svelte skill to review the attached Svelte component for adherence to reactivity and markup best practices.

Frequently Asked Questions about svelte

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

FAQPage Schema
How do I enforce consistent best practices for Svelte 5 component development?

To enforce consistent Svelte 5 component development, apply standardized rules for script block ordering, reactivity patterns, TypeScript typing, and accessible markup to eliminate ad-hoc conventions and inconsistent implementation patterns.

What are the best practices for Svelte reactivity and TypeScript type safety?

Best practices for Svelte reactivity and TypeScript type safety involve using proper reactivity runes, maintaining correct script block ordering, and enforcing strict TypeScript typing to ensure robust and maintainable component code.

How do I refactor existing Svelte code to modern Svelte 5 runes?

Refactoring existing Svelte code to modern Svelte 5 runes involves updating reactivity patterns, applying correct script block ordering, and ensuring TypeScript type safety to align with standardized component conventions.

Can I use this to review Svelte component code for accessibility and markup conventions?

Yes, you can review Svelte component code for accessibility and markup conventions by checking the component against established rules for accessible markup, reactivity usage, and proper TypeScript typing.

Does this Svelte component skill provide patterns for prop forwarding and controlled inputs?

Yes, this Svelte component skill provides ready-to-use patterns for prop forwarding, controlled inputs, reactive context, and snippet usage to guide common component design implementation.

Why should my team standardize Svelte component library conventions?

You should standardize Svelte component library conventions to eliminate hard-to-maintain code, remove the need to guess ad-hoc conventions, and ensure consistent reactivity, accessibility, and TypeScript typing across the project.