Name: tapforce-sveltekit
Author: tapforce

Tapforce SvelteKit Skill

This skill provides best practices for setting up and developing Svelte projects using SvelteKit ^2.0.0.

When to Use

Use this skill when:

Setting up a new SvelteKit project
Developing applications based on SvelteKit framework
Migrating existing Svelte projects to SvelteKit ^2.0.0
Configuring SvelteKit project structure and routing

Requirements

Project based on Node.js ^20.0.0
Project needs Svelte ^5.0.0
Project needs SvelteKit ^2.0.0
Prefer using pnpm ^10.0.0 as default package manager

CLI Commands

sv create

Sets up a new SvelteKit project with options for templates and add-ons.

Usage:

npx sv create [options] [path]

Key Options:

--template <name>: Project template (minimal, demo, library)
--types <option>: Type checking (ts, jsdoc)
--no-types: Skip type checking (not recommended)
--add [add-ons...]: Add specific add-ons during creation
--no-add-ons: Skip interactive add-ons prompt
--install <package-manager>: Specify package manager (npm, pnpm, yarn, bun, deno)
--no-install: Skip dependency installation
--from-playground <url>: Create from playground URL

Examples:

# Basic setup with pnpm
pnpm dlx sv create . --install pnpm

# With TypeScript and Tailwind CSS
pnpm dlx sv create . --types ts --add tailwindcss --install pnpm

# From template with add-ons
pnpm dlx sv create . --template demo --add eslint prettier --install pnpm

sv add

Updates existing projects with new functionality and add-ons.

Usage:

npx sv add [add-ons]

Key Options:

-C, --cwd <path>: Path to project root
--no-git-check: Skip git dirty files check
--no-download-check: Skip download confirmations
--install <package-manager>: Specify package manager
--no-install: Skip dependency installation

Official Add-ons:

tailwindcss: Tailwind CSS v4 integration
eslint: Code linting setup
prettier: Code formatting setup
playwright: End-to-end testing
vitest: Unit testing framework
mdsvex: Markdown support
And more...

Examples:

# Add Tailwind CSS
pnpm dlx sv add tailwindcss

# Add multiple tools
pnpm dlx sv add eslint prettier playwright

# Add with specific package manager
pnpm dlx sv add vitest --install pnpm

sv check

Finds errors and warnings in SvelteKit projects.

Usage:

npx sv check [options]

Key Options:

--workspace <path>: Path to workspace directory
--output <format>: Output format (human, human-verbose, machine, machine-verbose)
--watch: Keep process alive and watch for changes
--tsconfig <path>: Path to TypeScript config
--no-tsconfig: Check only Svelte files
--ignore <paths>: Files/folders to ignore
--fail-on-warnings: Exit with error on warnings
--compiler-warnings <warnings>: Configure warning behavior
--diagnostic-sources <sources>: Specify diagnostic sources (js, svelte, css)
--threshold <level>: Filter diagnostics (warning, error)

Examples:

# Basic check
pnpm dlx sv check

# Watch mode
pnpm dlx sv check --watch

# With specific output
pnpm dlx sv check --output machine-verbose

# Ignore specific directories
pnpm dlx sv check --ignore "dist,build"

sv migrate

Migrates SvelteKit codebases between versions.

Usage:

npx sv migrate [migration]

Available Migrations:

svelte-5: Upgrade Svelte 4 to Svelte 5 with runes
sveltekit-2: Upgrade SvelteKit 1 to SvelteKit 2
app-state: Migrate $app/stores to $app/state
self-closing-tags: Update self-closing element syntax
svelte-4: Upgrade Svelte 3 to Svelte 4
package: Upgrade @sveltejs/package v1 to v2
routes: Upgrade pre-release to v1 routing

Examples:

# Interactive migration
pnpm dlx sv migrate

# Specific migration
pnpm dlx sv migrate svelte-5
pnpm dlx sv migrate sveltekit-2

Project Setup

Creating New Project

