@smartsoft001/pro-claude-plugins 0.2.0

package/plugins/smart-pro/skills/angular-components-drawer/SKILL.md

@@ -0,0 +1,136 @@
+---
+name: angular-components-drawer
+description: Drawer (slide-out panel) for @smartsoft001/pro-angular. Two layouts (empty, with-chrome), 10 source variants composed via options. Uses @tailwindplus/elements <el-dialog>.
+user-invocable: false
+---
+
+# Drawer Component (Pro)
+
+Use `<smartpro-drawer>`. Slot content via `<ng-content>`. The wrapper picks one of two child layouts based on `layout` or the shape of `options`.
+
+## Layouts
+
+| `layout` value (auto-detected) | Selector                      | Description                                                                                                                                                           |
+| ------------------------------ | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'empty'` (default)            | `smartpro-drawer-empty`       | Bare slide-out panel — just the `<aside>` with optional overlay and optional outside close button. Consumer projects all content via `<ng-content>`.                  |
+| `'with-chrome'`                | `smartpro-drawer-with-chrome` | Header (title + subtitle + inside close) + body slot + optional sticky footer template. Triggered by `title`, `subtitle`, `headerStyle`, `stickyFooter`, `footerTpl`. |
+
+## Source variant mapping
+
+| Tailwind UI variant  | Pro options                                                               |
+| -------------------- | ------------------------------------------------------------------------- |
+| Empty                | (defaults)                                                                |
+| Wide empty           | `wide: true`                                                              |
+| Background overlay   | `withOverlay: true` (default — opaque scrim)                              |
+| Close button outside | `closePosition: 'outside'`                                                |
+| Branded header       | `headerStyle: 'branded'` (or fork's `brandedHeader: true`)                |
+| Sticky footer        | `stickyFooter: true`, `footerTpl: TemplateRef`                            |
+| Create project form  | `with-chrome` + form content via `<ng-content>` + `footerTpl` for actions |
+| User profile         | `with-chrome` + profile DL via `<ng-content>`                             |
+| Contact list         | `with-chrome` + list via `<ng-content>`                                   |
+| File details         | `with-chrome` + details via `<ng-content>` + `subtitle` for metadata      |
+
+## API
+
+### Types (`drawer.types.ts`)
+
+```typescript
+type SmartDrawerLayoutPro = 'empty' | 'with-chrome';
+type SmartDrawerClosePosition = 'inside' | 'outside';
+type SmartDrawerHeaderStyle = 'default' | 'branded';
+
+interface IDrawerOptionsPro extends IDrawerOptions {
+  layout?: SmartDrawerLayoutPro;
+  closePosition?: SmartDrawerClosePosition;
+  headerStyle?: SmartDrawerHeaderStyle;
+  subtitle?: string;
+  footerTpl?: TemplateRef<unknown>;
+}
+```
+
+`IDrawerOptions` (re-exported from `@smartsoft001/angular`) provides `position: 'left' | 'right'`, `wide`, `withOverlay`, `brandedHeader`, `stickyFooter`, `ariaLabel`. The pro `headerStyle: 'branded'` is equivalent to `brandedHeader: true`.
+
+### Wrapper inputs
+
+| Input     | Type                                | Default     | Description                                                          |
+| --------- | ----------------------------------- | ----------- | -------------------------------------------------------------------- |
+| `open`    | `boolean` (model — two-way)         | `false`     | Bind with `[(open)]`. When `false`, the layouts render nothing.      |
+| `title`   | `string \| undefined`               | `undefined` | When set, the wrapper auto-selects `with-chrome`.                    |
+| `layout`  | `SmartDrawerLayoutPro \| undefined` | `undefined` | Force a layout; otherwise auto-detected.                             |
+| `options` | `IDrawerOptionsPro \| undefined`    | `undefined` | All pro options.                                                     |
+| `class`   | `string`                            | `''`        | Forwarded to the host of the chosen layout (lands on `<el-dialog>`). |
+
+### Outputs
+
+| Output   | Payload | When                                                       |
+| -------- | ------- | ---------------------------------------------------------- |
+| `closed` | `void`  | Emitted when the close button is clicked (inside/outside). |
+
+### Slots
+
+`<ng-content>` projects the panel body. With `with-chrome`, content lands between the header and the footer.
+
+## Usage examples
+
+```html
+<!-- Bare empty drawer -->
+<smartpro-drawer [(open)]="open">
+  <div class="smart:p-6">Custom content</div>
+</smartpro-drawer>
+
+<!-- With chrome + sticky footer + form -->
+<ng-template #footer>
+  <button class="…">Cancel</button>
+  <button class="…">Create</button>
+</ng-template>
+<smartpro-drawer
+  [(open)]="open"
+  title="Create project"
+  [options]="{ stickyFooter: true, footerTpl: footer, subtitle: 'Fill the details.' }"
+>
+  <form><!-- fields --></form>
+</smartpro-drawer>
+
+<!-- Branded header -->
+<smartpro-drawer
+  [(open)]="open"
+  title="Branded"
+  [options]="{ headerStyle: 'branded' }"
+>
+  <p>Body</p>
+</smartpro-drawer>
+
+<!-- Outside close + wide -->
+<smartpro-drawer
+  [(open)]="open"
+  [options]="{ closePosition: 'outside', wide: true }"
+>
+  <div class="smart:p-6">Wide content</div>
+</smartpro-drawer>
+
+<!-- Left-anchored -->
+<smartpro-drawer [(open)]="open" [options]="{ position: 'left' }">
+  <div class="smart:p-6">Left side</div>
+</smartpro-drawer>
+```
+
+## Accessibility
+
+- `role="dialog"` + `aria-modal="true"` on the `<aside>`.
+- `aria-labelledby` from the title (with-chrome) when present; otherwise `aria-label` from `options.ariaLabel`.
+- `data-position` attribute (`left` / `right`) for animation hooks.
+- Focus trap + ESC handling come from `<el-dialog>`.
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/drawer/drawer.component.ts`
+- Types: `packages/shared/angular/src/lib/components/drawer/drawer.types.ts`
+- Classes utility: `packages/shared/angular/src/lib/components/drawer/drawer-classes.util.ts`
+- Layouts: `packages/shared/angular/src/lib/components/drawer/{empty,with-chrome}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/drawer/drawer.component.stories.ts`
+- Module entry: `packages/shared/angular/src/lib/components/components.module.ts` (`DRAWER_COMPONENTS`)
+
+## Peer dependency
+
+- `@smartsoft001/angular@^2.123.0` — provides `DrawerBaseComponent`, `IDrawerOptions`.
+- `@tailwindplus/elements@^1.0.0` — runtime element bundle for `<el-dialog>`.

