OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add denoland/skills --skill deno-frontend
Use when building a web frontend with Deno — running React, Vite, Astro, SvelteKit, Next.js, Nuxt or other npm frameworks under Deno, or working with Fresh, Deno's own island-architecture framework. Covers which path to pick, Fresh 2.x routes, handlers, islands, Preact signals, Tailwind, and Fresh 1.x to 2.x migration.
npx skills add denoland/skills --skill deno-frontend
Two paths. Pick by what the project already uses.
Deno runs the normal frontend ecosystem: React, Vue, Svelte, Solid, Vite, Astro, Next.js, Nuxt, SvelteKit, Remix, SolidStart. Nothing needs to be ported, and there is no Deno-specific way to write them.
deno create is npm create. deno install reads package.json.
deno task <script> runs package.json scripts. That is the whole difference.
Follow the framework's own documentation for everything else — routing, components, data loading, and config are the framework's concern, not Deno's. Don't invent Deno-flavoured variants of their APIs, and don't reach for Fresh patterns in a React or Svelte project.
The only things worth knowing:
"nodeModulesDir": "auto" in deno.json; Next.js does.-A.deno-deploy skill, which lists per-framework build
commands and presets.Fresh suits a new Deno-first project that wants server rendering with minimal
client JavaScript. It uses island architecture: pages render on the server,
and only components in islands/ ship JavaScript.
A Fresh project is Vite-based: vite.config.ts for the build, main.ts for the
server, file-based routes in routes/, islands in islands/, server-only
components in components/. Preact supplies the component model, with signals
for state.
Three rules carry most of the weight:
components/.(ctx) parameter.Load references/FRESH.md for routes, handlers, define helpers, middleware,
islands, signals, and Tailwind.
Use Fresh 2.x, imported from "fresh". For an existing 1.x project, or one
pinned to a 2.0.0-alpha.* release, see references/FRESH_MIGRATION.md.
references/FRESH.md — Fresh 2.x patterns in depthreferences/FRESH_MIGRATION.md — Fresh 1.x and alpha migration// islands/Counter.tsx — interactive, ships JS
import { useSignal } from "@preact/signals";
export default function Counter() {
const count = useSignal(0);
return <button onClick={() => count.value++}>Count: {count.value}</button>;
}