For new projects, use the SvelteKit CLI command to initialize the backbone codebase. NEVER create core files manually like package.json, tsconfig.json, etc., as SvelteKit CLI will create them for you.

Official documentation: https://svelte.dev/docs/kit/creating-a-project/llms.txt

Quick Setup Commands:

# Basic setup with pnpm (recommended)
pnpm dlx sv create . --install pnpm
pnpm run dev

# With TypeScript and Tailwind CSS
pnpm dlx sv create . --types ts --add tailwindcss --install pnpm
pnpm run dev

# With common development tools
pnpm dlx sv create . --add eslint prettier vitest --install pnpm
pnpm run dev

# Minimal setup with common addons (no-install approach)
pnpm dlx sv create . --template minimal --add tailwindcss prettier adapter-auto --no-install
echo 'packages:
    - .' > pnpm-workspace.yaml
pnpm install
pnpm run dev

# Using npm
npm dlx sv create . --install npm
npm run dev

Troubleshooting pnpm Setup: If you encounter ERR_PNPM_INVALID_WORKSPACE_CONFIGURATION error during installation, see the Package Management rule for solutions.

Template Options:

minimal: Barebones scaffolding
demo: Showcase app with word guessing game
library: Template for Svelte library with svelte-package

Package Manager Support:

pnpm (recommended)
npm
yarn
bun
deno

Recommended Packages

Consider using these helpful libraries for SvelteKit development:

Style Framework/UXUI Framework:

tailwindcss ^4.0.0: https://tailwindcss.com/docs/installation/framework-guides/sveltekit
shadcn-svelte: https://www.shadcn-svelte.com/docs/installation/sveltekit

Testing Frameworks:

vitest: Unit testing with SvelteKit support
playwright: End-to-end testing
@sveltejs/adapter-test: Testing adapter for SvelteKit

Development Tools:

eslint: Code linting with Svelte plugin
prettier: Code formatting with Svelte plugin
mdsvex: Markdown support in Svelte
paraglide: Internationalization

Project Configuration

Update Package JSON

After project creation, update package.json to match project information like name, version, description, etc.

SvelteKit Features

Respect Svelte ^5 and SvelteKit ^2 Features

Ensure all Svelte code (including Svelte and SvelteKit) uses the latest features and coding style from Svelte ^5 and SvelteKit ^2.

Available features from Svelte ^5: $state, $effect, $inspect, etc.

AVOID legacy features from older versions. If you find other skills or rules teaching practices with Svelte/SvelteKit features, learn and follow the latest approaches.

Official documentation: https://svelte.dev/docs/kit/migrating-to-sveltekit-2/llms.txt

SvelteKit Architecture

Project Structure

Understand SvelteKit project structure and how it works.

Official documentation: https://svelte.dev/docs/kit/project-structure/llms.txt

Project Types

SvelteKit supports a wide range of project types. Understand the different kinds available.

Official documentation: https://svelte.dev/docs/kit/project-types/llms.txt

Routing System

SvelteKit has a unique routing system. Understand how it works.

Official documentation:

Basic: https://svelte.dev/docs/kit/routing/llms.txt
Advanced: https://svelte.dev/docs/kit/advanced-routing/llms.txt

Link Handling

SvelteKit provides options to handle links. Understand these capabilities.

Official documentation: https://svelte.dev/docs/kit/link-options/llms.txt

Error Handling

Read and understand how SvelteKit projects can handle errors.

Official documentation: https://svelte.dev/docs/kit/errors/llms.txt

Web Standards

SvelteKit has built-in support for Web Standards and Web APIs. Understand these capabilities.

Official documentation: https://svelte.dev/docs/kit/web-standards/llms.txt

Performance Optimization

SvelteKit has built-in features to help optimize performance. Understand these best practices.

Official documentation: https://svelte.dev/docs/kit/performance/llms.txt

Accessibility

SvelteKit has documentation about accessibility practices. Understand these guidelines.

Official documentation: https://svelte.dev/docs/kit/accessibility/llms.txt

SEO Optimization

