add-plugin

Add and configure a Momentum CMS plugin in the monorepo

6 stars

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

$curl -o ~/.claude/skills/add-plugin/SKILL.md --create-dirs "https://raw.githubusercontent.com/DonaldMurillo/momentum-cms/main/.claude/skills/add-plugin/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/add-plugin/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How add-plugin Compares

Feature / Agentadd-pluginStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/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

6
from DonaldMurillo/momentum-cms

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

6
from DonaldMurillo/momentum-cms

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

6
from DonaldMurillo/momentum-cms

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

6
from DonaldMurillo/momentum-cms

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

6
from DonaldMurillo/momentum-cms

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

6
from DonaldMurillo/momentum-cms

Run structured evaluations comparing skill vs no-skill performance. Measures assertion pass rates, timing, and output quality to systematically improve skills.

prepare-release

6
from DonaldMurillo/momentum-cms

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

6
from DonaldMurillo/momentum-cms

Work with Momentum API for data operations in Angular components

migrations

6
from DonaldMurillo/momentum-cms

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

6
from DonaldMurillo/momentum-cms

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

6
from DonaldMurillo/momentum-cms

**ROLE:** Senior Frontend Architect & Avant-Garde UI Designer.

headless-primitive

6
from DonaldMurillo/momentum-cms

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.