DiscordSign up
SKILLS.SH

customware-support-widget

Use this skill when adding, placing, configuring, or fixing the Customware support chat widget in the Customware React Router client-only SPA template. It…

INSTALLATION
npx skills add https://github.com/customware-ai/skills --skill customware-support-widget
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

$27

  • 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

  • Confirm the React app has orgId and projectId.
  • Choose the mode:
  • chat-bubble for a floating support launcher/dialog.
  • full for an embedded rail, drawer, split pane, or fixed chat region.
  • Add the script tag in root.tsx or the React Router root file/component that defines the HTML document <head>, unless it already exists.
  • Add JSX custom element typings in a .d.ts file when the template does not already know <customware-chat>.
  • Render <customware-chat> with org-id and project-id in the specific route or layout that needs support.
  • Set optional meta and styleOptions through 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 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 &#x26;&#x26; 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.
BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Related skills

frontend-design
3/3

Distinctive, production-grade frontend interfaces that reject generic AI aesthetics. Guides design thinking before coding: establish bold aesthetic direction (brutalist, maximalist, retro-futuristic, luxury, playful, etc.) with clear purpose, tone, and differentiation Emphasizes typography, color theming, motion, spatial composition, and textural details as core design pillars; uses CSS variables, animations, and scroll-triggered effects Generates working, functional code (HTML/CSS/JS, React, Vue) that matches implementation complexity to aesthetic vision: elaborate code for maximalist designs, restrained precision for minimalist ones Explicitly avoids generic patterns: overused fonts (Inter, Roboto), clichéd color schemes (purple gradients), predictable layouts, and cookie-cutter component design

Verified authoranthropics
SKILLS.SH
422K139K
2026-05-22
web-design-guidelines
2/3

Audit UI code against Vercel's Web Interface Guidelines for design and accessibility compliance. Fetches the latest guidelines from a remote source before each review, ensuring rules stay current Accepts file paths or patterns as arguments; prompts for files if none provided Outputs findings in a terse file:line format for quick scanning and remediation Covers design, accessibility, and UX best practices as defined in the guidelines repository

Verified authorvercel-labs
SKILLS.SH
318K26.9K
2026-05-22
vercel-composition-patterns
3/3

React composition patterns for scaling components and avoiding boolean prop proliferation. Covers four priority categories: component architecture, state management, implementation patterns, and React 19 APIs, each with specific rules and code examples Includes 10+ named patterns addressing compound components, context providers, state lifting, and explicit variants Designed for refactoring bloated components, building reusable libraries, and reviewing component architecture decisions React 19 specific guidance on removing forwardRef and using use() instead of useContext()

Verified authorvercel-labs
SKILLS.SH
172K26.9K
2026-05-22
ui-ux-pro-max
2/3

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks. Includes 50+ design styles, 161 color palettes, 57 font pairings, and 99 UX guidelines with priority-ranked rules for accessibility, touch interaction, performance, and responsive layout Searchable database with design-system generation that recommends patterns, colors, typography, and effects based on product type and keywords; supports light/dark mode and platform-specific guidance (iOS HIG, Material Design, React Native) Covers 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS) with implementation-specific best practices and performance optimization rules Provides 25 chart types, 161 product type patterns, and pre-built templates for websites, landing pages, dashboards, admin panels, e-commerce, SaaS, portfolios, blogs, and mobile apps with component libraries (buttons, modals, forms, tables, cards, charts)

nextlevelbuilder
SKILLS.SH
158K81.3K
2026-05-22

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card