contact-widget
Self-contained floating chat widget with welcome screen, social links, meeting button, and message input. Single HTML file, zero dependencies.
Profile →npx skills add nexu-io/open-design --skill contact-widget --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 `primary_color` drives the bubble, avatar, send button, and accent. Everything e
- What this skill produces
- Design direction
- Inputs
- Workflow
- Backend integration (optional, user-driven only)
- Tier 1 — No backend (default)
- Tier 2 — One-shot messages, no chat history
- Tier 3 — Real-time chat (visitor ↔ agent, history, typing, presence)
What does the contact-widget skill do?
Self-contained floating chat widget with welcome screen, social links, meeting button, and message input. Single HTML file, zero dependencies.
How do I install it?
Run `npx skills add nexu-io/open-design --skill contact-widget --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.