Official agent skill

Deno Frontend Development

by denoland in denoland/skills

Chooses between running regular npm frontend frameworks under Deno and building with Fresh, Deno's island-architecture framework, with Fresh 2.x guidance.

OfficialMITAuto-check passedFrontend & Design

Install Deno Frontend Development

skills CLI
$ npx skills add denoland/skills --skill deno-frontend -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install denoland/skills deno-frontend --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/denoland/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/deno-frontend .claude/skills/deno-frontend && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
deno-frontend
GitHub stars
100
Token cost
~783 tokens
SKILL.md length
299 words
Files
3 (incl. references)
Skills in repo
5
Repo updated
First seen
Licence
MIT

At a glance

Chooses between running regular npm frontend frameworks under Deno and building with Fresh, Deno's island-architecture framework, with Fresh 2.x guidance.

  • Works in 3 steps: Islands ship JavaScript — keep them… → Island props must be serializable.… → Handlers take a single (ctx) parameter.
  • Starting a Vite, Astro or Next.js app under Deno
  • SKILL.md covers Regular npm frameworks — the…, Fresh — Deno's own framework and Further reading
  • Calls deno and npm

What it does

The skill offers two paths, picked by what the project already uses. Regular npm frameworks such as React, Vue, Svelte, Vite, Astro, Next.js, Nuxt and SvelteKit run unchanged: deno create replaces npm create, deno install reads package.json and deno task runs its scripts, and the framework's own docs govern everything else. Some frameworks, Next.js among them, need nodeModulesDir set to auto in deno.json, and dev servers generally want the -A permission flag.

Fresh suits a new Deno-first project that wants server rendering with little client JavaScript. Only components in islands ship JavaScript, with file-based routes in routes, server-only components in components, Vite for the build and Preact with signals for state. Island props must be serializable and handlers take one ctx parameter. references/FRESH.md covers routes, middleware, islands, signals and Tailwind, and references/FRESH_MIGRATION.md covers moving from 1.x or a 2.0.0 alpha to 2.x.

When your agent uses it

  • Starting a Vite, Astro or Next.js app under Deno
  • Building a server-rendered Fresh app with islands
  • Migrating a Fresh 1.x project to 2.x
  • Working out why a framework fails under Deno permissions

Example prompts

  • “Create a new Vite React app with Deno and get the dev server running.”
  • “Add an interactive counter island to my Fresh project and keep its props serializable.”
  • “Migrate this Fresh 1.x project to 2.x.”

Requirements

  • Deno installed

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Islands ship JavaScript — keep them small, leave everything else in
  2. Island props must be serializable. Functions cannot be passed.
  3. Handlers take a single (ctx) parameter.

What it can do on your machine

Read from SKILL.md and the folder at commit d5f6ace. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • deno
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • fresh.deno.dev

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Deno Frontend Development loads about 783 tokens when it runs, and up to ~3.5k if it reads all its reference files. Until then it costs about 84 tokens; SKILL.md has 299 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~84
When it runs · the whole SKILL.md, loaded when a task matches
~783
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from denoland/skills at commit d5f6ace, republished under its MIT licence (© denoland). 299 words, ~783 tokens.

Download SKILL.mdSave it as .claude/skills/deno-frontend/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
deno-frontend
description
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.
license
MIT
metadata.author
denoland
metadata.version
3.0

Frontend development with Deno

Two paths. Pick by what the project already uses.

Regular npm frameworks — the usual choice

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.

bash
deno create vite my-app     # or astro, next, nuxt, svelte…
cd my-app
deno install
deno task dev

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:

  • Some frameworks need "nodeModulesDir": "auto" in deno.json; Next.js does.
  • Permissions apply to the dev server too — framework tasks generally want -A.
  • Deploying: see the deno-deploy skill, which lists per-framework build commands and presets.

Fresh — Deno's own framework

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.

bash
deno run -Ar jsr:@fresh/init
cd my-project
deno task dev                # http://localhost:5173

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.

tsx
// 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>;
}

