Hono Skill

https://github.com/yusukebe/hono-skill
Admin
Hono Skill is an AI agent skill that provides inline API reference and request testing capabilities...
Tokens:13,460
Snippets:119
Trust Score:9.7
Update:6 months ago
Show doc for...
Tokens:
Raw
### Installation

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Instructions for installing Hono Skill via Claude Code marketplace or skills.sh CLI, and installing the Hono CLI.

```APIDOC
## Installation

Install the Hono Skill for Claude Code or via skills.sh CLI.

```bash
# Claude Code marketplace installation
/plugin marketplace add yusukebe/hono-skill
/plugin install hono-skill@hono

# Alternative: skills.sh installation
npx skills add yusukebe/hono-skill

# Required: Install Hono CLI as devDependency
npm install -D @hono/cli
```
```

--------------------------------

### Install Hono Skill via Plugin Marketplace

Source: https://github.com/yusukebe/hono-skill/blob/main/README.md

Use this command to add the Hono Skill to your plugin marketplace. This is the first step to installing the skill.

```bash
# Add marketplace
/plugin marketplace add yusukebe/hono-skill

# Install skill
/plugin install hono-skill@hono
```

--------------------------------

### Install Hono Skill using skills.sh

Source: https://github.com/yusukebe/hono-skill/blob/main/README.md

Alternatively, install the Hono Skill using the skills.sh script. This command directly adds the skill to your environment.

```bash
npx skills add yusukebe/hono-skill
```

--------------------------------

### Install Hono Skill

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Commands to install the Hono Skill via Claude Code or skills.sh, including the required Hono CLI dependency.

```bash
# Claude Code marketplace installation
/plugin marketplace add yusukebe/hono-skill
/plugin install hono-skill@hono

# Alternative: skills.sh installation
npx skills add yusukebe/hono-skill

# Required: Install Hono CLI as devDependency
npm install -D @hono/cli
```

--------------------------------

### Built-in Middleware

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Provides examples of importing and using built-in middleware for common functionalities.

```APIDOC
## Built-in Middleware

Import and use built-in middleware for common functionality like CORS, logging, authentication, and security.

```ts
import { cors } from 'hono/cors'
import { logger } from 'hono/logger'
import { basicAuth } from 'hono/basic-auth'
import { prettyJSON } from 'hono/pretty-json'
import { secureHeaders } from 'hono/secure-headers'
import { etag } from 'hono/etag'
import { compress } from 'hono/compress'
import { poweredBy } from 'hono/powered-by'
import { timing } from 'hono/timing'
import { cache } from 'hono/cache'
import { bearerAuth } from 'hono/bearer-auth'
import { jwt } from 'hono/jwt'
import { csrf } from 'hono/csrf'
import { ipRestriction } from 'hono/ip-restriction'
import { bodyLimit } from 'hono/body-limit'
import { requestId } from 'hono/request-id'
import { methodOverride } from 'hono/method-override'
import { trailingSlash, trimTrailingSlash } from 'hono/trailing-slash'

// Registration
app.use(logger()) // all routes
app.use('/api/*', cors()) // specific path
app.post('/api/*', basicAuth({ username: 'admin', password: 'secret' }))
```
```

--------------------------------

### Hono API Reference - App Constructor and Routing

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Shows how to instantiate a Hono application, including TypeScript generics for environment bindings and variables. Details various routing methods like GET, POST, PUT, DELETE, and custom methods using `app.on()`.

```APIDOC
## Hono API Reference

### App Constructor

```ts
import { Hono } from 'hono'

const app = new Hono()

// With TypeScript generics
type Env = {
  Bindings: { DATABASE: D1Database; KV: KVNamespace }
  Variables: { user: User }
}
const app = new Hono<Env>()
```

### Routing Methods

```ts
app.get('/path', handler)
app.post('/path', handler)
app.put('/path', handler)
app.delete('/path', handler)
app.patch('/path', handler)
app.options('/path', handler)
app.all('/path', handler) // all HTTP methods
app.on('PURGE', '/path', handler) // custom method
app.on(['PUT', 'DELETE'], '/path', handler) // multiple methods
```
```

--------------------------------

### Defining JSX Components

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Example of creating layout and UI components using Hono's JSX syntax.

```tsx
import type { PropsWithChildren } from 'hono/jsx'

const Layout = (props: PropsWithChildren) => (
  <html>
    <head>
      <title>My App</title>
    </head>
    <body>{props.children}</body>
  </html>
)

const UserCard = ({ name }: { name: string }) => (
  <div class="card">
    <h2>{name}</h2>
  </div>
)

app.get('/', (c) => {
  return c.html(
    <Layout>
      <UserCard name="Alice" />
    </Layout>
  )
})
```

--------------------------------

### Hono Context (c) - Variables

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Explains how to set and get request-scoped data using `c.set()` and `c.get()` or `c.var` within Hono middleware and handlers.

```APIDOC
### Variables (request-scoped data)

```ts
// In middleware
c.set('user', { id: 1, name: 'Alice' })

// In handler
const user = c.get('user')
// or
const user = c.var.user
```
```

