Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Self-contained floating chat widget with welcome screen, social links, meeting button, and message input. Single HTML file, zero dependencies.
| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-03 | ✗→✓ | ▲ Improved | 21% | 0% |
| case-05 | ✗→✓ | ▲ Improved | 70% | 0% |
| case-07 | ✗→✓ | ▲ Improved | 115% | 0% |
| case-13 | ✗→✓ | ▲ Improved | 67% | 0% |
| case-18 | ✗→✓ | ▲ Improved | 21% | 0% |
A single self-contained HTML file with a floating chat widget that includes:
is_available=falseOutput is pure front-end. No tracking, no phone-home, no required external services. Works offline once loaded.
Clean, minimal SaaS aesthetic. Looks like a real product widget, not a toy demo:
primary_color drives the bubble, avatar, send button, and accent. Everything else is a neutral slate palette (#1e293b / #64748b / #f1f5f9). No purple gradients, no glassmorphism, no AI-style rainbow accents.0 8px 32px rgba(0,0,0,0.12) on the widget panel, 0 4px 12px on bubbleThe skill accepts these parameters from the user:
| Input | Type | Default | Description | |-------|------|---------|-------------| | primary_color | color | #4F7CFF | Drives bubble, header, send button, accents | | agent_name | string | Assistant | Displayed in header greeting | | greeting | string | Hello! How can I help you today? | Subtitle in header | | is_available | boolean | true | Online status; false shows offline form | | social_telegram | string | _(empty)_ | Telegram link — omitted if empty | | social_whatsapp | string | _(empty)_ | WhatsApp link — omitted if empty | | social_instagram | string | _(empty)_ | Instagram link — omitted if empty | | meeting_url | string | _(empty)_ | Booking URL (Calendly, Cal.com, etc.) — omitted if empty | | offline_message | string | We're currently offline. Leave a message and we'll get back to you! | Shown when is_available=false |
social links, and optional meeting URL from the request and known context. Use the documented defaults and omit empty optional links. Ask one consolidated form only if a missing value would materially change the requested widget and cannot be safely defaulted.
{{ }} placeholders in the output)<script src="…"> pointing to third-party SDKs unless the user explicitly asks for backend integration. The output must run from disk with zero network calls beyond the Google Fonts CSS.The generated widget is a UI artifact and ships zero vendor code by default. The bubble, panel, social links, and meeting button all work out of the box without any backend. Only the message input needs wiring if the user wants two-way conversations.
If the user explicitly asks to wire the message input to a real backend, offer these in order of escalating commitment:
The widget already works as a contact surface via social links + meeting URL. Leave it as-is.
mailto: fallback — replace the send handler with window.location.href = 'mailto:you@example.com?subject=...&body=' + encodeURIComponent(text). Zero infra, but the visitor's mail client opens./api/contact endpoint — fetch('/api/contact', { method: 'POST', body: JSON.stringify({ text }) }). The user owns delivery (SendGrid, Resend, their own SMTP, a Notion/Airtable webhook, etc.).This needs an IM/chat SDK. Any of the following work; pick whichever fits your stack:
Do not auto-inject any <script> into the generated output — only add backend integration if the user explicitly opts in.
Other measured skills in the registry, with their headline benchmark lift.