Spectacular SvelteKit Monorepo Development

This skill provides development guidelines and best practices for working with the Spectacular SvelteKit project template - a comprehensive monorepo setup featuring Svelte 5, TailwindCSS 4, and modern tooling.

Overview

Spectacular is a Sweet & Powerful SvelteKit Project Template designed for building scalable web applications with a modern tech stack. This skill helps you work effectively within the established project architecture and conventions.

Project Architecture

The project uses a monorepo structure managed by Turborepo with the following key characteristics:

Development Guidelines

Package Management

**Always use pnpm** for dependency management:

```bash

Install dependencies

pnpm install

Add a dependency

pnpm add <package-name>

Add a dev dependency

pnpm add -D <package-name>

Add to specific workspace

pnpm --filter <workspace-name> add <package-name>

```

Turborepo Tasks

Use Turborepo for running tasks across the monorepo:

```bash

Run tasks across all workspaces

pnpm turbo run build

pnpm turbo run dev

pnpm turbo run test

Run task for specific workspace

pnpm turbo run build --filter=<workspace-name>

```

UI Component Usage

Shared UI components are located in the `projects/ui` workspace. When using shadcn-svelte components:

1. Import components from the shared UI workspace

2. Use Formsnap for form integrations with shadcn-svelte components

3. Maintain consistency by using the shared component library rather than duplicating components

```svelte

<script lang="ts">

import { Button } from '$lib/components/ui/button';

import { Form } from 'formsnap';

</script>

```

Styling Conventions

Follow TailwindCSS 4 best practices:

Svelte 5 Features

Take advantage of Svelte 5's new features:

Project Structure

The monorepo contains multiple applications accessible at:

Best Practices

1. **Workspace Organization**: Keep shared code in appropriate workspaces (e.g., UI components in `projects/ui`)

2. **Dependency Management**: Use pnpm workspaces to manage inter-package dependencies

3. **Task Execution**: Leverage Turborepo's caching and parallel execution for efficient builds

4. **Component Reuse**: Always check the shared UI workspace before creating new components

5. **Form Handling**: Use Formsnap integration when building forms with shadcn-svelte components

6. **Code Consistency**: Follow the established patterns for Svelte 5 and TailwindCSS 4

Common Commands

```bash

Install dependencies for all workspaces

pnpm install

Run development server

pnpm turbo run dev

Build all projects

pnpm turbo run build

Run tests

pnpm turbo run test

Lint code

pnpm turbo run lint

Format code

pnpm turbo run format

```

Notes