--------------------------------

### Hono Context (c) - Response Methods

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Provides examples of using the context object `c` to send various types of responses, including plain text, JSON, HTML, redirects, and raw bodies, along with setting status codes.

```APIDOC
## Context (c)

### Response Methods

```ts
c.text('Hello') // text/plain
c.json({ message: 'Hello' }) // application/json
c.html('<h1>Hello</h1>') // text/html
c.redirect('/new-path') // 302 redirect
c.redirect('/new-path', 301) // 301 redirect
c.body('raw body', 200, headers) // raw response
c.notFound() // 404 response
```
```

--------------------------------

### Hono CLI Usage - Request Testing

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Demonstrates how to test Hono endpoints using the `hono request` command for GET and POST requests, including sending JSON bodies. Also shows the alternative `workers-fetch` for testing with Cloudflare Workers bindings.

```APIDOC
## Hono CLI Usage

### Request Testing

Test endpoints without starting an HTTP server. Uses `app.request()` internally.

```bash
# GET request
npx hono request [file] -P /path

# POST request with JSON body
npx hono request [file] -X POST -P /api/users -d '{"name": "test"}'
```

**Note:** Do not pass credentials directly in CLI arguments. Use environment variables for sensitive values. `hono request` does not support Cloudflare Workers bindings (KV, D1, R2, etc.). When bindings are required, use `workers-fetch` instead:

```bash
npx workers-fetch /path
npx workers-fetch -X POST -H "Content-Type:application/json" -d '{"name":"test"}' /api/users
```
```

--------------------------------

### Test Endpoints with app.request()

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Test API endpoints without starting a full HTTP server.

```ts
// GET request
const res = await app.request('/posts')
expect(res.status).toBe(200)
expect(await res.json()).toEqual({ posts: [] })

// POST with JSON
const res = await app.request('/posts', {
  method: 'POST',
  body: JSON.stringify({ title: 'Hello' }),
  headers: { 'Content-Type': 'application/json' }
})

// POST with FormData
const formData = new FormData()
formData.append('name', 'Alice')
const res = await app.request('/users', { method: 'POST', body: formData })

// With mock env (Cloudflare Workers bindings)
const res = await app.request('/api/data', {}, { KV: mockKV, DATABASE: mockDB })

// Using Request object
const req = new Request('http://localhost/api', { method: 'DELETE' })
const res = await app.request(req)
```

--------------------------------

### Test Hono Endpoints with CLI

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Use `hono request` to test endpoints without starting an HTTP server. Supports GET and POST requests with JSON bodies. Note: Does not support Cloudflare Workers bindings.

```bash
npx hono request [file] -P /path
```

```bash
npx hono request [file] -X POST -P /api/users -d '{"name": "test"}'
```

--------------------------------

### Test endpoints with app.request()

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Use app.request() to simulate HTTP requests for testing without starting a server. Supports various methods, body types, and mock environment bindings.

```ts
// GET
const res = await app.request('/posts')
expect(res.status).toBe(200)
expect(await res.json()).toEqual({ posts: [] })

// POST with JSON
const res = await app.request('/posts', {
  method: 'POST',
  body: JSON.stringify({ title: 'Hello' }),
  headers: { 'Content-Type': 'application/json' }
})

// POST with FormData
const formData = new FormData()
formData.append('name', 'Alice')
const res = await app.request('/users', { method: 'POST', body: formData })

// With mock env (Cloudflare Workers bindings)
const res = await app.request('/api/data', {}, { KV: mockKV, DATABASE: mockDB })

// Using Request object
const req = new Request('http://localhost/api', { method: 'DELETE' })
const res = await app.request(req)
```

--------------------------------

### Routing Methods

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Defining HTTP route handlers for various HTTP methods including GET, POST, PUT, DELETE, PATCH, OPTIONS, and custom methods.

```APIDOC
## Routing Methods

Define HTTP route handlers for various HTTP methods including GET, POST, PUT, DELETE, PATCH, OPTIONS, and custom methods.

```ts
app.get('/path', handler)
app.post('/path', handler)
app.put('/path', handler)
app.delete('/path', handler)
app.patch('/path', handler)
app.options('/path', handler)
app.all('/path', handler) // all HTTP methods
app.on('PURGE', '/path', handler) // custom method
app.on(['PUT', 'DELETE'], '/path', handler) // multiple methods
```
```

--------------------------------

### Hono Context Variables

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Set and get request-scoped data using `c.set()` and `c.get()` or `c.var`. Commonly used in middleware to pass data like user information to handlers.

```typescript
// In middleware
c.set('user', { id: 1, name: 'Alice' })
```

```typescript
// In handler
const user = c.get('user')
// or
const user = c.var.user
```

--------------------------------

### Configure MCP Server

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Methods to configure the Hono documentation MCP server for context-aware assistance.

```bash
# Add MCP server via CLI
claude mcp add --transport http hono-docs https://hono-docs-mcp.yusukebe.workers.dev/mcp
```

