MCP HubMCP Hub
← Back to Skills

sveltekit-patterns

spences10
Updated Today
15 views
5
5
View on GitHub
Developmentgeneral

About

This skill provides SvelteKit patterns for implementing remote functions including queries, forms, and commands. It includes validated mutations with valibot schemas, automatic redirects, and data refresh capabilities. Use it for handling server-side logic, routing, and database operations in your SvelteKit applications.

Documentation

SvelteKit Patterns

Quick Start

// Query: Read data
export const get_contacts = query(() =>
	db.prepare('SELECT * FROM contacts').all(),
);

// Form: Validated mutation with redirect
export const create = form(
	v.object({ name: v.string() }),
	async ({ name }) => {
		db.prepare('INSERT INTO contacts ...').run(id, name);
		redirect(303, '/contacts');
	},
);

// Command: Mutation with refresh
export const delete_contact = command(v.string(), async (id) => {
	db.prepare('DELETE FROM contacts WHERE id = ?').run(id);
	await get_contacts().refresh();
	return { success: true };
});

Core Principles

  • Types: query (read), form (mutations + redirects), command (mutations only)
  • Validation: Use valibot schemas for all inputs
  • Security: Always include user_id in WHERE clauses
  • Batching: Use query.batch() for N+1 prevention
  • Refresh: Call .refresh() in form/command handlers
  • Use .current: Store queries in variables, check .current === undefined for initial load
  • No manual keys: Never use refresh_key++ or {#key} blocks
  • Return values: Commands must return { success: true }

Reference Files

Quick Install

/plugin add https://github.com/spences10/devhub-crm/tree/main/sveltekit-patterns

Copy and paste this command in Claude Code to install this skill

GitHub 仓库

spences10/devhub-crm
Path: .claude/skills/sveltekit-patterns

Related Skills

subagent-driven-development

Development

This skill executes implementation plans by dispatching a fresh subagent for each independent task, with code review between tasks. It enables fast iteration while maintaining quality gates through this review process. Use it when working on mostly independent tasks within the same session to ensure continuous progress with built-in quality checks.

View skill

algorithmic-art

Meta

This Claude Skill creates original algorithmic art using p5.js with seeded randomness and interactive parameters. It generates .md files for algorithmic philosophies, plus .html and .js files for interactive generative art implementations. Use it when developers need to create flow fields, particle systems, or other computational art while avoiding copyright issues.

View skill

executing-plans

Design

Use the executing-plans skill when you have a complete implementation plan to execute in controlled batches with review checkpoints. It loads and critically reviews the plan, then executes tasks in small batches (default 3 tasks) while reporting progress between each batch for architect review. This ensures systematic implementation with built-in quality control checkpoints.

View skill

cost-optimization

Other

This Claude Skill helps developers optimize cloud costs through resource rightsizing, tagging strategies, and spending analysis. It provides a framework for reducing cloud expenses and implementing cost governance across AWS, Azure, and GCP. Use it when you need to analyze infrastructure costs, right-size resources, or meet budget constraints.

View skill