Contact Widget

Contact Widget is a Frontend skill for Claude Code, published by nexu-io in open-design.

85.4K stars10K forkson nexu-io/open-designAdded 2026/08/13Repository updated 2026/08/13

agent-skillsai-agentsai-designbyokclaude-code-for-designclaude-designcodex-designcoding-agentscursor-designdesign-systemsdesign-toolsdesktop-appfigma-alternativegenerative-aihermes-agentlocal-firstno-codeprototypingui-generatorvibe-coding

Install in seconds

Install Contact Widget

Copy Contact Widget into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/nexu-io/open-design/tree/main/design-templates/contact-widget ~/.claude/skills/contact-widget

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/nexu-io/open-design.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: design-templates/contact-widget/SKILL.md in nexu-io/open-design
Installs to: ~/.claude/skills/contact-widget
Collection: One of 25 skills cataloged from this repository
Category: Frontend — 567 skills

What Contact Widget does

Contact Widget generates a self-contained HTML floating chat widget with a welcome screen, social links, a meeting button, and a message input. Use it when you need a zero-dependency contact or chat UI for a website.

Contact Widget is cataloged under Frontend on DirSkills. Contact Widget comes from a repository tagged agent-skills, ai-agents, ai-design, byok and claude-code-for-design.

Documentation

README

Excerpt

What this skill produces

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

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

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Contact Widget

What else does nexu-io publish alongside Contact Widget?
Contact Widget is one of 25 skills that DirSkills catalogs from nexu-io/open-design, the repository it ships in. Its siblings there include Audio Jingle, Blog Post and Clinical Case Report. Each one is a separate skill with its own page in this directory, installs the same way Contact Widget does, and is maintained by nexu-io in that same repository. The rest of the collection is listed on the nexu-io/open-design page.
How does Contact Widget compare to other Frontend skills?
Contact Widget ranks #35 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Contact Widget against them. Open each page to compare what they document and how they install.