# Svelte 5 Rune Syntax Validator MCP for AI Agents MCP

> Svelte 5 Rune Syntax Validator ensures your components follow the new Runes API rules. It catches errors in $state, $derived, and $props usage before you deploy, making the transition from Svelte 4 much smoother.

## Overview
- **Category:** development
- **Price:** Free
- **Endpoint:** https://edge.vinkius.com/vk_preview_QfSV4w7hnTIsOdijOSHltbIPuJqPKBqCNgzdeGkH/mcp
- **Tags:** svelte, runes, validation, frontend-dev, syntax-checker, javascript

## Description

Moving from Svelte 4 to Svelte 5 is a massive shift in how reactivity works. You are dealing with new primitives like $state and $derived that have very specific placement rules. If you put a rune outside a script tag or mess up your $props destructuring, your app breaks. This MCP acts as an automated auditor for your component strings. It looks deep into the structure to find boundary errors or isolation breaches that are easy to miss when you are manually reviewing code. You can connect it to your favorite AI client via Vinkius and let your agent handle the tedious syntax checks. Instead of hunting through logs, you just pass your code snippets through for an instant sanity check.

## Tools

### rune_inventory
Scans your component to see which reactive runes are currently in use. It helps you track the presence of required primitives.

### syntax_validation
Runs a full structural check on your Svelte 5 code to find syntax errors. It catches broken patterns before they reach production.

### script_boundary
Locates the start and end of script blocks to ensure logic is properly contained. This prevents runes from leaking into your template.

## Prompt Examples

**Prompt:** 
```
Is this Svelte 5 code valid: `<script>$state(0)</script>`?
```

**Response:** 
```
Yes, the `$state` rune is correctly placed within a script tag.
```

**Prompt:** 
```
Check if this component has any runes: `<div>$state(true)</div>`
```

**Response:** 
```
The validator detected `$state`, but it flagged a syntax error because the rune is located outside of a script tag.
```

**Prompt:** 
```
Does this snippet use props correctly: `<script>let { name } = $props();</script>`?
```

**Response:** 
```
Yes, the `$props` rune is used with a destructuring assignment, which satisfies the Svelte 5 requirement.
```

## Capabilities

### Audit reactive primitives
Checks if $state, $derived, and $effect are used correctly within your components.

### Verify script boundaries
Ensures all reactive logic stays inside the proper script blocks.

### Validate props patterns
Confirms that $props follows the required destructuring syntax.

### Detect rune placement errors
Catches instances where runes are incorrectly placed in HTML or other non-script areas.

## Use Cases

### Migrating legacy code
You have a Svelte 4 component and want to know if the new $state implementation is valid. Your agent checks it instantly.

### Refactoring props
You are changing how components receive data. Ask your agent to verify that your $props destructuring follows the new rules.

### New feature testing
You just wrote a complex $effect block. Use the MCP to ensure no reactive logic escaped the script boundary.

### Code review automation
During a PR, your agent scans the diff to flag any invalid rune usage before a human even sees it.

## Benefits

- Catch $state errors early by checking rune placement within script tags.
- Avoid broken props by verifying the correct destructuring pattern for $props.
- Reduce debugging time during Svelte 4 to 5 migrations using rune_inventory.
- Prevent boundary leaks with automated checks via script_boundary.
- Ensure structural integrity of your components through syntax_validation.

## How It Works

The bottom line is you stop shipping broken reactivity logic.

1. Connect your preferred AI client to the Vinkius catalog.
2. Paste your Svelte 5 component code or point your agent to a file.
3. Receive an immediate report on syntax validity and rune placement errors.

## Frequently Asked Questions

**How can I use Svelte 5 Rune Syntax Validator to migrate my code?**
You can pass your existing Svelte 4 components through your AI client to identify where $state and $derived need to be implemented.

**Will this MCP catch errors in my $props implementation?**
Yes, it specifically checks that your props are destructured according to the new Svelte 5 requirements.

**Can I use this to check if runes are inside script tags?**
Absolutely. The tool identifies when reactive primitives have been incorrectly placed in HTML or template sections.

**Does Svelte 5 Rune Syntax Validator work with Claude or Cursor?**
Yes, it works with any MCP-compatible client like Claude, Cursor, or Windsurf via the Vinkius connection.

**What happens if my component has a syntax error?**
The tool will flag the specific structural issue, such as an invalid boundary or incorrect rune usage, so you can fix it immediately.

**What exactly does the validator check for?**
It checks for Svelte 5 specific rules, such as ensuring `$state` is inside a script tag and that `$props` uses destructuring. You can use `validate_component_syntax` to get a detailed error report.

**Can I just scan for runes without full validation?**
Yes, the `rune_inventory` tool allows you to quickly identify which runes are present in a code snippet without performing a full structural audit.

**How does it handle script tag boundaries?**
The `script_boundary` tool specifically identifies the start and end of your `` blocks to ensure reactive logic is properly encapsulated.