Project Context: Schreifuchs.ch

Overview

This project is a personal portfolio website for "Schreifuchs", featuring sections for Photography (Fotos), Informatics (Informatik), Music (Musig), and Video. It is currently being transitioned from a static site to a dynamic Node.js site powered by Nextcloud via WebDAV.

Tech Stack

Framework: Svelte 5 (using Runes) & SvelteKit
Language: TypeScript
Styling: Tailwind CSS (with custom text-shadow plugin)
Bundler: Vite
Adapter: @sveltejs/adapter-static (SSG)
Markdown: @ts-stack/markdown for content rendering

Directory Structure

src/routes/: File-based routing.
- src/routes/fotos, informatik, musig, video: Feature-specific pages.
src/lib/: Shared utilities and components.
- src/lib/components/: Reusable UI components (ImageTile, ImageLinkTile, Markdown).
- src/lib/images/: Local image assets imported in components.
static/: Static assets served as-is.
- Contains Markdown content files (Fotos.md, etc.) and their associated attachments.

Key Conventions

Svelte 5: Use Runes ($state, $derived, $props, etc.) for reactivity.
Styling: Use Tailwind utility classes. The font family is configured to 'Outfit'.
Content: Content is largely driven by Markdown files located on Nextcloud which are fetched and parsed.

Development Scripts

npm run dev: Start development server.
npm run build: Build for production.
npm run check: Run Svelte and TypeScript checks.

Agent Instructions (Svelte MCP)

You are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:

Available MCP Tools:

1. list-sections

Use this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths. When asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.

2. get-documentation

Retrieves full documentation content for specific sections. Accepts single or multiple sections. After calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.

3. svelte-autofixer

Analyzes Svelte code and returns issues and suggestions. You MUST use this tool whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.

4. playground-link

Generates a Svelte Playground link with the provided code. After completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.

2.8 KiB Raw Blame History