new-directive

name	new-directive
description	Scaffolds a new movement directive end to end — source, colocated Vitest spec, barrel registration, demo page and docs — following the 6-step checklist in docs/ai/ARCHITECTURE.md. Use when adding any new directive to the library.
disable-model-invocation	true

New directive

Adds a directive to the movement library. Every step below is required — a directive that exists but is missing from MOVEMENT_DIRECTIVES is invisible to users, and one missing from the barrel is unreachable from the published package.

Before you start

This is non-trivial work, so it needs a spec first (/spec). The spec must state whether the new selector or inputs affect the public API — new directives are additive, but a new input on an existing directive may not be.

Read projects/movement/src/lib/directives/move-hover.directive.ts end to end. It is the canonical pattern: reactive effect() over all inputs, resolveMovementConfig merge, prefersReducedMotion check, #currentPlayer cancellation, cleanup in ngOnDestroy.

The 6 steps

1. Source

projects/movement/src/lib/directives/move-<name>.directive.ts — start from templates/directive.ts.template in this skill directory.

Non-negotiables (from docs/ai/BEST-PRACTICES.md):

• input() signals only, never @Input(). Numeric/boolean inputs use optionalNumberAttribute / optionalBooleanAttribute from move-animation.utils so attribute syntax coerces correctly.
• #field private syntax for injected dependencies and internal state.
• Every browser API guarded by isPlatformBrowser(PLATFORM_ID) or the injected DOCUMENT token. A PostToolUse hook blocks the edit otherwise.
• Cancel the previous player before starting a new one; cancel in ngOnDestroy.
• Respect prefersReducedMotion() and the disabled config.
• Delegate to AnimationEngine.play() — never call element.animate() directly.

2. Colocated spec

move-<name>.directive.spec.ts — start from templates/directive.spec.ts.template. Write it in the same step as the source, not "at the end". Cover at minimum: attach, the trigger path, reduced motion, disabled, input reactivity, cancellation on destroy, and SSR safety.

3. Register in the barrel

projects/movement/src/lib/movement.ts — both places:

• add the class to the MOVEMENT_DIRECTIVES array
• add export * from './directives/move-<name>.directive';

Verify with node .claude/scripts/api-surface.mjs — it flags NOT-IN-MOVEMENT_DIRECTIVES and NOT-RE-EXPORTED.

4. Demo page

src/app/pages/demos/<name>.page.ts, plus navigation registration. Import only the directives the page actually uses — the demo site relies on route-level tree-shaking, so never import MOVEMENT_DIRECTIVES wholesale.

5. Docs

Add the directive to src/app/pages/docs/api.page.ts and reference.page.ts, the directive table in docs/ai/ARCHITECTURE.md, and both READMEs if it is a headline feature. Run the docs-drift-checker agent afterwards to confirm nothing was missed.

6. Verify and record

Run /verify (full gate + pnpm e2e since a demo page changed). Then Phase 6: CHANGELOG.md Unreleased → Added, and docs/ai/STATE.md.