plankit-cli 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -5
- package/package.json +1 -1
- package/src/cli.js +0 -4
- package/src/commandBundles.js +2 -3
- package/templates/angular-commands/codex/angular-clone-pattern.md +23 -0
- package/templates/angular-commands/codex/angular-component-from.md +26 -0
- package/templates/angular-commands/codex/angular-design-match.md +20 -0
- package/templates/angular-commands/codex/angular-extract-component.md +21 -0
- package/templates/angular-commands/codex/angular-extract-store.md +19 -0
- package/templates/angular-commands/codex/angular-feature.md +24 -0
- package/templates/angular-commands/codex/angular-fixtures.md +23 -0
- package/templates/angular-commands/codex/angular-form-from-model.md +22 -0
- package/templates/angular-commands/codex/angular-generate-tests.md +20 -0
- package/templates/angular-commands/codex/angular-modernize.md +20 -0
- package/templates/angular-commands/codex/angular-page-from-api.md +23 -0
- package/templates/angular-commands/codex/angular-project-discovery.md +39 -0
- package/templates/angular-commands/codex/angular-responsive.md +21 -0
- package/templates/angular-commands/codex/angular-signalize.md +20 -0
- package/templates/angular-commands/codex/angular-split-component.md +21 -0
- package/templates/angular-commands/codex/angular-table-from-model.md +22 -0
- package/templates/angular-commands/codex/angular-wire-api.md +24 -0
- package/templates/angular-commands/cursor/angular-clone-pattern.md +24 -0
- package/templates/angular-commands/cursor/angular-component-from.md +27 -0
- package/templates/angular-commands/cursor/angular-design-match.md +21 -0
- package/templates/angular-commands/cursor/angular-extract-component.md +22 -0
- package/templates/angular-commands/cursor/angular-extract-store.md +20 -0
- package/templates/angular-commands/cursor/angular-feature.md +25 -0
- package/templates/angular-commands/cursor/angular-fixtures.md +24 -0
- package/templates/angular-commands/cursor/angular-form-from-model.md +23 -0
- package/templates/angular-commands/cursor/angular-generate-tests.md +21 -0
- package/templates/angular-commands/cursor/angular-modernize.md +21 -0
- package/templates/angular-commands/cursor/angular-page-from-api.md +24 -0
- package/templates/angular-commands/cursor/angular-project-discovery.md +39 -0
- package/templates/angular-commands/cursor/angular-responsive.md +22 -0
- package/templates/angular-commands/cursor/angular-signalize.md +21 -0
- package/templates/angular-commands/cursor/angular-split-component.md +22 -0
- package/templates/angular-commands/cursor/angular-table-from-model.md +23 -0
- package/templates/angular-commands/cursor/angular-wire-api.md +25 -0
- package/templates/angular-commands/opencode/angular-clone-pattern.md +21 -0
- package/templates/angular-commands/opencode/angular-component-from.md +24 -0
- package/templates/angular-commands/opencode/angular-design-match.md +18 -0
- package/templates/angular-commands/opencode/angular-extract-component.md +19 -0
- package/templates/angular-commands/opencode/angular-extract-store.md +17 -0
- package/templates/angular-commands/opencode/angular-feature.md +22 -0
- package/templates/angular-commands/opencode/angular-fixtures.md +21 -0
- package/templates/angular-commands/opencode/angular-form-from-model.md +20 -0
- package/templates/angular-commands/opencode/angular-generate-tests.md +18 -0
- package/templates/angular-commands/opencode/angular-modernize.md +18 -0
- package/templates/angular-commands/opencode/angular-page-from-api.md +21 -0
- package/templates/angular-commands/opencode/angular-project-discovery.md +39 -0
- package/templates/angular-commands/opencode/angular-responsive.md +19 -0
- package/templates/angular-commands/opencode/angular-signalize.md +18 -0
- package/templates/angular-commands/opencode/angular-split-component.md +19 -0
- package/templates/angular-commands/opencode/angular-table-from-model.md +20 -0
- package/templates/angular-commands/opencode/angular-wire-api.md +22 -0
- package/templates/angular-skills/gemini/angular-clone-pattern/SKILL.md +24 -0
- package/templates/angular-skills/gemini/angular-component-from/SKILL.md +27 -0
- package/templates/angular-skills/gemini/angular-design-match/SKILL.md +21 -0
- package/templates/angular-skills/gemini/angular-extract-component/SKILL.md +22 -0
- package/templates/angular-skills/gemini/angular-extract-store/SKILL.md +20 -0
- package/templates/angular-skills/gemini/angular-feature/SKILL.md +25 -0
- package/templates/angular-skills/gemini/angular-fixtures/SKILL.md +24 -0
- package/templates/angular-skills/gemini/angular-form-from-model/SKILL.md +23 -0
- package/templates/angular-skills/gemini/angular-generate-tests/SKILL.md +21 -0
- package/templates/angular-skills/gemini/angular-modernize/SKILL.md +21 -0
- package/templates/angular-skills/gemini/angular-page-from-api/SKILL.md +24 -0
- package/templates/angular-skills/gemini/angular-project-discovery/SKILL.md +41 -0
- package/templates/angular-skills/gemini/angular-responsive/SKILL.md +22 -0
- package/templates/angular-skills/gemini/angular-signalize/SKILL.md +21 -0
- package/templates/angular-skills/gemini/angular-split-component/SKILL.md +22 -0
- package/templates/angular-skills/gemini/angular-table-from-model/SKILL.md +23 -0
- package/templates/angular-skills/gemini/angular-wire-api/SKILL.md +25 -0
package/README.md
CHANGED
|
@@ -77,10 +77,10 @@ plankit status --json
|
|
|
77
77
|
|
|
78
78
|
| Agent | What is copied |
|
|
79
79
|
|---|---|
|
|
80
|
-
| `opencode` (default) |
|
|
81
|
-
| `gemini` / `antigravity` | `.gemini/instructions.md` (plus `--global-gemini-skills` under your profile) |
|
|
82
|
-
| `codex` | `AGENTS.md` |
|
|
83
|
-
| `cursor` | `.cursorrules` |
|
|
80
|
+
| `opencode` (default) | Slash commands under `.opencode/commands/` |
|
|
81
|
+
| `gemini` / `antigravity` | `.gemini/instructions.md` + `angular-*` skills (plus `--global-gemini-skills` under your profile) |
|
|
82
|
+
| `codex` | `AGENTS.md` + Angular commands under `.codex/commands/` |
|
|
83
|
+
| `cursor` | `.cursorrules` + Angular command rules under `.cursor/rules/` |
|
|
84
84
|
|
|
85
85
|
Selection order:
|
|
86
86
|
1. `--agent <name>` flag (non-interactive / CI).
|
|
@@ -88,7 +88,13 @@ Selection order:
|
|
|
88
88
|
3. An interactive numbered menu (when run in a terminal).
|
|
89
89
|
4. The `opencode` default — announced explicitly so the behavior is never silent.
|
|
90
90
|
|
|
91
|
-
|
|
91
|
+
### Angular command suite
|
|
92
|
+
|
|
93
|
+
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:
|
|
94
|
+
|
|
95
|
+
`component-from`, `feature`, `clone-pattern`, `design-match`, `page-from-api`, `form-from-model`, `table-from-model`, `wire-api`, `signalize`, `extract-component`, `split-component`, `extract-store`, `modernize`, `responsive`, `generate-tests`, `fixtures` — plus a shared `angular-project-discovery` reference.
|
|
96
|
+
|
|
97
|
+
Every command ships with the exact per-agent binding, so only your selected agent's folder/commands are copied. To include Angular command templates in a custom `templatesDir`, mirror the `templates/angular-commands/` and `templates/angular-skills/` folder layout.
|
|
92
98
|
|
|
93
99
|
## Template overrides
|
|
94
100
|
|
package/package.json
CHANGED
package/src/cli.js
CHANGED
|
@@ -114,10 +114,6 @@ function installCommandBundle(agent, bundleName, config, options, io) {
|
|
|
114
114
|
};
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
-
if (entry.global && options.dryRun) {
|
|
118
|
-
return { action: 'info', path: bundleName, message: 'would install to user profile (dry run)' };
|
|
119
|
-
}
|
|
120
|
-
|
|
121
117
|
const targetRoot = entry.global
|
|
122
118
|
? path.join(os.homedir(), ...entry.dest)
|
|
123
119
|
: safeJoin(io.cwd, ...entry.dest);
|
package/src/commandBundles.js
CHANGED
|
@@ -15,8 +15,7 @@ export const COMMAND_BUNDLES = {
|
|
|
15
15
|
label: 'Angular skill suite',
|
|
16
16
|
src: path.join('angular-skills', 'gemini'),
|
|
17
17
|
dest: ['.gemini', 'skills'],
|
|
18
|
-
kind: 'folder'
|
|
19
|
-
global: true
|
|
18
|
+
kind: 'folder'
|
|
20
19
|
},
|
|
21
20
|
'codex-angular': {
|
|
22
21
|
label: 'Angular command suite',
|
|
@@ -27,7 +26,7 @@ export const COMMAND_BUNDLES = {
|
|
|
27
26
|
'cursor-angular': {
|
|
28
27
|
label: 'Angular command suite',
|
|
29
28
|
src: path.join('angular-commands', 'cursor'),
|
|
30
|
-
dest: ['.cursor'],
|
|
29
|
+
dest: ['.cursor', 'rules'],
|
|
31
30
|
kind: 'folder'
|
|
32
31
|
}
|
|
33
32
|
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# angular-clone-pattern
|
|
2
|
+
> Clone the pattern of an existing feature/page/dialog/store/form/table/service or route config to a new target.
|
|
3
|
+
|
|
4
|
+
# /clone-pattern
|
|
5
|
+
|
|
6
|
+
Core primitive: clone an architectural pattern to a new target.
|
|
7
|
+
|
|
8
|
+
## Workflow
|
|
9
|
+
1. Build a PATTERN MODEL (type, architecture, state style, API style, routing, styling, testing).
|
|
10
|
+
2. Apply: PATTERN + TARGET DOMAIN = IMPLEMENTATION.
|
|
11
|
+
|
|
12
|
+
## Categories
|
|
13
|
+
- COPY: folder structure, naming conventions
|
|
14
|
+
- ADAPT: model, inputs, routes
|
|
15
|
+
- IGNORE: business logic, temporary workarounds, hardcoded styling
|
|
16
|
+
|
|
17
|
+
## Guardrail
|
|
18
|
+
Identify and refuse to propagate suspicious patterns (e.g. manual subscriptions without teardown) when the dominant repository pattern differs. Never build /clone-tech-debt.
|
|
19
|
+
|
|
20
|
+
## Execution
|
|
21
|
+
1. Run Angular PROJECT DISCOVERY against the repository.
|
|
22
|
+
2. Apply the workflow above with the provided target.
|
|
23
|
+
3. Report files created/modified and patterns reused.
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
# angular-component-from
|
|
2
|
+
> Generate a new Angular component using an existing component as the architectural and stylistic reference.
|
|
3
|
+
|
|
4
|
+
# /component-from
|
|
5
|
+
|
|
6
|
+
Generate a new component by learning from an existing one instead of blind clone-and-rename.
|
|
7
|
+
|
|
8
|
+
## Workflow
|
|
9
|
+
1. Analyze the source component and classify what is reusable vs business-specific.
|
|
10
|
+
2. Identify: component structure, file layout, input/output style, inject() convention, tokens, shared components, testing style.
|
|
11
|
+
3. Understand the target domain (optionally from --model).
|
|
12
|
+
4. Generate the new component using the reusable pattern.
|
|
13
|
+
|
|
14
|
+
## Guardrail
|
|
15
|
+
Never literal clone-and-rename (Product->User). Extract the pattern, understand the target domain, then generate.
|
|
16
|
+
|
|
17
|
+
## Options
|
|
18
|
+
- --model <Type> inspect the model to derive appropriate inputs
|
|
19
|
+
- --no-tests skip generating a spec
|
|
20
|
+
- --interactive ask before writing
|
|
21
|
+
- --dry-run show files to create only
|
|
22
|
+
|
|
23
|
+
## Execution
|
|
24
|
+
1. Run Angular PROJECT DISCOVERY against the repository.
|
|
25
|
+
2. Apply the workflow above with the provided target.
|
|
26
|
+
3. Report files created/modified and patterns reused.
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
# angular-design-match
|
|
2
|
+
> Match the design language of a generated component to a reference and its surrounding UI.
|
|
3
|
+
|
|
4
|
+
# /design-match
|
|
5
|
+
|
|
6
|
+
Align a target with a reference design system.
|
|
7
|
+
|
|
8
|
+
## Workflow
|
|
9
|
+
1. Discover design vocabulary from reference + neighbors (surfaces, spacing, typography, buttons, icons, states, breakpoints).
|
|
10
|
+
2. Compare semantic regions, not raw DOM.
|
|
11
|
+
3. Transform using priority: shared component -> design token -> existing utility -> existing SCSS pattern -> new style.
|
|
12
|
+
|
|
13
|
+
## Options
|
|
14
|
+
- --scope <layout|styles|states|all>
|
|
15
|
+
- --auto-reference search for the closest visually/functionally similar component
|
|
16
|
+
|
|
17
|
+
## Execution
|
|
18
|
+
1. Run Angular PROJECT DISCOVERY against the repository.
|
|
19
|
+
2. Apply the workflow above with the provided target.
|
|
20
|
+
3. Report files created/modified and patterns reused.
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# angular-extract-component
|
|
2
|
+
> Extract a template region into a child component, deriving the smallest sensible API.
|
|
3
|
+
|
|
4
|
+
# /extract-component
|
|
5
|
+
|
|
6
|
+
Extract a child component with a clean boundary.
|
|
7
|
+
|
|
8
|
+
## Workflow
|
|
9
|
+
1. Analyze all reads/writes/uses inside the template region.
|
|
10
|
+
2. Derive the smallest sensible input/output API.
|
|
11
|
+
3. Prioritize strong boundaries (independent concept, repeated UI, clear I/O) over weak ones (5 lines, tight coupling, 14 inputs).
|
|
12
|
+
4. If extraction makes architecture worse, reject it and recommend an alternative (e.g. a directive/field-group).
|
|
13
|
+
|
|
14
|
+
## Options
|
|
15
|
+
- --selection extract a user-specified selection
|
|
16
|
+
- --auto detect candidate boundaries with confidence scores
|
|
17
|
+
|
|
18
|
+
## Execution
|
|
19
|
+
1. Run Angular PROJECT DISCOVERY against the repository.
|
|
20
|
+
2. Apply the workflow above with the provided target.
|
|
21
|
+
3. Report files created/modified and patterns reused.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# angular-extract-store
|
|
2
|
+
> Extract server/user state from a component into a feature-scoped store.
|
|
3
|
+
|
|
4
|
+
# /extract-store
|
|
5
|
+
|
|
6
|
+
Move state and state transitions into a store without turning it into a dumping ground.
|
|
7
|
+
|
|
8
|
+
## Workflow
|
|
9
|
+
1. Detect existing state and classify: SERVER STATE, USER STATE, DERIVED, EPHEMERAL UI.
|
|
10
|
+
2. Keep ephemeral UI (e.g. dialogOpen) local; move server/user/derived state into the store.
|
|
11
|
+
3. Determine provider scope from the app (component / route / feature / root) — do not default everything to root.
|
|
12
|
+
|
|
13
|
+
## Safeguard
|
|
14
|
+
Keep presentation and DOM logic out of the store. Store = state + transitions + relevant orchestration only.
|
|
15
|
+
|
|
16
|
+
## Execution
|
|
17
|
+
1. Run Angular PROJECT DISCOVERY against the repository.
|
|
18
|
+
2. Apply the workflow above with the provided target.
|
|
19
|
+
3. Report files created/modified and patterns reused.
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
# angular-feature
|
|
2
|
+
> Build an entire Angular feature while respecting the application existing architecture.
|
|
3
|
+
|
|
4
|
+
# /feature
|
|
5
|
+
|
|
6
|
+
High-level feature builder that composes lower-level commands.
|
|
7
|
+
|
|
8
|
+
## Workflow
|
|
9
|
+
1. Turn the request into capabilities (pages, data, state, UI, routes).
|
|
10
|
+
2. Discover the closest existing feature (e.g. --like customers).
|
|
11
|
+
3. Map capabilities onto existing repository patterns.
|
|
12
|
+
4. Compose: clone-pattern -> component-from -> wire-api -> form-from-model -> generate-tests.
|
|
13
|
+
|
|
14
|
+
## Safeguard
|
|
15
|
+
Do not invent infrastructure. If existing features do not use stores/repositories/facades, do not introduce them here.
|
|
16
|
+
|
|
17
|
+
## Options
|
|
18
|
+
- --like <feature> pattern reference
|
|
19
|
+
- --plan output only the plan (files, patterns, dependencies, routes, tests) without writing
|
|
20
|
+
|
|
21
|
+
## Execution
|
|
22
|
+
1. Run Angular PROJECT DISCOVERY against the repository.
|
|
23
|
+
2. Apply the workflow above with the provided target.
|
|
24
|
+
3. Report files created/modified and patterns reused.
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# angular-fixtures
|
|
2
|
+
> Generate reusable fixtures from TypeScript domain models with override support.
|
|
3
|
+
|
|
4
|
+
# /fixtures
|
|
5
|
+
|
|
6
|
+
Create test/dev fixtures from existing models.
|
|
7
|
+
|
|
8
|
+
## Workflow
|
|
9
|
+
1. Given a model (e.g. Order), generate a factory: createOrder(overrides = {}) with sensible defaults and nested factories.
|
|
10
|
+
2. Compose states where valuable.
|
|
11
|
+
|
|
12
|
+
## Options
|
|
13
|
+
- --count <n> generate an array of n fixtures
|
|
14
|
+
- --states generate named states (pendingOrder, completedOrder, cancelledOrder, emptyOrder, largeOrder)
|
|
15
|
+
- --edge-cases generate edge cases (longName, missingOptionalFields, unicodeName, inactiveUser)
|
|
16
|
+
|
|
17
|
+
## Integration
|
|
18
|
+
Feeds /component-from, /table-from-model, /generate-tests.
|
|
19
|
+
|
|
20
|
+
## Execution
|
|
21
|
+
1. Run Angular PROJECT DISCOVERY against the repository.
|
|
22
|
+
2. Apply the workflow above with the provided target.
|
|
23
|
+
3. Report files created/modified and patterns reused.
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# angular-form-from-model
|
|
2
|
+
> Generate an Angular form from a TypeScript model, inferring field types, controls, and validation.
|
|
3
|
+
|
|
4
|
+
# /form-from-model
|
|
5
|
+
|
|
6
|
+
Build forms from domain models with semantic inference.
|
|
7
|
+
|
|
8
|
+
## Workflow
|
|
9
|
+
1. Understand field semantics (email -> email input, roleId -> select, active -> toggle, birthDate -> date).
|
|
10
|
+
2. Reuse existing project form components (app-field, app-input, app-select, app-toggle).
|
|
11
|
+
3. Discover validation from existing DTOs/sibling forms/schemas; separate KNOWN from INFERRED validation — never hallucinate constraints.
|
|
12
|
+
4. Respect Reactive Forms vs Signal Forms based on project version.
|
|
13
|
+
5. Generate a mapping layer (toCreateDto / toFormModel) instead of coupling DTOs to the UI.
|
|
14
|
+
|
|
15
|
+
## Options
|
|
16
|
+
- --create | --edit | --dialog | --stepper
|
|
17
|
+
- --like <form> reference form
|
|
18
|
+
|
|
19
|
+
## Execution
|
|
20
|
+
1. Run Angular PROJECT DISCOVERY against the repository.
|
|
21
|
+
2. Apply the workflow above with the provided target.
|
|
22
|
+
3. Report files created/modified and patterns reused.
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
# angular-generate-tests
|
|
2
|
+
> Generate behavior-focused tests, deriving behaviors and filling gaps only.
|
|
3
|
+
|
|
4
|
+
# /generate-tests
|
|
5
|
+
|
|
6
|
+
Test behavior, not implementation details.
|
|
7
|
+
|
|
8
|
+
## Workflow
|
|
9
|
+
1. Derive behaviors for the target (form init, validation, derived values, submit blocking, request emission, error display, disabled states).
|
|
10
|
+
2. Find existing coverage and generate only missing tests.
|
|
11
|
+
3. Use given/when/then behavior, not expect(component).toBeTruthy().
|
|
12
|
+
|
|
13
|
+
## Options
|
|
14
|
+
- --diff generate tests around changed behaviors only
|
|
15
|
+
- target types: component | service | store | route (--navigation)
|
|
16
|
+
|
|
17
|
+
## Execution
|
|
18
|
+
1. Run Angular PROJECT DISCOVERY against the repository.
|
|
19
|
+
2. Apply the workflow above with the provided target.
|
|
20
|
+
3. Report files created/modified and patterns reused.
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
# angular-modernize
|
|
2
|
+
> Orchestrate incremental Angular migrations, building/testing between each stage.
|
|
3
|
+
|
|
4
|
+
# /modernize
|
|
5
|
+
|
|
6
|
+
Treat this as a migration orchestrator, not an LLM rewrite.
|
|
7
|
+
|
|
8
|
+
## Workflow
|
|
9
|
+
1. Determine the Angular version and applicable migrations (standalone, built-in control flow, inject(), signal inputs, output(), signal queries).
|
|
10
|
+
2. Make transformations individually selectable and apply them one at a time.
|
|
11
|
+
3. Categorize: SAFE AUTOMATED (*ngIf->@if), SAFE WITH VERIFICATION (constructor DI->inject()), ARCHITECTURAL (local state->Signals), NOT RECOMMENDED (working RxJS->Signals).
|
|
12
|
+
4. Build/test between every stage.
|
|
13
|
+
|
|
14
|
+
## Options
|
|
15
|
+
- --control-flow | --inject | --standalone | --signal-inputs | --recommended
|
|
16
|
+
|
|
17
|
+
## Execution
|
|
18
|
+
1. Run Angular PROJECT DISCOVERY against the repository.
|
|
19
|
+
2. Apply the workflow above with the provided target.
|
|
20
|
+
3. Report files created/modified and patterns reused.
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# angular-page-from-api
|
|
2
|
+
> Generate an Angular page from a typed API method, deriving UI requirements from the API contract.
|
|
3
|
+
|
|
4
|
+
# /page-from-api
|
|
5
|
+
|
|
6
|
+
Scaffold a page that matches the API capabilities.
|
|
7
|
+
|
|
8
|
+
## Workflow
|
|
9
|
+
1. Inspect the API method signature and return type (e.g. PagedResult<Order>).
|
|
10
|
+
2. Derive likely UI requirements: list, loading, empty, error, pagination; filters/sorting only if the API supports them.
|
|
11
|
+
3. Find the closest existing page pattern and reuse it.
|
|
12
|
+
|
|
13
|
+
## Critical rule
|
|
14
|
+
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.
|
|
15
|
+
|
|
16
|
+
## Options
|
|
17
|
+
- --like <page> reference pattern
|
|
18
|
+
- --crud scaffold full CRUD (list/details/create/edit/delete) from a typed service
|
|
19
|
+
|
|
20
|
+
## Execution
|
|
21
|
+
1. Run Angular PROJECT DISCOVERY against the repository.
|
|
22
|
+
2. Apply the workflow above with the provided target.
|
|
23
|
+
3. Report files created/modified and patterns reused.
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# Angular Project Discovery
|
|
2
|
+
> Discover repository context before any Angular command.
|
|
3
|
+
|
|
4
|
+
# Angular Project Discovery
|
|
5
|
+
|
|
6
|
+
Before any Angular command, discover the repository context:
|
|
7
|
+
|
|
8
|
+
- Angular version
|
|
9
|
+
- Package manager
|
|
10
|
+
- Standalone vs NgModule
|
|
11
|
+
- Signals / RxJS usage
|
|
12
|
+
- State-management libraries
|
|
13
|
+
- Reactive Forms / Signal Forms
|
|
14
|
+
- UI library: Material / PrimeNG / custom
|
|
15
|
+
- Styling: SCSS / CSS / Tailwind / tokens
|
|
16
|
+
- Testing: Vitest / Jest / Karma
|
|
17
|
+
- Existing naming conventions
|
|
18
|
+
- Existing folder architecture
|
|
19
|
+
- Closest comparable implementation
|
|
20
|
+
|
|
21
|
+
Never modernize code merely because the framework supports it — only when it fits the repository.
|
|
22
|
+
|
|
23
|
+
## Commands
|
|
24
|
+
- component-from : use an existing component as the reference
|
|
25
|
+
- feature : build a whole feature respecting existing architecture
|
|
26
|
+
- clone-pattern : clone any architectural pattern
|
|
27
|
+
- design-match : align a generated component with the design system
|
|
28
|
+
- page-from-api : scaffold a page from a typed API
|
|
29
|
+
- form-from-model: build a form from a domain model
|
|
30
|
+
- table-from-model: build a table with semantic columns
|
|
31
|
+
- wire-api : replace mock data with real API calls
|
|
32
|
+
- signalize : migrate state to Signals where appropriate
|
|
33
|
+
- extract-component: extract a template region into a child component
|
|
34
|
+
- split-component: decompose an oversized component
|
|
35
|
+
- extract-store : move state into a feature store
|
|
36
|
+
- modernize : orchestrate incremental migrations
|
|
37
|
+
- responsive : make a component responsive per project convention
|
|
38
|
+
- generate-tests : write behavior-focused tests
|
|
39
|
+
- fixtures : generate model fixtures
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# angular-responsive
|
|
2
|
+
> Make a component responsive following the existing project breakpoints and patterns.
|
|
3
|
+
|
|
4
|
+
# /responsive
|
|
5
|
+
|
|
6
|
+
Responsive is not just media queries.
|
|
7
|
+
|
|
8
|
+
## Workflow
|
|
9
|
+
1. Discover project breakpoints, container widths, grid, mobile nav, table->card behavior, spacing/typography changes, dialog behavior.
|
|
10
|
+
2. Analyze the target and transform fixed layouts (width: 900px; grid 400px 400px) per project conventions.
|
|
11
|
+
3. Test important states: long translated text, empty, loading, validation errors, many actions, large values, small phone, tablet.
|
|
12
|
+
|
|
13
|
+
## Options
|
|
14
|
+
- --mobile | --tablet | --all
|
|
15
|
+
- --like <page> follow a reference responsive page
|
|
16
|
+
- --visual (future) iterate on rendered screenshots
|
|
17
|
+
|
|
18
|
+
## Execution
|
|
19
|
+
1. Run Angular PROJECT DISCOVERY against the repository.
|
|
20
|
+
2. Apply the workflow above with the provided target.
|
|
21
|
+
3. Report files created/modified and patterns reused.
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
# angular-signalize
|
|
2
|
+
> Refactor Angular component state to Signals where appropriate, deriving instead of synchronizing.
|
|
3
|
+
|
|
4
|
+
# /signalize
|
|
5
|
+
|
|
6
|
+
Judiciously migrate toward Angular Signals.
|
|
7
|
+
|
|
8
|
+
## Workflow
|
|
9
|
+
1. Classify members: plain value, signal state, computed state, input signal, output, observable stream, resource, form state.
|
|
10
|
+
2. Transform only what benefits: @Input -> input(), @Output -> output(), derived props -> computed(), async -> toSignal(), manual sync -> computed().
|
|
11
|
+
3. Principle: derive instead of synchronize (replace set() effects with computed()).
|
|
12
|
+
4. Keep RxJS where it is genuinely the right tool: websockets, router events, debouncing, retry, complex async orchestration.
|
|
13
|
+
|
|
14
|
+
## Options
|
|
15
|
+
- --inputs | --outputs | --state | --queries | --all
|
|
16
|
+
|
|
17
|
+
## Execution
|
|
18
|
+
1. Run Angular PROJECT DISCOVERY against the repository.
|
|
19
|
+
2. Apply the workflow above with the provided target.
|
|
20
|
+
3. Report files created/modified and patterns reused.
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# angular-split-component
|
|
2
|
+
> Decompose an oversized component into focused components, controlling coupling and API surface.
|
|
3
|
+
|
|
4
|
+
# /split-component
|
|
5
|
+
|
|
6
|
+
Refactor a large component (e.g. 1100+ lines) into focused parts.
|
|
7
|
+
|
|
8
|
+
## Workflow
|
|
9
|
+
1. Determine why it is large: many UI sections, too much state, business logic, data orchestration, forms.
|
|
10
|
+
2. Choose a decomposition plan (presentational children + orchestrating container; extract a store if state is the issue).
|
|
11
|
+
3. Aim for: cohesion HIGH, coupling LOW, API SMALL, testability IMPROVED.
|
|
12
|
+
4. Avoid turning one large component into 14 tiny ones with 18 inputs / 11 outputs / 6 services.
|
|
13
|
+
|
|
14
|
+
## Options
|
|
15
|
+
- --plan show decomposition plan only
|
|
16
|
+
- --apply execute the plan
|
|
17
|
+
|
|
18
|
+
## Execution
|
|
19
|
+
1. Run Angular PROJECT DISCOVERY against the repository.
|
|
20
|
+
2. Apply the workflow above with the provided target.
|
|
21
|
+
3. Report files created/modified and patterns reused.
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# angular-table-from-model
|
|
2
|
+
> Generate an Angular data table from a model or API with semantic column selection and formatting.
|
|
3
|
+
|
|
4
|
+
# /table-from-model
|
|
5
|
+
|
|
6
|
+
Produce a table that shows the right columns with correct formatting.
|
|
7
|
+
|
|
8
|
+
## Workflow
|
|
9
|
+
1. Select columns semantically: show identity, primary data, status, total, created; drop raw FKs/internal fields unless project patterns say otherwise.
|
|
10
|
+
2. Detect formatting: status -> badge, total -> currency, createdAt -> date.
|
|
11
|
+
3. Infer capabilities from the API: paged -> pagination, sort param -> sortable, filter object -> filters, search -> search.
|
|
12
|
+
|
|
13
|
+
## Options
|
|
14
|
+
- --actions <view,edit,delete>
|
|
15
|
+
- --selectable | --filters | --pagination | --virtual
|
|
16
|
+
- --responsive follow project table->card transformation
|
|
17
|
+
- --like <table> reference table
|
|
18
|
+
|
|
19
|
+
## Execution
|
|
20
|
+
1. Run Angular PROJECT DISCOVERY against the repository.
|
|
21
|
+
2. Apply the workflow above with the provided target.
|
|
22
|
+
3. Report files created/modified and patterns reused.
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
# angular-wire-api
|
|
2
|
+
> Replace static UI data with real API calls, choosing the dominant data-access pattern.
|
|
3
|
+
|
|
4
|
+
# /wire-api
|
|
5
|
+
|
|
6
|
+
Wire a component to real data using the repository's dominant approach.
|
|
7
|
+
|
|
8
|
+
## Workflow
|
|
9
|
+
1. Derive UI requirements (collection, search, pagination, delete, refresh).
|
|
10
|
+
2. Map service APIs onto those needs.
|
|
11
|
+
3. Inspect existing patterns first: async pipe, toSignal, resource, feature store, NgRx, SignalStore, custom store.
|
|
12
|
+
4. Choose the DOMINANT project pattern.
|
|
13
|
+
5. Handle all states: initial, loading, loaded, empty, error, refreshing, mutation pending, mutation error.
|
|
14
|
+
|
|
15
|
+
## Guardrail
|
|
16
|
+
Do not wire unsupported actions. If the UI has Edit but the API has no update, report unresolved functionality instead of wiring.
|
|
17
|
+
|
|
18
|
+
## Options
|
|
19
|
+
- --preserve-mocks keep mocks for Storybook/dev-mode
|
|
20
|
+
|
|
21
|
+
## Execution
|
|
22
|
+
1. Run Angular PROJECT DISCOVERY against the repository.
|
|
23
|
+
2. Apply the workflow above with the provided target.
|
|
24
|
+
3. Report files created/modified and patterns reused.
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Clone the pattern of an existing feature/page/dialog/store/form/table/service or route config to a new target.
|
|
3
|
+
globs: **/*.ts, **/*.html, **/*.scss
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# angular-clone-pattern
|
|
7
|
+
|
|
8
|
+
# /clone-pattern
|
|
9
|
+
|
|
10
|
+
Core primitive: clone an architectural pattern to a new target.
|
|
11
|
+
|
|
12
|
+
## Workflow
|
|
13
|
+
1. Build a PATTERN MODEL (type, architecture, state style, API style, routing, styling, testing).
|
|
14
|
+
2. Apply: PATTERN + TARGET DOMAIN = IMPLEMENTATION.
|
|
15
|
+
|
|
16
|
+
## Categories
|
|
17
|
+
- COPY: folder structure, naming conventions
|
|
18
|
+
- ADAPT: model, inputs, routes
|
|
19
|
+
- IGNORE: business logic, temporary workarounds, hardcoded styling
|
|
20
|
+
|
|
21
|
+
## Guardrail
|
|
22
|
+
Identify and refuse to propagate suspicious patterns (e.g. manual subscriptions without teardown) when the dominant repository pattern differs. Never build /clone-tech-debt.
|
|
23
|
+
|
|
24
|
+
Follow this workflow whenever asked to clone-pattern a component/feature in this Angular repository.
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Generate a new Angular component using an existing component as the architectural and stylistic reference.
|
|
3
|
+
globs: **/*.ts, **/*.html, **/*.scss
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# angular-component-from
|
|
7
|
+
|
|
8
|
+
# /component-from
|
|
9
|
+
|
|
10
|
+
Generate a new component by learning from an existing one instead of blind clone-and-rename.
|
|
11
|
+
|
|
12
|
+
## Workflow
|
|
13
|
+
1. Analyze the source component and classify what is reusable vs business-specific.
|
|
14
|
+
2. Identify: component structure, file layout, input/output style, inject() convention, tokens, shared components, testing style.
|
|
15
|
+
3. Understand the target domain (optionally from --model).
|
|
16
|
+
4. Generate the new component using the reusable pattern.
|
|
17
|
+
|
|
18
|
+
## Guardrail
|
|
19
|
+
Never literal clone-and-rename (Product->User). Extract the pattern, understand the target domain, then generate.
|
|
20
|
+
|
|
21
|
+
## Options
|
|
22
|
+
- --model <Type> inspect the model to derive appropriate inputs
|
|
23
|
+
- --no-tests skip generating a spec
|
|
24
|
+
- --interactive ask before writing
|
|
25
|
+
- --dry-run show files to create only
|
|
26
|
+
|
|
27
|
+
Follow this workflow whenever asked to component-from a component/feature in this Angular repository.
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Match the design language of a generated component to a reference and its surrounding UI.
|
|
3
|
+
globs: **/*.ts, **/*.html, **/*.scss
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# angular-design-match
|
|
7
|
+
|
|
8
|
+
# /design-match
|
|
9
|
+
|
|
10
|
+
Align a target with a reference design system.
|
|
11
|
+
|
|
12
|
+
## Workflow
|
|
13
|
+
1. Discover design vocabulary from reference + neighbors (surfaces, spacing, typography, buttons, icons, states, breakpoints).
|
|
14
|
+
2. Compare semantic regions, not raw DOM.
|
|
15
|
+
3. Transform using priority: shared component -> design token -> existing utility -> existing SCSS pattern -> new style.
|
|
16
|
+
|
|
17
|
+
## Options
|
|
18
|
+
- --scope <layout|styles|states|all>
|
|
19
|
+
- --auto-reference search for the closest visually/functionally similar component
|
|
20
|
+
|
|
21
|
+
Follow this workflow whenever asked to design-match a component/feature in this Angular repository.
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Extract a template region into a child component, deriving the smallest sensible API.
|
|
3
|
+
globs: **/*.ts, **/*.html, **/*.scss
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# angular-extract-component
|
|
7
|
+
|
|
8
|
+
# /extract-component
|
|
9
|
+
|
|
10
|
+
Extract a child component with a clean boundary.
|
|
11
|
+
|
|
12
|
+
## Workflow
|
|
13
|
+
1. Analyze all reads/writes/uses inside the template region.
|
|
14
|
+
2. Derive the smallest sensible input/output API.
|
|
15
|
+
3. Prioritize strong boundaries (independent concept, repeated UI, clear I/O) over weak ones (5 lines, tight coupling, 14 inputs).
|
|
16
|
+
4. If extraction makes architecture worse, reject it and recommend an alternative (e.g. a directive/field-group).
|
|
17
|
+
|
|
18
|
+
## Options
|
|
19
|
+
- --selection extract a user-specified selection
|
|
20
|
+
- --auto detect candidate boundaries with confidence scores
|
|
21
|
+
|
|
22
|
+
Follow this workflow whenever asked to extract-component a component/feature in this Angular repository.
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Extract server/user state from a component into a feature-scoped store.
|
|
3
|
+
globs: **/*.ts, **/*.html, **/*.scss
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# angular-extract-store
|
|
7
|
+
|
|
8
|
+
# /extract-store
|
|
9
|
+
|
|
10
|
+
Move state and state transitions into a store without turning it into a dumping ground.
|
|
11
|
+
|
|
12
|
+
## Workflow
|
|
13
|
+
1. Detect existing state and classify: SERVER STATE, USER STATE, DERIVED, EPHEMERAL UI.
|
|
14
|
+
2. Keep ephemeral UI (e.g. dialogOpen) local; move server/user/derived state into the store.
|
|
15
|
+
3. Determine provider scope from the app (component / route / feature / root) — do not default everything to root.
|
|
16
|
+
|
|
17
|
+
## Safeguard
|
|
18
|
+
Keep presentation and DOM logic out of the store. Store = state + transitions + relevant orchestration only.
|
|
19
|
+
|
|
20
|
+
Follow this workflow whenever asked to extract-store a component/feature in this Angular repository.
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Build an entire Angular feature while respecting the application existing architecture.
|
|
3
|
+
globs: **/*.ts, **/*.html, **/*.scss
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# angular-feature
|
|
7
|
+
|
|
8
|
+
# /feature
|
|
9
|
+
|
|
10
|
+
High-level feature builder that composes lower-level commands.
|
|
11
|
+
|
|
12
|
+
## Workflow
|
|
13
|
+
1. Turn the request into capabilities (pages, data, state, UI, routes).
|
|
14
|
+
2. Discover the closest existing feature (e.g. --like customers).
|
|
15
|
+
3. Map capabilities onto existing repository patterns.
|
|
16
|
+
4. Compose: clone-pattern -> component-from -> wire-api -> form-from-model -> generate-tests.
|
|
17
|
+
|
|
18
|
+
## Safeguard
|
|
19
|
+
Do not invent infrastructure. If existing features do not use stores/repositories/facades, do not introduce them here.
|
|
20
|
+
|
|
21
|
+
## Options
|
|
22
|
+
- --like <feature> pattern reference
|
|
23
|
+
- --plan output only the plan (files, patterns, dependencies, routes, tests) without writing
|
|
24
|
+
|
|
25
|
+
Follow this workflow whenever asked to feature a component/feature in this Angular repository.
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Generate reusable fixtures from TypeScript domain models with override support.
|
|
3
|
+
globs: **/*.ts, **/*.html, **/*.scss
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# angular-fixtures
|
|
7
|
+
|
|
8
|
+
# /fixtures
|
|
9
|
+
|
|
10
|
+
Create test/dev fixtures from existing models.
|
|
11
|
+
|
|
12
|
+
## Workflow
|
|
13
|
+
1. Given a model (e.g. Order), generate a factory: createOrder(overrides = {}) with sensible defaults and nested factories.
|
|
14
|
+
2. Compose states where valuable.
|
|
15
|
+
|
|
16
|
+
## Options
|
|
17
|
+
- --count <n> generate an array of n fixtures
|
|
18
|
+
- --states generate named states (pendingOrder, completedOrder, cancelledOrder, emptyOrder, largeOrder)
|
|
19
|
+
- --edge-cases generate edge cases (longName, missingOptionalFields, unicodeName, inactiveUser)
|
|
20
|
+
|
|
21
|
+
## Integration
|
|
22
|
+
Feeds /component-from, /table-from-model, /generate-tests.
|
|
23
|
+
|
|
24
|
+
Follow this workflow whenever asked to fixtures a component/feature in this Angular repository.
|