開発環境との統合

# SvelteKitプロジェクト作成
npx sv create my-app
cd my-app

# MCP設定を追加
npx sv add mcp

# IDE を指定（複数可）
npx sv add mcp="ide:cursor,vscode"

# セットアップ方式を指定
npx sv add mcp="setup:local"

# 両方指定
npx sv add mcp="ide:claude-code,setup:remote"

cd existing-project

# MCP設定を追加
npx sv add mcp

# 必要なパッケージをインストール
npm install -D eslint eslint-plugin-svelte svelte-eslint-parser

// eslint.config.js
import svelte from 'eslint-plugin-svelte';
import svelteParser from 'svelte-eslint-parser';
import tsParser from '@typescript-eslint/parser';

export default [
  ...svelte.configs['flat/recommended'],
  {
    files: ['**/*.svelte'],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        parser: tsParser,
      },
    },
  },
];

You are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:

## Available MCP Tools:

### 1. list-sections

Use this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths.
When asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.

### 2. get-documentation

Retrieves full documentation content for specific sections. Accepts single or multiple sections.
After calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.

### 3. svelte-autofixer

Analyzes Svelte code and returns issues and suggestions.
You MUST use this tool whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.

### 4. playground-link

Generates a Svelte Playground link with the provided code.
After completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.

## プロジェクト固有ルール

- Svelte 5 の Runes のみ使用（レガシー構文禁止）
- TypeScript 必須
- Tailwind CSS でスタイリング
- shadcn-svelte コンポーネントを優先使用

name: Svelte Code Quality

on:
  pull_request:
    paths:
      - '**.svelte'

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm ci

      - name: Run ESLint
        run: npm run lint

      - name: Type check
        run: npm run check

# 将来の構想例
- name: AI Code Review
  uses: ai-review-action@v1
  with:
    mcp-server: svelte
    tools:
      - svelte-autofixer

// .vscode/extensions.json
{
  "recommendations": [
    "svelte.svelte-vscode",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  "eslint.validate": ["javascript", "typescript", "svelte"],
  "svelte.enable-ts-plugin": true
}