[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6R4H418SPNJS7XFKH1WAGK3":3,"skill-same:01M6R4H418SPNJS7XFKH1WAGK3":78},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":57,"commitSha":58,"skillDirectory":59,"forksCount":60,"repositoryHtmlUrl":61,"repositoryHomepageUrl":6,"ownerHtmlUrl":62,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":63,"install":64,"resources":77},"01M6R4H418SPNJS7XFKH1WAGK3","hono",null,"Build ultra-fast web APIs and full-stack apps with Hono — runs on Cloudflare Workers, Deno, Bun, Node.js, and any WinterCG-compatible runtime.","Mishit18\u002Fclaude-code-templates","Mishit18","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F244127857?v=4","01M6QXBYKWM76HSKYDNWSKKE41","Mishit Sharma","01M6QXBYRJ0CAVM51S1RTEKTZZ",1,"MIT","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-development\u002Fhono\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口","SCENARIO","使用场景",[5,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"cloudflare workers","2026","ultra","apps","runtime","full","web-standards","cloudflare-workers","community","workers","standards","safe","deno","node","stack","api","edge","cloudflare","gemini","typescript","2026-11-10 10:12:30",false,"---\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","# 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",{"name":5,"risk":35,"tags":49,"tools":51,"author":54,"source":32,"category":55,"date_added":56,"description":7},[5,40,31,50,36,39,43,30],"bun",[52,53,42],"claude","cursor","suhaibjanjua","backend","2026-03-18","main","015422534a7457348a313b6381f0255d3364eb8c","cli-tool\u002Fcomponents\u002Fskills\u002Fweb-development\u002Fhono",0,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates","https:\u002F\u002Fgithub.com\u002FMishit18","2026-11-13 18:15:57",{"source":8,"skillName":5,"commands":65,"prompt":75,"zipAvailable":76},[66,69,72],{"tool":67,"command":68},"npx","npx skills add Mishit18\u002Fclaude-code-templates --skill hono",{"tool":70,"command":71},"bunx","bunx skills add Mishit18\u002Fclaude-code-templates --skill hono",{"tool":73,"command":74},"pnpm","pnpm dlx skills add Mishit18\u002Fclaude-code-templates --skill hono","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-development\u002Fhono\u002FSKILL.md",true,[],[79,111,137,165,192,217],{"skillNo":80,"name":81,"nameZh":6,"description":82,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":83,"licenseFileUrl":84,"sourceHtmlUrl":85,"categories":86,"keywords":90,"publishedAt":44},"01M6R4ARN4W2VZRDERDTMN1KP0","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","Apache-2.0","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FSKILL.md",[87],{"categoryNo":88,"categoryName":89,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",[91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110],"web artifacts builder","web","artifacts","artifacts builder","builder","frontend","css","components","react","routing","state management","state","file","Tailwind","use","single-file","ui components","multi","for","single",{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":83,"licenseFileUrl":115,"sourceHtmlUrl":116,"categories":117,"keywords":122,"publishedAt":44},"01M6R45GXREM5DP8T08MAC788H","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FSKILL.md",[118,121],{"categoryNo":119,"categoryName":120,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":88,"categoryName":89,"taxonomyType":21,"taxonomyTypeDesc":22},[123,124,125,96,126,127,92,128,129,130,131,132,133,134,135,136,109],"testing","webapp testing","webapp","screenshots","playwright","debugging","toolkit","browser","ui","logs","applications","behavior","local","with",{"skillNo":138,"name":139,"nameZh":6,"description":140,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":141,"sourceHtmlUrl":142,"categories":143,"keywords":144,"publishedAt":44},"01M6R2GYJ470X8EB7R58V0B68K","think-tank","Run a Virtual Think Tank — a structured multi-persona debate — before planning or making architectural\u002Fdesign\u002Fstrategic decisions. Use this skill whenever the user is about to plan a system, make a technology choice, evaluate trade-offs, decide on an approach, or faces any decision where multiple perspectives would sharpen the outcome. Also trigger when the user says \"think tank\", \"debate this\", \"perspectives on\", \"trade-offs\", \"should I use X or Y\", \"help me decide\", \"before we plan\", or asks for pros\u002Fcons of competing approaches. This skill should run BEFORE any implementation planning begins — it produces a structured analysis that feeds into better plans.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fthink-tank\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fthink-tank\u002FSKILL.md",[],[145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164],"think tank","think","design","run","feeds","analysis","persona","plan","sharpen","virtual","decision","choice","decide","perspectives","outcome","me","debate","make","trade-offs","when",{"skillNo":166,"name":167,"nameZh":6,"description":168,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":83,"licenseFileUrl":169,"sourceHtmlUrl":170,"categories":171,"keywords":175,"publishedAt":44},"01M6R2FSR55AVRFA9YZ8SC2GZG","skill-creator","Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fskill-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fskill-creator\u002FSKILL.md",[172],{"categoryNo":173,"categoryName":174,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[176,177,178,179,180,181,182,183,184,185,186,187,188,189,136,109,190,164,191],"skill creator","creator","workflows","create","update","capabilities","knowledge","tool","integrations","specialized","guide","new skill","existing skill","users","Existing","new",{"skillNo":193,"name":194,"nameZh":6,"description":195,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":196,"categories":197,"keywords":198,"publishedAt":44},"01M6R2FK42ZZ4HJTJVVK9WJBBP","ship-learn-next","Transform learning content (like YouTube transcripts, articles, tutorials) into actionable implementation plans using the Ship-Learn-Next framework. Use when user wants to turn advice, lessons, or educational content into concrete action steps, reps, or a learning quest.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fship-learn-next\u002FSKILL.md",[],[199,200,201,202,203,204,205,206,105,207,208,209,210,211,212,213,214,215,216,164],"learn","ship learn next","ship","next","framework","learning","read","write","advice","implementation","youtube","plans","quest","transform","actionable","action","lessons","youtube transcripts",{"skillNo":218,"name":219,"nameZh":6,"description":220,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":83,"licenseFileUrl":221,"sourceHtmlUrl":222,"categories":223,"keywords":230,"publishedAt":44},"01M6R2088G1RHDA5MDX16HASRB","slack-gif-creator","Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like \"make me a GIF of X doing Y for Slack.\"","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fenterprise-communication\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fenterprise-communication\u002Fslack-gif-creator\u002FSKILL.md",[224,227],{"categoryNo":225,"categoryName":226,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000005","邮件与沟通",{"categoryNo":228,"categoryName":229,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",[231,232,233,177,234,235,236,237,182,105,160,189,162,238,239,109,240,164],"slack gif creator","slack","gif","validation","Tools","constraints","Animation","Utilities","concepts","request"]