deno-frontend

# Deno Frontend Development

## Overview

This skill covers frontend development in Deno using Fresh 2.x (Deno's web framework), Preact (a lightweight React alternative), and Tailwind CSS. Fresh uses "island architecture" where pages render on the server and only interactive parts ship JavaScript to the browser.

## When to Use This Skill

- Creating a new Fresh web application
- Building interactive UI components (islands)
- Adding server-rendered pages and routes
- Integrating Tailwind CSS for styling
- Choosing between islands (client-side) vs components (server-only)
- Working with Preact hooks and signals

Apply these practices when building web applications in Deno.

## CRITICAL: Fresh 2.x vs 1.x

**Always use Fresh 2.x patterns.** Fresh 1.x is deprecated. Key differences:

| Fresh 1.x (Deprecated) | Fresh 2.x (Current) |
|------------------------|---------------------|
| `$fresh/server.ts` imports | `import { App } from "fresh"` |
| `fresh.gen.ts` manifest file | No manifest file needed |
| `dev.ts` entry point | `vite.config.ts` for dev |
| `fresh.config.ts` | Config via `new App()` |
| `handler(req, ctx)` two params | `handler(ctx)` single param |
| Separate `_404.tsx`/`_500.tsx` | Unified `_error.tsx` |

**NEVER use these outdated imports:**
```typescript
// ❌ WRONG - Fresh 1.x patterns
import { Handlers, PageProps } from "$fresh/server.ts";
import { Head } from "$fresh/runtime.ts";
import manifest from "./fresh.gen.ts";

// ❌ WRONG - Alpha versions (outdated)
import { App } from "jsr:@fresh/core@2.0.0-alpha.1";

// ✅ CORRECT - Fresh 2.x stable
import { App, staticFiles } from "fresh";
import { define } from "./utils/state.ts"; // Project-local define helpers
```

## Fresh Framework

Reference: https://fresh.deno.dev/docs

Fresh is Deno's web framework. It uses **island architecture** - pages are rendered on the server, and only interactive parts ("islands") get JavaScript on the client.

### Creating a Fresh Project

```bash
deno run -Ar jsr:@fresh/init
c