plankit-cli 1.2.0 → 1.3.1

package/README.md

@@ -1,17 +1,26 @@
-# `plankit` — AI Coding Agent Workflow Command Suite
+# PlanKit CLI — AI Coding Agent Workflow Command Suite
 
-PlanKit is a lightweight, zero-dependency CLI that installs and manages a multi-phase feature workflow for AI coding assistants.
+PlanKit is a lightweight, **zero-dependency** CLI (Node ≥ 18) that installs and manages a multi-phase feature workflow for AI coding assistants (OpenCode, Gemini/Antigravity, Codex, Cursor). It creates a predictable artifact structure, installs the **selected agent's** command/skill bindings, generates phase specs and output reports, and archive records — and ships with a per-agent Angular command library so your AI agent can run deterministic, repository-aware Angular workflows.
 
-It creates a predictable artifact structure, agent instruction files, phase specs, phase output reports, and archive records.
+```
+plankit init          → installs ONE agent's folders/commands + artifact scaffold
+plankit plan          → creates artifacts/current/<feature>/ workspace
+plankit implement     → executes a phase against spec + prior outputs
+plankit review        → verifies, validates Definition of Done, archives
+```
 
-## Quick start
+---
+
+## Install
+
+Use it without installing (latest published version):
 
 ```bash
 npx plankit-cli init
 npx plankit-cli plan my-feature "Add configurable templates"
 ```
 
-If installed globally:
+Or install globally once:
 
 ```bash
 npm install -g plankit-cli
@@ -19,6 +28,32 @@ plankit init
 plankit plan my-feature
 ```
 
