Token导航 LogoToken导航TokenDH.com
前端设计敏感数据github未标认证来源可访问clear审计通过

hono-typescripthono TypeScript 前端

Agent Skill

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码,整理组件结构,或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式,避免只生成孤立片段;涉及页面改动时,应配合本地预览和构建检查确认视觉效果。

总安装

6,816

周安装

284

GitHub Stars

87

下载量

2,272
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息,不托管安装包,也不代用户安装。

GitHub

来源数

3

许可证

MIT

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:hono-typescript(hono TypeScript 前端)
来源仓库:https://github.com/mindrally/skills
仓库路径:skills/hono-typescript
安装命令:
npx skills add https://github.com/mindrally/skills --skill hono-typescript
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。不同来源提供的安装方式可能略有差异;本站展示可直接复制的安装命令,安装前请核对来源页面。

skills.shnpx skills
npx skills add https://github.com/mindrally/skills --skill hono-typescript

简介

用于辅助前端页面和组件的开发与维护。hono-typescript 属于前端设计类 Skill,可作为该场景下的辅助能力补充。

  • 支持 React、Next.js、Vue 等框架的代码生成。
  • 需要结合项目设计系统和构建方式使用。
  • 涉及页面改动时应配合本地预览确认效果。
  • 避免生成孤立片段,需与现有结构保持一致。

SKILL.md

Hono TypeScript Development

You are an expert in Hono and TypeScript development with deep knowledge of building ultrafast, edge-first APIs that run on Cloudflare Workers, Deno, Bun, and Node.js.

TypeScript General Guidelines

Basic Principles

  • Use English for all code and documentation
  • Always declare types for variables and functions (parameters and return values)
  • Avoid using any type - create necessary types instead
  • Use JSDoc to document public classes and methods
  • Write concise, maintainable, and technically accurate code
  • Use functional and declarative programming patterns; avoid classes
  • Prefer iteration and modularization to adhere to DRY principles

Nomenclature

  • Use PascalCase for types and interfaces
  • Use camelCase for variables, functions, and methods
  • Use kebab-case for file and directory names
  • Use UPPERCASE for environment variables
  • Use descriptive variable names with auxiliary verbs: isLoading, hasError, canDelete
  • Start each function with a verb

Functions

  • Write short functions with a single purpose
  • Use arrow functions for handlers and middleware
  • Prefer the RO-RO pattern: Receive an Object, Return an Object
  • Use default parameters instead of null checks

Types and Interfaces

  • Prefer interfaces over types for object shapes
  • Avoid enums; use maps or const objects instead for better type safety
  • Use Zod for runtime validation with inferred types
  • Use readonly for immutable properties
  • Use import type for type-only imports

Hono-Specific Guidelines

Project Structure

src/
  routes/
    {resource}/
      index.ts
      handlers.ts
      validators.ts
  middleware/
    auth.ts
    cors.ts
    logger.ts
  services/
    {domain}Service.ts
  types/
    index.ts
  utils/
  config/
  index.ts

App Initialization

import { Hono } from 'hono';

// Type your environment bindings
type Bindings = {
  DB: D1Database;
  KV: KVNamespace;
  JWT_SECRET: string;
};

type Variables = {
  user: User;
};

const app = new Hono<{ Bindings: Bindings; Variables: Variables }>();

Routing

  • Use method chaining for clean route definitions
  • Group related routes with app.route()
  • Use route parameters with proper typing
const users = new Hono<{ Bindings: Bindings }>();

users.get('/', listUsers);
users.get('/:id', getUser);
users.post('/', zValidator('json', createUserSchema), createUser);
users.put('/:id', zValidator('json', updateUserSchema), updateUser);
users.delete('/:id', deleteUser);

app.route('/api/users', users);

Middleware

  • Use Hono's built-in middleware where available
  • Create typed middleware for custom logic
  • Chain middleware for composability
import { cors } from 'hono/cors';
import { logger } from 'hono/logger';
import { jwt } from 'hono/jwt';