Three rules carry most of the weight:

  1. Islands ship JavaScript — keep them small, leave everything else in components/.
  2. Island props must be serializable. Functions cannot be passed.
  3. Handlers take a single (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.

Further reading

  • https://fresh.deno.dev/docs — Fresh documentation
  • references/FRESH.md — Fresh 2.x patterns in depth
  • references/FRESH_MIGRATION.md — Fresh 1.x and alpha migration

© denoland, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (references) in skills/deno-frontend of denoland/skills.

  • SKILL.md
  • references/FRESH.md
  • references/FRESH_MIGRATION.md

Open the folder on GitHubat commit d5f6ace

Compare with similar skills

Deno Frontend Development next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Deno Frontend Development compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Deno Frontend Development this skilldenoland/skills100—~783Automated safety check: PassMIT
Frontend Design UltimateaAAaqwq/AGI-Super-Team1052 repos~2.7kAutomated safety check: PassMIT
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT
Design StyleCastor6/tactus3761 repos~2.1kAutomated safety check: PassApache-2.0
Senior FrontendOhh-889/skyroc7952 repos~1.1kAutomated safety check: NotesMIT
Gridgeistohmiler/gridgeist114—~2.6kAutomated safety check: PassMIT

Similar skills

  • Frontend Design Ultimate

    aAAaqwq/AGI-Super-Team

    Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed.

    105 GitHub starsUsed in 2 repos~2.7k tokens
    Frontend & DesignAuto-check passed
  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes
  • Design Style

    Castor6/tactus

    A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.

    376 GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed
  • Senior Frontend

    Ohh-889/skyroc

    Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS.

    795 GitHub starsUsed in 2 repos~1.1k tokens
    Frontend & DesignAuto-check: notes
  • Gridgeist

    ohmiler/gridgeist

    A skill your agent uses when creating, redesigning, or reviewing web interfaces that need product-specific structure, clear hierarchy, responsive composition, accessible interaction, or relief from…

    114 GitHub stars~2.6k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed
  • Feature Sliced Design

    feature-sliced/skills

    Official Feature-Sliced Design (FSD) v2.1 skill for applying the methodology to frontend projects.

    109 GitHub stars~5.5k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

More from denoland/skills

  • Official

    Guides writing, running and configuring Deno 2.9+ projects: installing npm and JSR dependencies, permissions, config file precedence and the built-in fmt, lint, test and compile toolchain.

    100 GitHub stars~2.7k tokensUpdated 2 mo ago
    Auto-check passed
  • Deno Deploy

    denoland/skills

    Official

    Guides deploying Deno apps with the deno deploy CLI, including pre-flight checks, environment variables, Deno KV, custom domains and the --tunnel flag for local development.

    100 GitHub stars~5.5k tokensUpdated 2 mo ago
    Auto-check: notes
  • Deno Sandbox SDK

    denoland/skills

    Official

    Runs untrusted or AI-generated code in isolated Deno Sandbox microVMs using the @deno/sandbox SDK, with lifecycle, process and streaming guidance.

    100 GitHub stars~2.7k tokensUpdated 2 mo ago
    Auto-check passed
  • Migrate to Deno

    denoland/skills

    Official

    Moves a Node.js, npm, Yarn, pnpm or Bun project to Deno in reversible steps, starting with Deno as the package manager and changing no code unless needed.

    100 GitHub stars~2.2k tokensUpdated 2 mo ago
    Auto-check: warnings

Questions about Deno Frontend Development

What does Deno Frontend Development do?

Chooses between running regular npm frontend frameworks under Deno and building with Fresh, Deno's island-architecture framework, with Fresh 2.x guidance. The skill offers two paths, picked by what the project already uses.json and deno task runs its scripts, and the framework's own docs govern everything else.

When should I use Deno Frontend Development?

Deno Frontend Development fits situations like: starting a Vite, Astro or Next.js app under Deno; building a server-rendered Fresh app with islands; migrating a Fresh 1.x project to 2.x; working out why a framework fails under Deno permissions.

How do I install Deno Frontend Development in Claude Code?

Run `npx skills add denoland/skills --skill deno-frontend -a claude-code`. Or copy the skill folder (skills/deno-frontend in denoland/skills) into .claude/skills/deno-frontend in your project. Claude Code loads it when a task matches its description.

How do I install Deno Frontend Development in Codex?

Run `npx skills add denoland/skills --skill deno-frontend -a codex`. Or copy the skill folder (skills/deno-frontend in denoland/skills) into .agents/skills/deno-frontend in your project. Codex loads it when a task matches its description.

Can I use Deno Frontend Development in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add denoland/skills --skill deno-frontend -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/deno-frontend, .gemini/skills/deno-frontend, .github/skills/deno-frontend and .opencode/skills/deno-frontend in your project.

What does Deno Frontend Development need to run?

Going by SKILL.md and its folder, Deno Frontend Development needs the command-line tools its instructions call (deno and npm). Our summary lists: Deno installed.

Does Deno Frontend Development access the network?

SKILL.md names 1 domain. As links in the text: fresh.deno.dev. This is read from the text; nothing was executed.

Is Deno Frontend Development safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Deno Frontend Development use?

Deno Frontend Development is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Deno Frontend Development use?

About 783 tokens (SKILL.md is roughly 3.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.7k tokens, read only when the agent opens those files.

What are the alternatives to Deno Frontend Development?

Skills that share tags, products or a category with Deno Frontend Development: Frontend Design Ultimate (aAAaqwq/AGI-Super-Team, 105 stars), Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Design Style (Castor6/tactus, 376 stars) and Senior Frontend (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Deno Frontend Development?

denoland (a GitHub organization, an official publisher) maintains it in denoland/skills, which has 100 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on July 29, 2026.

Source: denoland/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.