```json
// Alternative: Add to .mcp.json
{
  "mcpServers": {
    "hono-docs": {
      "type": "http",
      "url": "https://hono-docs-mcp.yusukebe.workers.dev/mcp"
    }
  }
}
```

--------------------------------

### Custom Middleware

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Illustrates how to create custom middleware using inline functions or `createMiddleware` for reusable middleware with proper typing.

```APIDOC
## Custom Middleware

Create custom middleware using inline functions or `createMiddleware` for reusable middleware with proper typing.

```ts
// Inline middleware
app.use(async (c, next) => {
  const start = Date.now()
  await next()
  const elapsed = Date.now() - start
  c.res.headers.set('X-Response-Time', `${elapsed}ms`)
})

// Reusable with createMiddleware
import { createMiddleware } from 'hono/factory'

const auth = createMiddleware(async (c, next) => {
  const token = c.req.header('Authorization')
  if (!token) return c.json({ error: 'Unauthorized' }, 401)
  await next()
})

app.use('/api/*', auth)

// Middleware execution order:
// Request → mw1 before → mw2 before → handler → mw2 after → mw1 after → Response
```
```

--------------------------------

### Hono API Reference - Routing Patterns

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Illustrates different ways to define routes in Hono, including path parameters, multiple parameters, optional parameters, wildcards, regular expression constraints, and chained routes.

```APIDOC
### Routing Patterns

```ts
// Path parameters
app.get('/user/:name', (c) => {
  const name = c.req.param('name')
  return c.json({ name })
})

// Multiple params
app.get('/posts/:id/comments/:commentId', (c) => {
  const { id, commentId } = c.req.param()
})

// Optional parameters
app.get('/api/animal/:type?', (c) => c.text('Animal!'))

// Wildcards
app.get('/wild/*/card', (c) => c.text('Wildcard'))

// Regexp constraints
app.get('/post/:date{[0-9]+}/:title{[a-z]+}', (c) => {
  const { date, title } = c.req.param()
})

// Chained routes
app
  .get('/endpoint', (c) => c.text('GET'))
  .post((c) => c.text('POST'))
  .delete((c) => c.text('DELETE'))
```
```

--------------------------------

### HonoRequest (c.req) - Parameters and Headers

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Explains how to access path parameters, query string parameters (single and multiple values), and request headers using the `c.req` object.

```APIDOC
## HonoRequest (c.req)

```ts
c.req.param('id') // path parameter
c.req.param() // all path params as object
c.req.query('page') // query string parameter
c.req.query() // all query params as object
c.req.queries('tags') // multiple values: ?tags=A&tags=B → ['A', 'B']
c.req.header('Authorization') // request header
c.req.header() // all headers (keys are lowercase)
```
```

--------------------------------

### Context Renderer

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Explains how to set a custom renderer for consistent HTML layouts across routes.

```APIDOC
## Context Renderer

Set a custom renderer for consistent HTML layouts across routes.

```ts
app.use(async (c, next) => {
  c.setRenderer((content) =>
    c.html(
      <html><body>{content}</body></html>
    )
  )
  await next()
})

app.get('/', (c) => c.render(<h1>Hello</h1>))
```
```

--------------------------------

### App Constructor

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Creating a new Hono application instance with optional TypeScript generics for environment bindings and variables.

```APIDOC
## App Constructor

Create a new Hono application instance with optional TypeScript generics for environment bindings and variables.

```ts
import { Hono } from 'hono'

// Basic app
const app = new Hono()

// With TypeScript generics for Cloudflare Workers
type Env = {
  Bindings: { DATABASE: D1Database; KV: KVNamespace }
  Variables: { user: User }
}
const app = new Hono<Env>()
```
```

--------------------------------

### Initialize Hono Application

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Create a Hono app instance, optionally using TypeScript generics for environment bindings and variables.

```ts
import { Hono } from 'hono'

// Basic app
const app = new Hono()

// With TypeScript generics for Cloudflare Workers
type Env = {
  Bindings: { DATABASE: D1Database; KV: KVNamespace }
  Variables: { user: User }
}
const app = new Hono<Env>()
```

--------------------------------

### Configure Hono Adapters

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Select the appropriate export or server adapter based on the target runtime environment.

```ts
// Cloudflare Workers / Deno / Bun
export default app

// Node.js
import { serve } from '@hono/node-server'
serve(app)
```

--------------------------------

### Creating Custom Middleware

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Shows how to define inline middleware or reusable middleware using the createMiddleware factory.

```ts
// Inline
app.use(async (c, next) => {
  const start = Date.now()
  await next()
  const elapsed = Date.now() - start
  c.res.headers.set('X-Response-Time', `${elapsed}ms`)
})

// Reusable with createMiddleware
import { createMiddleware } from 'hono/factory'

const auth = createMiddleware(async (c, next) => {
  const token = c.req.header('Authorization')
  if (!token) return c.json({ error: 'Unauthorized' }, 401)
  await next()
})

app.use('/api/*', auth)
```

--------------------------------

### Initialize Hono App

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Create a new Hono application instance. Supports TypeScript generics for defining environment bindings and variables.