app.use('*', logger());
app.use('/api/*', cors());
app.use('/api/*', jwt({ secret: 'your-secret' }));

// Custom middleware
const authMiddleware = async (c: Context, next: Next) => {
  const user = await validateUser(c);
  c.set('user', user);
  await next();
};

Request Validation with Zod

  • Use @hono/zod-validator for request validation
  • Define schemas for all request inputs
  • Infer types from Zod schemas
import { z } from 'zod';
import { zValidator } from '@hono/zod-validator';

const createUserSchema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
  role: z.enum(['user', 'admin']).default('user'),
});

type CreateUserInput = z.infer<typeof createUserSchema>;

app.post('/users', zValidator('json', createUserSchema), async (c) => {
  const data = c.req.valid('json');
  // data is typed as CreateUserInput
});

Context and Response Handling

  • Use typed context for better type safety
  • Use helper methods for responses: c.json(), c.text(), c.html()
  • Access environment bindings through context
app.get('/users/:id', async (c) => {
  const id = c.req.param('id');
  const db = c.env.DB;

  const user = await db.prepare('SELECT * FROM users WHERE id = ?')
    .bind(id)
    .first();

  if (!user) {
    return c.json({ error: 'User not found' }, 404);
  }

  return c.json(user);
});

Error Handling

  • Use Hono's HTTPException for expected errors
  • Create global error handler middleware
  • Return consistent error responses
import { HTTPException } from 'hono/http-exception';

// Throwing errors
if (!user) {
  throw new HTTPException(404, { message: 'User not found' });
}

// Global error handler
app.onError((err, c) => {
  if (err instanceof HTTPException) {
    return c.json({ error: err.message }, err.status);
  }
  console.error(err);
  return c.json({ error: 'Internal Server Error' }, 500);
});

Cloudflare Workers Integration

  • Use Workers KV for key-value storage
  • Use D1 for SQL databases
  • Use R2 for object storage
  • Use Durable Objects for stateful applications
// D1 Database
const result = await c.env.DB.prepare('SELECT * FROM users').all();

// KV Storage
await c.env.KV.put('key', 'value');
const value = await c.env.KV.get('key');

// R2 Storage
await c.env.BUCKET.put('file.txt', content);

Testing

  • Use Hono's test client for integration tests
  • Use Vitest or Jest as test runner
  • Test handlers and middleware separately
import { testClient } from 'hono/testing';
import { describe, it, expect } from 'vitest';

describe('User API', () => {
  const client = testClient(app);

  it('should list users', async () => {
    const res = await client.api.users.$get();
    expect(res.status).toBe(200);
    const data = await res.json();
    expect(Array.isArray(data)).toBe(true);
  });
});

Performance

  • Hono is ultrafast with minimal overhead
  • Use streaming responses for large data
  • Leverage edge caching with Cache API
  • Use hono/tiny preset for minimal bundle size

Security

  • Use hono/secure-headers middleware
  • Implement rate limiting
  • Validate all inputs with Zod
  • Use JWT for authentication
  • Enable CORS appropriately

Multi-Runtime Support

Hono runs on multiple runtimes. Configure appropriately:

// Cloudflare Workers
export default app;

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

// Bun
export default app;

// Deno
Deno.serve(app.fetch);

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

04

需要参考平台分布和安装热度时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明,方便继续核验

能力 4

补充不同宿主或平台的使用分布数据

能力 5

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用;具体调用方式请以来源页面和 README 为准。

平台分布

Claude Code

28.28%
按下载量换算643

Antigravity

21.56%
按下载量换算490

OpenCode

18.22%
按下载量换算414

github-copilot

14.07%
按下载量换算320

Codex

7.59%
按下载量换算172

Gemini CLI

3.42%
按下载量换算78

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

敏感数据

该 Skill 可能接触密钥、Token、环境变量或敏感配置,应进入高风险复核队列,默认不自动发布。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。

来源信息

继续浏览同类 Skills