Sveltekit

作者 mindrally97184105b5da無授權條款269 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫5 週前更新

Expert guidance for SvelteKit development with TypeScript, Tailwind CSS, SSR/SSG, and performance optimization best practices

僅含說明Software Development
AI 產生的概覽

為使用 TypeScript、Tailwind CSS、SSR/SSG 與測試建置 SvelteKit 網頁應用程式提供專家指引與程式碼範例。

功能
此技能提供 SvelteKit 開發的參考指引，涵蓋專案結構、元件模式、以檔案為基礎的路由與動態路由、載入函式、表單動作、store、API 路由、錯誤處理、Tailwind 樣式、效能最佳化、Vitest 測試以及無障礙。它針對每個面向提供精簡的 TypeScript 與 Svelte 程式碼範例。它僅提供說明，不會產生檔案或指令碼。
適用情境
在撰寫、組織或審查 SvelteKit 應用程式且需要慣例或範例程式碼時使用。適合用於 SvelteKit 中路由、SSR/SSG、預先算繪、表單動作、store、API 端點或 Tailwind 樣式的相關問題。
執行需求
不需要任何工具、套件或憑證；它僅為說明內容，不附帶指令碼。範例涉及 SvelteKit、TypeScript、Tailwind CSS 與 Vitest，但指引本身無需安裝任何項目。

SvelteKit Development

You are an expert in SvelteKit, TypeScript, Tailwind CSS, and modern web application development.

Key Principles

  • Write concise, technical SvelteKit code with accurate TypeScript examples
  • Use functional and declarative programming patterns; avoid classes
  • Prefer iteration and modularization over code duplication
  • Use descriptive variable names with auxiliary verbs (isLoading, hasError)
  • Structure files: component logic, markup, styles, helpers, types

Project Structure

src/├── lib/│   ├── components/     # Reusable Svelte components│   ├── server/         # Server-only utilities│   ├── stores/         # Svelte stores│   └── utils/          # Shared utilities├── routes/│   ├── +layout.svelte  # Root layout│   ├── +page.svelte    # Home page│   └── api/            # API routes├── app.html            # HTML template└── app.css             # Global styles

Component Development

Script Setup with TypeScript

svelte
<script lang="ts">  import { onMount } from 'svelte';  import type { PageData } from './$types';
  export let data: PageData;
  let count = 0;  $: doubled = count * 2;
  function increment() {    count += 1;  }</script>

Props and Events

svelte
<script lang="ts">  import { createEventDispatcher } from 'svelte';
  export let title: string;  export let disabled = false;
  const dispatch = createEventDispatcher<{    submit: { value: string };  }>();
  function handleSubmit() {    dispatch('submit', { value: title });  }</script>

Routing

File-Based Routes

routes/├── +page.svelte          # /├── about/+page.svelte    # /about├── blog/│   ├── +page.svelte      # /blog│   └── [slug]/│       └── +page.svelte  # /blog/:slug

Dynamic Routes

svelte
<!-- routes/blog/[slug]/+page.svelte --><script lang="ts">  import type { PageData } from './$types';  export let data: PageData;</script>
<h1>{data.post.title}</h1>

Load Functions

typescript
// +page.server.tsimport type { PageServerLoad } from './$types';
export const load: PageServerLoad = async ({ params, fetch }) => {  const response = await fetch(`/api/posts/${params.slug}`);  const post = await response.json();
  return { post };};

SSR and SSG

Server-Side Rendering

typescript
// +page.server.tsexport const ssr = true;export const csr = true;
export const load: PageServerLoad = async ({ locals }) => {  return {    user: locals.user  };};

Static Generation

