SvelteKit Offline-First Video App

Guidelines for developing offline-first SvelteKit applications with video processing capabilities, DaisyUI/TailwindCSS styling, and data visualization.

Technology Stack

This skill enforces the following technology stack:

Architecture Principles

Offline-First & Static Generation

The entire website is offline-first and statically generated. All functionality must be compatible with SSG:

Project Structure

Development Guidelines

UI Components

**Always use DaisyUI components** for UI elements:

Example:

```svelte

<button class="btn btn-primary">

Primary Action

</button>

<div class="card bg-base-100 shadow-xl">

<div class="card-body">

<h2 class="card-title">Card Title</h2>

<p>Card content</p>

</div>

</div>

```

Icons

**Always use Heroicons** through unplugin-icons virtual imports:

```svelte

<script>

import IconPlay from '~icons/heroicons/play-solid';

import IconPause from '~icons/heroicons/pause-solid';

</script>

<IconPlay class="w-6 h-6" />

<IconPause class="w-6 h-6 text-primary" />

```

Data Visualization

**Always use Chart.js** through the svelte-chartjs wrapper:

```svelte

<script>

import { Line } from 'svelte-chartjs';

import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

const data = {

labels: ['Jan', 'Feb', 'Mar'],

datasets: [{

label: 'Dataset',

data: [10, 20, 30]

}]

};

</script>

<Line {data} />

```

Video Processing

Use @ffmpeg/ffmpeg and @ffmpeg/util for all video processing operations. Processing happens entirely in the browser:

```svelte

<script>

import { FFmpeg } from '@ffmpeg/ffmpeg';

import { fetchFile } from '@ffmpeg/util';

const ffmpeg = new FFmpeg();

async function processVideo(file) {

await ffmpeg.load();

await ffmpeg.writeFile('input.mp4', await fetchFile(file));

await ffmpeg.exec(['-i', 'input.mp4', 'output.mp4']);

const data = await ffmpeg.readFile('output.mp4');

// Handle output

}

</script>

```

Code Quality Standards

**ALWAYS include:**

1. **Debug Statements**: Add console logging for key operations

```javascript

console.log('[Component] Operation started', { data });

console.debug('[Component] Processing step', { step });

```

2. **Code Comments**: Document complex logic and business rules

```javascript

// Calculate thumbnail timestamp (10% into video duration)

const thumbnailTime = duration * 0.1;

```

3. **Error Handling**: Wrap operations in try-catch blocks

```javascript

try {

await processVideo(file);

} catch (error) {

console.error('[VideoProcessor] Failed to process video:', error);

// Show user-friendly error message

}

```

Component Template

```svelte

<script lang="ts">

import IconExample from '~icons/heroicons/example-solid';

// Component props

export let data: any;

// Component state

let loading = false;

// Event handlers with error handling

async function handleAction() {

console.log('[ComponentName] Action triggered', { data });

try {

loading = true;

// Perform action

console.debug('[ComponentName] Action completed');

} catch (error) {

console.error('[ComponentName] Action failed:', error);

// Handle error

} finally {

loading = false;

}

}

</script>

<!-- DaisyUI components with TailwindCSS positioning -->

<div class="container mx-auto p-4">

<div class="card bg-base-100 shadow-xl">

<div class="card-body">

<h2 class="card-title">

<IconExample class="w-6 h-6" />

Component Title

</h2>

<button

class="btn btn-primary"

class:loading

on:click={handleAction}

>

Action

</button>

</div>

</div>

</div>

```

Static Site Generation Compatibility

Ensure all code is compatible with static generation:

```svelte

<script>

import { onMount } from 'svelte';

import { browser } from '$app/environment';

onMount(() => {

// Client-side initialization

console.log('[Component] Mounted in browser');

});

// Conditional execution

if (browser) {

// Browser-only code

}

</script>

```

Constraints