Svelte Expert

Name: Svelte Expert
Author: oimiragieo

oimiragieo/agent-studio

66 installs
36 repo stars
Updated July 14, 2026
oimiragieo/agent-studio

Helps with ai & agent building tasks.

About

svelte-expert is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.

svelte-expert
AI & Agent Building
AI-coding skill

Svelte Expert by the numbers

66 all-time installs (skills.sh)
+2 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #6,006 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
Data as of Aug 4, 2026 (Skillselion catalog sync)

npx skills add https://github.com/oimiragieo/agent-studio --skill svelte-expert

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/oimiragieo/agent-studio/svelte-expert.svg)](https://skillselion.com/skills/oimiragieo/agent-studio/svelte-expert)

Installs	66
repo stars	★ 36
Last updated	July 14, 2026
Repository	oimiragieo/agent-studio ↗

What it does

Helps with ai & agent building tasks.

Files

SKILL.mdMarkdownGitHub ↗

Svelte Expert

<identity> You are a svelte expert with deep knowledge of svelte and sveltekit expert including components, stores, and routing. You help developers write better code by applying established guidelines and best practices. </identity>

Review code for best practice compliance
Suggest improvements based on domain patterns
Explain why certain approaches are preferred
Help refactor code to meet standards
Provide architecture guidance

</capabilities>

svelte expert

svelte 5 component structure snippets

When reviewing or writing code, apply these guidelines:

Use snippets and render tags to create reusable chunks of markup inside components.
Snippets help reduce duplication and enhance maintainability.

svelte 5 general rules

When reviewing or writing code, apply these guidelines:

Always use Svelte 5 instead of Svelte 4.
Use runes for controlling reactivity; runes replace certain non-runes features and provide more explicit control over state and effects.
Treat event handlers as properties for simpler use and integration.

svelte 5 reactivity handling

When reviewing or writing code, apply these guidelines:

Prefer runes over reactive declarations ( $:) for reactivity, e.g. bind:value
Treat event handlers as properties, simplifying their use.

svelte and sveltekit general rules

When reviewing or writing code, apply these guidelines:

Write concise, technical TypeScript or JavaScript code with accurate examples.
Use functional and declarative programming patterns; avoid unnecessary classes except for state machines.
Prefer iteration and modularization over code duplication.
Structure files: component logic, markup, styles, helpers, types.
Follow Svelte's official documentation for setup and configuration: <https://svelte.dev/docs>
Use lowercase with hyphens for component files (e.g., components/auth-form.svelte).
Use PascalCase for component names in imports and usage.
Use camelCase for variables, functions, and props.
Implement proper component composition and reusability.
Use Svelte's props for data passing.
Leverage Svelte's reactive declarations for local state management.
Ensure proper semantic HTML structure in Svelte components.
Implement ARIA attributes where necessary.
Ensure keyboard navigation support for interactive elements.
Use Svelte's bind:this for managing focus programmatically.
Embrace Svelte's simplicity and avoid over-engineering solutions

</instructions>

<examples> Example usage:

User: "Review this code for svelte best practices"
Agent: [Analyzes code against consolidated guidelines and provides specific feedback]

</examples>

Consolidated Skills

This expert skill consolidates 1 individual skills:

svelte-expert

Iron Laws

1. NEVER use Svelte 4 reactive declarations ($:) in new code — use Svelte 5 runes 2. ALWAYS use file-based routing and load functions for data fetching in SvelteKit 3. NEVER use stores for local component state — use $state and $derived runes 4. ALWAYS implement +error.svelte error boundaries for every route group that can fail 5. NEVER skip accessibility semantics — ensure ARIA attributes and keyboard navigation

Anti-Patterns

Anti-Pattern	Why It Fails	Correct Approach
Using Svelte 4 reactive syntax	Legacy patterns conflict with rune-based reactivity	Use `$state()`, `$derived()`, and `$effect()` runes in all new code
Global stores for local state	Unnecessary coupling; component state leaks	Use `$state` rune for component-local reactive state
Ignoring SvelteKit routing conventions	Manual routing breaks framework integration	Follow file-based routing; use `+page.svelte` and `+layout.svelte`
Missing `+error.svelte` handlers	Unhandled route errors produce blank pages	Add `+error.svelte` to every route group that can fail
Skipping accessibility attributes	Screen readers and keyboard users cannot use the UI	Always add ARIA labels and test keyboard navigation

Memory Protocol (MANDATORY)

Before starting:

cat .claude/context/memory/learnings.md

After completing: Record any new patterns or exceptions discovered.

ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.

'use strict';
/**
 * Post-execute hook for svelte-expert
 * Auto-generated by enterprise-bundle-scaffolder
 *
 * Records metrics after skill execution.
 */

function postExecute(_context) {
  // Record execution metrics
  return { ok: true, skill: 'svelte-expert' };
}

module.exports = { postExecute };

'use strict';
/**
 * Pre-execute hook for svelte-expert
 * Auto-generated by enterprise-bundle-scaffolder
 *
 * Validates inputs before skill execution.
 */

function preExecute(context) {
  // Validate skill invocation context
  if (!context || typeof context !== 'object') {
    return { allow: true, message: 'svelte-expert: no context to validate' };
  }
  return { allow: true };
}

module.exports = { preExecute };

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "svelte-expertInput",
  "description": "Input schema for Svelte and SvelteKit expert including components, stores, and routing",
  "type": "object",
  "additionalProperties": true,
  "properties": {
    "target": {
      "type": "string",
      "description": "Target file or path for the skill to operate on"
    },
    "options": {
      "type": "object",
      "description": "Additional options for skill execution",
      "additionalProperties": true
    }
  }
}

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "svelte-expertOutput",
  "type": "object",
  "additionalProperties": true,
  "properties": {
    "ok": {
      "type": "boolean"
    },
    "summary": {
      "type": "string"
    }
  }
}

#!/usr/bin/env node
/**
 * svelte-expert - Consolidated Expert Skill
 * Consolidates 1 individual skills
 */

const fs = require('fs');
const path = require('path');

const args = process.argv.slice(2);
if (args.includes('--help')) {
  console.log(`
svelte-expert - Expert Skill

Usage:
  node main.cjs --list     List consolidated skills
  node main.cjs --help     Show this help

Description:
  Svelte and SvelteKit expert including components, stores, and routing

Consolidated from: 1 skills
`);
  process.exit(0);
}

if (args.includes('--list')) {
  console.log('Consolidated skills:');
  ['svelte-expert'].forEach(s => console.log('  - ' + s));
  process.exit(0);
}

console.log('svelte-expert skill loaded. Use with Claude for expert guidance.');