playbooks

home / skills / ehtbanton / claudeskillsrepo / sveltekit-page-generator

sveltekit-page-generator skill

/sveltekit-page-generator

This skill generates complete SvelteKit page files with load functions and form actions for rapid route creation.

npx playbooks add skill ehtbanton/claudeskillsrepo --skill sveltekit-page-generator

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
646 B
---
name: sveltekit-page-generator
description: Generate SvelteKit page files with load functions and form actions. Triggers on "create sveltekit page", "generate svelte route", "sveltekit load", "+page.svelte".
---

# SvelteKit Page Generator

Generate SvelteKit pages with load functions and form actions.

## Output Requirements

**File Output:** `+page.svelte`, `+page.server.ts`
**Format:** Valid SvelteKit
**Standards:** SvelteKit 2.x

## When Invoked

Immediately generate complete SvelteKit page files.

## Example Invocations

**Prompt:** "Create SvelteKit page for blog posts"
**Output:** Complete `+page.svelte` and `+page.server.ts`.

Overview

This skill generates complete SvelteKit page files (+page.svelte and +page.server.ts) tailored to your route, including load functions and form actions. It produces TypeScript-compatible, SvelteKit 2.x–compliant code ready to drop into a project. Use the triggers to quickly scaffold pages for common patterns like lists, detail views, or form-backed workflows.

How this skill works

When invoked it inspects the prompt for route intent, data needs, and action names, then outputs two files: a client-side +page.svelte with UI and form wiring, and a server-side +page.server.ts that contains typed load and action handlers. The generated code follows SvelteKit conventions and uses TypeScript types where applicable. Outputs are complete files you can paste into a route folder and run immediately under SvelteKit 2.x.

When to use it

  • Scaffolding new routes and pages during development
  • Creating CRUD pages with server-side form actions
  • Generating load functions to fetch data for a route
  • Rapid prototyping of list/detail or form-driven pages
  • When you need SvelteKit 2.x–compatible starter files quickly

Best practices

  • Specify data shapes and expected actions in the prompt for accurate TypeScript types
  • Indicate whether data is fetched from an API, database, or local store
  • Ask for validation rules if you need server-side form validation generated
  • Review and adapt authentication/authorization stubs to your app’s logic
  • Keep generated code as a starting point; customize business logic and error handling

Example use cases

  • Create SvelteKit page for blog posts with a paginated list and post creation form
  • Generate a product detail page with load fetching and a server action for reviews
  • Scaffold an admin route with protected load and multiple form actions (create, update)
  • Produce a contact page with client form and server-side validation and email sending

FAQ

Which files are produced?

It outputs two files: +page.svelte and +page.server.ts, formatted for SvelteKit 2.x.

Is the code TypeScript-ready?

Yes. Generated server and client code use TypeScript types where prompt details allow typed shapes.

Can it include multiple form actions?

Yes. Include the action names or desired behaviors in your prompt and it will scaffold multiple named actions.