📦
agent-ui
78建置 React Agent 介面
團隊需要 agent 聊天介面，而不必重建串流、核准和工具顯示。此技能會指引如何在 React 和 Next.js 中設定 inference.sh Agent 元件。
程式開發 查看
技能 chat-ui
📦
chat-ui
內容修訂 r1 中風險 ⚙️ 外部命令🌐 網路存取
建構 React 聊天介面
團隊需要能符合現代 React 應用程式的聊天介面。此技能提供 shadcn 風格的元件與模式，適用於訊息、輸入、頭像和串流狀態。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "chat-ui" from https://skillstore.io/skills/inference-sh-9-chat-ui.md and its manifest at https://skillstore.io/api/skills/inference-sh-9-chat-ui/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「chat-ui」。 為 Next.js 應用程式建立基本 AI 助理聊天面板。
預期結果:
頁面版面包含可捲動的訊息列表、使用者與助理泡泡、輸入回饋，以及在回應生成期間停用的輸入欄位。
正在使用「chat-ui」。 改善行動使用者的支援聊天介面。
預期結果:
- 在小螢幕上具備可讀間距的精簡訊息版面。
- 為客戶與支援回覆提供清楚的角色呈現。
- 可處理載入、空白訊息和停用狀態的輸入行為。
正在使用「chat-ui」。 為設計系統規劃可重用的聊天元件。
預期結果:
元件拆解涵蓋容器、訊息、輸入、輸入中指示器、角色變體和樣式 token。
安全審計
中風險v4 • 2026/7/5 開啟版本化報告
The markdown code fence detections are false positives, not Ruby or shell backtick execution. The main real concern is documentation that recommends mutable remote npx installer commands, which can fetch and write external content when executed. No prompt injection, credential harvesting, or hidden exfiltration intent was found in SKILL.md.
1
已掃描檔案
140
分析行數
1
複核項目
0
已忽略的誤報
已確認的安全問題 (1)
中
Unpinned Remote Installation Guidance
The skill recommends npx commands that fetch a remote component registry and related skills without version pinning. If an agent or user runs them, mutable external content can modify the project workspace.
The commands are visible documentation examples, not hidden automatic execution. The supply-chain exposure is still real because the commands fetch remote content and use mutable references.
能力複核項目 (1)
這些是真實的本機能力，對此技能而言可能是預期行為，因此需要複核，但不會按已確認的惡意行為計分。
中
Hardcoded URL
npx shadcn@latest add https://ui.inference.sh/r/chat.json
The URL is used in an npx shadcn install command that fetches component content from an external registry and can write files when executed. It is not automatic, but it is a real supply-chain risk for users or agents that run the example.
風險因素
⚙️ 外部命令 (18)
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/inference-sh-9-chat-ui/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/inference-sh-9-chat-ui?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/inference-sh-9-chat-ui?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/inference-sh-9-chat-ui/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/inference-sh-9-chat-ui.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>學術引用 (APA · BibTeX · CFF)
APA 引用
inference-sh-9. (2026). chat-ui security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/inference-sh-9-chat-ui/audits/4BibTeX 引用
@techreport{inference-sh-9-inference-sh-9-chat-ui-2026,
author = {inference-sh-9},
title = {chat-ui security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/inference-sh-9-chat-ui/audits/4},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "chat-ui security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "inference-sh-9"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/inference-sh-9-chat-ui/audits/4"
identifiers:
- type: other
value: "skillstore:inference-sh-9-chat-ui:audit:4"
description: "Skillstore immutable audit report identifier"
比較變體
2 個可安裝變體每位作者的技能都保留為獨立的可安裝項目。推薦變體依 Skillstore 證據排序。
為何此變體排名第一
Skillstore 評分最高
作者 / 來源 Skillstore 評分 證據置信度 Skillstore 使用量 已更新
Skillstore 評分
評分依據 證據置信度: 高 55
架構
85
可維護性
87
內容
69
社群
83
規範符合度
你可以打造什麼
原型設計 AI 助理面板
建立具備訊息泡泡、輸入處理和載入狀態的 Next.js 聊天介面。
標準化對話版面
為產品中的使用者、助理和系統訊息定義一致的角色樣式。
改善支援聊天畫面
將可重用的聊天區塊調整用於客戶支援、導覽 onboarding 或內部助理工作流程。
試試這些提示
建立基本聊天畫面
使用 chat-ui skill 建立簡單的 React 聊天畫面，包含訊息列表、助理回覆和文字輸入。
自訂訊息角色
使用 chat-ui skill 設計使用者、助理和系統訊息狀態，讓它們具有清楚的視覺差異與響應式間距。
新增串流回應狀態
使用 chat-ui skill 規劃 Next.js 聊天介面，顯示待處理回應、在提交期間停用輸入，並顯示輸入回饋。
審查現有聊天 UI
使用 chat-ui skill 審查我目前的聊天畫面，並將每個部分對應到可重用的容器、訊息、輸入和指示器元件。
最佳實務
- 在專案中執行外部 registry 命令前，先審查並固定版本。
- 將聊天狀態和 API 呼叫與呈現用訊息元件分離。
- 測試鍵盤操作、螢幕閱讀器標籤、載入狀態和行動版面。
避免
- 未先審查來源 URL 就執行技能中的 npx 命令。
- 將範例訊息處理器視為生產環境後端整合程式碼。
- 在缺乏清楚視覺階層的情況下混用使用者、助理和系統角色。
常見問題
此技能鎖定哪些框架？
它以使用 Tailwind CSS 和 shadcn/ui 模式的 React 與 Next.js 專案為目標。
它是否包含後端聊天邏輯？
不。它專注於介面層，不提供 API 路由或模型呼叫。
我可以搭配 Claude、Codex 或 Claude Code 使用嗎？
可以。此技能提供實作指引，這些工具可在相容專案中套用。
安裝是否需要網路存取？
是。文件中的安裝命令會從外部 registry URL 擷取元件。
元件可以自訂嗎？
可以。範例展示 Tailwind 和 shadcn/ui token based 樣式模式。
它本身是否已可用於生產環境？
不可以。用於生產環境前，請新增 API 整合、無障礙驗證、錯誤處理和安全審查。
開發者詳細資訊
授權
MIT
Skillstore 修訂
r1
版本提示
作者未聲明版本。
引用
a25199bc7d6b82598536822d1738eb5d5f54025b
維護新鮮度
2026/7/18
使用量
5 次下載 · 135 次瀏覽
檔案結構
📄 SKILL.md
inference-sh-9 的更多技能
查看全部📦
tools-ui
78將工具生命週期 UI 新增至 Agent 應用程式
Agent 應用程式需要清楚的工具狀態、核准與結果顯示。此技能為這些工作流程提供 React 和 Next.js 元件指引。
程式開發 查看
📦
widgets-ui
77在 React 中渲染 JSON 小工具
代理程式輸出通常需要互動式 UI，而不是純文字。此技能示範如何將結構化小工具定義渲染為 React 和 Next.js 元件。
設計與創意 查看
📦
prompt-engineering
38改善文字、圖像與影片的 AI 提示詞
當提示詞含糊或結構不佳時，AI 結果往往會失敗。此 skill 提供可重複使用的 LLM、圖像與影片提示詞模式。
效率 查看
📦
competitor-teardown
38使用結構化拆解分析競爭對手
競爭研究經常分散在筆記、螢幕截圖、定價頁面和評論網站之間。這項技能提供可重複使用的拆解框架、比較範本和研究工作流程，以支援清晰的策略決策。
研究與學習 查看
📦
python-executor
38在受管理的沙箱中執行 Python 程式碼
Python 任務通常需要程式庫與隔離執行。此技能透過 inference.sh 執行 Python，並提供資料、媒體、爬取與自動化工具。
程式開發 查看
相關技能
查看全部📦
senior-fullstack
82以資深指導建置全端應用程式
由 alirezarezvani
全端專案通常需要一致的設定、架構選擇與品質檢查。此技能提供用於 React、Next.js、Node.js、GraphQL 與 PostgreSQL 工作的指令碼與參考資料。
程式開發 查看
📦
vercel-react-view-transitions
82實作 React View Transitions
由 vercel-labs
React view transitions 很容易放錯位置，導致動畫靜默無效或過於吵雜。這項技能會引導你針對路由、Suspense、清單與共享元素的動畫做出選擇。
程式開發 查看
📦
senior-frontend
81建置可用於正式環境的前端功能
由 davila7
前端團隊需要在各專案之間保持一致的 React 和 Next.js 指引。此技能提供前端分析的參考工作流程、品質實務和輔助腳本。
程式開發 查看
📦
nextjs-optimization
80最佳化 Next.js 效能
由 Atman36
Next.js 應用程式可能因大型 bundle、薄弱的快取，以及未最佳化的媒體而變慢。此技能會引導 Claude、Codex 和 Claude Code，針對正式環境應用程式進行聚焦的效能改善。
程式開發 查看
📦
vercel-react-best-practices
80最佳化 React 與 Next.js 效能
由 vercel-labs
React 和 Next.js 應用程式常因瀑布式請求、大型 bundle，以及可避免的重新渲染而降低速度。此技能為代理提供具體規則，以進行更安全、以效能為重點的變更。
程式開發 查看
📦
i18n-automation
80自動化 Web 應用程式在地化
由 DNYoussef
新增多語支援往往會讓字串、路由、metadata 和 locale 檔案分散在整個程式碼庫中。這項 skill 會規劃並實作 i18n 設定，包含翻譯、驗證與文件。
程式開發 查看