typescript
// +page.tsexport const prerender = true;
export async function load() {  return {    // Static data  };}

Prerendering Dynamic Routes

typescript
// +page.server.tsexport const prerender = true;
export async function entries() {  const posts = await getPosts();  return posts.map((post) => ({ slug: post.slug }));}

Form Actions

typescript
// +page.server.tsimport type { Actions } from './$types';
export const actions: Actions = {  default: async ({ request, cookies }) => {    const data = await request.formData();    const email = data.get('email');
    // Validate and process    if (!email) {      return { success: false, error: 'Email required' };    }
    return { success: true };  }};
svelte
<!-- +page.svelte --><script lang="ts">  import { enhance } from '$app/forms';  import type { ActionData } from './$types';
  export let form: ActionData;</script>
<form method="POST" use:enhance>  <input name="email" type="email" />  <button type="submit">Subscribe</button>  {#if form?.error}    <p class="error">{form.error}</p>  {/if}</form>

State Management

Svelte Stores

typescript
// lib/stores/counter.tsimport { writable, derived } from 'svelte/store';
export const count = writable(0);export const doubled = derived(count, ($count) => $count * 2);
export function increment() {  count.update((n) => n + 1);}

Page Store

svelte
<script lang="ts">  import { page } from '$app/stores';
  $: currentPath = $page.url.pathname;  $: params = $page.params;</script>

API Routes

typescript
// routes/api/posts/+server.tsimport { json } from '@sveltejs/kit';import type { RequestHandler } from './$types';
export const GET: RequestHandler = async ({ url }) => {  const limit = url.searchParams.get('limit') ?? '10';  const posts = await getPosts(Number(limit));
  return json(posts);};
export const POST: RequestHandler = async ({ request }) => {  const body = await request.json();  const post = await createPost(body);
  return json(post, { status: 201 });};

Styling with Tailwind

svelte
<div class="flex flex-col gap-4 p-6">  <h1 class="text-2xl font-bold text-gray-900 dark:text-white">    {title}  </h1>  <p class="text-gray-600 dark:text-gray-300">    {description}  </p></div>
<style>  /* Scoped styles when needed */  :global(.prose) {    @apply max-w-none;  }</style>

Error Handling

svelte
<!-- +error.svelte --><script lang="ts">  import { page } from '$app/stores';</script>
<h1>{$page.status}</h1><p>{$page.error?.message}</p>
typescript
// +page.server.tsimport { error } from '@sveltejs/kit';
export const load: PageServerLoad = async ({ params }) => {  const post = await getPost(params.slug);
  if (!post) {    throw error(404, 'Post not found');  }
  return { post };};

Performance Optimization

  • Use {#key} blocks for component recreation
  • Implement lazy loading with dynamic imports
  • Use $effect.pre for DOM measurements
  • Optimize images with @sveltejs/enhanced-img
  • Prefetch links with data-sveltekit-preload-data

Testing

typescript
// Component testing with Vitestimport { render, screen } from '@testing-library/svelte';import { expect, test } from 'vitest';import Button from './Button.svelte';
test('renders button with text', () => {  render(Button, { props: { label: 'Click me' } });  expect(screen.getByRole('button')).toHaveTextContent('Click me');});

Accessibility

  • Use semantic HTML elements
  • Add ARIA labels where needed
  • Ensure keyboard navigation
  • Test with screen readers
  • Maintain focus management

來源與署名

來源：mindrally/skills位於sveltekit提交9718410

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 mindrally/skills 的技能

Zustand State Management

mindrally

為 React 與 TypeScript 應用程式中的 Zustand 狀態管理提供設計與使用規範。

Software Development2695 週前更新

Zod Schema Validation

mindrally

關於 Zod 結構描述驗證與 TypeScript 型別推斷的實務指引。

Software Development2695 週前更新

Woocommerce

mindrally

針對 WordPress 與 WooCommerce 外掛開發的指南，涵蓋 PHP 規範、鉤子、安全性與擴充模式。

Software Development2695 週前更新

Wordpress

mindrally

以 PHP 規範、安全實務與測試慣例指導 WordPress 與 WooCommerce 開發。

Software Development2695 週前更新

Websocket Development

mindrally

使用 WebSocket 通訊建構即時應用程式的最佳實務與指引。

Software Development2695 週前更新

Web Development

mindrally

提供 Bootstrap、Django、HTMX 以及一般 Web 最佳實務的 Web 開發指南。

Software Development2695 週前更新

更多Software Development技能

Playground

anthropics

精選

建立自成一體的互動式 HTML 遊樂場，包含控制項、即時預覽與可複製的提示詞輸出。

Software Development37K今天更新

M5 Onboard

anthropics

精選

透過 USB 偵測 M5Stack ESP32 開發板，燒錄 UIFlow 2.0 韌體並安裝 MicroPython 應用程式套件。

Software Development37K今天更新

Cardputer Buddy

anthropics

精選

指導迭代 Cardputer-Adv 的 MicroPython 應用程式套件：新增應用程式、透過 USB 序列埠推送檔案、查看日誌並執行 REPL 指令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精選

依據從遠端來源取得的 Web Interface Guidelines 審查 UI 程式碼，並以 file:line 形式回報問題。

Software Development32K5 週前更新

Vercel React Native Skills

vercel-labs

精選

React Native 與 Expo 最佳實務規則，涵蓋清單效能、動畫、導覽、UI 模式、狀態與 monorepo 設定。

Software Development32K5 週前更新

Vercel React Best Practices

vercel-labs

精選

Vercel 的 React 與 Next.js 效能指南，以 70 條規則的形式用於撰寫、審查與重構程式碼。

Software Development32K5 週前更新