[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-6a7a1b72-dc9f-469f-8400-5057256e88f4":3,"$fZWHzdtFGJD8MvxB1MFMe_LJLIhDwmo3yjdO1e3cu9Gk":42},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":33},"6a7a1b72-dc9f-469f-8400-5057256e88f4","hono","使用Hono构建超快Web API和全栈应用程序——在Cloudflare Workers、Deno、Bun、Node.js以及任何WinterCG兼容运行时上运行。","cat_coding_backend","mod_coding","sickn33,coding","---\nname: hono\ndescription: \"Build ultra-fast web APIs and full-stack apps with Hono — runs on Cloudflare Workers, Deno, Bun, Node.js, and any WinterCG-compatible runtime.\"\ncategory: backend\nrisk: safe\nsource: community\ndate_added: \"2026-03-18\"\nauthor: suhaibjanjua\ntags: [hono, edge, cloudflare-workers, bun, deno, api, typescript, web-standards]\ntools: [claude, cursor, gemini]\n---\n\n# Hono Web Framework\n\n## Overview\n\nHono (炎, \"flame\" in Japanese) is a small, ultrafast web framework built on Web Standards (`Request`\u002F`Response`\u002F`fetch`). It runs anywhere: Cloudflare Workers, Deno Deploy, Bun, Node.js, AWS Lambda, and any WinterCG-compatible runtime — with the same code. Hono's router is one of the fastest available, and its middleware system, built-in JSX support, and RPC client make it a strong choice for edge APIs, BFFs, and lightweight full-stack apps.\n\n## When to Use This Skill\n\n- Use when building a REST or RPC API for edge deployment (Cloudflare Workers, Deno Deploy)\n- Use when you need a minimal but type-safe server framework for Bun or Node.js\n- Use when building a Backend for Frontend (BFF) layer with low latency requirements\n- Use when migrating from Express but wanting better TypeScript support and edge compatibility\n- Use when the user asks about Hono routing, middleware, `c.req`, `c.json`, or `hc()` RPC client\n\n## How It Works\n\n### Step 1: Project Setup\n\n**Cloudflare Workers (recommended for edge):**\n```bash\nnpm create hono@latest my-api\n# Select: cloudflare-workers\ncd my-api\nnpm install\nnpm run dev    # Wrangler local dev\nnpm run deploy # Deploy to Cloudflare\n```\n\n**Bun \u002F Node.js:**\n```bash\nmkdir my-api && cd my-api\nbun init\nbun add hono\n```\n\n```typescript\n\u002F\u002F src\u002Findex.ts (Bun)\nimport { Hono } from 'hono';\n\nconst app = new Hono();\n\napp.get('\u002F', c => c.text('Hello Hono!'));\n\nexport default {\n  port: 3000,\n  fetch: app.fetch,\n};\n```\n\n### Step 2: Routing\n\n```typescript\nimport { Hono } from 'hono';\n\nconst app = new Hono();\n\n\u002F\u002F Basic methods\napp.get('\u002Fposts', c => c.json({ posts: [] }));\napp.post('\u002Fposts', c => c.json({ created: true }, 201));\napp.put('\u002Fposts\u002F:id', c => c.json({ updated: true }));\napp.delete('\u002Fposts\u002F:id', c => c.json({ deleted: true }));\n\n\u002F\u002F Route params and query strings\napp.get('\u002Fposts\u002F:id', async c => {\n  const id = c.req.param('id');\n  const format = c.req.query('format') ?? 'json';\n  return c.json({ id, format });\n});\n\n\u002F\u002F Wildcard\napp.get('\u002Fstatic\u002F*', c => c.text('static file'));\n\nexport default app;\n```\n\n**Chained routing:**\n```typescript\napp\n  .get('\u002Fusers', listUsers)\n  .post('\u002Fusers', createUser)\n  .get('\u002Fusers\u002F:id', getUser)\n  .patch('\u002Fusers\u002F:id', updateUser)\n  .delete('\u002Fusers\u002F:id', deleteUser);\n```\n\n### Step 3: Middleware\n\nHono middleware works exactly like `fetch` interceptors — before and after handlers:\n\n```typescript\nimport { Hono } from 'hono';\nimport { logger } from 'hono\u002Flogger';\nimport { cors } from 'hono\u002Fcors';\nimport { bearerAuth } from 'hono\u002Fbearer-auth';\n\nconst app = new Hono();\n\n\u002F\u002F Built-in middleware\napp.use('*', logger());\napp.use('\u002Fapi\u002F*', cors({ origin: 'https:\u002F\u002Fmyapp.com' }));\napp.use('\u002Fapi\u002Fadmin\u002F*', bearerAuth({ token: process.env.API_TOKEN! }));\n\n\u002F\u002F Custom middleware\napp.use('*', async (c, next) => {\n  c.set('requestId', crypto.randomUUID());\n  await next();\n  c.header('X-Request-Id', c.get('requestId'));\n});\n```\n\n**Available built-in middleware:** `logger`, `cors`, `csrf`, `etag`, `cache`, `basicAuth`, `bearerAuth`, `jwt`, `compress`, `bodyLimit`, `timeout`, `prettyJSON`, `secureHeaders`.\n\n### Step 4: Request and Response Helpers\n\n```typescript\napp.post('\u002Fsubmit', async c => {\n  \u002F\u002F Parse body\n  const body = await c.req.json\u003C{ name: string; email: string }>();\n  const form = await c.req.formData();\n  const text = await c.req.text();\n\n  \u002F\u002F Headers and cookies\n  const auth = c.req.header('authorization');\n  const token = getCookie(c, 'session');\n\n  \u002F\u002F Responses\n  return c.json({ ok: true });                        \u002F\u002F JSON\n  return c.text('hello');                             \u002F\u002F plain text\n  return c.html('\u003Ch1>Hello\u003C\u002Fh1>');                    \u002F\u002F HTML\n  return c.redirect('\u002Fdashboard', 302);              \u002F\u002F redirect\n  return new Response(stream, { status: 200 });       \u002F\u002F raw Response\n});\n```\n\n### Step 5: Zod Validator Middleware\n\n```typescript\nimport { zValidator } from '@hono\u002Fzod-validator';\nimport { z } from 'zod';\n\nconst createPostSchema = z.object({\n  title: z.string().min(1).max(200),\n  body: z.string().min(1),\n  tags: z.array(z.string()).default([]),\n});\n\napp.post(\n  '\u002Fposts',\n  zValidator('json', createPostSchema),\n  async c => {\n    const data = c.req.valid('json'); \u002F\u002F fully typed\n    const post = await db.post.create({ data });\n    return c.json(post, 201);\n  }\n);\n```\n\n### Step 6: Route Groups and App Composition\n\n```typescript\n\u002F\u002F src\u002Froutes\u002Fposts.ts\nimport { Hono } from 'hono';\n\nconst posts = new Hono();\n\nposts.get('\u002F', async c => { \u002F* list posts *\u002F });\nposts.post('\u002F', async c => { \u002F* create post *\u002F });\nposts.get('\u002F:id', async c => { \u002F* get post *\u002F });\n\nexport default posts;\n```\n\n```typescript\n\u002F\u002F src\u002Findex.ts\nimport { Hono } from 'hono';\nimport posts from '.\u002Froutes\u002Fposts';\nimport users from '.\u002Froutes\u002Fusers';\n\nconst app = new Hono().basePath('\u002Fapi');\n\napp.route('\u002Fposts', posts);\napp.route('\u002Fusers', users);\n\nexport default app;\n```\n\n### Step 7: RPC Client (End-to-End Type Safety)\n\nHono's RPC mode exports route types that the `hc` client consumes — similar to tRPC but using fetch conventions:\n\n```typescript\n\u002F\u002F server: src\u002Froutes\u002Fposts.ts\nimport { Hono } from 'hono';\nimport { zValidator } from '@hono\u002Fzod-validator';\nimport { z } from 'zod';\n\nconst posts = new Hono()\n  .get('\u002F', c => c.json({ posts: [{ id: '1', title: 'Hello' }] }))\n  .post(\n    '\u002F',\n    zValidator('json', z.object({ title: z.string() })),\n    async c => {\n      const { title } = c.req.valid('json');\n      return c.json({ id: '2', title }, 201);\n    }\n  );\n\nexport default posts;\nexport type PostsType = typeof posts;\n```\n\n```typescript\n\u002F\u002F client: src\u002Fclient.ts\nimport { hc } from 'hono\u002Fclient';\nimport type { PostsType } from '..\u002Fserver\u002Froutes\u002Fposts';\n\nconst client = hc\u003CPostsType>('\u002Fapi\u002Fposts');\n\n\u002F\u002F Fully typed — autocomplete on routes, params, and responses\nconst { posts } = await client.$get().json();\nconst newPost = await client.$post({ json: { title: 'New Post' } }).json();\n```\n\n## Examples\n\n### Example 1: JWT Auth Middleware\n\n```typescript\nimport { Hono } from 'hono';\nimport { jwt, sign } from 'hono\u002Fjwt';\n\nconst app = new Hono();\nconst SECRET = process.env.JWT_SECRET!;\n\napp.post('\u002Flogin', async c => {\n  const { email, password } = await c.req.json();\n  const user = await validateUser(email, password);\n  if (!user) return c.json({ error: 'Invalid credentials' }, 401);\n\n  const token = await sign({ sub: user.id, exp: Math.floor(Date.now() \u002F 1000) + 3600 }, SECRET);\n  return c.json({ token });\n});\n\napp.use('\u002Fapi\u002F*', jwt({ secret: SECRET }));\napp.get('\u002Fapi\u002Fme', async c => {\n  const payload = c.get('jwtPayload');\n  const user = await getUserById(payload.sub);\n  return c.json(user);\n});\n\nexport default app;\n```\n\n### Example 2: Cloudflare Workers with D1 Database\n\n```typescript\n\u002F\u002F src\u002Findex.ts\nimport { Hono } from 'hono';\n\ntype Bindings = {\n  DB: D1Database;\n  API_TOKEN: string;\n};\n\nconst app = new Hono\u003C{ Bindings: Bindings }>();\n\napp.get('\u002Fusers', async c => {\n  const { results } = await c.env.DB.prepare('SELECT * FROM users LIMIT 50').all();\n  return c.json(results);\n});\n\napp.post('\u002Fusers', async c => {\n  const { name, email } = await c.req.json();\n  await c.env.DB.prepare('INSERT INTO users (name, email) VALUES (?, ?)')\n    .bind(name, email)\n    .run();\n  return c.json({ created: true }, 201);\n});\n\nexport default app;\n```\n\n### Example 3: Streaming Response\n\n```typescript\nimport { stream, streamText } from 'hono\u002Fstreaming';\n\napp.get('\u002Fstream', c =>\n  streamText(c, async stream => {\n    for (const chunk of ['Hello', ' ', 'World']) {\n      await stream.write(chunk);\n      await stream.sleep(100);\n    }\n  })\n);\n```\n\n## Best Practices\n\n- ✅ Use route groups (sub-apps) to keep handlers in separate files — `app.route('\u002Fusers', usersRouter)`\n- ✅ Use `zValidator` for all request body, query, and param validation\n- ✅ Type Cloudflare Workers bindings with the `Bindings` generic: `new Hono\u003C{ Bindings: Env }>()`\n- ✅ Use the RPC client (`hc`) when your frontend and backend share the same repo\n- ✅ Prefer returning `c.json()`\u002F`c.text()` over `new Response()` for cleaner code\n- ❌ Don't use Node.js-specific APIs (`fs`, `path`, `process`) if you want edge portability\n- ❌ Don't add heavy dependencies — Hono's value is its tiny footprint on edge runtimes\n- ❌ Don't skip middleware typing — use generics (`Variables`, `Bindings`) to keep `c.get()` type-safe\n\n## Security & Safety Notes\n\n- Always validate input with `zValidator` before using data from requests.\n- Use Hono's built-in `csrf` middleware on mutation endpoints when serving HTML\u002Fforms.\n- For Cloudflare Workers, store secrets in `wrangler.toml` `[vars]` (non-secret) or `wrangler secret put` (secret) — never hardcode them in source.\n- When using `bearerAuth` or `jwt`, ensure tokens are validated server-side — do not trust client-provided user IDs.\n- Rate-limit sensitive endpoints (auth, password reset) with Cloudflare Rate Limiting or a custom middleware.\n\n## Common Pitfalls\n\n- **Problem:** Handler returns `undefined` — response is empty\n  **Solution:** Always `return` a response from handlers: `return c.json(...)` not just `c.json(...)`.\n\n- **Problem:** Middleware runs after the response is sent\n  **Solution:** Call `await next()` before post-response logic; Hono runs code after `next()` as the response travels back up the chain.\n\n- **Problem:** `c.env` is undefined on Node.js\n  **Solution:** Cloudflare `env` bindings only exist in Workers. Use `process.env` on Node.js.\n\n- **Problem:** Route not matching — gets a 404\n  **Solution:** Check that `app.route('\u002Fprefix', subRouter)` uses the same prefix your client calls. Sub-routers should **not** repeat the prefix in their own routes.\n\n## Related Skills\n\n- `@cloudflare-workers-expert` — Deep dive into Cloudflare Workers platform specifics\n- `@trpc-fullstack` — Alternative RPC approach for TypeScript full-stack apps\n- `@zod-validation-expert` — Detailed Zod schema patterns used with `@hono\u002Fzod-validator`\n- `@nodejs-backend-patterns` — When you need a Node.js-specific backend (not edge)\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,185,715,"2026-05-16 13:22:15",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":25,"skillCount":32,"createdAt":26},"后端开发","backend","mdi-server","API、数据库、服务端架构",296,[34],{"id":35,"skillId":4,"version":36,"fileName":37,"fileSize":38,"filePath":39,"fileHash":40,"manifest":41,"createdAt":19},"1d7af1e6-1a27-44e6-9dc8-4999edba1828","1.0.0","hono.zip",4359,"uploads\u002Fskills\u002F6a7a1b72-dc9f-469f-8400-5057256e88f4\u002Fhono.zip","df861300c4f6992386af1a32b97cdf4fc5ea34978c6552f39b38c348b9d2e49c","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":10752}]",{"code":43,"message":44,"data":45},200,"success",{"items":46,"stats":47,"page":50},[],{"averageRating":48,"totalRatings":48,"ratingCounts":49},0,[48,48,48,48,48],{"limit":51,"offset":48,"hasMore":52,"nextOffset":51,"ratedOnly":16},15,false]