Can I use standard React libraries with this Deno skill?

This skill focuses on Preact, which is a lightweight 3KB alternative to React. While many React patterns and hooks are identical, this skill emphasizes Preact-specific optimizations like signals and native HTML 'class' attributes.

Why use Preact signals instead of the standard useState hook?

Signals provide more granular reactivity by updating only the specific DOM elements that change rather than re-rendering the entire component tree. They are often more efficient and can be defined outside of components for easier state sharing.

What is the benefit of island architecture in Fresh?

Island architecture allows pages to be rendered on the server, shipping JavaScript only for specific interactive components known as 'islands.' This results in significantly faster load times and better SEO compared to traditional Single Page Applications.

How does Tailwind CSS integrate with Fresh 2.0?

Fresh 2.0 uses Vite for its build process. This skill helps you configure the Tailwind CSS Vite plugin in your deno.json and vite.config.ts files to enable utility-first styling with hot module replacement.

Deno Frontend Development with Fresh

Name: Deno Frontend Development with Fresh
Author: donjo

bydonjo

•

デザインツール

Build high-performance web applications using the Fresh framework, Preact components, and Tailwind CSS within the Deno ecosystem.

This skill provides comprehensive guidance for developing modern web interfaces using Deno's Fresh framework, leveraging island architecture for optimal performance. It enables developers to build server-side rendered pages with async components, create interactive UI elements using Preact signals, and style applications efficiently with Tailwind CSS. Whether you're setting up a new Fresh project, managing file-based routing, or deploying to Deno Deploy, this skill ensures best practices for shipping minimal JavaScript while maintaining a rich user experience.

主な機能

012 GitHub stars

02Streamlined production build and deployment workflows for Deno Deploy

03Seamless Tailwind CSS integration via Vite and utility-first styling

04Efficient state management using Preact signals and reactive hooks

05File-based routing and API development within the Fresh framework

06Island architecture implementation for optimized client-side JavaScript

ユースケース

01Building lightning-fast, SEO-friendly landing pages and blogs with server-side rendering

02Migrating existing React-based logic to the lightweight Preact and Deno environment

03Developing interactive dashboards that use selective hydration to minimize bundle size

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add donjo/denoland deno-frontend

For use in Claude.ai and ChatGPT

Download Skill