Generate comprehensive documentation for SvelteKit projects covering routing, load functions, form actions, and full-stack patterns
Generate comprehensive, production-ready documentation for SvelteKit applications following official conventions and best practices.
This skill creates structured documentation for SvelteKit projects that covers:
When the user requests SvelteKit documentation:
1. **Analyze the project structure**
- Read `svelte.config.js` to understand adapter and configuration
- Examine `src/routes/` directory structure to map routing patterns
- Identify page types: `+page.svelte`, `+page.server.ts`, `+layout.svelte`, `+server.ts`
- Check for `src/lib/` components and utilities
- Review `vite.config.ts` for build customizations
2. **Document routing architecture**
- Map all routes from the filesystem structure
- Document route parameters and optional parameters
- Explain layout hierarchies and nested layouts
- Cover route groups if present (e.g., `(app)`, `(marketing)`)
- Document any advanced routing patterns (matchers, rest parameters)
3. **Document data loading patterns**
- Identify all `+page.server.ts` and `+layout.server.ts` files
- Explain load function return values and type safety
- Document any universal load functions (`+page.ts`, `+layout.ts`)
- Cover streaming and deferred data if used
- Explain parent data access patterns
4. **Document form actions**
- List all form actions from `+page.server.ts` files
- Document named actions and default actions
- Explain validation patterns and error handling
- Cover progressive enhancement with `use:enhance`
- Document any file upload handling
5. **Document rendering strategies**
- Identify prerendered routes (`export const prerender = true`)
- Document SSR configurations (`export const ssr`)
- Explain CSR-only routes if present (`export const csr`)
- Cover any adapter-specific configurations
6. **Document state management**
- Explain reactive state patterns with runes (`$state`, `$derived`, `$effect`)
- Document context API usage if present
- Cover stores from `$app/stores` (page, navigating, updated)
- Explain any custom state management solutions
7. **Document API routes**
- List all `+server.ts` endpoints
- Document HTTP methods (GET, POST, PUT, DELETE, PATCH)
- Explain request/response patterns
- Cover authentication and authorization if present
8. **Document configuration and deployment**
- Explain adapter configuration (Node, Vercel, Netlify, static, etc.)
- Document environment variables and `$env` imports
- Cover build optimization settings
- Explain deployment requirements
9. **Create structured documentation files**
- Generate `ARCHITECTURE.md` with project overview and structure
- Create `ROUTING.md` with complete route documentation
- Generate `DATA_LOADING.md` for load functions and data patterns
- Create `FORMS.md` documenting all form actions
- Generate `API.md` for server endpoints
- Create `DEPLOYMENT.md` with build and deploy instructions
10. **Add inline code documentation**
- Add JSDoc comments to load functions explaining return types
- Document form action schemas and validation
- Add comments to complex reactive patterns
- Explain non-obvious SvelteKit conventions
Generate markdown files with the following structure:
```markdown
[Project description and tech stack]
[Annotated tree of src/ directory]
[SvelteKit conventions used in this project]
[Adapter and build configuration]
```
```markdown
[Table of all routes with descriptions]
[Visual representation of layout nesting]
[Dynamic segments and matchers]
[Groups, optional parameters, rest routes]
```
```markdown
[Document all +page.server.ts load functions]
[Document all +page.ts load functions]
[Explain parent() usage]
[Document streaming patterns if used]
```
```markdown
[Validation schema and error handling]
[use:enhance customizations]
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/sveltekit-documentation-generator/raw