customware-ai/customware-support-widget
skills/customware-support-widget/SKILL.md
Use this skill when adding, placing, configuring, or fixing the Customware support chat widget in the Customware React Router client-only SPA template. It covers root.tsx/root document script loading, route/layout placement, required org/project ids, bubble versus full mode, optional metadata and style options, page-operation support, and constraints for MITB-style code generation.
$ install --global
skillsauthnpx skillsauth add customware-ai/skills customware-support-widgetInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 20, 2026, 2:11 AM13.7s2 files scanned
SKILL.md
- name:
- customware-support-widget
- description:
- Use this skill when adding, placing, configuring, or fixing the Customware support chat widget in the Customware React Router client-only SPA template. It covers root.tsx/root document script loading, route/layout placement, required org/project ids, bubble versus full mode, optional metadata and style options, page-operation support, and constraints for MITB-style code generation.
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-bubblemode for a floating launcher/dialog.fullmode for a sidebar, rail, drawer, or split-pane chat region.- Optional visitor metadata through the
metaDOM property. - Optional sizing/customization through
styleOptionsorstyle-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
orgIdorprojectIdcannot 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-idandproject-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.jsonce fromroot.tsxor 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
metaonly for optional visitor identity:emailand/orname. - Use wrapper CSS,
styleOptions, orstyle-optionsfor sizing. Do not use the native DOMstyleproperty 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
- Read references/component-usage.md.
- Confirm the React app has
orgIdandprojectId. - Choose the mode:
chat-bubblefor a floating support launcher/dialog.fullfor an embedded rail, drawer, split pane, or fixed chat region.
- Add the script tag in
root.tsxor the React Router root file/component that defines the HTML document<head>, unless it already exists. - Add JSX custom element typings in a
.d.tsfile when the template does not already know<customware-chat>. - Render
<customware-chat>withorg-idandproject-idin the specific route or layout that needs support. - Set optional
metaandstyleOptionsthrough a typed React ref when needed. - For full mode, ensure the wrapper/component has a concrete height and internal scrolling belongs to the widget.
- For bubble mode, ensure the wrapper is not clipped and has an appropriate
z-index. - Validate the resulting React code syntactically and with
npm run checkwhen 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 && projectIdso 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 optionalemailandname. - 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.
Related Skills
customware-ai/task-workflow
development
VerifiedTrustedCommunity
Strict execution instructions for product tasks, app implementation tasks, bugfixes, verification tasks, and full-stack coding tasks. Use when Codex must work through ordered phases that start with mandatory task-workflow artifact reset before any source inspection or edit, then codebase research, implementation passes, scored gates, interactive Playwright verification, E2E coverage, and final signoff.
1SKILL.mdUpdated Jun 13, 2026
customware-ai/builder-task-workflow
development
VerifiedTrustedCommunity
Strict execution instructions for Builder-style product tasks, app implementation tasks, bugfixes, verification tasks, and full-stack coding tasks. Use when Codex must work through ordered phases that start with mandatory task-workflow artifact reset before any source inspection or edit, then codebase research, implementation passes, scored gates, interactive Playwright verification, E2E coverage, and final signoff.
1SKILL.mdUpdated Jun 12, 2026
customware-ai/source-html-to-app-ui
development
VerifiedTrustedCommunity
This skill is strict implementation instruction, not advisory reference text. The skill treats the HTML as discovery-only input, forces interactive Playwright route/state capture, then moves through scored gates for source acceptance, implementation planning, authored UI reproduction, implementation integrity, visual verification, and adversarial proof before signoff.
1SKILL.mdUpdated May 25, 2026
customware-ai/existing-project-migration
development
VerifiedTrustedCommunity
Use this skill for Customware existing-project migration tasks that move uploaded customer apps from other builders into the standard Customware stack while preserving the source product's routes, workflows, UI, UX, and styling with no intentional user-facing changes while replacing only the runtime foundation. This skill covers both `Migration build` and `Migration verify` and includes self-grading quality gates that must pass before the task can complete.
1SKILL.mdUpdated May 6, 2026