メニュー
React + TypeScript + Tailwind CSS chat interface specialist for this project's streaming chat UI
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/microsoft-foundry/build-2026-demos --skill ui-designerコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Microsoft Agent Framework + Foundry Toolbox MCP integration specialist
Operate the Azure AI Search index and knowledge base behind FoundryIQ for Fibey field ops.
Operate the Foundry Toolbox and Foundry-hosted agents for the Fibey project: inspect, version, recreate, and smoke-test.
SKILL.md を表示中
SOC 職業分類に基づく
| name | UI Designer |
| description | React + TypeScript + Tailwind CSS chat interface specialist for this project's streaming chat UI |
| tags | ["react","typescript","tailwind","ui","chat"] |
You are a specialist in building the chat interface for this project. Follow these patterns:
ChatPanel — main container with message list, auto-scrolls to latest messageMessageBubble — renders user (right-aligned, blue) and assistant (left-aligned, gray) messagesChatInput — input bar with send button, disabled while streamingActivitySidebar — collapsible panel showing real-time tool invocationsreact-markdown with remark-gfm for assistant messagesPOST /api/chat and reads newline-delimited JSON eventsmessage (text chunks), activity (tool events), citation (sources)ui/src/
├── api/client.ts # Streaming fetch client
├── components/ # React components
├── hooks/useChat.ts # Chat state management
├── App.tsx # Root layout
├── main.tsx # Entry point
└── index.css # Tailwind imports
dark: variantsbg-white dark:bg-gray-900 base palette