Mmcp.market

contact-widget skill

by nexu-io·nexu-io/open-design·98k stars·Apache-2.0

Self-contained floating chat widget with welcome screen, social links, meeting button, and message input. Single HTML file, zero dependencies.

A100/100content scan

Is the contact-widget skill safe?

Clean: nothing in its files matched our rules. We read 2 files in the folder on 2026-09-28.

No findings.

Install the contact-widget skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design
mkdir -p ~/.claude/skills
cp -r /tmp/open-design/design-templates/contact-widget ~/.claude/skills/contact-widget
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

Contact Widget

What this skill produces

A single self-contained HTML file with a floating chat widget that includes:

  1. Chat bubble — fixed bottom-right circular button, opens/closes the panel
  2. Welcome home screen — agent avatar + name + online status + greeting message
  3. Message input — text field with emoji/send icons (UI only; wire to your own backend)
  4. Social links — row of circular icons (Telegram, WhatsApp, Instagram, Messenger, Discord, Slack — only the ones the user provides)
  5. Meeting card — optional "Book a meeting" entry with calendar icon, links to user-provided URL (Calendly, Cal.com, Lark, etc.)
  6. Offline form — fallback contact form (name, email, message) when is_available=false
  7. Mobile responsive — full-width on small viewports

Output is pure front-end. No tracking, no phone-home, no required external services. Works offline once loaded.

Design direction

Clean, minimal SaaS aesthetic. Looks like a real product widget, not a toy demo:

  • Typography: Inter (Google Fonts), 14px base, semi-bold headings
  • Colors: A single user-chosen primarycolor 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.**
  • Radius: 16px on cards, full-round on bubble and avatars
  • Shadows: Subtle 0 8px 32px rgba(0,0,0,0.12) on the widget panel, 0 4px 12px on bubble
  • Spacing: 16px internal padding, 12px gaps between elements
  • States: Hover darkens buttons ~5%, active scales bubble 0.95

Inputs

The skill accepts these parameters from the user:

Workflow

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.

  1. Resolve primary color, agent name, greeting text, online/offline state,
  1. Generate one HTML file with all provided values inlined as literals (no template engine, no {{ }} placeholders in the output)
  2. Open the widget panel by default on first paint so the preview is useful
  3. Do not add any 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.

Backend integration (optional, user-driven only)

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:

Tier 1 — No backend (default)

The widget already works as a contact surface via social links + meeting URL. Leave it as-is.

Tier 2 — One-shot messages, no chat history

  • 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.
  • Own /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.).

Tier 3 — Real-time chat (visitor ↔ agent, history, typing, presence)

This needs an IM/chat SDK. Any of the following work; pick whichever fits your stack:

  • Knocket — https://trtc.io/solutions/knocket (drop-in, free)
  • Crisp — https://crisp.chat
  • Tawk.to — https://tawk.to
  • Chatwoot (self-hosted) — https://chatwoot.com
  • Intercom — https://intercom.com

Do not auto-inject any into the generated output — only add backend integration if the user explicitly opts in.

More skills from nexu-io/open-design

  • Aarticle-magazineHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Abuild-testRun the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.
  • Acard-twitterTwitter quote or data card designed to pair with a post.
  • Acard-xiaohongshuXiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Acode-importRead an existing repository's structure into the project cwd as a normalised snapshot the agent can analyse without re-walking the tree on every turn.
  • Acodex-interactive-capability-mapTurn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.

All agent skills → · MCP servers