sveltekit-page-generator_skill

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