用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/bobmatnyc/claude-mpm-skills --skill hono-jsx命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | hono-jsx |
| description | Hono JSX - server-side rendering, streaming, async components, and HTML generation patterns |
| user-invocable | false |
| disable-model-invocation | true |
| skill_version | 1.0.0 |
| updated_at | "2025-01-03T00:00:00.000Z" |
| tags | ["hono","jsx","ssr","streaming","html","components","suspense"] |
| progressive_disclosure | {"entry_point":{"summary":"Server-side JSX rendering with streaming, Suspense, and async components","when_to_use":"Rendering HTML on server, building SSR apps, streaming responses, or creating HTML templates","quick_start":"1. Configure tsconfig jsxImportSource 2. Create .tsx components 3. Render with c.html()"},"references":[]} |
| context_limit | 800 |
Hono provides a built-in JSX renderer for server-side HTML generation. It supports async components, streaming with Suspense, and integrates seamlessly with Hono's response system.
Key Features:
Use Hono JSX when:
Not for: Interactive SPAs (use React/Vue/Svelte instead)
// tsconfig.json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "hono/jsx"
}
}
/** @jsx jsx */
/** @jsxImportSource hono/jsx */
// deno.json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "npm:hono/jsx"
}
import { Hono } from 'hono'
const app = new Hono()
app.get('/', (c) => {
return c.html(
<html>
<head>
<title>Hello Hono</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
)
})
import { Hono } from 'hono'
import type { FC } from 'hono/jsx'
// Define props type
type GreetingProps = {
name: string
age?: number
}
// Functional component
const Greeting: FC<GreetingProps> = ({ name, age }) => {
return (
<div>
<h1>Hello, {name}!</h1>
{age && <p>You are {age} years old.</p>}
</div>
)
}
const app = new Hono()
app.get('/hello/:name', (c) => {
const name = c.req.param('name')
return c.html(<Greeting name={name} />)
})
import type { FC, PropsWithChildren } from 'hono/jsx'
const Layout: FC<PropsWithChildren<{ title: string }>> = ({ title, children }) => {
return (
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>{children}</main>
<footer>
<p>© 2025 My App</p>
</footer>
</body>
</html>
)
}
app.get('/', (c) => {
return c.html(
<Layout title="Home">
<h1>Welcome!</h1>
<p>This is my home page.</p>
</Layout>
)
})
const AsyncUserList: FC = async () => {
const users = await fetchUsers()
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
)
}
app.get('/users', async (c) => {
return c.html(<AsyncUserList />)
})
const UserProfile: FC<{ id: string }> = async ({ id }) => {
const user = await fetchUser(id)
return (
<div class="profile">
<h2>{user.name}</h2>
<p>{user.email}</p>
<UserPosts userId={id} />
</div>
)
}
const UserPosts: FC<{ userId: string }> = async ({ userId }) => {
const posts = await fetchUserPosts(userId)
return (
<div class="posts">
<h3>Posts</h3>
{posts.map(post => (
<article key={post.id}>
<h4>{post.title}</h4>
<p>{post.excerpt}</p>
</article>
))}
</div>
)
}
import { Suspense, renderToReadableStream } from 'hono/jsx/streaming'
const SlowComponent: FC = async () => {
await new Promise(resolve => setTimeout(resolve, 2000))
return <div>Loaded after 2 seconds!</div>
}
app.get('/stream', (c) => {
const stream = renderToReadableStream(
<html>
<body>
<h1>Streaming Demo</h1>
<Suspense fallback={<div>Loading...</div>}>
<SlowComponent />
</Suspense>
</body>
</html>
)
return c.body(stream, {
headers: {
'Content-Type': 'text/html; charset=UTF-8',
'Transfer-Encoding': 'chunked'
}
})
})
const Page: FC = () => {
return (
<Layout title="Dashboard">
<h1>Dashboard</h1>
<Suspense fallback={<div>Loading user...</div>}>
<UserProfile />
</Suspense>
<Suspense fallback={<div>Loading stats...</div>}>
<Statistics />
</Suspense>
<Suspense fallback={<div>Loading feed...</div>}>
<ActivityFeed />
</Suspense>
</Layout>
)
}
import { ErrorBoundary } from 'hono/jsx'
const RiskyComponent: FC = () => {
if (Math.random() > 0.5) {
throw new Error('Random error!')
}
return <div>Success!</div>
}
const ErrorFallback: FC<{ error: Error }> = ({ error }) => {
return (
<div class="error">
<h3>Something went wrong</h3>
<p>{error.message}</p>
</div>
)
}
app.get('/risky', (c) => {
return c.html(
<Layout title="Risky Page">
<ErrorBoundary fallback={ErrorFallback}>
<RiskyComponent />
</ErrorBoundary>
</Layout>
)
})
const AsyncRiskyComponent: FC = async () => {
const data = await fetchData()
if (!data) {
throw new Error('Data not found')
}
return <div>{data}</div>
}
// Error boundary catches async errors too
<ErrorBoundary fallback={({ error }) => <p>Error: {error.message}</p>}>
<AsyncRiskyComponent />
</ErrorBoundary>
import { createContext, useContext } from 'hono/jsx'
type Theme = 'light' | 'dark'
const ThemeContext = createContext<Theme>('light')
const ThemedButton: FC<{ label: string }> = ({ label }) => {
const theme = useContext(ThemeContext)
const className = theme === 'dark' ? 'btn-dark' : 'btn-light'
return <button class={className}>{label}</button>
}
const App: FC<{ theme: Theme }> = ({ theme, children }) => {
return (
<ThemeContext.Provider value={theme}>
<div class={`app theme-${theme}`}>
{children}
</div>
</ThemeContext.Provider>
)
}
app.get('/', (c) => {
const theme = c.req.query('theme') as Theme || 'light'
return c.html(
<App theme={theme}>
<ThemedButton label="Click me" />
</App>
)
})
Tags like <title>, <meta>, <link>, and <script> are automatically hoisted to <head>:
const Page: FC<{ title: string }> = ({ title, children }) => {
return (
<html>
<head>
{/* Base head content */}
</head>
<body>
{/* These will be hoisted to head! */}
<title>{title}</title>
<meta name="description" content="Page description" />
<link rel="stylesheet" href="/page.css" />
<div>{children}</div>
</body>
</html>
)
}
// Even from nested components
const SEO: FC<{ title: string; description: string }> = ({ title, description }) => {
return (
<>
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
</>
)
}
const Article: FC<{ article: Article }> = ({ article }) => {
return (
<div>
<SEO title={article.title} description={article.excerpt} />
<h1>{article.title}</h1>
<div>{article.content}</div>
</div>
)
}
const RawHtml: FC<{ html: string }> = ({ html }) => {
return <div dangerouslySetInnerHTML={{ __html: html }} />
}
// Usage
const markdown = await renderMarkdown(content)
<RawHtml html={markdown} />
import { raw } from 'hono/html'
const Page: FC = () => {
return (
<html>
<body>
{raw('<script>console.log("Hello")</script>')}
</body>
</html>
)
}
import { Fragment } from 'hono/jsx'
// Using Fragment
const List: FC = () => {
return (
<Fragment>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</Fragment>
)
}
// Using short syntax
const List2: FC = () => {
return (
<>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</>
)
}
import { memo } from 'hono/jsx'
// Expensive to compute
const ExpensiveComponent: FC<{ data: string[] }> = ({ data }) => {
const processed = data.map(item => item.toUpperCase()).join(', ')
return <div>{processed}</div>
}
// Memoize the result
const MemoizedExpensive = memo(ExpensiveComponent)
// Won't recompute if data is the same
<MemoizedExpensive data={['a', 'b', 'c']} />
const TodoList: FC<{ todos: Todo[] }> = ({ todos }) => {
return (
<ul id="todo-list">
{todos.map(todo => (
<li key={todo.id}>
<span>{todo.text}</span>
<button
hx-delete={`/todos/${todo.id}`}
hx-target="closest li"
hx-swap="outerHTML"
>
Delete
</button>
</li>
))}
</ul>
)
}
app.get('/todos', async (c) => {
const todos = await getTodos()
return c.html(
<Layout title="Todos">
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<h1>Todos</h1>
<TodoList todos={todos} />
<form hx-post="/todos" hx-target="#todo-list" hx-swap="beforeend">
<input name="text" placeholder="New todo" />
<button type="submit">Add</button>
</form>
</Layout>
)
})
app.post('/todos', async (c) => {
const { text } = await c.req.parseBody()
const todo = await createTodo(text as string)
return c.html(
<li>
<span>{todo.text}</span>
<button
hx-delete={`/todos/${todo.id}`}
hx-target="closest li"
hx-swap="outerHTML"
>
Delete
</button>
</li>
)
})
const Button: FC<{ variant: 'primary' | 'secondary' }> = ({ variant, children }) => {
const baseClasses = 'px-4 py-2 rounded font-medium transition-colors'
const variantClasses = variant === 'primary'
? 'bg-blue-600 text-white hover:bg-blue-700'
: 'bg-gray-200 text-gray-800 hover:bg-gray-300'
return (
<button class={`${baseClasses} ${variantClasses}`}>
{children}
</button>
)
}
import type { FC, PropsWithChildren } from 'hono/jsx'
import { Fragment, createContext, useContext, memo } from 'hono/jsx'
import { Suspense, renderToReadableStream } from 'hono/jsx/streaming'
import { ErrorBoundary } from 'hono/jsx'
import { raw } from 'hono/html'
// Direct render
c.html(<Component />)
// Streaming
c.body(renderToReadableStream(<Component />), {
headers: { 'Content-Type': 'text/html; charset=UTF-8' }
})
// Basic
const Comp: FC = () => <div>Hello</div>
// With props
const Comp: FC<{ name: string }> = ({ name }) => <div>{name}</div>
// With children
const Comp: FC<PropsWithChildren> = ({ children }) => <div>{children}</div>
// Async
const Comp: FC = async () => {
const data = await fetch()
return <div>{data}</div>
}
Version: Hono 4.x Last Updated: January 2025 License: MIT
LinkedIn automation via the Linked API CLI - fetch profiles, search people and companies, send messages, manage connections, create posts, react, comment, and run Sales Navigator and custom workflows. Use when the user wants to interact with LinkedIn.
Xquik X data automation API - Use REST or MCP for tweet search, user lookup, follower exports, media downloads, monitors, webhooks, giveaway draws, and confirmation-gated X actions.
MCP (Model Context Protocol) - Build AI-native servers with tools, resources, and prompts. TypeScript/Python SDKs for Claude Desktop integration.
基于 SOC 职业分类
