Summary
アプリ組み込み AI チャットフロントエンドの設計・実装ガイド。 前半は言語非依存の抽象設計パターン（ストリーミングファースト、チャット状態マシン、 メッセージモデル、楽観的UI、エラーリカバリ、UX原則、マルチセッション、サーバー設計原則）、 後半は Vercel AI SDK (useChat) による…
tumf/skills
ai-chat-frontend
アプリ組み込み AI チャットフロントエンドの設計・実装ガイド。 前半は言語非依存の抽象設計パターン（ストリーミングファースト、チャット状態マシン、 メッセージモデル、楽観的UI、エラーリカバリ、UX原則、マルチセッション、サーバー設計原則）、 後半は Vercel AI SDK (useChat) による TypeScript 具体実装。 フレームワーク非依存（Next.js, React SPA, Vue, Svelte, SvelteKit, Nuxt 対応）。 Use when チャット機能を追加したい、AIチャットUIを作りたい、useChat を使いたい、 ストリーミングチャットを実装したい、チャットボットUIを組み込みたい、 AI SDK でチャットを作る、またはチャットUIの設計パターンを整理・レビューしたい時。 Python/Go/Rust 等の非 TypeScript 環境でも設計パターン部分は適用可能。 既存のチャットUIのレビュー・改善にも使える。 対象外: チャット以外の AI SDK 用途（テキスト生成のみ、画像生成、エンベディング等）。
Installation
$
npx skills add https://github.com/tumf/skills
Similar popular skills
Related neighbors and high-traction skills in the same topics — useful to compare before installing.
frontend-design
Similar name
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…
4.3K installs
frontend-design
Similar name
anthropics/claude-code
Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…
137 installs
frontend-design
Similar name
anthropics/claude-plugins-official
Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…
81 installs
premium-frontend-ui
Similar name
github/awesome-copilot
A comprehensive guide for GitHub Copilot to craft immersive, high-performance web experiences w…
10 installs
frontend-design
Similar name
vercel-labs/agent-eval
Create distinctive, production-grade frontend interfaces with high design quality. Use this ski…
13 installs
frontend-skill
Similar name
openai/skills
Use when the task asks for a visually strong landing page, website, app, prototype, demo, or ga…
1.5K installsAlso in this package
Other skills from tumf/skills · top by installs.
npx skills add https://github.com/tumf/skills
More details
Agent compatibility
Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
Claude Code
Not declared
Cursor
Not declared
Codex
Not declared
GitHub Copilot
Not declared
Windsurf
Not declared
Gemini CLI
Not declared
Cline
Not declared
OpenCode
Not declared
Repository health
Stars
4
License
LICENSE
Default branch
main
Open issues
0
Status
Active
History
- First seen on skills.sh
- First recorded snapshot · 4 installs