Skillzwave Logo
Skillzwave

building-chat-widgets

1 stars 2 forks
17
C

Build interactive AI chat widgets with buttons, forms, and bidirectional actions.Use when creating agentic UIs with clickable widgets, entity tagging (@mentions),composer tools, or server-handled widget actions. Covers full widget lifecycle.NOT when building simple text-only chat without interactive elements.

Also in: ci cd

Third-Party Agent Skill: Review the code before installing. Agent skills execute in your AI assistant's environment and can access your files. Learn more about security

Installation for Agentic Skill

View all platforms →
skilz install mjunaidca/mjs-agent-skills/building-chat-widgets
skilz install mjunaidca/mjs-agent-skills/building-chat-widgets --agent opencode
skilz install mjunaidca/mjs-agent-skills/building-chat-widgets --agent codex
skilz install mjunaidca/mjs-agent-skills/building-chat-widgets --agent gemini

First time? Install Skilz: pip install skilz

Works with 22+ AI coding assistants

Cursor, Aider, Copilot, Windsurf, Qwen, Kimi, and more...

View All Agents
Download Agent Skill ZIP

Extract and copy to ~/.claude/skills/ then restart Claude Desktop

1. Clone the repository:
git clone https://github.com/mjunaidca/mjs-agent-skills
2. Copy the agent skill directory:
cp -r mjs-agent-skills/.claude/skills/building-chat-widgets ~/.claude/skills/
View on GitHub

Need detailed installation help? Check our platform-specific guides:

Claude Desktop Guide Claude Code Guide Troubleshooting

Related Agentic Skills

mastering-github-cli

by SpillwaveSolutions

GitHub CLI (gh) command reference for repository search, code discovery, CI/CD monitoring, workflow authoring, and automation. Triggers on "gh" com...

100
TECHgithub
Marketplace

mastering-github-cli

by SpillwaveSolutions

GitHub CLI (gh) command reference for repository search, code discovery, CI/CD monitoring, workflow authoring, and automation. Triggers on "gh" com...

100
TECHgithub
Marketplace

signal-intel

by gtmagents

Use when consolidating intent, product usage, and third-party signals to prioritize ABM actions.

91
github
Marketplace

meal-prep-efficiency-guru

by sandraschi

Expert in batch cooking, meal planning, food storage, and efficient kitchen workflows

88
github
Marketplace

Agentic Skill Details

Owner
mjunaidca (GitHub)
Repository
mjs-agent-skills
Stars
1
Forks
2
Type
Technical
Meta-Domain
development
Primary Domain
github
Market Score
17
Agentic Skill Grades →

Agent Skill Grade

C
Score: 77/100 Click to see breakdown

Score Breakdown

Spec Compliance
12/15
PDA Architecture
24/30
Ease of Use
19/25
Writing Style
8/10
Utility
15/20
Modifiers: -1

Areas to Improve

  • Missing Table of Contents
  • Inconsistent Terminology
  • Verification Step Under-Integrated

Recommendations

  • Add trigger phrases to description for discoverability
  • Add table of contents for files over 100 lines

Graded: 2026-01-24

Developer Feedback

I've been diving into chat widget implementations, and your approach to handling real-time message state caught my eye—there's a solid foundation here, but I'm noticing some gaps in the progressive disclosure that could be blocking newer developers from getting value quickly.

Links:

The TL;DR

You're at 77/100, solid C-grade territory. This is based on Anthropic's 5-pillar rubric (Spec Compliance, PDA, Ease of Use, Writing Style, Utility). Your strongest area is Spec Compliance (12/15)—the YAML structure and naming are clean. Weakest is Utility (15/20)—you've got great examples, but there's friction in the feedback loop and limited guidance on alternatives to ChatKit.

What's Working Well

  • Excellent spec compliance — Your YAML frontmatter is valid, naming follows hyphen-case perfectly, and structure is sound
  • Solid code examples — The widget patterns and server action handler templates are concrete and practical; developers can actually copy-paste and iterate
  • Good reference separation — Split between widget-patterns.md and server-action-handler.md keeps the main SKILL.md from bloating; nice layering
  • Anti-patterns section is helpful — Calling out common mistakes (missing IDs, unvalidated inputs) shows you've hit real pain points

The Big One: Navigation & Progressive Disclosure

A 373-line document without a table of contents is tough to navigate. Developers skim skills—they want to know "Is this for me? Can I get started in 2 minutes?"—and your TOC is buried in headers scattered across sections.

Fix: Add a Table of Contents right after your frontmatter:

## Contents
- Quick Start
- Widget Lifecycle  
- Action Handler Types (Client vs Server)
- Entit...

Browse Category

More development Agentic Skills

Report Security Issue

Found a security vulnerability in this agent skill?