Agent skill · Frontend

sap-extension-creator

Create Super Agent Party (SAP) extensions. This skill should be used when users want to create, build, or scaffold a new extension for Super Agent Party - including static HTML extensions (pure frontend) and Node.js backend extensions. Triggers on requests like "create a new SAP extension", "build an extension for Super Agent Party", "scaffold a plugin", "make a chat UI extension", or when working with sap extension projects.

heshengtaogithub.com/heshengtaoGitHub ↗
claude-codeships scriptsAGPL-3.0
Install
npx skills add heshengtao/super-agent-party --skill sap-extension-creator --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 8
SKILL.md size: 24 KB
Bundled scripts: yes
Path: skills/sap-extension-creator/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 2,552
Language: JavaScript
Read our review of the source →

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

Review
written from the skill's own SKILL.md · Aug 5, 2026

What it does

Creates SAP extensions (static frontend or Node.js backend) and scaffolds necessary files and workflows. Supports registering MCP tools via WebSocket, and provides templates for package.json, index.html, and index.js. Guides gathering requirements and scaffolding from templates, including optional Node.js dependencies and appearance options. Also documents WebSocket MCP lifecycle (startup, runtime, shutdown) and how to manage extension UI via iframe compatibility, theming, i18n, responsiveness, and compact mode for transparent windows.

How it works

  • It outlines two extension modes: Static (UI-only) and Node.js (Express backend), both of which can register MCP tools and connect via WebSocket.
  • It prescribes scaffold steps: gather requirements (extension name, description, type, dependencies, repository URL, window properties), scaffold templates from assets, and write package.json with required fields.
  • For Node.js extensions, it requires an index.js entry point that starts an Express server on a specified port, serves static files, and provides a /health endpoint.
  • It defines MCP lifecycle: on ws.onopen call registerMcpTools(), on ws.onmessage handleMcpCall(), and on window.beforeunload call unregisterMcpTools(). Tools are registered via a structured JSON message, and must be implemented as separate named functions.
  • It specifies UI and behavior patterns: include index.html with a self-contained page, use Font Awesome from CDN, enable dark/light theme with CSS variables, and bilingual UI via i18n object.
  • It describes responsive behavior, iframe compatibility, and compact mode for transparent windows, including CSS and JS patterns for drag regions and a close button.
  • It provides a WebSocket protocol reference and a simple chat HTTP API endpoint (/simple_chat) for one-off AI tasks separate from the WebSocket chat flow.

When to use it

Use when you need to create a new SAP extension, either static UI or a full Node.js backend, and you want to scaffold the project structure, wire up MCP tool registration, and follow SAP’s extension conventions.

What it can touch

  • WebSocket at ws://host/ws for MCP lifecycle and tool calls.
  • HTTP endpoint /simple_chat on the same origin for stateless AI tasks.
  • Local filesystem through templates and assets for scaffolding (assets/static-template/, assets/node-template/ used for starting points).

Caveats

  • License is AGPL-3.0.
  • Requires tools: claude-code.
  • The workflow assumes templates exist under assets, and that Node.js extensions expose an index.js with specified behavior.
  • No outcomes guaranteed beyond described steps and messaging patterns.
From the SKILL.md

# SAP Extension Creator ## Overview Create Super Agent Party extensions—self-contained packages that extend the platform with custom chat UI and tools. Two modes are supported: - **Static extension**: Pure HTML/CSS/JS frontend, served directly by SAP from the extension folder - **Node.js extension**: Full-stack with Express backend, auto-managed by SAP (`npm install` + `node index.js <port>`) Both

More from super-agent-party
All skills →
About this skill
What does the sap-extension-creator skill do?

Create Super Agent Party (SAP) extensions. This skill should be used when users want to create, build, or scaffold a new extension for Super Agent Party - including static HTML extensions (pure frontend) and Node.js backend extensions. Triggers on requests like "create a new SAP extension", "build an extension for Super Agent Party", "scaffold a plugin", "make a chat UI extension", or when working with sap extension projects.

How do I install it?

Run `npx skills add heshengtao/super-agent-party --skill sap-extension-creator --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 heshengtao/super-agent-party, a repository with 2,552 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.

Keep going