# Svelte

> แนวทางการพัฒนา Svelte ตาม best practices สำหรับ compiler-based JavaScript framework ที่มี...

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

---

## Goal

ใช้ Svelte สร้าง web applications ด้วย compiler-based framework, reactive declarations, stores, และ no virtual DOM


## Scope

ใช้สำหรับสร้าง UI และ web applications ด้วย Svelte framework


## Execute

### 1. Installation

ติดตั้ง Svelte ด้วย `bun add svelte`

### 2. Setup

อ่าน `guide/installation.md` สำหรับการติดตั้งและ setup

### 3. Quick Start

อ่าน `guide/quick-start.md` สำหรับเริ่มต้นใช้งาน

### 4. Setup Project

ใช้ `workflows/setup-svelte.md` สำหรับ setup project

### 5. Learn Concepts

อ่าน `guide/key-concept.md` สำหรับแนวคิดหลัก

### 6. Understand Workflow

อ่าน `guide/how-it-works.md` สำหรับวิธีการทำงาน

### 7. Reactivity

อ่าน `key-concepts/reactivity.md` สำหรับ reactivity system

### 8. Components

อ่าน `key-concepts/components.md` สำหรับ component architecture

### 9. Stores

อ่าน `key-concepts/stores.md` สำหรับ state management

### 10. Lifecycle

อ่าน `key-concepts/lifecycle.md` สำหรับ component lifecycle

### 11. Compilation

อ่าน `key-concepts/compilation.md` สำหรับ compilation process

### 12. Configuration

อ่าน `guide/configuration.md` สำหรับการตั้งค่า
อ่าน `references/configuration.md` สำหรับ configuration reference
ตั้งค่า Svelte configuration

### 13. Features

อ่าน `guide/features.md` สำหรับ features ที่มี

### 14. Ecosystem

อ่าน `guide/ecosystem.md` สำหรับ ecosystem และ tools

### 15. Patterns

อ่าน `guide/patterns.md` สำหรับ patterns ทั่วไป

### 16. Create Component

ใช้ `workflows/create-component.md` สำหรับสร้าง components

### 17. Reactive Programming

อ่าน `principles/reactive-programming.md` สำหรับ reactive programming

### 18. Component Design

อ่าน `principles/component-design.md` สำหรับ component design

### 19. Performance First

อ่าน `principles/performance-first.md` สำหรับ performance optimization

### 20. Type Safety

อ่าน `principles/type-safety.md` สำหรับ TypeScript integration

### 21. State Management

ใช้ `workflows/use-stores.md` สำหรับ state management

### 22. Best Practices

อ่าน `guide/best-practices.md` สำหรับ best practices

### 23. Integration

อ่าน `guide/integration.md` สำหรับ framework integration

### 24. Architecture

อ่าน `guide/architecture.md` สำหรับ system architecture

### 25. Project Structure

อ่าน `guide/structure.md` สำหรับ project structure

### 26. Performance

อ่าน `guide/performance.md` สำหรับ performance optimization

### 27. Security

อ่าน `guide/security.md` สำหรับ security best practices

### 28. Testing

อ่าน `guide/testing.md` สำหรับ testing

### 29. Troubleshooting

อ่าน `guide/troubleshooting.md` สำหรับปัญหาทั่วไป

### 30. Migration

อ่าน `guide/migration.md` สำหรับ migration guide

### 31. Migrate

ใช้ `workflows/migrate-to-svelte.md` สำหรับ migration

### 32. API Reference

อ่าน `references/api.md` สำหรับ API reference

### 33. CLI

อ่าน `references/cli.md` สำหรับ CLI commands

### 34. Website

อ่าน `references/website.md` สำหรับ official website


## Rules

- ใช้ `bun add svelte` สำหรับ installation
- ใช้ reactive declarations เสมอ
- ใช้ stores สำหรับ state management
- ใช้ backticks สำหรับ `$state`, `$derived`, commands
- ใช้ code blocks สำหรับ component examples
- ใช้ ansi markdown diagrams สำหรับ flow และ architecture
- หลีกเลี่ยง virtual DOM
- ใช้ compile-time optimization
- ใช้ proper reactivity patterns
- ใช้ component lifecycle อย่างเหมาะสม


## Expected Outcome

- Web applications ที่ performant
- Code ที่ใช้ reactive declarations
- Performance ที่ optimized ด้วย no virtual DOM
- State management ที่ clean ด้วย stores