```typescript
import { Hono } from 'hono'

const app = new Hono()

// With TypeScript generics
type Env = {
  Bindings: { DATABASE: D1Database; KV: KVNamespace }
  Variables: { user: User }
}
const app = new Hono<Env>()
```

--------------------------------

### Implement Custom Middleware

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Create reusable middleware using inline functions or the createMiddleware factory.

```ts
// Inline middleware
app.use(async (c, next) => {
  const start = Date.now()
  await next()
  const elapsed = Date.now() - start
  c.res.headers.set('X-Response-Time', `${elapsed}ms`)
})

// Reusable with createMiddleware
import { createMiddleware } from 'hono/factory'

const auth = createMiddleware(async (c, next) => {
  const token = c.req.header('Authorization')
  if (!token) return c.json({ error: 'Unauthorized' }, 401)
  await next()
})

app.use('/api/*', auth)

// Middleware execution order:
// Request → mw1 before → mw2 before → handler → mw2 after → mw1 after → Response
```

--------------------------------

### Hono Context (c) - Environment (Cloudflare Workers)

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Shows how to access Cloudflare Workers environment bindings (like KV and D1) and use `c.executionCtx.waitUntil()` for asynchronous operations within Hono handlers.

```APIDOC
### Environment (Cloudflare Workers)

```ts
const value = await c.env.KV.get('key')
const db = c.env.DATABASE
c.executionCtx.waitUntil(promise)
```
```

--------------------------------

### Context Variables

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Demonstrates how to store and retrieve request-scoped data between middleware and handlers using c.set() and c.get().

```APIDOC
## Context Variables

Store and retrieve request-scoped data between middleware and handlers using `c.set()` and `c.get()`.

```ts
// In middleware
app.use(async (c, next) => {
  c.set('user', { id: 1, name: 'Alice' })
  await next()
})

// In handler
app.get('/profile', (c) => {
  const user = c.get('user')
  // or
  const user = c.var.user
  return c.json(user)
})
```
```

--------------------------------

### Import Hono Helpers

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Access various utility functions by importing them from their respective hono sub-paths.

```ts
import { getConnInfo } from 'hono/conninfo'
import { getCookie, setCookie, deleteCookie } from 'hono/cookie'
import { css, Style } from 'hono/css'
import { createFactory } from 'hono/factory'
import { html, raw } from 'hono/html'
import { stream, streamText, streamSSE } from 'hono/streaming'
import { testClient } from 'hono/testing'
import { upgradeWebSocket } from 'hono/cloudflare-workers' // or other adapter
```

--------------------------------

### Import Helper Utilities

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Access common Hono helper functions for cookies, HTML, CSS, and more.

```ts
import { getConnInfo } from 'hono/conninfo'
import { getCookie, setCookie, deleteCookie } from 'hono/cookie'
import { css, Style } from 'hono/css'
import { createFactory } from 'hono/factory'
import { html, raw } from 'hono/html'
import { stream, streamText, streamSSE } from 'hono/streaming'
import { testClient } from 'hono/testing'
import { upgradeWebSocket } from 'hono/cloudflare-workers' // or other adapter

// Available helpers: Accepts, Adapter, ConnInfo, Cookie, css, Dev,
// Factory, html, JWT, Proxy, Route, SSG, Streaming, Testing, WebSocket
```

--------------------------------

### Add Hono Docs MCP Server

Source: https://github.com/yusukebe/hono-skill/blob/main/README.md

Configure an MCP server for the latest Hono documentation search and retrieval. This command adds the server via the command line.

```bash
claude mcp add --transport http hono-docs https://hono-docs-mcp.yusukebe.workers.dev/mcp
```

--------------------------------

### Configure Hono Docs MCP Server in .mcp.json

Source: https://github.com/yusukebe/hono-skill/blob/main/README.md

Add the Hono documentation MCP server configuration to your .mcp.json file. This enables persistent access to Hono documentation.

```json
{
  "mcpServers": {
    "hono-docs": {
      "type": "http",
      "url": "https://hono-docs-mcp.yusukebe.workers.dev/mcp"
    }
  }
}
```

--------------------------------

### Hono Context (c) - Renderer

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Details how to set up and use a custom renderer function with `c.setRenderer()` to render HTML content, often used for integrating with JSX or templating engines.

```APIDOC
### Renderer

```ts
app.use(async (c, next) => {
  c.setRenderer((content) =>
    c.html(
      <html><body>{content}</body></html>
    )
  )
  await next()
})

app.get('/', (c) => c.render(<h1>Hello</h1>))
```
```

--------------------------------

### Implement Error Handling

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Define custom handlers for 404 Not Found scenarios and general application errors.

```ts
app.notFound((c) => c.json({ message: 'Not Found' }, 404))

app.onError((err, c) => {
  console.error(err)
  return c.json({ message: 'Internal Server Error' }, 500)
})
```

--------------------------------

### Middleware Execution Flow

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Illustrates the request lifecycle through middleware and the use of await next() to control execution order.

```text
Request → mw1 before → mw2 before → handler → mw2 after → mw1 after → Response
```