package/plugins/smart-pro/skills/angular-components-dropdown/SKILL.md

@@ -0,0 +1,131 @@
+---
+name: angular-components-dropdown
+description: Dropdown menu for @smartsoft001/pro-angular. Two layouts (default, with-header), 5 source variants via composable options (showDividers, withIcons, minimal). Uses @tailwindplus/elements <el-dropdown> / <el-menu>.
+user-invocable: false
+---
+
+# Dropdown Component (Pro)
+
+Use `<smartpro-dropdown>`. The wrapper picks one of two child layouts based on `layout` input or whether `options.headerLabel` is set.
+
+## Layouts
+
+| `layout` (auto-detected) | Selector                        | Description                                                                                                                      |
+| ------------------------ | ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `'default'` (default)    | `smartpro-dropdown-default`     | Trigger button + `<el-dropdown>` + `<el-menu>` with items. Covers Simple / With dividers / With icons / Minimal source variants. |
+| `'with-header'`          | `smartpro-dropdown-with-header` | Same as default plus a heading row above the items (e.g. "Signed in as …"). Triggered automatically by `options.headerLabel`.    |
+
+## Source variant mapping
+
+| Tailwind UI variant | Pro options                                  |
+| ------------------- | -------------------------------------------- |
+| Simple              | (defaults)                                   |
+| With dividers       | `showDividers: true` + `item.divider: true`  |
+| With icons          | `withIcons: true` + `item.icon` (SVG path d) |
+| Minimal             | `minimal: true` (compact paddings)           |
+| With header         | `headerLabel: 'Signed in as …'`              |
+
+## API
+
+### Types (`dropdown.types.ts`)
+
+```typescript
+type SmartDropdownLayoutPro = 'default' | 'with-header';
+
+interface IDropdownOptionsPro extends IDropdownOptions {
+  layout?: SmartDropdownLayoutPro;
+  showDividers?: boolean;
+  withIcons?: boolean;
+  minimal?: boolean;
+}
+```
+
+`IDropdownOptions` (re-exported from `@smartsoft001/angular`): `variant?: SmartDropdownVariant`, `headerLabel?: string`.
+
+`IDropdownItem` (re-exported): `{ id, label, icon?, href?, disabled?, divider? }`.
+
+### Wrapper inputs
+
+| Input          | Type                                  | Default     | Description                                                                 |
+| -------------- | ------------------------------------- | ----------- | --------------------------------------------------------------------------- |
+| `items`        | `IDropdownItem[]`                     | `[]`        | Menu items. Set `divider: true` for separator entries.                      |
+| `triggerLabel` | `string \| undefined`                 | `undefined` | Fallback label rendered inside the trigger when no `<ng-content>` provided. |
+| `open`         | `boolean` (model — two-way)           | `false`     | Bind with `[(open)]`.                                                       |
+| `layout`       | `SmartDropdownLayoutPro \| undefined` | `undefined` | Force a layout; otherwise auto-detected from `options.headerLabel`.         |
+| `options`      | `IDropdownOptionsPro \| undefined`    | `undefined` | All pro options.                                                            |
+| `class`        | `string`                              | `''`        | Forwarded to the host of the chosen layout (lands on `<el-dropdown>`).      |
+
+### Outputs
+
+| Output         | Payload              | When                                           |
+| -------------- | -------------------- | ---------------------------------------------- |
+| `selectedItem` | `{ itemId: string }` | A menu item is clicked (skips disabled items). |
+
+### Slots
+
+`<ng-content>` projects a custom trigger inside the trigger button. When omitted, the trigger renders `{{ triggerLabel }}` + chevron icon.
+
+## Usage examples
+
+```html
+<!-- Simple -->
+<smartpro-dropdown
+  [items]="actions"
+  triggerLabel="Options"
+  [(open)]="menuOpen"
+/>
+
+<!-- With dividers + icons -->
+<smartpro-dropdown
+  [items]="actions"
+  triggerLabel="Actions"
+  [(open)]="menuOpen"
+  [options]="{ withIcons: true, showDividers: true }"
+  (selectedItem)="run($event.itemId)"
+/>
+
+<!-- Minimal (compact) -->
+<smartpro-dropdown
+  [items]="sortItems"
+  triggerLabel="Sort"
+  [(open)]="sortOpen"
+  [options]="{ minimal: true }"
+/>
+
+<!-- With header -->
+<smartpro-dropdown
+  [items]="accountItems"
+  triggerLabel="Account"
+  [(open)]="open"
+  [options]="{ headerLabel: 'Signed in as tom@example.com' }"
+/>
+
+<!-- Custom trigger via ng-content -->
+<smartpro-dropdown [items]="items" [(open)]="open">
+  <span class="smart:flex smart:items-center smart:gap-2">
+    <img class="smart:size-6 smart:rounded-full" src="/img/me.png" alt="" />
+    Tom
+  </span>
+</smartpro-dropdown>
+```
+
+## Accessibility
+
+- Trigger button has `aria-haspopup="menu"` and `aria-expanded` bound to `open`.
+- Menu container uses `role="menu"`; items use `role="menuitem"`.
+- Dividers use `role="separator"`.
+- `<el-dropdown>` / `<el-menu>` from `@tailwindplus/elements` provide click-outside dismiss + keyboard navigation.
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/dropdown/dropdown.component.ts`
+- Types: `packages/shared/angular/src/lib/components/dropdown/dropdown.types.ts`
+- Classes utility: `packages/shared/angular/src/lib/components/dropdown/dropdown-classes.util.ts`
+- Layouts: `packages/shared/angular/src/lib/components/dropdown/{default,with-header}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/dropdown/dropdown.component.stories.ts`
+- Module entry: `packages/shared/angular/src/lib/components/components.module.ts` (`DROPDOWN_COMPONENTS`)
+
+## Peer dependency
+
+- `@smartsoft001/angular@^2.123.0` — provides `DropdownBaseComponent`, `IDropdownItem`, `IDropdownOptions`.
+- `@tailwindplus/elements@^1.0.0` — runtime element bundle for `<el-dropdown>` and `<el-menu>`.

package/plugins/smart-pro/skills/angular-components-empty-state/SKILL.md

@@ -0,0 +1,103 @@
+---
+name: angular-components-empty-state
+description: Empty state component for @smartsoft001/pro-angular. Four layouts (simple, with-recommendations, with-templates, starting-points). `simple` accepts `dashedBorder?` (clickable button with dashed border); `with-recommendations` accepts `gridLayout?` (2-col grid of pill buttons).
+user-invocable: false
+---
+
+# Empty State Component (Pro)
+
+Use `<smartpro-empty-state>` and pick a layout via `options.layout`. The component renders a centered message with optional icon, action button(s), and an items list (for recommendations / templates / starting-points). Submission/click events fire via `(actionClick)` and `(itemClick)`.
+
+## Layouts
+
+| `options.layout` (default `'simple'`) | Selector                                    | Description                                                                                                                                                                                                                                |
+| ------------------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `'simple'`                            | `smartpro-empty-state-simple`               | Centered icon + title + description + action button. `dashedBorder: true` switches to a clickable button-shaped wrapper with a dashed border (icon + title only) — clicking fires `actionClick` for the first action.                      |
+| `'with-recommendations'`              | `smartpro-empty-state-with-recommendations` | Centered icon + title + description + optional `formTpl` slot + an items list. Default renders the items in a divided list with row-style buttons. `gridLayout: true` switches to a 2-column grid of rounded pill buttons with plus icons. |
+| `'with-templates'`                    | `smartpro-empty-state-with-templates`       | Centered icon + title + description + a templates list (distinct content model with template cards).                                                                                                                                       |
+| `'starting-points'`                   | `smartpro-empty-state-starting-points`      | Centered icon + title + description + a starting-points list (distinct content model with action card cells).                                                                                                                              |
+
+## API
+
+### IEmptyStateOptionsPro (`empty-state.types.ts`, omits + redefines `layout`)
+
+```typescript
+type SmartEmptyStateLayoutPro =
+  | 'simple'
+  | 'with-recommendations'
+  | 'with-templates'
+  | 'starting-points';
+
+interface IEmptyStateOptionsPro {
+  layout?: SmartEmptyStateLayoutPro;
+  title?: string;
+  description?: string;
+  itemsTitle?: string;
+  iconTpl?: TemplateRef<unknown>;
+  formTpl?: TemplateRef<unknown>;
+  items?: IEmptyStateItem[];
+  actions?: IEmptyStateAction[];
+  dashedBorder?: boolean;
+  gridLayout?: boolean;
+}
+```
+
+### Wrapper Inputs
+
+| Input     | Type                                 | Default     | Description             |
+| --------- | ------------------------------------ | ----------- | ----------------------- |
+| `options` | `IEmptyStateOptionsPro \| undefined` | `undefined` | Layout, content, flags. |
+| `class`   | `string`                             | `''`        | Extra CSS classes.      |
+
+Outputs: `actionClick: IEmptyStateActionClick` (`{ actionId }`), `itemClick: IEmptyStateItemClick` (`{ itemId }`).
+
+## Usage Example
+
+```html
+<!-- Simple -->
+<smartpro-empty-state
+  [options]="{
+    title: 'No projects',
+    description: 'Get started by creating a new project.',
+    actions: [{ id: 'new', label: 'New Project', variant: 'primary' }]
+  }"
+  (actionClick)="onAction($event)"
+></smartpro-empty-state>
+
+<!-- Dashed-border CTA -->
+<smartpro-empty-state
+  [options]="{
+    title: 'Add a new file',
+    dashedBorder: true,
+    actions: [{ id: 'new', label: 'New' }]
+  }"
+  (actionClick)="onAction($event)"
+></smartpro-empty-state>
+
+<!-- With recommendations (list) -->
+<smartpro-empty-state
+  [options]="{
+    layout: 'with-recommendations',
+    title: 'Add team members',
+    itemsTitle: 'Recommended',
+    items: [{ id: '1', title: 'Leslie', imageUrl: '...' }]
+  }"
+  (itemClick)="onItem($event)"
+></smartpro-empty-state>
+
+<!-- With recommendations (grid) -->
+<smartpro-empty-state
+  [options]="{
+    layout: 'with-recommendations',
+    gridLayout: true,
+    items: [...]
+  }"
+></smartpro-empty-state>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/empty-state/empty-state.component.ts`
+- Types: `packages/shared/angular/src/lib/components/empty-state/empty-state.types.ts`
+- Variants: `packages/shared/angular/src/lib/components/empty-state/{simple,with-recommendations,with-templates,starting-points}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/empty-state/empty-state.component.stories.ts`

package/plugins/smart-pro/skills/angular-components-feed/SKILL.md

@@ -0,0 +1,110 @@
+---
+name: angular-components-feed
+description: Activity feed component for @smartsoft001/pro-angular. Two layouts (icons timeline, comments stack) with per-event polymorphism — comment cards for events with avatar + 'comment' type, dot+text fallback otherwise.
+user-invocable: false
+---
+
+# Feed Component (Pro)
+
+Use `<smartpro-feed>`. The component iterates `options.events: IFeedEvent[]` and picks rendering per event based on `options.layout` and per-event fields (`avatarUrl`, `type`, `iconTpl`).
+
+## Layouts
+
+| `options.layout` (default `'comments'`) | Description                                                                                                                                                                                                                                                                                            |
+| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `'icons'`                               | Vertical timeline — every event becomes a small colored icon circle. Color is picked from `event.type` (`completed` → green, `advanced` → blue, `commented` → gray, `edited` → purple, anything else → gray). Optional inner glyph via `event.iconTpl`.                                                |
+| `'comments'`                            | Stacked list. Per-event: when `event.avatarUrl` is set AND (`event.type` is undefined OR `'comment'`), render a rich comment card (avatar + title + timestamp + description). Otherwise, render a dot + text row. Pass `options.commentSubmitTpl` to render a comment-submission row beneath the list. |
+
+## API
+
+### IFeedOptionsPro (`feed.types.ts`, extends `IFeedOptions`)
+
+```typescript
+type SmartFeedLayoutPro = 'icons' | 'comments';
+
+interface IFeedOptionsPro {
+  layout?: SmartFeedLayoutPro; // 'comments' (default) | 'icons'
+  title?: string;
+  description?: string;
+  events?: IFeedEvent[];
+  commentSubmitTpl?: TemplateRef<unknown>;
+  emptyTpl?: TemplateRef<unknown>;
+  footerTpl?: TemplateRef<unknown>;
+}
+
+interface IFeedEvent {
+  id?: string;
+  title: string;
+  description?: string;
+  timestamp?: string;
+  iconTpl?: TemplateRef<unknown>; // glyph rendered inside the colored circle (icons layout)
+  avatarUrl?: string; // promotes the event to a comment card (comments layout)
+  href?: string; // wraps description in a link (icons layout)
+  type?: string; // 'completed' | 'advanced' | 'commented' | 'edited' | 'comment' | …
+  ariaLabel?: string;
+}
+```
+
+### Wrapper Inputs / Outputs
+
+| Input     | Type                           | Default     | Description                                      |
+| --------- | ------------------------------ | ----------- | ------------------------------------------------ |
+| `options` | `IFeedOptionsPro \| undefined` | `undefined` | Layout, events, optional template slots.         |
+| `class`   | `string`                       | `''`        | Extra CSS classes appended to the outer wrapper. |
+
+The component does not emit any outputs.
+
+## Usage
+
+### Icons timeline
+
+```html
+<smartpro-feed
+  [options]="{
+    layout: 'icons',
+    events: [
+      { title: 'Applied to', description: 'Front End Developer', type: 'completed', timestamp: 'Sep 20' },
+      { title: 'Advanced to phone screening by', description: 'Bethany Blake', type: 'advanced', timestamp: 'Sep 22' }
+    ]
+  }"
+/>
+```
+
+### Comments stack
+
+```html
+<smartpro-feed
+  [options]="{
+    layout: 'comments',
+    events: [
+      { title: 'Chelsea Hagon commented', description: '…', avatarUrl: '/u/chelsea.jpg', timestamp: '3d ago' },
+      { title: 'Status update', type: 'paid', timestamp: '4d ago' }
+    ],
+    commentSubmitTpl: commentForm
+  }"
+/>
+```
+
+### Mixed item types (selective comment cards)
+
+```html
+<smartpro-feed
+  [options]="{
+    layout: 'comments',
+    events: [
+      { title: 'Status update', type: 'paid', avatarUrl: '/u/admin.jpg' },
+      { title: 'Comment by Chelsea', type: 'comment', avatarUrl: '/u/chelsea.jpg' }
+    ]
+  }"
+/>
+```
+
+In the example above, only the `type: 'comment'` event is rendered as a comment card; the `type: 'paid'` event falls back to the dot+text row.
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/feed/feed.component.ts`
+- Types: `packages/shared/angular/src/lib/components/feed/feed.types.ts`
+- Layout: `packages/shared/angular/src/lib/components/feed/default/default.component.ts`
+- Helpers: `packages/shared/angular/src/lib/components/feed/feed-classes.util.ts`
+- Stories: `packages/shared/angular/src/lib/components/feed/feed.component.stories.ts`

