plugin-authoring

Category: Tools & Productivity | Uploader: jupyterlab | Downloads: 0 | Version: v1.0（Latest）

Bootstrap and iterate TypeScript/TSX JupyterLab plugins in Plugin Playground for plugin development, using command-driven workflows and extension references.

Changelog: Source: GitHub https://github.com/jupyterlab/plugin-playground

Directory Structure

Current level: tree/main/_agents/skills/plugin-authoring/

📄 SKILL.md 4.1 KB

SKILL.md

---
name: plugin-authoring
description: Bootstrap and iterate TypeScript/TSX JupyterLab plugins in Plugin Playground for plugin development, using command-driven workflows and extension references.
metadata:
  keywords:
    - jupyterlab
    - plugin-playground
    - plugin-authoring
    - plugin development
    - extension
    - typescript
    - tsx
    - token
    - command
    - share-link
    - clipboard
---

# Plugin Authoring Skill (Playground)

Use this skill to bootstrap and iterate JupyterLab plugins inside **Plugin Playground**.

## Goal

Produce working plugin code that can be loaded with `plugin-playground:load-as-extension`, using extension points and examples available in the running environment.

## Inputs

- Desired behavior (what the plugin should do)
- Optional UI target (command palette, sidebar, status bar, notebook, etc.)
- Optional package constraints (JupyterLab-only APIs vs external AMD modules)

## Workflow

1. Prepare a TypeScript file

- If the user does not already have a plugin file open or specified, run `plugin-playground:create-new-plugin` with a meaningful `path` argument (for example `app.commands.execute('plugin-playground:create-new-plugin', { path: 'status-indicator.ts' })`) instead of relying on untitled defaults.
- Start from the generated TypeScript scaffold and adapt it.
- Focus on TypeScript/TSX plugin code. Do not scaffold Python projects (`pyproject.toml`, Python package layout) unless explicitly requested.

2. Discover available extension points

- Run `plugin-playground:list-tokens` to get available tokens.
- Run `plugin-playground:list-commands` to get available commands.
- Use optional `query` argument to narrow results:
  - `app.commands.execute('plugin-playground:list-tokens', { query: 'status' })`
  - `app.commands.execute('plugin-playground:list-commands', { query: 'notebook' })`

3. Discover reference examples

- Run `plugin-playground:list-extension-examples`.
- Filter by topic with `query` (for example `toolbar`, `commands`, `widget`, `notebook`).
- Open selected example source/README from the sidebar for implementation details.

4. Implement plugin code

- Start from a minimal plugin shape (`id`, `autoStart`, `activate`).
- Add `requires` tokens only after confirming availability from step 2.
- Add commands with stable IDs (`<namespace>:<action>`).
- Use one or more `.ts`/`.tsx` files as needed as complexity grows.

5. Load and iterate

- Run `plugin-playground:load-as-extension`.
- Validate behavior in UI.
- Check the command return value for `ok/status/message` to detect and report loading or autostart errors.
- If reloading the same plugin ID repeatedly, ensure cleanup is handled via `deactivate()` where needed.

6. Export for standalone development

- Run `plugin-playground:export-as-extension` to download a zip for local IDE + git workflows.
- For deterministic automation (or when another file is focused), pass an explicit file path:
  - `app.commands.execute('plugin-playground:export-as-extension', { path: 'my-extension/src/index.ts' })`
- Read export result metadata (`ok`, `archiveName`, `rootPath`, `fileCount`, `message`) and report failures.

7. Share a file link for collaboration

- Run `plugin-playground:share-via-link` to create a shareable URL for a single file.
- It can target the active file or an explicit path:
  - `app.commands.execute('plugin-playground:share-via-link', { path: 'my-extension/src/index.ts' })`
- The command keeps the same flow: it copies the generated link to clipboard and also returns metadata (`ok`, `link`, `sourcePath`, `urlLength`, `message`).

8. Imports and module safety

- Prefer JupyterLab/Lumino imports first.
- For external packages, ensure AMD-compatible import targets are used.
- Avoid Node/Webpack-only modules that are not AMD-compatible.

## Output expectations

- TypeScript-first plugin implementation (`.ts`/`.tsx`)
- Clear command IDs and labels
- Minimal required tokens
- No unused imports

## References

- JupyterLab Extension Tutorial:
  - https://jupyterlab.readthedocs.io/en/stable/extension/extension_tutorial.html
- JupyterLab Extension Examples:
  - https://github.com/jupyterlab/extension-examples

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

plugin-authoring

Directory Structure

SKILL.md

Report

Notice