关于 deno-frontend
面向现有或新项目开发者的 Deno 前端开发技能，涵盖常见 npm 框架和 Fresh，并分别提供对应指导。
主要功能
- 01在 Deno 中使用 npm 前端框架
- 02通过 Deno 命令创建并运行项目
- 03使用岛屿架构构建 Fresh 应用
- 04Fresh 路由与组件指导
- 05Fresh 版本迁移说明
适用场景
- 01使用 Deno 启动前端项目
- 02在 Deno 中运行 React 或 Svelte 项目
- 03使用 Fresh 构建服务端渲染页面
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/deno-frontend确认已加载。
附带文件references/FRESH_MIGRATION.mdreferences/FRESH.md
详细介绍
使用 Deno 进行前端开发
两条路径。根据项目现有技术栈选择。
常规 npm 框架 — 通常的选择
Deno 支持常见的前端生态：React、Vue、Svelte、Solid、Vite、Astro、 Next.js、Nuxt、SvelteKit、Remix、SolidStart。无需移植，也没有 Deno 专属的编写方式。
deno create vite my-app # or astro, next, nuxt, svelte…
cd my-app
deno install
deno task dev
deno create 就是 npm create。deno install 会读取 package.json。
deno task <script> 会运行 package.json 脚本。区别就这些。
其他所有事项都遵循框架自己的文档——路由、 组件、数据加载和配置都由框架负责，而非 Deno。 不要自行发明带有 Deno 风格的 API 变体，也不要在 React 或 Svelte 项目中 套用 Fresh 模式。
只需了解以下几点：
- 部分框架需要在
deno.json中设置"nodeModulesDir": "auto"；Next.js 就需要。 - 权限也适用于开发服务器——框架任务通常需要
-A。 - 部署：参阅
deno-deploy技能，其中列出了各框架的构建 命令和预设。
Fresh — Deno 自有框架
Fresh 适合希望使用服务器渲染、且客户端 JavaScript 尽可能少的全新 Deno 优先项目。
它采用岛屿架构：页面在服务器上渲染，
只有 islands/ 中的组件会发送 JavaScript。
deno run -Ar jsr:@fresh/init
cd my-project
deno task dev # http://localhost:5173
Fresh 项目基于 Vite：使用 vite.config.ts 进行构建，使用 main.ts 作为
服务器入口，在 routes/ 中定义基于文件的路由，在 islands/ 中定义岛屿，在 components/ 中定义仅限服务器端的
组件。Preact 提供组件模型，并通过 signals 管理状态。
// 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>;
}
以下三条规则最为重要：
- 岛屿会发送 JavaScript——保持精简，其他内容都放在
components/中。 - 岛屿的属性必须可序列化。不能传递函数。
- 处理器只接收一个
(ctx)参数。
加载 references/FRESH.md，了解路由、处理器、define 辅助函数、中间件、
岛屿、signals 和 Tailwind。
使用从 "fresh" 导入的 Fresh 2.x。对于现有的 1.x 项目，或固定使用
2.0.0-alpha.* 版本的项目，请参阅 references/FRESH_MIGRATION.md。
延伸阅读
- https://fresh.deno.dev/docs — Fresh 文档
references/FRESH.md— 深入了解 Fresh 2.x 模式references/FRESH_MIGRATION.md— Fresh 1.x 和 alpha 版迁移指南