package/plugins/smart-pro/skills/angular-components-form/SKILL.md

@@ -0,0 +1,77 @@
+---
+name: angular-components-form
+description: Form component for @smartsoft001/pro-angular. Two variants — `stacked` (with `labelPosition: 'top' | 'left'`) and `two-column` (with `cardStyle?` flag). Iterates fields from `IFormOptionsPro<T>.model` decorators.
+user-invocable: false
+---
+
+# Form Component (Pro)
+
+Use `<smartpro-form>` and pick a variant via `variant`. Each variant iterates the form fields (decorator-driven from `options.model`) and renders one `<smartpro-input>` per field. Bind a reactive `UntypedFormGroup` via `[form]` and the model + flags via `[options]`.
+
+## Variants
+
+| `variant` (default `'stacked'`) | Selector                   | Description                                                                                                                                                                           |
+| ------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'stacked'`                     | `smartpro-form-stacked`    | Single-column stacked form. `options.labelPosition: 'left'` switches each field to a 3-col grid with the label aligned left of the input (replaces the legacy `labels-left` variant). |
+| `'two-column'`                  | `smartpro-form-two-column` | Three-column page grid (description + form). `options.cardStyle: true` wraps the form column in a rounded white card with a shadow (replaces the legacy `two-column-cards` variant).  |
+
+## API
+
+### IFormOptionsPro<T> (`form.types.ts`, extends `IFormOptions<T>`)
+
+```typescript
+type SmartFormVariantPro = 'stacked' | 'two-column';
+
+interface IFormOptionsPro<T> {
+  model: T;
+  show?: boolean;
+  labelPosition?: 'top' | 'left';
+  cardStyle?: boolean;
+  // …all base IFormOptions<T> fields
+}
+```
+
+### Wrapper Inputs
+
+| Input     | Type                            | Default     | Description          |
+| --------- | ------------------------------- | ----------- | -------------------- |
+| `variant` | `'stacked' \| 'two-column'`     | `'stacked'` | Variant family.      |
+| `form`    | `UntypedFormGroup` (required)   | —           | Reactive form group. |
+| `options` | `IFormOptionsPro<T>` (required) | —           | Model + flags.       |
+| `class`   | `string`                        | `''`        | Extra CSS classes.   |
+
+Output: `invokeSubmit: unknown` — fired when submit is invoked from inside the form tree.
+
+## Usage Example
+
+```html
+<!-- Default stacked form -->
+<smartpro-form [form]="form" [options]="{ model: applicant }"></smartpro-form>
+
+<!-- Labels-left -->
+<smartpro-form
+  [form]="form"
+  [options]="{ model: applicant, labelPosition: 'left' }"
+></smartpro-form>
+
+<!-- Two-column with description column -->
+<smartpro-form
+  variant="two-column"
+  [form]="form"
+  [options]="{ model: applicant }"
+></smartpro-form>
+
+<!-- Two-column with card style -->
+<smartpro-form
+  variant="two-column"
+  [form]="form"
+  [options]="{ model: applicant, cardStyle: true }"
+></smartpro-form>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/form/form.component.ts`
+- Types: `packages/shared/angular/src/lib/components/form/form.types.ts`
+- Variants: `packages/shared/angular/src/lib/components/form/{stacked,two-column}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/form/form.component.stories.ts`

package/plugins/smart-pro/skills/angular-components-grid-list/SKILL.md

@@ -0,0 +1,91 @@
+---
+name: angular-components-grid-list
+description: Grid list component for @smartsoft001/pro-angular. Four variants (cards, contacts, images-with-details, actions-with-shared-borders). The cards variant adapts to `layout: 'simple' | 'horizontal' | 'logos'`; contacts adapts to `portraitSize: 'large' | 'small'`.
+user-invocable: false
+---
+
+# Grid List Component (Pro)
+
+Use `<smartpro-grid-list>` and pick a variant via `variant`. Each variant iterates `IGridListOptionsPro.items` and renders a responsive grid (column count via `options.columns`, gap via `options.gap`). Per-item slots include `title`, `description`, `imageUrl`, `imageAlt`, `href`, `actionTpl`.
+
+## Variants
+
+| `variant` (default `'cards'`)   | Selector                                         | Description                                                                                                                                                                                                                                                                 |
+| ------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'cards'`                       | `smartpro-grid-list-cards`                       | Card grid with three sub-layouts. `layout: 'simple'` (default) renders compact title-and-description cards. `layout: 'horizontal'` renders a row with avatar + linked title + description. `layout: 'logos'` renders a card with a logo header and a description list body. |
+| `'contacts'`                    | `smartpro-grid-list-contacts`                    | Contact-card grid. Default uses large round portraits (`size-32`) in a vertical center-aligned card. `portraitSize: 'small'` switches to a horizontal layout with a small (`size-10`) round portrait.                                                                       |
+| `'images-with-details'`         | `smartpro-grid-list-images-with-details`         | Image-led card grid showing a hero image plus details below.                                                                                                                                                                                                                |
+| `'actions-with-shared-borders'` | `smartpro-grid-list-actions-with-shared-borders` | Action grid with a shared border between cards (legacy "actions panel" pattern).                                                                                                                                                                                            |
+
+## API
+
+### IGridListOptionsPro (`grid-list.types.ts`, omits + redefines `layout`)
+
+```typescript
+type SmartGridListVariantPro =
+  | 'cards'
+  | 'contacts'
+  | 'images-with-details'
+  | 'actions-with-shared-borders';
+
+interface IGridListOptionsPro {
+  items?: IGridListItem[];
+  columns?: number;
+  gap?: 'sm' | 'md' | 'lg' | 'xl';
+  layout?: 'simple' | 'horizontal' | 'logos';
+  portraitSize?: 'large' | 'small';
+}
+
+interface IGridListItem {
+  id?: string;
+  title: string;
+  description?: string;
+  href?: string;
+  imageUrl?: string;
+  imageAlt?: string;
+  actionTpl?: TemplateRef<unknown>;
+}
+```
+
+### Wrapper Inputs
+
+| Input     | Type                                                                              | Default     | Description        |
+| --------- | --------------------------------------------------------------------------------- | ----------- | ------------------ |
+| `variant` | `'cards' \| 'contacts' \| 'images-with-details' \| 'actions-with-shared-borders'` | `'cards'`   | Variant family.    |
+| `options` | `IGridListOptionsPro \| undefined`                                                | `undefined` | Items + flags.     |
+| `class`   | `string`                                                                          | `''`        | Extra CSS classes. |
+
+## Usage Example
+
+```html
+<!-- Simple card grid -->
+<smartpro-grid-list [options]="{ items }"></smartpro-grid-list>
+
+<!-- Horizontal link cards -->
+<smartpro-grid-list
+  [options]="{ items, layout: 'horizontal' }"
+></smartpro-grid-list>
+
+<!-- Logos cards with description list -->
+<smartpro-grid-list [options]="{ items, layout: 'logos' }"></smartpro-grid-list>
+
+<!-- Contacts with large portraits -->
+<smartpro-grid-list
+  variant="contacts"
+  [options]="{ items }"
+></smartpro-grid-list>
+
+<!-- Contacts with small portraits -->
+<smartpro-grid-list
+  variant="contacts"
+  [options]="{ items, portraitSize: 'small' }"
+></smartpro-grid-list>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/grid-list/grid-list.component.ts`
+- Types: `packages/shared/angular/src/lib/components/grid-list/grid-list.types.ts`
+- Variants: `packages/shared/angular/src/lib/components/grid-list/{cards,contacts,images-with-details,actions-with-shared-borders}/<name>.component.ts`
+- Shared utilities: `packages/shared/angular/src/lib/components/grid-list/grid-list-classes.util.ts`
+- Stories: `packages/shared/angular/src/lib/components/grid-list/grid-list.component.stories.ts`