Token导航 LogoToken导航TokenDH.com
中转站排行榜
前端设计操作浏览器github未标认证来源可访问许可证需确认审计提醒

customware-support-widget（定制支持小部件）

Agent Skill

customware-support-widget 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要围绕仓库状态、代码变更或协作事项进行整理时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

总安装

4,916

周安装

209

GitHub Stars

1

下载量

1,722
CodexClaudeCursorGemini CLI

安装说明

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

GitHub

来源数

2

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

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

请帮我安装这个 Agent Skill：customware-support-widget（定制支持小部件）
来源仓库：https://github.com/customware-ai/skills
仓库路径：skills/customware-support-widget
安装命令：
npx skills add https://github.com/customware-ai/skills --skill customware-support-widget
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills
npx skills add https://github.com/customware-ai/skills --skill customware-support-widget

简介

在 Customware React Router SPA 中集成第三方支持聊天小部件入口。

  • 通过 <customware-chat> 标签加载 Shadow DOM 组件，自动管理 UI 与运行时逻辑。
  • 需在 root.tsx 等文档根组件中注入脚本，并按路由条件控制显示范围。
  • 注意该组件为浏览器 custom element，其内部行为不受宿主框架直接干预。
  • customware-support-widget 属于前端设计类 Skill，可作为该场景下的辅助能力补充。

SKILL.md

Customware Support Widget

Use this skill when the Customware React Router client-only SPA template needs a Customware support chat entry point.

The widget is a third-party browser custom element. In this template, load the widget script in root.tsx or the equivalent React Router root file/component where the HTML document structure is defined, and render <customware-chat> only in the route or layout where support should appear. The widget owns its Shadow DOM UI, chat runtime, service calls, tool badges, speech input, and page-operation behavior.

For all React code examples, script loading patterns, JSX typing, bubble/full mode examples, metadata, and style options, read references/component-usage.md.

What It Offers

  • A support chat UI as <customware-chat>.
  • chat-bubble mode for a floating launcher/dialog.
  • full mode for a sidebar, rail, drawer, or split-pane chat region.
  • Optional visitor metadata through the meta DOM property.
  • Optional sizing/customization through styleOptions or style-options.
  • Tool-backed support behavior: read domain/context, list tasks, create tasks, and operate the visible page.
  • Page operation for user requests like filling forms, selecting options, clicking buttons, replacing values, or submitting visible UI.

When To Use

  • Add support chat to the Customware React Router client-only SPA template.
  • Place a floating support launcher in an app shell.
  • Place support chat as a full embedded panel in a layout region.
  • Allow the support agent to help with visible app UI, such as filling a form on behalf of the user.
  • Update an existing support widget placement or styling.

For the exact React implementation patterns, use references/component-usage.md.

When Not To Use

  • Do not use this skill for server-side rendering work. The target template is client-only React Router SPA mode.
  • Do not use this skill to build a custom chat UI.
  • Do not use this skill to iframe the widget.
  • Do not use this skill to call support chat endpoints directly.
  • Do not use this skill for non-template React apps or non-React apps unless explicitly asked.
  • Do not use this skill if orgId or projectId cannot be determined. Fail the task with a clear reason that the required Customware org/project id is missing.

Non-Negotiables

  • Always render the real custom element: <customware-chat>.
  • Always pass both org-id and project-id.
  • If either id is unavailable, fail the task with a clear missing-id reason instead of rendering placeholders or asking follow-up questions.
  • Load https://app.customware.ai/support-widget/customware-chat.js once from root.tsx or the template's equivalent React Router root document shell unless an existing app-level loader already does this.
  • Do not pass task ids, domain ids, user ids, API tokens, session tokens, auth cookies, or secrets into the component.
  • Use meta only for optional visitor identity: email and/or name.
  • Use wrapper CSS, styleOptions, or style-options for sizing. Do not use the native DOM style property as widget configuration.
  • Tool calls are compact status badges, not buttons.
  • Page operation is handled inside the widget. Do not add custom click/fill/page-control handlers around it.
  • Do not hardcode page-operation prompts or values into the host app. The user must type the request into the widget.

Implementation Workflow

  1. Read references/component-usage.md.
  2. Confirm the React app has orgId and projectId.
  3. Choose the mode:

- chat-bubble for a floating support launcher/dialog. - full for an embedded rail, drawer, split pane, or fixed chat region.

  1. Add the script tag in root.tsx or the React Router root file/component that defines the HTML document <head>, unless it already exists.
  2. Add JSX custom element typings in a .d.ts file when the template does not already know <customware-chat>.
  3. Render <customware-chat> with org-id and project-id in the specific route or layout that needs support.
  4. Set optional meta and styleOptions through a typed React ref when needed.
  5. For full mode, ensure the wrapper/component has a concrete height and internal scrolling belongs to the widget.
  6. For bubble mode, ensure the wrapper is not clipped and has an appropriate z-index.
  7. Validate the resulting React code syntactically and with npm run check when available.

Use references/component-usage.md for complete code examples for each mode.

MITB Agent Constraints

  • Do not assume access to Playwright, screenshots, browser DevTools, or visual testing.
  • Do not claim that the widget was visually tested.
  • Do not write user-facing status reports inside the generated app.
  • Validate by code inspection, TypeScript/compile checks, and ensuring the generated React Router/Vite code follows the examples in references/component-usage.md.
  • If runtime ids are unavailable during generation, fail the task with a clear missing-id reason. If ids are expected to load asynchronously at runtime, gate the component behind orgId && projectId so it never renders with placeholders.

Do Not Do

  • Do not create an iframe integration.
  • Do not rebuild or restyle the widget internals in React.
  • Do not reach into Shadow DOM or depend on internal class names.
  • Do not expose tool calls as clickable UI controls.
  • Do not call the support chat API or page-operation API directly from the host app.
  • Do not add fallback embed modes.
  • Do not store secrets, access tokens, private payloads, or auth/session data in widget attributes.
  • Do not pass arbitrary user/profile objects into meta; pass only optional email and name.
  • Do not set a fixed height only on an imagined internal message list. Size the whole full-mode host region.
  • Do not place bubble mode inside clipped or transformed containers unless that behavior is intentional.

适合场景

01

用户想查找某类 Agent Skill 时

02

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

03

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

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

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

能力 4

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

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

平台分布

Codex

34.21%
按下载量换算589

Claude

29.62%
按下载量换算510

Cursor

19.52%
按下载量换算336

Gemini CLI

9.63%
按下载量换算166

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

可疑

权限和风险

操作浏览器

该 Skill 可能涉及浏览器控制能力，使用时可能读取或操作网页内容，需要在受控环境中确认权限边界。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。来源安全扫描存在 warning/failed 结果，不能写成本站确认安全。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/customware-ai/skills

SKILL.md 来源

github.com

/customware-ai/skills/tree/main/skills/customware-support-widget

skills-sh

skills.sh

/customware-ai/skills/customware-support-widget

继续浏览同类 Skills

更多前端设计 Skills（10,216）返回 Skills 目录

上一个 Skill

customizing-tauri-windows（customizing Tauri windows 前端）

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

下一个 Skill

cute-dsl-ref（可爱的 DSL 参考）

cute-dsl-ref 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要围绕仓库状态、代码变更或协作事项进行整理时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。