+> **Check your version** — if behavior ever looks "old", run `plankit --version` first (see [Troubleshooting](#troubleshooting)).
+
+---
+
+## Quick start
+
+```bash
+# 1. Initialize the workspace for your agent (you'll be prompted which one)
+plankit init
+
+# 2. Plan a feature (non-interactive agent selection, no prompt)
+plankit init --agent opencode
+
+# 3. Create a feature workspace under artifacts/current/<feature>/
+plankit plan my-feature "Add configurable templates"
+
+# 4. Prepare Phase 1, execute, then move to Phase 2...
+plankit implement my-feature 1
+plankit implement my-feature 2
+
+# 5. Review, verify, and archive when done
+plankit review my-feature
+```
+
+---
+
 ## Commands
 
 | Command | Action |
@@ -26,10 +61,41 @@ plankit plan my-feature
 | `plankit init [--agent <name>]` | Create PlanKit config, artifact folders, spec, and the **selected agent's** folders/commands. Prompts for the agent when none is specified. |
 | `plankit plan <feature> [requirements]` | Create `artifacts/current/<feature>/` with README, phase specs, outputs folder, and state metadata. |
 | `plankit clarify <feature> [phase]` | Create a clarification artifact for requirements and design decisions. |
-| `plankit implement <feature> <phase>` | Validate phase context and prepare `outputs/phase-N-output.md`. |
-| `plankit review <feature>` | Run verification commands, mark the README archived, and move the feature to `artifacts/archived/`. |
+| `plankit implement <feature> <phase>` | Validate phase context (spec + prior outputs) and prepare `outputs/phase-N-output.md`. |
+| `plankit review <feature>` | Run verification commands, mark README archived, and move the feature to `artifacts/archived/`. |
 | `plankit status [--json]` | List active and archived features. |
 | `plankit archive <feature>` | Move a feature to archived without running verification. |
+| `plankit version` / `--version` / `-v` | Print the installed version (`plankit-cli vX.Y.Z`). |
+| `plankit help` / `--help` / `-h` | Show usage. |
+
+---
+
+## Global options
+
+| Option | Description |
+|---|---|
+| `--force` | Overwrite generated files where safe. |
+| `--dry-run` | Show intended actions without writing anything. |
+| `--agent <name>` | Select your coding agent during `init` (`opencode`, `gemini`, `codex`, `cursor`; default `opencode`). |
+
+### Plan options
+
+| Option | Description |
+|---|---|
+| `--phases 3` | Generate N default phases. |
+| `--phases "Design,Build,Test"` | Generate named phases. |
+| `--requirements "text"` | Set feature requirements. |
+
+### Review options
+
+| Option | Description |
+|---|---|
+| `--test-command "cmd"` | Override the review test command. |
+| `--build-command "cmd"` | Override the review build command. |
+| `--skip-test` | Skip the review test command. |
+| `--skip-build` | Skip the review build command. |
+
+---
 
 ## Customization
 
@@ -58,45 +124,80 @@ plankit plan my-feature
 }
 ```
 
-Useful options:
+| Config key | Type | Default | Purpose |
+|---|---|---|---|
+| `artifactsDir` | `string` | `"artifacts"` | Root folder for `current/` and `archived/` workspaces. |
+| `overwrite` | `string` | `"skip"` | `"skip"` or `"force"` for regenerated files. |
+| `agents.default` | `string` | `"opencode"` | The agent whose folders/commands `init` installs. |
+| `defaultPhases` | `array` | 3 phases | Phases used when `--phases` isn't given. |
+| `verification` | `object` | `npm test` / `npm run build` | Commands run by `plankit review`. |
+| `templatesDir` | `string \| null` | `null` | Custom template overrides directory. |
 
-```bash
-plankit init --agent opencode
-plankit init --agent gemini --global-gemini-skills
-plankit init --force
-plankit plan my-feature --phases 4
-plankit plan my-feature --phases "Design,Build,Test"
-plankit review my-feature --test-command "pnpm test" --build-command "pnpm build"
-plankit review my-feature --skip-build
-plankit status --json
-```
+---
 
-### Agent selection
+## Agent selection
 
 `plankit init` installs **only** the folders/commands for the agent you select. Supported agents:
 
-| Agent | What is copied |
+| Agent | What gets installed |
 |---|---|
-| `opencode` (default) | `AGENTS.md`-style slash commands under `.opencode/commands/` |
-| `gemini` / `antigravity` | `.gemini/instructions.md` (plus `--global-gemini-skills` under your profile) |
-| `codex` | `AGENTS.md` |
-| `cursor` | `.cursorrules` |
+| `opencode` (default) | Slash commands under `.opencode/commands/` (`plankit-*.md` + `angular-*.md`). |
+| `gemini` / `antigravity` | `.gemini/instructions.md` + `angular-*` skills. `--global-gemini-skills` also installs skills under `~/.gemini/skills/`. |
+| `codex` | `AGENTS.md` + Angular commands under `.codex/`. |
+| `cursor` | `.cursorrules` + Angular command rules under `.cursor/rules/`. |
+
+Selection order during `init`:
 
-Selection order:
 1. `--agent <name>` flag (non-interactive / CI).
 2. A previously configured `agents.default` in `plankit.config.json`.
 3. An interactive numbered menu (when run in a terminal).
-4. The `opencode` default — announced explicitly so the behavior is never silent.
+4. The `opencode` default — **announced explicitly** so the behavior is never silent.
 
-When the Angular command/skill library ships, each agent's `commandBundles` entry installs that agent's `commands/`/`skills/` folder automatically with no CLI changes.
+```bash
+plankit init --agent opencode
+plankit init --agent gemini --global-gemini-skills
+plankit init --agent codex
+plankit init --agent cursor
+```
+
+---
+
+## Angular command suite
+
+Alongside the phase workflow, `init` installs a per-agent Angular command library that gives your AI assistant **16 deterministic Angular engineering workflows**, driven by repository discovery rather than generic prompts:
+
+| Command | Purpose |
+|---|---|
+| `component-from` | Generate a component from an existing one as an architectural reference. |
+| `feature` | Build a whole feature respecting existing architecture. |
+| `clone-pattern` | Clone any architectural pattern (feature/page/dialog/store/form/table/service). |
+| `design-match` | Align a generated component with the design system. |
+| `page-from-api` | Scaffold a page from a typed API method, deriving UI from the contract. |
+| `form-from-model` | Build a form from a domain model with inferred controls/validation. |
+| `table-from-model` | Build a table with semantic columns and correct formatting. |
+| `wire-api` | Replace mock data with real API calls using the dominant data-access pattern. |
+| `signalize` | Migrate state to Signals only where appropriate. |
+| `extract-component` | Extract a template region into a child component with a clean API. |
+| `split-component` | Decompose an oversized component into focused parts. |
+| `extract-store` | Move server/user state into a feature-scoped store. |
+| `modernize` | Orchestrate incremental Angular migrations (build/test between stages). |
+| `responsive` | Make a component responsive per project conventions. |
+| `generate-tests` | Write behavior-focused tests, filling coverage gaps only. |
+| `fixtures` | Generate reusable fixtures from TypeScript domain models. |
+
+Plus a shared `angular-project-discovery` reference that every command leans on (Angular version, standalone vs NgModule, Signals/RxJS, state management, forms strategy, UI library, styling, testing, conventions, architecture).
+
+Only your **selected agent's** folder/commands are copied. To customize the Angular command templates in your own `templatesDir`, mirror the `templates/angular-commands/` and `templates/angular-skills/` folder layout from the package.
+
+---
 
 ## Template overrides
 
-Default templates live in the package `templates/` directory. To override them in a project:
+Default templates live inside the package at `templates/`. To override them in a project:
 
 1. Create a directory such as `.plankit/templates`.
 2. Set `"templatesDir": ".plankit/templates"` in `plankit.config.json`.
-3. Add files matching the built-in template names, for example:
+3. Add files matching the built-in template names. For example:
 
 ```text
 .plankit/templates/
@@ -108,7 +209,57 @@ Default templates live in the package `templates/` directory. To override them i
     plankit-plan.md
 ```
 
-Supported placeholders use `{{name}}` syntax.
+Custom template directories mirror the package `templates/` layout, including `angular-commands/` and `angular-skills/`. Supported placeholders use `{{name}}` syntax (e.g. `{{artifactsDir}}`).
+
+---
+
+## Development
+
+```bash
+# Run the test suite (Node's built-in test runner)
+npm test
+
+# Inspect the exact tarball contents
+npm pack --dry-run
+
+# Build the per-agent Angular command/skill bundles from canonical sources
+node scripts/generate-angular-bundles.mjs
+```
+
+> The Angular command files are **generated** from the canonical definitions in [`scripts/generate-angular-bundles.mjs`](scripts/generate-angular-bundles.mjs). Edit that file (or the per-command body) and re-run the generator; don't hand-edit the four generated folders.
+
+---
+
+## Troubleshooting
+
+**"I ran `plankit init` but I still see the old all-agents behavior / no Angular commands."**
+
+Almost always a **stale global install**. First confirm what's really running:
+
+```bash
+plankit --version          # should be >= 1.3.1
+npm view plankit-cli version   # latest published version
+```
+
+If `plankit --version` reports an old version (or an error), update:
+
+```bash
+npm install -g plankit-cli@latest
+```
+
+**Two-competing-global-installs (Windows/macOS PATH shadowing):** it's possible to have `plankit-cli` installed under **two** global locations — your npm prefix (e.g. `D:\node24\...`) and a separately-linked one (e.g. `%APPDATA%\npm\...`). If `npm install -g` reports success but `plankit --version` still shows old output, the `plankit` shim earlier on your `PATH` may point at the stale copy. Fix by installing into the location that actually resolves:
+
+```bash
+# Windows PowerShell (check your APPDATA npm location)
+npm install -g --prefix "$env:APPDATA\npm" plankit-cli@latest
+
+# Or find every copy and refresh:
+where.exe plankit
+```
+
+Then restart your terminal so PATH refreshes and verify with `plankit --version`.
+
+---
 
 ## Verification
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plankit-cli",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "PlanKit Command Suite CLI for AI Coding Assistants (Antigravity, OpenCode, Codex, Cursor)",
   "main": "src/cli.js",
   "bin": {

package/src/cli.js

@@ -47,6 +47,11 @@ export async function runCli(args, context = {}) {
       case 'archive':
         archiveFeature(parsed, io);
         break;
+      case 'version':
+      case '--version':
+      case '-v':
+        showVersion(io);
+        break;
       case 'help':
       case '--help':
       case '-h':
@@ -114,10 +119,6 @@ function installCommandBundle(agent, bundleName, config, options, io) {
     };
   }
 
-  if (entry.global && options.dryRun) {
-    return { action: 'info', path: bundleName, message: 'would install to user profile (dry run)' };
-  }
-
   const targetRoot = entry.global
     ? path.join(os.homedir(), ...entry.dest)
     : safeJoin(io.cwd, ...entry.dest);
@@ -636,6 +637,7 @@ Commands:
   review <feature>                  Run verification and archive a completed feature
   status [--json]                   Show active and archived features
   archive <feature>                 Move a feature to archived without running verification
+  version                          Show the installed PlankKit CLI version
   help                              Show this help message
 
 Options:
@@ -653,3 +655,17 @@ Options:
   --skip-build                      Skip review build command
 `);
 }