```ts
app.use(async (c, next) => {
  // before handler
  await next()
  // after handler
})
```

--------------------------------

### Hono API Reference - Route Grouping

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Explains how to group routes in Hono using `app.route()` to mount another Hono application at a specific base path, and `basePath()` to set a prefix for all routes defined on an app instance.

```APIDOC
### Route Grouping

```ts
// Using route()
const api = new Hono()
api.get('/users', (c) => c.json([]))

const app = new Hono()
app.route('/api', api) // mounts at /api/users

// Using basePath()
const app = new Hono().basePath('/api')
app.get('/users', (c) => c.json([])) // GET /api/users
```
```

--------------------------------

### Configure Hono JSX Support

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Set up TypeScript for Hono JSX using either tsconfig configuration or pragma comments.

```json
// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx"
  }
}
```

```tsx
// Or use pragma comment
/** @jsxImportSource hono/jsx */

// IMPORTANT: Files using JSX must have .tsx extension
```

--------------------------------

### Use Context Response Methods

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Return various response types and manage status codes or headers via the context object.

```ts
c.text('Hello') // text/plain
c.json({ message: 'Hello' }) // application/json
c.html('<h1>Hello</h1>') // text/html
c.redirect('/new-path') // 302 redirect
c.redirect('/new-path', 301) // 301 redirect
c.body('raw body', 200, headers) // raw response
c.notFound() // 404 response

// Set status and headers
c.status(201)
c.header('X-Custom', 'value')
c.header('Cache-Control', 'no-store')
```

--------------------------------

### Test Endpoints via Hono CLI

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Execute requests against Hono applications from the command line.

```bash
# GET request
npx hono request [file] -P /path

# POST request with JSON body
npx hono request [file] -X POST -P /api/users -d '{"name": "test"}'

# For Cloudflare Workers bindings, use workers-fetch instead
npx workers-fetch /path
npx workers-fetch -X POST -H "Content-Type:application/json" -d '{"name":"test"}' /api/users
```

--------------------------------

### Manage Context Variables

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Use c.set() and c.get() to share request-scoped data between middleware and handlers.

```ts
// In middleware
app.use(async (c, next) => {
  c.set('user', { id: 1, name: 'Alice' })
  await next()
})

// In handler
app.get('/profile', (c) => {
  const user = c.get('user')
  // or
  const user = c.var.user
  return c.json(user)
})
```

--------------------------------

### Handle Path Parameters

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Extract dynamic URL segments using named parameters, optional segments, wildcards, and regex constraints.

```ts
// Single path parameter
app.get('/user/:name', (c) => {
  const name = c.req.param('name')
  return c.json({ name })
})

// Multiple parameters
app.get('/posts/:id/comments/:commentId', (c) => {
  const { id, commentId } = c.req.param()
  return c.json({ postId: id, commentId })
})

// Optional parameters
app.get('/api/animal/:type?', (c) => c.text('Animal!'))

// Wildcards
app.get('/wild/*/card', (c) => c.text('Wildcard'))

// Regexp constraints
app.get('/post/:date{[0-9]+}/:title{[a-z]+}', (c) => {
  const { date, title } = c.req.param()
  return c.json({ date, title })
})

// Chained routes
app
  .get('/endpoint', (c) => c.text('GET'))
  .post((c) => c.text('POST'))
  .delete((c) => c.text('DELETE'))
```

--------------------------------

### Using JSX Fragments

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Shows how to group multiple elements without adding extra nodes to the DOM.

```tsx
const Items = () => (
  <>
    <li>Item 1</li>
    <li>Item 2</li>
  </>
)
```

--------------------------------

### Creating Async JSX Components

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Demonstrates fetching data within an asynchronous JSX component.

```tsx
const UserList = async () => {
  const users = await fetchUsers()
  return (
    <ul>
      {users.map((u) => (
        <li>{u.name}</li>
      ))}
    </ul>
  )
}
```

--------------------------------

### Context Response Methods

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Returning different response types including text, JSON, HTML, redirects, and raw body responses, along with setting status and headers.

```APIDOC
## Context Response Methods

Return different response types including text, JSON, HTML, redirects, and raw body responses.

```ts
c.text('Hello') // text/plain
c.json({ message: 'Hello' }) // application/json
c.html('<h1>Hello</h1>') // text/html
c.redirect('/new-path') // 302 redirect
c.redirect('/new-path', 301) // 301 redirect
c.body('raw body', 200, headers) // raw response
c.notFound() // 404 response

// Set status and headers
c.status(201)
c.header('X-Custom', 'value')
c.header('Cache-Control', 'no-store')
```
```

--------------------------------

### Define Routing Methods

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Standard HTTP route handlers and advanced routing patterns like custom methods and multiple method support.

```ts
app.get('/path', handler)
app.post('/path', handler)
app.put('/path', handler)
app.delete('/path', handler)
app.patch('/path', handler)
app.options('/path', handler)
app.all('/path', handler) // all HTTP methods
app.on('PURGE', '/path', handler) // custom method
app.on(['PUT', 'DELETE'], '/path', handler) // multiple methods
```

--------------------------------

