deno-frontend

Develop Deno frontends with Fresh 2.x, Preact, and Tailwind.

Updated Apr 22, 2026
One-click install
npx skills add https://github.com/mkrlabs/specflow --skill deno-frontend-mkrlabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: deno-frontend
Source: https://github.com/mkrlabs/specflow/tree/main/.claude/skills/deno-frontend
Command: npx skills add https://github.com/mkrlabs/specflow --skill deno-frontend-mkrlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Deno-based frontend development with Fresh 2.x can be verbose and error-prone; this skill provides clear guidance, patterns, and best practices to build server-rendered pages with islands, Preact, and Tailwind in a cohesive way.

Core Features & Use Cases

  • Provides Fresh 2.x project structure guidance, including main.ts, routes, islands, and server components.
  • Explains how to migrate from Fresh 1.x to Fresh 2.x and how to adopt single-context handlers, static file serving, and Vite-based dev workflows.
  • Covers integration points for Preact, signals, and Tailwind CSS within a Deno frontend project.

Quick Start

Install a Fresh 2.x project and bootstrap with the standard Deno setup to begin building islands and routes.

Frequently Asked Questions about deno-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up a Fresh 2.x project with Preact and Tailwind in Deno?▼

To set up a Fresh 2.x project, bootstrap the standard Deno setup to establish a project structure with main.ts, routes, islands, and server components using Preact and Tailwind for the frontend.

How do I migrate from Fresh 1.x to Fresh 2.x in Deno?▼

Migrating to Fresh 2.x involves adopting single-context handlers and Vite-based dev workflows. The skill provides specific patterns and configuration guidelines to transition your routes and islands from Fresh 1.x.

Does Fresh 2.x support single-context handlers and server components?▼

Yes, Fresh 2.x supports single-context handlers and server components. It uses a Vite-based dev workflow ensuring proper imports from 'fresh' to build server-rendered pages with islands.

What is the best way to structure routes and islands in a Deno Fresh app?▼

The best way to structure routes and islands is by following Fresh 2.x project conventions. Organize your main.ts, routes, and islands directories while using TypeScript to ensure cohesive server-rendered pages.

Can I use Preact signals with Tailwind CSS in Deno Fresh?▼

Yes, you can integrate Preact signals and Tailwind CSS within a Deno Fresh project. The skill covers integration points and best practices for combining these technologies in your frontend components.

Why does my Fresh app require Vite and TypeScript setup?▼

Your Fresh app requires Vite and TypeScript setup because Fresh 2.x relies on a Vite-based dev workflow to ensure single-context handler patterns and proper imports from 'fresh' for server rendering.