$npx -y skills add IncomeStreamSurfer/paperclip-surfers --skill paperclip-create-pluginCreate new Paperclip plugins with the current alpha SDK/runtime. Use when scaffolding a plugin package, adding a new example plugin, or updating plugin authoring docs. Covers the supported worker/UI surface, route conventions, scaffold flow, and verification steps.
| 1 | # Create a Paperclip Plugin |
| 2 | |
| 3 | Use this skill when the task is to create, scaffold, or document a Paperclip plugin. |
| 4 | |
| 5 | ## 1. Ground rules |
| 6 | |
| 7 | Read these first when needed: |
| 8 | |
| 9 | 1. `doc/plugins/PLUGIN_AUTHORING_GUIDE.md` |
| 10 | 2. `packages/plugins/sdk/README.md` |
| 11 | 3. `doc/plugins/PLUGIN_SPEC.md` only for future-looking context |
| 12 | |
| 13 | Current runtime assumptions: |
| 14 | |
| 15 | - plugin workers are trusted code |
| 16 | - plugin UI is trusted same-origin host code |
| 17 | - worker APIs are capability-gated |
| 18 | - plugin UI is not sandboxed by manifest capabilities |
| 19 | - no host-provided shared plugin UI component kit yet |
| 20 | - `ctx.assets` is not supported in the current runtime |
| 21 | |
| 22 | ## 2. Preferred workflow |
| 23 | |
| 24 | Use the scaffold package instead of hand-writing the boilerplate: |
| 25 | |
| 26 | ```bash |
| 27 | pnpm --filter @paperclipai/create-paperclip-plugin build |
| 28 | node packages/plugins/create-paperclip-plugin/dist/index.js <npm-package-name> --output <target-dir> |
| 29 | ``` |
| 30 | |
| 31 | For a plugin that lives outside the Paperclip repo, pass `--sdk-path` and let the scaffold snapshot the local SDK/shared packages into `.paperclip-sdk/`: |
| 32 | |
| 33 | ```bash |
| 34 | pnpm --filter @paperclipai/create-paperclip-plugin build |
| 35 | node packages/plugins/create-paperclip-plugin/dist/index.js @acme/plugin-name \ |
| 36 | --output /absolute/path/to/plugin-repos \ |
| 37 | --sdk-path /absolute/path/to/paperclip/packages/plugins/sdk |
| 38 | ``` |
| 39 | |
| 40 | Recommended target inside this repo: |
| 41 | |
| 42 | - `packages/plugins/examples/` for example plugins |
| 43 | - another `packages/plugins/<name>/` folder if it is becoming a real package |
| 44 | |
| 45 | ## 3. After scaffolding |
| 46 | |
| 47 | Check and adjust: |
| 48 | |
| 49 | - `src/manifest.ts` |
| 50 | - `src/worker.ts` |
| 51 | - `src/ui/index.tsx` |
| 52 | - `tests/plugin.spec.ts` |
| 53 | - `package.json` |
| 54 | |
| 55 | Make sure the plugin: |
| 56 | |
| 57 | - declares only supported capabilities |
| 58 | - does not use `ctx.assets` |
| 59 | - does not import host UI component stubs |
| 60 | - keeps UI self-contained |
| 61 | - uses `routePath` only on `page` slots |
| 62 | - is installed into Paperclip from an absolute local path during development |
| 63 | |
| 64 | ## 4. If the plugin should appear in the app |
| 65 | |
| 66 | For bundled example/discoverable behavior, update the relevant host wiring: |
| 67 | |
| 68 | - bundled example list in `server/src/routes/plugins.ts` |
| 69 | - any docs that list in-repo examples |
| 70 | |
| 71 | Only do this if the user wants the plugin surfaced as a bundled example. |
| 72 | |
| 73 | ## 5. Verification |
| 74 | |
| 75 | Always run: |
| 76 | |
| 77 | ```bash |
| 78 | pnpm --filter <plugin-package> typecheck |
| 79 | pnpm --filter <plugin-package> test |
| 80 | pnpm --filter <plugin-package> build |
| 81 | ``` |
| 82 | |
| 83 | If you changed SDK/host/plugin runtime code too, also run broader repo checks as appropriate. |
| 84 | |
| 85 | ## 6. Documentation expectations |
| 86 | |
| 87 | When authoring or updating plugin docs: |
| 88 | |
| 89 | - distinguish current implementation from future spec ideas |
| 90 | - be explicit about the trusted-code model |
| 91 | - do not promise host UI components or asset APIs |
| 92 | - prefer npm-package deployment guidance over repo-local workflows for production |