### Error Handling

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Defining custom handlers for 404 Not Found and application errors.

```APIDOC
## Error Handling

Define custom handlers for 404 Not Found and application errors.

```ts
app.notFound((c) => c.json({ message: 'Not Found' }, 404))

app.onError((err, c) => {
  console.error(err)
  return c.json({ message: 'Internal Server Error' }, 500)
})
```
```

--------------------------------

### Route Grouping

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Organizing routes into logical groups using route() for mounting sub-applications or basePath() for URL prefixes.

```APIDOC
## Route Grouping

Organize routes into logical groups using route() for mounting sub-applications or basePath() for URL prefixes.

```ts
// Using route() to mount sub-applications
const api = new Hono()
api.get('/users', (c) => c.json([]))
api.post('/users', (c) => c.json({ created: true }))

const app = new Hono()
app.route('/api', api) // mounts at /api/users

// Using basePath() for URL prefix
const app = new Hono().basePath('/api')
app.get('/users', (c) => c.json([])) // GET /api/users
```
```

--------------------------------

### Hono Context (c) - Headers & Status

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Demonstrates how to manipulate response headers and set the HTTP status code using methods available on the Hono context object `c`.

```APIDOC
### Headers & Status

```ts
c.status(201)
c.header('X-Custom', 'value')
c.header('Cache-Control', 'no-store')
```
```

--------------------------------

### Path Parameters

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Extracting dynamic segments from URL paths using named parameters, optional parameters, wildcards, and regex constraints.

```APIDOC
## Path Parameters

Extract dynamic segments from URL paths using named parameters, optional parameters, wildcards, and regex constraints.

```ts
// Single path parameter
app.get('/user/:name', (c) => {
  const name = c.req.param('name')
  return c.json({ name })
})

// Multiple parameters
app.get('/posts/:id/comments/:commentId', (c) => {
  const { id, commentId } = c.req.param()
  return c.json({ postId: id, commentId })
})

// Optional parameters
app.get('/api/animal/:type?', (c) => c.text('Animal!'))

// Wildcards
app.get('/wild/*/card', (c) => c.text('Wildcard'))

// Regexp constraints
app.get('/post/:date{[0-9]+}/:title{[a-z]+}', (c) => {
  const { date, title } = c.req.param()
  return c.json({ date, title })
})

// Chained routes
app
  .get('/endpoint', (c) => c.text('GET'))
  .post((c) => c.text('POST'))
  .delete((c) => c.text('DELETE'))
```
```

--------------------------------

### Group Routes

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Organize application routes using sub-application mounting or base path prefixes.

```ts
// Using route() to mount sub-applications
const api = new Hono()
api.get('/users', (c) => c.json([]))
api.post('/users', (c) => c.json({ created: true }))

const app = new Hono()
app.route('/api', api) // mounts at /api/users

// Using basePath() for URL prefix
const app = new Hono().basePath('/api')
app.get('/users', (c) => c.json([])) // GET /api/users
```

--------------------------------

### MCP Server Configuration

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Configuration for the optional MCP server to access the latest Hono documentation.

```APIDOC
## MCP Server Configuration

Configure the optional MCP server for latest Hono documentation search and retrieval.

```bash
# Add MCP server via CLI
claude mcp add --transport http hono-docs https://hono-docs-mcp.yusukebe.workers.dev/mcp
```

```json
// Alternative: Add to .mcp.json
{
  "mcpServers": {
    "hono-docs": {
      "type": "http",
      "url": "https://hono-docs-mcp.yusukebe.workers.dev/mcp"
    }
  }
}
```
```

--------------------------------

### Cloudflare Workers Environment

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Shows how to access Cloudflare Workers bindings like KV, D1, and execution context.

```APIDOC
## Cloudflare Workers Environment

Access Cloudflare Workers bindings like KV, D1, and execution context.

```ts
app.get('/data', async (c) => {
  const value = await c.env.KV.get('key')
  const db = c.env.DATABASE
  c.executionCtx.waitUntil(logAsync(value))
  return c.json({ value })
})
```
```

--------------------------------

### Create Type-Safe RPC Clients

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Generate type-safe API clients by sharing route types between server and client.

```ts
// Server: routes MUST be chained to preserve types
const route = app
  .post('/posts', zValidator('json', schema), (c) => {
    return c.json({ ok: true }, 201)
  })
  .get('/posts', (c) => {
    return c.json({ posts: [] })
  })
export type AppType = typeof route

// Client: use hc() with the exported type
import { hc } from 'hono/client'
import type { AppType } from './server'

const client = hc<AppType>('http://localhost:8787/')
const res = await client.posts.$post({ json: { title: 'Hello' } })
const data = await res.json() // fully typed

// Type utilities
import type { InferRequestType, InferResponseType } from 'hono/client'

type ReqType = InferRequestType<typeof client.posts.$post>
type ResType = InferResponseType<typeof client.posts.$post, 200>
```

--------------------------------

### Implement Streaming Responses

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Stream data to clients using basic streams, text streams, or Server-Sent Events (SSE).

