plankit-cli 1.0.1 → 1.3.0

package/templates/angular-commands/cursor/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/cursor/angular-responsive.md

@@ -0,0 +1,22 @@
+---
+description: Make a component responsive following the existing project breakpoints and patterns.
+globs: **/*.ts, **/*.html, **/*.scss
+---
+
+# angular-responsive
+
+# /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
+
+Follow this workflow whenever asked to responsive a component/feature in this Angular repository.

package/templates/angular-commands/cursor/angular-signalize.md

@@ -0,0 +1,21 @@
+---
+description: Refactor Angular component state to Signals where appropriate, deriving instead of synchronizing.
+globs: **/*.ts, **/*.html, **/*.scss
+---
+
+# angular-signalize
+
+# /signalize
+
+Judiciously migrate toward Angular Signals.
+
+## Workflow
+1. Classify members: plain value, signal state, computed state, input signal, output, observable stream, resource, form state.
+2. Transform only what benefits: @Input -> input(), @Output -> output(), derived props -> computed(), async -> toSignal(), manual sync -> computed().
+3. Principle: derive instead of synchronize (replace set() effects with computed()).
+4. Keep RxJS where it is genuinely the right tool: websockets, router events, debouncing, retry, complex async orchestration.
+
+## Options
+- --inputs | --outputs | --state | --queries | --all
+
+Follow this workflow whenever asked to signalize a component/feature in this Angular repository.

package/templates/angular-commands/cursor/angular-split-component.md

@@ -0,0 +1,22 @@
+---
+description: Decompose an oversized component into focused components, controlling coupling and API surface.
+globs: **/*.ts, **/*.html, **/*.scss
+---
+
+# angular-split-component
+
+# /split-component
+
+Refactor a large component (e.g. 1100+ lines) into focused parts.
+
+## Workflow
+1. Determine why it is large: many UI sections, too much state, business logic, data orchestration, forms.
+2. Choose a decomposition plan (presentational children + orchestrating container; extract a store if state is the issue).
+3. Aim for: cohesion HIGH, coupling LOW, API SMALL, testability IMPROVED.
+4. Avoid turning one large component into 14 tiny ones with 18 inputs / 11 outputs / 6 services.
+
+## Options
+- --plan            show decomposition plan only
+- --apply           execute the plan
+
+Follow this workflow whenever asked to split-component a component/feature in this Angular repository.

package/templates/angular-commands/cursor/angular-table-from-model.md

@@ -0,0 +1,23 @@
+---
+description: Generate an Angular data table from a model or API with semantic column selection and formatting.
+globs: **/*.ts, **/*.html, **/*.scss
+---
+
+# angular-table-from-model
+
+# /table-from-model
+
+Produce a table that shows the right columns with correct formatting.
+
+## Workflow
+1. Select columns semantically: show identity, primary data, status, total, created; drop raw FKs/internal fields unless project patterns say otherwise.
+2. Detect formatting: status -> badge, total -> currency, createdAt -> date.
+3. Infer capabilities from the API: paged -> pagination, sort param -> sortable, filter object -> filters, search -> search.
+
+## Options
+- --actions <view,edit,delete>
+- --selectable | --filters | --pagination | --virtual
+- --responsive       follow project table->card transformation
+- --like <table>     reference table
+
+Follow this workflow whenever asked to table-from-model a component/feature in this Angular repository.

package/templates/angular-commands/cursor/angular-wire-api.md