SvelteKit has documentation about SEO optimization practices. Understand these guidelines.

Official documentation: https://svelte.dev/docs/kit/seo/llms.txt

Snapshot Feature

SvelteKit supports snapshot data on pages, allowing restoration of values when users navigate back. Understand this feature.

Official documentation: https://svelte.dev/docs/kit/snapshots/llms.txt

State Management

SvelteKit has documentation about state management practices. Understand these approaches.

Official documentation: https://svelte.dev/docs/kit/state-management/llms.txt

Rules

This skill includes the following rules:

Project Setup

Rule: project-setup
Description: Rules for setting up new SvelteKit projects using CLI

Version Requirements

Rule: version-requirements
Description: Rules for ensuring correct Node.js, Svelte, and SvelteKit versions

Modern Features

Rule: modern-features
Description: Rules for using Svelte ^5 and SvelteKit ^2 modern features

Package Management

Rule: package-management
Description: Rules for using pnpm and managing dependencies in SvelteKit projects

Best Practices

Always use SvelteKit CLI for new project setup
Prefer pnpm as the package manager
Use Svelte ^5 and SvelteKit ^2 modern features
Follow official SvelteKit documentation patterns
Implement proper error handling and accessibility
Optimize for performance and SEO
Use appropriate project types for your use case
Leverage SvelteKit's routing system effectively

Tapforce SvelteKit Skill

This skill provides best practices for setting up and developing Svelte projects using SvelteKit ^2.0.0.

When to Use

Use this skill when:

Setting up a new SvelteKit project
Developing applications based on SvelteKit framework
Migrating existing Svelte projects to SvelteKit ^2.0.0
Configuring SvelteKit project structure and routing

Requirements

Project based on Node.js ^20.0.0
Project needs Svelte ^5.0.0
Project needs SvelteKit ^2.0.0
Prefer using pnpm ^10.0.0 as default package manager

CLI Commands

sv create

Sets up a new SvelteKit project with options for templates and add-ons.

Usage:

npx sv create [options] [path]

Key Options:

--template <name>: Project template (minimal, demo, library)
--types <option>: Type checking (ts, jsdoc)
--no-types: Skip type checking (not recommended)
--add [add-ons...]: Add specific add-ons during creation
--no-add-ons: Skip interactive add-ons prompt
--install <package-manager>: Specify package manager (npm, pnpm, yarn, bun, deno)
--no-install: Skip dependency installation
--from-playground <url>: Create from playground URL

Examples:

# Basic setup with pnpm
pnpm dlx sv create . --install pnpm

# With TypeScript and Tailwind CSS
pnpm dlx sv create . --types ts --add tailwindcss --install pnpm

# From template with add-ons
pnpm dlx sv create . --template demo --add eslint prettier --install pnpm

sv add

Updates existing projects with new functionality and add-ons.

Usage:

npx sv add [add-ons]

Key Options:

-C, --cwd <path>: Path to project root
--no-git-check: Skip git dirty files check
--no-download-check: Skip download confirmations
--install <package-manager>: Specify package manager
--no-install: Skip dependency installation

Official Add-ons:

tailwindcss: Tailwind CSS v4 integration
eslint: Code linting setup
prettier: Code formatting setup
playwright: End-to-end testing
vitest: Unit testing framework
mdsvex: Markdown support
And more...

Examples:

# Add Tailwind CSS
pnpm dlx sv add tailwindcss

# Add multiple tools
pnpm dlx sv add eslint prettier playwright

# Add with specific package manager
pnpm dlx sv add vitest --install pnpm

sv check

Finds errors and warnings in SvelteKit projects.

Usage:

npx sv check [options]

Key Options:

--workspace <path>: Path to workspace directory
--output <format>: Output format (human, human-verbose, machine, machine-verbose)
--watch: Keep process alive and watch for changes
--tsconfig <path>: Path to TypeScript config
--no-tsconfig: Check only Svelte files
--ignore <paths>: Files/folders to ignore
--fail-on-warnings: Exit with error on warnings
--compiler-warnings <warnings>: Configure warning behavior
--diagnostic-sources <sources>: Specify diagnostic sources (js, svelte, css)
--threshold <level>: Filter diagnostics (warning, error)

