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.