@@ -0,0 +1,25 @@
+---
+description: Replace static UI data with real API calls, choosing the dominant data-access pattern.
+globs: **/*.ts, **/*.html, **/*.scss
+---
+
+# angular-wire-api
+
+# /wire-api
+
+Wire a component to real data using the repository's dominant approach.
+
+## Workflow
+1. Derive UI requirements (collection, search, pagination, delete, refresh).
+2. Map service APIs onto those needs.
+3. Inspect existing patterns first: async pipe, toSignal, resource, feature store, NgRx, SignalStore, custom store.
+4. Choose the DOMINANT project pattern.
+5. Handle all states: initial, loading, loaded, empty, error, refreshing, mutation pending, mutation error.
+
+## Guardrail
+Do not wire unsupported actions. If the UI has Edit but the API has no update, report unresolved functionality instead of wiring.
+
+## Options
+- --preserve-mocks   keep mocks for Storybook/dev-mode
+
+Follow this workflow whenever asked to wire-api a component/feature in this Angular repository.

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

@@ -0,0 +1,21 @@
+---
+description: 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.
+
+Run against an Angular repository. Perform PROJECT DISCOVERY first, then apply the workflow. Use placeholders like @component or $ARG where the agent accepts a target.

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

@@ -0,0 +1,24 @@
+---
+description: 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
+
+Run against an Angular repository. Perform PROJECT DISCOVERY first, then apply the workflow. Use placeholders like @component or $ARG where the agent accepts a target.

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

@@ -0,0 +1,18 @@
+---
+description: 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
+
+Run against an Angular repository. Perform PROJECT DISCOVERY first, then apply the workflow. Use placeholders like @component or $ARG where the agent accepts a target.

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

@@ -0,0 +1,19 @@
+---
+description: 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
+
+Run against an Angular repository. Perform PROJECT DISCOVERY first, then apply the workflow. Use placeholders like @component or $ARG where the agent accepts a target.

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

@@ -0,0 +1,17 @@
+---
+description: 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.
+
+Run against an Angular repository. Perform PROJECT DISCOVERY first, then apply the workflow. Use placeholders like @component or $ARG where the agent accepts a target.

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

@@ -0,0 +1,22 @@
+---
+description: 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
+
+Run against an Angular repository. Perform PROJECT DISCOVERY first, then apply the workflow. Use placeholders like @component or $ARG where the agent accepts a target.

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

@@ -0,0 +1,21 @@
+---
+description: 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.
+
+Run against an Angular repository. Perform PROJECT DISCOVERY first, then apply the workflow. Use placeholders like @component or $ARG where the agent accepts a target.

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

@@ -0,0 +1,20 @@
+---
+description: 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
+
+Run against an Angular repository. Perform PROJECT DISCOVERY first, then apply the workflow. Use placeholders like @component or $ARG where the agent accepts a target.

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

@@ -0,0 +1,18 @@
+---
+description: 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)
+
+Run against an Angular repository. Perform PROJECT DISCOVERY first, then apply the workflow. Use placeholders like @component or $ARG where the agent accepts a target.

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

@@ -0,0 +1,18 @@
+---
+description: 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
+
+Run against an Angular repository. Perform PROJECT DISCOVERY first, then apply the workflow. Use placeholders like @component or $ARG where the agent accepts a target.

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

@@ -0,0 +1,21 @@
+---
+description: 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
+
+Run against an Angular repository. Perform PROJECT DISCOVERY first, then apply the workflow. Use placeholders like @component or $ARG where the agent accepts a target.

package/templates/angular-commands/opencode/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/opencode/angular-responsive.md

@@ -0,0 +1,19 @@
+---
+description: 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
+
+Run against an Angular repository. Perform PROJECT DISCOVERY first, then apply the workflow. Use placeholders like @component or $ARG where the agent accepts a target.

package/templates/angular-commands/opencode/angular-signalize.md

@@ -0,0 +1,18 @@
+---
+description: Refactor Angular component state to Signals where appropriate, deriving instead of synchronizing.
+---
+
+# /signalize
+
+Judiciously migrate toward Angular Signals.
+
+## Workflow
+1. Classify members: plain value, signal state, computed state, input signal, output, observable stream, resource, form state.
+2. Transform only what benefits: @Input -> input(), @Output -> output(), derived props -> computed(), async -> toSignal(), manual sync -> computed().
+3. Principle: derive instead of synchronize (replace set() effects with computed()).
+4. Keep RxJS where it is genuinely the right tool: websockets, router events, debouncing, retry, complex async orchestration.
+
+## Options
+- --inputs | --outputs | --state | --queries | --all
+
+Run against an Angular repository. Perform PROJECT DISCOVERY first, then apply the workflow. Use placeholders like @component or $ARG where the agent accepts a target.

package/templates/angular-commands/opencode/angular-split-component.md

@@ -0,0 +1,19 @@
+---
+description: Decompose an oversized component into focused components, controlling coupling and API surface.
+---
+
+# /split-component
+
+Refactor a large component (e.g. 1100+ lines) into focused parts.
+
+## Workflow
+1. Determine why it is large: many UI sections, too much state, business logic, data orchestration, forms.
+2. Choose a decomposition plan (presentational children + orchestrating container; extract a store if state is the issue).
+3. Aim for: cohesion HIGH, coupling LOW, API SMALL, testability IMPROVED.
+4. Avoid turning one large component into 14 tiny ones with 18 inputs / 11 outputs / 6 services.
+
+## Options
+- --plan            show decomposition plan only
+- --apply           execute the plan
+
+Run against an Angular repository. Perform PROJECT DISCOVERY first, then apply the workflow. Use placeholders like @component or $ARG where the agent accepts a target.

package/templates/angular-commands/opencode/angular-table-from-model.md

@@ -0,0 +1,20 @@
+---
+description: Generate an Angular data table from a model or API with semantic column selection and formatting.
+---
+
+# /table-from-model
+
+Produce a table that shows the right columns with correct formatting.
+
+## Workflow
+1. Select columns semantically: show identity, primary data, status, total, created; drop raw FKs/internal fields unless project patterns say otherwise.
+2. Detect formatting: status -> badge, total -> currency, createdAt -> date.
+3. Infer capabilities from the API: paged -> pagination, sort param -> sortable, filter object -> filters, search -> search.
+
+## Options
+- --actions <view,edit,delete>
+- --selectable | --filters | --pagination | --virtual
+- --responsive       follow project table->card transformation
+- --like <table>     reference table
+
+Run against an Angular repository. Perform PROJECT DISCOVERY first, then apply the workflow. Use placeholders like @component or $ARG where the agent accepts a target.

package/templates/angular-commands/opencode/angular-wire-api.md

@@ -0,0 +1,22 @@
+---
+description: Replace static UI data with real API calls, choosing the dominant data-access pattern.
+---
+
+# /wire-api
+
+Wire a component to real data using the repository's dominant approach.
+
+## Workflow
+1. Derive UI requirements (collection, search, pagination, delete, refresh).
+2. Map service APIs onto those needs.
+3. Inspect existing patterns first: async pipe, toSignal, resource, feature store, NgRx, SignalStore, custom store.
+4. Choose the DOMINANT project pattern.
+5. Handle all states: initial, loading, loaded, empty, error, refreshing, mutation pending, mutation error.
+
+## Guardrail
+Do not wire unsupported actions. If the UI has Edit but the API has no update, report unresolved functionality instead of wiring.
+
+## Options
+- --preserve-mocks   keep mocks for Storybook/dev-mode
+
+Run against an Angular repository. Perform PROJECT DISCOVERY first, then apply the workflow. Use placeholders like @component or $ARG where the agent accepts a target.

package/templates/angular-skills/gemini/angular-clone-pattern/SKILL.md

@@ -0,0 +1,24 @@
+---
+name: angular-clone-pattern
+description: 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.
+
+# angular-clone-pattern
+
+Project Discovery must run first. Execute the workflow with the target arguments from the request.

package/templates/angular-skills/gemini/angular-component-from/SKILL.md

@@ -0,0 +1,27 @@
+---
+name: angular-component-from
+description: 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
+
+# angular-component-from
+
+Project Discovery must run first. Execute the workflow with the target arguments from the request.

package/templates/angular-skills/gemini/angular-design-match/SKILL.md

@@ -0,0 +1,21 @@
+---
+name: angular-design-match
+description: 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
+
+# angular-design-match
+
+Project Discovery must run first. Execute the workflow with the target arguments from the request.

package/templates/angular-skills/gemini/angular-extract-component/SKILL.md

@@ -0,0 +1,22 @@
+---
+name: angular-extract-component
+description: 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
+
+# angular-extract-component
+
+Project Discovery must run first. Execute the workflow with the target arguments from the request.