```ts
import { stream, streamText, streamSSE } from 'hono/streaming'

// Basic stream
app.get('/stream', (c) => {
  return stream(c, async (stream) => {
    stream.onAbort(() => console.log('Aborted'))
    await stream.write(new Uint8Array([0x48, 0x65]))
    await stream.pipe(readableStream)
  })
})

// Text stream
app.get('/stream-text', (c) => {
  return streamText(c, async (stream) => {
    await stream.writeln('Hello')
    await stream.sleep(1000)
    await stream.write('World')
  })
})

// Server-Sent Events
app.get('/sse', (c) => {
  return streamSSE(c, async (stream) => {
    let id = 0
    while (true) {
      await stream.writeSSE({
        data: JSON.stringify({ time: new Date().toISOString() }),
        event: 'time-update',
        id: String(id++)
      })
      await stream.sleep(1000)
    }
  })
})
```

--------------------------------

### Deploy Hono to Runtimes

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Adapt Hono applications for different JavaScript runtimes with minimal code changes. The default export works for Cloudflare Workers, Deno, and Bun. Node.js requires an adapter.

```typescript
// Cloudflare Workers / Deno / Bun (default export)
export default app
```

```typescript
// Node.js (requires adapter)
import { serve } from '@hono/node-server'
serve(app)
```

--------------------------------

### Register Built-in Middleware

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Import and apply standard middleware for common tasks like CORS, logging, and security.

```ts
import { cors } from 'hono/cors'
import { logger } from 'hono/logger'
import { basicAuth } from 'hono/basic-auth'
import { prettyJSON } from 'hono/pretty-json'
import { secureHeaders } from 'hono/secure-headers'
import { etag } from 'hono/etag'
import { compress } from 'hono/compress'
import { poweredBy } from 'hono/powered-by'
import { timing } from 'hono/timing'
import { cache } from 'hono/cache'
import { bearerAuth } from 'hono/bearer-auth'
import { jwt } from 'hono/jwt'
import { csrf } from 'hono/csrf'
import { ipRestriction } from 'hono/ip-restriction'
import { bodyLimit } from 'hono/body-limit'
import { requestId } from 'hono/request-id'
import { methodOverride } from 'hono/method-override'
import { trailingSlash, trimTrailingSlash } from 'hono/trailing-slash'

// Registration
app.use(logger()) // all routes
app.use('/api/*', cors()) // specific path
app.post('/api/*', basicAuth({ username: 'admin', password: 'secret' }))
```

--------------------------------

### Hono Route Grouping

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Organize routes using `route()` to mount another Hono app at a specific base path, or use `basePath()` to set a prefix for all routes within an app.

```typescript
// Using route()
const api = new Hono()
api.get('/users', (c) => c.json([]))

const app = new Hono()
app.route('/api', api) // mounts at /api/users
```

```typescript
// Using basePath()
const app = new Hono().basePath('/api')
app.get('/users', (c) => c.json([])) // GET /api/users
```

--------------------------------

### Create JSX Components

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Define layouts, functional components, async components, and fragments for Hono applications.

```tsx
import type { PropsWithChildren } from 'hono/jsx'

const Layout = (props: PropsWithChildren) => (
  <html>
    <head>
      <title>My App</title>
    </head>
    <body>{props.children}</body>
  </html>
)

const UserCard = ({ name }: { name: string }) => (
  <div class="card">
    <h2>{name}</h2>
  </div>
)

// Async components
const UserList = async () => {
  const users = await fetchUsers()
  return (
    <ul>
      {users.map((u) => (
        <li>{u.name}</li>
      ))}
    </ul>
  )
}

// Fragments
const Items = () => (
  <>
    <li>Item 1</li>
    <li>Item 2</li>
  </>
)

app.get('/', (c) => {
  return c.html(
    <Layout>
      <UserCard name="Alice" />
    </Layout>
  )
})
```

--------------------------------

### Configuring JSX

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Required TypeScript configuration for Hono JSX support.

```json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx"
  }
}
```

--------------------------------

### Implement Hono RPC Client

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Enable type-safe API communication by chaining routes on the server and using hc() on the client. Routes must be chained to ensure correct type inference.

```ts
// Server: routes MUST be chained to preserve types
const route = app
  .post('/posts', zValidator('json', schema), (c) => {
    return c.json({ ok: true }, 201)
  })
  .get('/posts', (c) => {
    return c.json({ posts: [] })
  })
export type AppType = typeof route

// Client: use hc() with the exported type
import { hc } from 'hono/client'
import type { AppType } from './server'

const client = hc<AppType>('http://localhost:8787/')
const res = await client.posts.$post({ json: { title: 'Hello' } })
const data = await res.json() // fully typed
```

--------------------------------

### Access Cloudflare Workers Environment

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Interact with platform-specific bindings like KV, D1, and execution context via the c.env object.

```ts
app.get('/data', async (c) => {
  const value = await c.env.KV.get('key')
  const db = c.env.DATABASE
  c.executionCtx.waitUntil(logAsync(value))
  return c.json({ value })
})
```

--------------------------------