+
+function showVersion(io) {
+  const version = readPackageVersion();
+  io.stdout(`plankit-cli v${version}`);
+}
+
+function readPackageVersion() {
+  try {
+    const pkg = JSON.parse(fs.readFileSync(path.join(packageRoot, 'package.json'), 'utf8'));
+    return pkg.version || 'unknown';
+  } catch {
+    return 'unknown';
+  }
+}

package/src/commandBundles.js

@@ -15,8 +15,7 @@ export const COMMAND_BUNDLES = {
     label: 'Angular skill suite',
     src: path.join('angular-skills', 'gemini'),
     dest: ['.gemini', 'skills'],
-    kind: 'folder',
-    global: true
+    kind: 'folder'
   },
   'codex-angular': {
     label: 'Angular command suite',
@@ -27,7 +26,7 @@ export const COMMAND_BUNDLES = {
   'cursor-angular': {
     label: 'Angular command suite',
     src: path.join('angular-commands', 'cursor'),
-    dest: ['.cursor'],
+    dest: ['.cursor', 'rules'],
     kind: 'folder'
   }
 };

package/templates/angular-commands/codex/angular-clone-pattern.md

@@ -0,0 +1,23 @@
+# angular-clone-pattern
+> Clone the pattern of an existing feature/page/dialog/store/form/table/service or route config to a new target.
+
+# /clone-pattern
+
+Core primitive: clone an architectural pattern to a new target.
+
+## Workflow
+1. Build a PATTERN MODEL (type, architecture, state style, API style, routing, styling, testing).
+2. Apply: PATTERN + TARGET DOMAIN = IMPLEMENTATION.
+
+## Categories
+- COPY:   folder structure, naming conventions
+- ADAPT:  model, inputs, routes
+- IGNORE: business logic, temporary workarounds, hardcoded styling
+
+## Guardrail
+Identify and refuse to propagate suspicious patterns (e.g. manual subscriptions without teardown) when the dominant repository pattern differs. Never build /clone-tech-debt.
+
+## Execution
+1. Run Angular PROJECT DISCOVERY against the repository.
+2. Apply the workflow above with the provided target.
+3. Report files created/modified and patterns reused.

package/templates/angular-commands/codex/angular-component-from.md

@@ -0,0 +1,26 @@
+# angular-component-from
+> Generate a new Angular component using an existing component as the architectural and stylistic reference.
+
+# /component-from
+
+Generate a new component by learning from an existing one instead of blind clone-and-rename.
+
+## Workflow
+1. Analyze the source component and classify what is reusable vs business-specific.
+2. Identify: component structure, file layout, input/output style, inject() convention, tokens, shared components, testing style.
+3. Understand the target domain (optionally from --model).
+4. Generate the new component using the reusable pattern.
+
+## Guardrail
+Never literal clone-and-rename (Product->User). Extract the pattern, understand the target domain, then generate.
+
+## Options
+- --model <Type>     inspect the model to derive appropriate inputs
+- --no-tests         skip generating a spec
+- --interactive      ask before writing
+- --dry-run          show files to create only
+
+## Execution
+1. Run Angular PROJECT DISCOVERY against the repository.
+2. Apply the workflow above with the provided target.
+3. Report files created/modified and patterns reused.

package/templates/angular-commands/codex/angular-design-match.md

@@ -0,0 +1,20 @@
+# angular-design-match
+> Match the design language of a generated component to a reference and its surrounding UI.
+
+# /design-match
+
+Align a target with a reference design system.
+
+## Workflow
+1. Discover design vocabulary from reference + neighbors (surfaces, spacing, typography, buttons, icons, states, breakpoints).
+2. Compare semantic regions, not raw DOM.
+3. Transform using priority: shared component -> design token -> existing utility -> existing SCSS pattern -> new style.
+
+## Options
+- --scope <layout|styles|states|all>
+- --auto-reference   search for the closest visually/functionally similar component
+
+## Execution
+1. Run Angular PROJECT DISCOVERY against the repository.
+2. Apply the workflow above with the provided target.
+3. Report files created/modified and patterns reused.

package/templates/angular-commands/codex/angular-extract-component.md

@@ -0,0 +1,21 @@
+# angular-extract-component
+> Extract a template region into a child component, deriving the smallest sensible API.
+
+# /extract-component
+
+Extract a child component with a clean boundary.
+
+## Workflow
+1. Analyze all reads/writes/uses inside the template region.
+2. Derive the smallest sensible input/output API.
+3. Prioritize strong boundaries (independent concept, repeated UI, clear I/O) over weak ones (5 lines, tight coupling, 14 inputs).
+4. If extraction makes architecture worse, reject it and recommend an alternative (e.g. a directive/field-group).
+
+## Options
+- --selection        extract a user-specified selection
+- --auto             detect candidate boundaries with confidence scores
+
+## Execution
+1. Run Angular PROJECT DISCOVERY against the repository.
+2. Apply the workflow above with the provided target.
+3. Report files created/modified and patterns reused.

package/templates/angular-commands/codex/angular-extract-store.md

@@ -0,0 +1,19 @@
+# angular-extract-store
+> Extract server/user state from a component into a feature-scoped store.
+
+# /extract-store
+
+Move state and state transitions into a store without turning it into a dumping ground.
+
+## Workflow
+1. Detect existing state and classify: SERVER STATE, USER STATE, DERIVED, EPHEMERAL UI.
+2. Keep ephemeral UI (e.g. dialogOpen) local; move server/user/derived state into the store.
+3. Determine provider scope from the app (component / route / feature / root) — do not default everything to root.
+
+## Safeguard
+Keep presentation and DOM logic out of the store. Store = state + transitions + relevant orchestration only.
+
+## Execution
+1. Run Angular PROJECT DISCOVERY against the repository.
+2. Apply the workflow above with the provided target.
+3. Report files created/modified and patterns reused.

package/templates/angular-commands/codex/angular-feature.md

@@ -0,0 +1,24 @@
+# angular-feature
+> Build an entire Angular feature while respecting the application existing architecture.
+
+# /feature
+
+High-level feature builder that composes lower-level commands.
+
+## Workflow
+1. Turn the request into capabilities (pages, data, state, UI, routes).
+2. Discover the closest existing feature (e.g. --like customers).
+3. Map capabilities onto existing repository patterns.
+4. Compose: clone-pattern -> component-from -> wire-api -> form-from-model -> generate-tests.
+
+## Safeguard
+Do not invent infrastructure. If existing features do not use stores/repositories/facades, do not introduce them here.
+
+## Options
+- --like <feature>   pattern reference
+- --plan             output only the plan (files, patterns, dependencies, routes, tests) without writing
+
+## Execution
+1. Run Angular PROJECT DISCOVERY against the repository.
+2. Apply the workflow above with the provided target.
+3. Report files created/modified and patterns reused.

package/templates/angular-commands/codex/angular-fixtures.md

@@ -0,0 +1,23 @@
+# angular-fixtures
+> Generate reusable fixtures from TypeScript domain models with override support.
+
+# /fixtures
+
+Create test/dev fixtures from existing models.
+
+## Workflow
+1. Given a model (e.g. Order), generate a factory: createOrder(overrides = {}) with sensible defaults and nested factories.
+2. Compose states where valuable.
+
+## Options
+- --count <n>        generate an array of n fixtures
+- --states           generate named states (pendingOrder, completedOrder, cancelledOrder, emptyOrder, largeOrder)
+- --edge-cases       generate edge cases (longName, missingOptionalFields, unicodeName, inactiveUser)
+
+## Integration
+Feeds /component-from, /table-from-model, /generate-tests.
+
+## Execution
+1. Run Angular PROJECT DISCOVERY against the repository.
+2. Apply the workflow above with the provided target.
+3. Report files created/modified and patterns reused.

package/templates/angular-commands/codex/angular-form-from-model.md

@@ -0,0 +1,22 @@
+# angular-form-from-model
+> Generate an Angular form from a TypeScript model, inferring field types, controls, and validation.
+
+# /form-from-model
+
+Build forms from domain models with semantic inference.
+
+## Workflow
+1. Understand field semantics (email -> email input, roleId -> select, active -> toggle, birthDate -> date).
+2. Reuse existing project form components (app-field, app-input, app-select, app-toggle).
+3. Discover validation from existing DTOs/sibling forms/schemas; separate KNOWN from INFERRED validation — never hallucinate constraints.
+4. Respect Reactive Forms vs Signal Forms based on project version.
+5. Generate a mapping layer (toCreateDto / toFormModel) instead of coupling DTOs to the UI.
+
+## Options
+- --create | --edit | --dialog | --stepper
+- --like <form>      reference form
+
+## Execution
+1. Run Angular PROJECT DISCOVERY against the repository.
+2. Apply the workflow above with the provided target.
+3. Report files created/modified and patterns reused.

package/templates/angular-commands/codex/angular-generate-tests.md

@@ -0,0 +1,20 @@
+# angular-generate-tests
+> Generate behavior-focused tests, deriving behaviors and filling gaps only.
+
+# /generate-tests
+
+Test behavior, not implementation details.
+
+## Workflow
+1. Derive behaviors for the target (form init, validation, derived values, submit blocking, request emission, error display, disabled states).
+2. Find existing coverage and generate only missing tests.
+3. Use given/when/then behavior, not expect(component).toBeTruthy().
+
+## Options
+- --diff             generate tests around changed behaviors only
+- target types: component | service | store | route (--navigation)
+
+## Execution
+1. Run Angular PROJECT DISCOVERY against the repository.
+2. Apply the workflow above with the provided target.
+3. Report files created/modified and patterns reused.

package/templates/angular-commands/codex/angular-modernize.md

@@ -0,0 +1,20 @@
+# angular-modernize
+> Orchestrate incremental Angular migrations, building/testing between each stage.
+
+# /modernize
+
+Treat this as a migration orchestrator, not an LLM rewrite.
+
+## Workflow
+1. Determine the Angular version and applicable migrations (standalone, built-in control flow, inject(), signal inputs, output(), signal queries).
+2. Make transformations individually selectable and apply them one at a time.
+3. Categorize: SAFE AUTOMATED (*ngIf->@if), SAFE WITH VERIFICATION (constructor DI->inject()), ARCHITECTURAL (local state->Signals), NOT RECOMMENDED (working RxJS->Signals).
+4. Build/test between every stage.
+
+## Options
+- --control-flow | --inject | --standalone | --signal-inputs | --recommended
+
+## Execution
+1. Run Angular PROJECT DISCOVERY against the repository.
+2. Apply the workflow above with the provided target.
+3. Report files created/modified and patterns reused.

package/templates/angular-commands/codex/angular-page-from-api.md

@@ -0,0 +1,23 @@
+# angular-page-from-api
+> Generate an Angular page from a typed API method, deriving UI requirements from the API contract.
+
+# /page-from-api
+
+Scaffold a page that matches the API capabilities.
+
+## Workflow
+1. Inspect the API method signature and return type (e.g. PagedResult<Order>).
+2. Derive likely UI requirements: list, loading, empty, error, pagination; filters/sorting only if the API supports them.
+3. Find the closest existing page pattern and reuse it.
+
+## Critical rule
+Never invent unsupported API functionality. If the API has no sort parameter, do not generate server-side sorting. If no delete endpoint, no Delete button.
+
+## Options
+- --like <page>      reference pattern
+- --crud             scaffold full CRUD (list/details/create/edit/delete) from a typed service
+
+## Execution
+1. Run Angular PROJECT DISCOVERY against the repository.
+2. Apply the workflow above with the provided target.
+3. Report files created/modified and patterns reused.

package/templates/angular-commands/codex/angular-project-discovery.md

@@ -0,0 +1,39 @@
+# Angular Project Discovery
+> Discover repository context before any Angular command.
+
+# Angular Project Discovery
+
+Before any Angular command, discover the repository context:
+
+- Angular version
+- Package manager
+- Standalone vs NgModule
+- Signals / RxJS usage
+- State-management libraries
+- Reactive Forms / Signal Forms
+- UI library: Material / PrimeNG / custom
+- Styling: SCSS / CSS / Tailwind / tokens
+- Testing: Vitest / Jest / Karma
+- Existing naming conventions
+- Existing folder architecture
+- Closest comparable implementation
+
+Never modernize code merely because the framework supports it — only when it fits the repository.
+
+## Commands
+- component-from : use an existing component as the reference
+- feature        : build a whole feature respecting existing architecture
+- clone-pattern  : clone any architectural pattern
+- design-match   : align a generated component with the design system
+- page-from-api  : scaffold a page from a typed API
+- form-from-model: build a form from a domain model
+- table-from-model: build a table with semantic columns
+- wire-api       : replace mock data with real API calls
+- signalize      : migrate state to Signals where appropriate
+- extract-component: extract a template region into a child component
+- split-component: decompose an oversized component
+- extract-store  : move state into a feature store
+- modernize      : orchestrate incremental migrations
+- responsive     : make a component responsive per project convention
+- generate-tests : write behavior-focused tests
+- fixtures       : generate model fixtures

package/templates/angular-commands/codex/angular-responsive.md

@@ -0,0 +1,21 @@
+# angular-responsive
+> Make a component responsive following the existing project breakpoints and patterns.
+
+# /responsive
+
+Responsive is not just media queries.
+
+## Workflow
+1. Discover project breakpoints, container widths, grid, mobile nav, table->card behavior, spacing/typography changes, dialog behavior.
+2. Analyze the target and transform fixed layouts (width: 900px; grid 400px 400px) per project conventions.
+3. Test important states: long translated text, empty, loading, validation errors, many actions, large values, small phone, tablet.
+
+## Options
+- --mobile | --tablet | --all
+- --like <page>      follow a reference responsive page
+- --visual           (future) iterate on rendered screenshots
+
+## Execution
+1. Run Angular PROJECT DISCOVERY against the repository.
+2. Apply the workflow above with the provided target.
+3. Report files created/modified and patterns reused.