Examples:

# Basic check
pnpm dlx sv check

# Watch mode
pnpm dlx sv check --watch

# With specific output
pnpm dlx sv check --output machine-verbose

# Ignore specific directories
pnpm dlx sv check --ignore "dist,build"

sv migrate

Migrates SvelteKit codebases between versions.

Usage:

npx sv migrate [migration]

Available Migrations:

svelte-5: Upgrade Svelte 4 to Svelte 5 with runes
sveltekit-2: Upgrade SvelteKit 1 to SvelteKit 2
app-state: Migrate $app/stores to $app/state
self-closing-tags: Update self-closing element syntax
svelte-4: Upgrade Svelte 3 to Svelte 4
package: Upgrade @sveltejs/package v1 to v2
routes: Upgrade pre-release to v1 routing

Examples:

# Interactive migration
pnpm dlx sv migrate

# Specific migration
pnpm dlx sv migrate svelte-5
pnpm dlx sv migrate sveltekit-2

Project Setup

Creating New Project

Official documentation: https://svelte.dev/docs/kit/creating-a-project/llms.txt

Quick Setup Commands:

# Basic setup with pnpm (recommended)
pnpm dlx sv create . --install pnpm
pnpm run dev

# With TypeScript and Tailwind CSS
pnpm dlx sv create . --types ts --add tailwindcss --install pnpm
pnpm run dev

# With common development tools
pnpm dlx sv create . --add eslint prettier vitest --install pnpm
pnpm run dev

# Minimal setup with common addons (no-install approach)
pnpm dlx sv create . --template minimal --add tailwindcss prettier adapter-auto --no-install
echo 'packages:
    - .' > pnpm-workspace.yaml
pnpm install
pnpm run dev

# Using npm
npm dlx sv create . --install npm
npm run dev

Troubleshooting pnpm Setup: If you encounter ERR_PNPM_INVALID_WORKSPACE_CONFIGURATION error during installation, see the Package Management rule for solutions.

Template Options:

minimal: Barebones scaffolding
demo: Showcase app with word guessing game
library: Template for Svelte library with svelte-package

Package Manager Support:

pnpm (recommended)
npm
yarn
bun
deno

Recommended Packages

Consider using these helpful libraries for SvelteKit development:

Style Framework/UXUI Framework:

tailwindcss ^4.0.0: https://tailwindcss.com/docs/installation/framework-guides/sveltekit
shadcn-svelte: https://www.shadcn-svelte.com/docs/installation/sveltekit

Testing Frameworks:

vitest: Unit testing with SvelteKit support
playwright: End-to-end testing
@sveltejs/adapter-test: Testing adapter for SvelteKit

Development Tools:

eslint: Code linting with Svelte plugin
prettier: Code formatting with Svelte plugin
mdsvex: Markdown support in Svelte
paraglide: Internationalization

Project Configuration

Update Package JSON

After project creation, update package.json to match project information like name, version, description, etc.

SvelteKit Features

Respect Svelte ^5 and SvelteKit ^2 Features

Ensure all Svelte code (including Svelte and SvelteKit) uses the latest features and coding style from Svelte ^5 and SvelteKit ^2.

Available features from Svelte ^5: $state, $effect, $inspect, etc.

AVOID legacy features from older versions. If you find other skills or rules teaching practices with Svelte/SvelteKit features, learn and follow the latest approaches.

Official documentation: https://svelte.dev/docs/kit/migrating-to-sveltekit-2/llms.txt

SvelteKit Architecture

Project Structure

Understand SvelteKit project structure and how it works.

Official documentation: https://svelte.dev/docs/kit/project-structure/llms.txt

Project Types

SvelteKit supports a wide range of project types. Understand the different kinds available.

Official documentation: https://svelte.dev/docs/kit/project-types/llms.txt

