add-plugin
Add and configure a Momentum CMS plugin in the monorepo
Best use case
add-plugin is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Add and configure a Momentum CMS plugin in the monorepo
Teams using add-plugin should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/add-plugin/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How add-plugin Compares
| Feature / Agent | add-plugin | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Add and configure a Momentum CMS plugin in the monorepo
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Add Momentum CMS Plugin (Monorepo)
Add and configure a plugin in the Momentum CMS monorepo.
## Arguments
- `$ARGUMENTS` - Plugin name: "analytics", "otel", "event-bus", or a custom plugin path
## Important: Monorepo Context
In the monorepo, plugins are local packages under `libs/plugins/`. Collections are defined in `libs/example-config/src/collections/`. Both example apps (`example-angular`, `example-analog`) import from `@momentumcms/example-config`.
## Steps
1. Identify the plugin to add
2. Import the plugin factory in the app's `momentum.config.ts`
3. Configure the plugin and add to the `plugins` array
4. Run `nx run example-angular:generate` (or the relevant app target) to regenerate types and admin config
5. Restart the dev server
## Official Plugins (Local Packages)
### Analytics (`@momentumcms/plugins/analytics`)
Located at `libs/plugins/analytics/`. Adds event tracking, dashboards, and block-level analytics.
```typescript
// In apps/example-angular/src/momentum.config.ts
import { analyticsPlugin } from '@momentumcms/plugins/analytics';
import { eventBusPlugin } from '@momentumcms/plugins/core';
const events = eventBusPlugin();
const analytics = analyticsPlugin({
trackCollections: true,
});
const config = defineMomentumConfig({
// ...existing config
plugins: [authPlugin, events, analytics],
});
```
**What it adds:**
- Analytics dashboard, content performance, tracking rules admin pages
- `TrackingRules` collection
- Block-level analytics fields injected via `modifyCollections`
- CRUD event tracking hooks
- Browser imports: `@momentumcms/plugins/analytics/admin-routes`, `@momentumcms/plugins/analytics/block-fields`
### OpenTelemetry (`@momentumcms/plugins/otel`)
Located at `libs/plugins/otel/`. Distributed tracing for all collection operations.
```typescript
import { otelPlugin } from '@momentumcms/plugins/otel';
const tracing = otelPlugin({ serviceName: 'momentum-cms' });
const config = defineMomentumConfig({
plugins: [authPlugin, tracing],
});
```
### Event Bus (`@momentumcms/plugins/core`)
Located at `libs/plugins/core/`. Pub/sub for collection lifecycle events.
```typescript
import { eventBusPlugin } from '@momentumcms/plugins/core';
const events = eventBusPlugin();
const config = defineMomentumConfig({
plugins: [authPlugin, events],
});
```
## After Adding a Plugin
```bash
nx run example-angular:generate # Regenerate types and admin config
nx serve cms-admin # Restart dev server
```
## Sidebar Icons
All heroicons/outline are provided globally at the admin route level (`provideAdminIcons()` in `libs/admin/src/lib/icons/provide-admin-icons.ts`). Plugins just set `icon: 'heroChartBarSquare'` (or any `hero*` name) in their admin route descriptor — no manual registration needed.
The `icon` field type is `hero${string}` for autocomplete. Browse available names at Heroicons. Naming: `hero` + PascalCase (e.g., `heroEnvelopeOpen` for `envelope-open`).
## Creating a New Plugin
Create a new library under `libs/plugins/`:
```bash
nx generate @nx/js:library --name=my-plugin --directory=libs/plugins/my-plugin --tags="scope:lib,env:server"
```
Then implement the `MomentumPlugin` interface:
```typescript
// libs/plugins/my-plugin/src/lib/my-plugin.ts
import type { MomentumPlugin } from '@momentumcms/core';
export function myPlugin(config: MyConfig): MomentumPlugin {
return {
name: 'my-plugin',
collections: [],
adminRoutes: [],
modifyCollections(collections) {},
async onInit(context) {},
async onReady(context) {},
async onShutdown(context) {},
browserImports: {
// Optional: expose browser-safe imports for admin config generation
adminRoutes: {
path: '@momentumcms/plugins/my-plugin/admin-routes',
exportName: 'myPluginAdminRoutes',
},
},
};
}
```
Key files to reference:
- Plugin interface: `libs/core/src/lib/plugins.ts`
- Plugin runner: `libs/plugins/core/src/lib/plugin-runner.ts`
- Analytics plugin (full example): `libs/plugins/analytics/src/lib/analytics-plugin.ts`
- Writing a plugin guide: `docs/plugins/writing-a-plugin.md`Related Skills
headless-ui
Use @momentumcms/headless inside generated Momentum apps. Use when building custom public UI, composing accessible primitives, configuring global styles for hdl-* elements, or adding app-level tests around headless interactions.
ui-audit
Comprehensive UI component audit for Momentum CMS. Use when asked to audit, review, check, or validate a UI component. Checks Storybook stories, interaction tests, variants, kitchen sink integration, admin dashboard usage, accessibility, and responsive design (mobile-first). AUTOMATICALLY FIXES issues found and verifies with visual inspection. Triggers include "audit button", "review the card component", "check accessibility of tabs", or "/ui-audit <component-name>".
test-all
Run the FULL Momentum CMS test suite — every single suite, no skips. Triggers on "test all", "test everything", "run all tests", "run the test all script", "test-all script", "run the full suite", "run every test", "test the whole thing", "make sure everything passes", "run test:all", or ANY variation asking to run all/every/full tests. Also triggers on typos like "test al", "tets all", "tes all". NEVER skip suites unless the user EXPLICITLY names suites to skip.
stroll-test
End-to-end CLI stroll test of npm-published Momentum CMS packages. Scaffolds a fresh project with create-momentum-app, adds all plugins, runs migrations, starts server, and verifies everything works. Triggers include "stroll test", "cli stroll", "test published packages", or "/stroll-test".
skill-improve
Self-improving skill loop. Analyzes eval failures, rewrites the skill, re-evaluates, and repeats until convergence. Run after /skill-eval produces baseline results.
skill-eval
Run structured evaluations comparing skill vs no-skill performance. Measures assertion pass rates, timing, and output quality to systematically improve skills.
prepare-release
Prepare a patch/minor/major version release for all Momentum CMS packages. Bumps versions, generates changelogs, verifies builds/tests, adds new packages to Nx release config, and commits. Triggers include "prepare release", "bump version", "release patch", or "/prepare-release".
momentum-api
Work with Momentum API for data operations in Angular components
migrations
Run migrations, generate schemas, and manage code generation for Momentum CMS. Use when working with database migrations, Drizzle schema generation, type generation, or Angular schematics.
mcp-setup
Set up the Momentum CMS MCP server plugin and generate Claude Code MCP config for AI tool integration. Use when connecting Claude Code (or any MCP client) to a Momentum CMS instance.
SYSTEM ROLE & BEHAVIORAL PROTOCOLS
**ROLE:** Senior Frontend Architect & Avant-Garde UI Designer.
headless-primitive
Author, extend, or repair primitives in libs/headless. Use when adding a new headless primitive, changing its accessibility contract, updating slots/state attrs, wiring overlay behavior, or expanding the example styling lab and tests.