### HonoRequest (c.req) - Body Parsing

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Demonstrates various methods for parsing the request body, including JSON, text, FormData, multipart/form-data, urlencoded data, ArrayBuffer, and Blob.

```APIDOC
// Body parsing
await c.req.json() // parse JSON body
await c.req.text() // parse text body
await c.req.formData() // parse as FormData
await c.req.parseBody() // parse multipart/form-data or urlencoded
await c.req.arrayBuffer() // parse as ArrayBuffer
await c.req.blob() // parse as Blob
```

--------------------------------

### Hono API Reference - Error Handling

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Details how to implement custom error handling in Hono using `app.notFound()` for 404 responses and `app.onError()` for global error handling of exceptions.

```APIDOC
### Error Handling

```ts
app.notFound((c) => c.json({ message: 'Not Found' }, 404))

app.onError((err, c) => {
  console.error(err)
  return c.json({ message: 'Internal Server Error' }, 500)
})
```
```

--------------------------------

### Define Context Renderer

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Configure a custom renderer to maintain consistent HTML layouts across application routes.

```ts
app.use(async (c, next) => {
  c.setRenderer((content) =>
    c.html(
      <html><body>{content}</body></html>
    )
  )
  await next()
})

app.get('/', (c) => c.render(<h1>Hello</h1>))
```

--------------------------------

### Hono Routing Patterns

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Implement various routing patterns including path parameters, optional parameters, wildcards, and regular expression constraints. Supports chained route definitions.

```typescript
// Path parameters
app.get('/user/:name', (c) => {
  const name = c.req.param('name')
  return c.json({ name })
})
```

```typescript
// Multiple params
app.get('/posts/:id/comments/:commentId', (c) => {
  const { id, commentId } = c.req.param()
})
```

```typescript
// Optional parameters
app.get('/api/animal/:type?', (c) => c.text('Animal!'))
```

```typescript
// Wildcards
app.get('/wild/*/card', (c) => c.text('Wildcard'))
```

```typescript
// Regexp constraints
app.get('/post/:date{[0-9]+}/:title{[a-z]+}', (c) => {
  const { date, title } = c.req.param()
})
```

```typescript
// Chained routes
app
  .get('/endpoint', (c) => c.text('GET'))
  .post((c) => c.text('POST'))
  .delete((c) => c.text('DELETE'))
```

--------------------------------

### Test Endpoints with workers-fetch CLI

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Use `workers-fetch` for testing endpoints when Cloudflare Workers bindings (KV, D1, R2, etc.) are required. Supports various HTTP methods and data payloads.

```bash
npx workers-fetch /path
```

```bash
npx workers-fetch -X POST -H "Content-Type:application/json" -d '{"name":"test"}' /api/users
```

--------------------------------

### Hono Context Environment Access

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Access Cloudflare Workers environment bindings like KV and D1 databases directly from the context using `c.env`. Use `c.executionCtx.waitUntil()` for asynchronous operations.

```typescript
const value = await c.env.KV.get('key')
```

```typescript
const db = c.env.DATABASE
```

```typescript
c.executionCtx.waitUntil(promise)
```

--------------------------------

### Valibot / Standard Schema Validation

Source: https://context7.com/yusukebe/hono-skill/llms.txt

Shows how to validate request data using Valibot or any Standard Schema compatible library.

```APIDOC
## Valibot / Standard Schema Validation

Validate request data using Valibot or any Standard Schema compatible library.

```ts
import { sValidator } from '@hono/standard-validator'
import * as v from 'valibot'

const schema = v.object({ name: v.string(), age: v.number() })

app.post('/users', sValidator('json', schema), (c) => {
  const data = c.req.valid('json')
  return c.json(data, 201)
})
```
```

--------------------------------

### Hono Context Headers and Status

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Set the HTTP status code using `c.status()` and add custom headers using `c.header()`. Useful for controlling response behavior and metadata.

```typescript
c.status(201)
```

```typescript
c.header('X-Custom', 'value')
```

```typescript
c.header('Cache-Control', 'no-store')
```

--------------------------------

### Hono Renderer Middleware

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Set a custom HTML renderer function using `c.setRenderer()` in middleware. This allows for consistent HTML templating across your application. Handlers then use `c.render()` to output content.

```typescript
app.use(async (c, next) => {
  c.setRenderer((content) =>
    c.html(
      <html><body>{content}</body></html>
    )
  )
  await next()
})
```

```typescript
app.get('/', (c) => c.render(<h1>Hello</h1>))
```

--------------------------------

### HonoRequest (c.req) - Validated Data and Properties

Source: https://github.com/yusukebe/hono-skill/blob/main/skills/hono/SKILL.md

Shows how to access validated request data (used with validator middleware) and core properties of the request object like URL, path, method, and the raw underlying Request object.

```APIDOC
// Validated data (used with validator middleware)
c.req.valid('json')
c.req.valid('query')
c.req.valid('form')
c.req.valid('param')

// Properties
c.req.url // full URL string
c.req.path // pathname
c.req.method // HTTP method
c.req.raw // underlying Request object
```
```
Tokens:
Raw