Routing System

SvelteKit has a unique routing system. Understand how it works.

Official documentation:

Basic: https://svelte.dev/docs/kit/routing/llms.txt
Advanced: https://svelte.dev/docs/kit/advanced-routing/llms.txt

Link Handling

SvelteKit provides options to handle links. Understand these capabilities.

Official documentation: https://svelte.dev/docs/kit/link-options/llms.txt

Error Handling

Read and understand how SvelteKit projects can handle errors.

Official documentation: https://svelte.dev/docs/kit/errors/llms.txt

Web Standards

SvelteKit has built-in support for Web Standards and Web APIs. Understand these capabilities.

Official documentation: https://svelte.dev/docs/kit/web-standards/llms.txt

Performance Optimization

SvelteKit has built-in features to help optimize performance. Understand these best practices.

Official documentation: https://svelte.dev/docs/kit/performance/llms.txt

Accessibility

SvelteKit has documentation about accessibility practices. Understand these guidelines.

Official documentation: https://svelte.dev/docs/kit/accessibility/llms.txt

SEO Optimization

SvelteKit has documentation about SEO optimization practices. Understand these guidelines.

Official documentation: https://svelte.dev/docs/kit/seo/llms.txt

Snapshot Feature

SvelteKit supports snapshot data on pages, allowing restoration of values when users navigate back. Understand this feature.

Official documentation: https://svelte.dev/docs/kit/snapshots/llms.txt

State Management

SvelteKit has documentation about state management practices. Understand these approaches.

Official documentation: https://svelte.dev/docs/kit/state-management/llms.txt

Rules

This skill includes the following rules:

Project Setup

Rule: project-setup
Description: Rules for setting up new SvelteKit projects using CLI

Version Requirements

Rule: version-requirements
Description: Rules for ensuring correct Node.js, Svelte, and SvelteKit versions

Modern Features

Rule: modern-features
Description: Rules for using Svelte ^5 and SvelteKit ^2 modern features

Package Management

Rule: package-management
Description: Rules for using pnpm and managing dependencies in SvelteKit projects

Best Practices

Always use SvelteKit CLI for new project setup
Prefer pnpm as the package manager
Use Svelte ^5 and SvelteKit ^2 modern features
Follow official SvelteKit documentation patterns
Implement proper error handling and accessibility
Optimize for performance and SEO
Use appropriate project types for your use case
Leverage SvelteKit's routing system effectively

Adoption

tapforce/tapforce-sveltekit

$ install --global

Security Scan Results

SKILL.md

Tapforce SvelteKit Skill

When to Use

Requirements

CLI Commands

sv create

sv add

sv check

sv migrate

Project Setup

Creating New Project

Recommended Packages

Project Configuration

Update Package JSON

SvelteKit Features

Respect Svelte ^5 and SvelteKit ^2 Features

SvelteKit Architecture

Project Structure

Project Types

Routing System

Link Handling

Error Handling

Web Standards

Performance Optimization

Accessibility

SEO Optimization

Snapshot Feature

State Management

Rules

Project Setup

Version Requirements

Modern Features

Package Management

Best Practices

Related Skills

tapforce/agent-debate

tapforce/tapforce-tailwindcss

tapforce/tapforce-shadcn-svelte

tapforce/tapforce-pnpm

tapforce/tapforce-sveltekit

$ install --global

Security Scan Results

SKILL.md

Tapforce SvelteKit Skill

When to Use

Requirements

CLI Commands

sv create

sv add

sv check

sv migrate

Project Setup

Creating New Project

Recommended Packages

Project Configuration

Update Package JSON

SvelteKit Features

Respect Svelte ^5 and SvelteKit ^2 Features

SvelteKit Architecture

Project Structure

Project Types

Routing System

Link Handling

Error Handling

Web Standards

Performance Optimization

Accessibility

SEO Optimization

Snapshot Feature

State Management

Rules

Project Setup

Version Requirements

Modern Features

Package Management

Best Practices