@smartsoft001/pro-claude-plugins 0.2.0

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

@@ -0,0 +1,121 @@
+---
+name: angular-components-sidebar-layout
+description: Sidebar layout component for @smartsoft001/pro-angular. Four layouts (simple, with-header, constrained-content, off-white-background); the simple and with-header layouts accept `theme: 'light' | 'brand' | 'dark'` for sidebar coloring.
+user-invocable: false
+---
+
+# Sidebar Layout Component (Pro)
+
+Use `<smartpro-sidebar-layout>`. Pick a layout via `variant`. The component renders the **outer chrome** (page wrapper, fixed sidebar frame, optional header bar, main content area). Sidebar nav items, mobile toggle, and any header content are supplied by the consumer via `ISidebarLayoutOptions.sidebarTpl` / `headerTpl`. Page body goes via `<ng-content>`.
+
+## Layouts
+
+| `variant` (default `'simple'`) | Selector                                       | Description                                                                                                                     |
+| ------------------------------ | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `'simple'`                     | `smartpro-sidebar-layout-simple`               | Mobile-friendly shell with optional sticky mobile header. No desktop header. Sidebar coloring is controlled by `options.theme`. |
+| `'with-header'`                | `smartpro-sidebar-layout-with-header`          | Adds a sticky desktop header bar above the main content. Sidebar coloring is controlled by `options.theme`.                     |
+| `'constrained-content'`        | `smartpro-sidebar-layout-constrained-content`  | Same shell as `with-header` but main content is constrained to `max-w-3xl`. Sidebar uses the white-with-border light look.      |
+| `'off-white-background'`       | `smartpro-sidebar-layout-off-white-background` | Same shell as `simple` but the page body has an off-white (`bg-gray-50`) background.                                            |
+
+## Theme (simple + with-header only)
+
+`options.theme` selects the sidebar (and, for `simple`, mobile header) coloring:
+
+| `theme` (default `'light'`) | `simple` sidebar / mobile header                                              | `with-header` sidebar                                  |
+| --------------------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------ |
+| `'light'`                   | White sidebar with right border (dark mode → gray-900). Mobile header: white. | Gray-900 sidebar (matches the original `with-header`). |
+| `'brand'`                   | Indigo sidebar and mobile header.                                             | Indigo sidebar.                                        |
+| `'dark'`                    | Gray-900 sidebar; mobile header: gray-900 with `shadow-sm`.                   | Gray-900 sidebar with `ring-1 ring-white/10`.          |
+
+`constrained-content` and `off-white-background` ignore `theme` (they always use the light sidebar look).
+
+## API
+
+### ISidebarLayoutOptionsPro (`sidebar-layout.types.ts`, extends `ISidebarLayoutOptions`)
+
+```typescript
+type SmartSidebarLayoutTheme = 'light' | 'brand' | 'dark';
+
+interface ISidebarLayoutOptionsPro {
+  title?: string;
+  sidebarTpl?: TemplateRef<unknown>;
+  headerTpl?: TemplateRef<unknown>;
+  sidebarPosition?: 'left' | 'right';
+  mobileBreakpoint?: 'sm' | 'md' | 'lg';
+  condensed?: boolean;
+  /** simple + with-header only — sidebar color theme. Default `'light'`. */
+  theme?: SmartSidebarLayoutTheme;
+}
+```
+
+### Wrapper Inputs
+
+| Input     | Type                                                                           | Default     | Description               |
+| --------- | ------------------------------------------------------------------------------ | ----------- | ------------------------- |
+| `variant` | `'simple' \| 'with-header' \| 'constrained-content' \| 'off-white-background'` | `'simple'`  | Layout family.            |
+| `options` | `ISidebarLayoutOptionsPro \| undefined`                                        | `undefined` | Title, slots, theme, etc. |
+| `class`   | `string`                                                                       | `''`        | Extra CSS classes.        |
+
+## Sidebar Position
+
+All variants support `options.sidebarPosition: 'left' | 'right'`. When `'right'`, the fixed sidebar moves to `lg:right-0` and main content padding flips from `lg:pl-72` to `lg:pr-72`.
+
+## Tailwind Plus Elements
+
+Each component is declared with `CUSTOM_ELEMENTS_SCHEMA`, so consumers can drop `el-dropdown` / `el-menu` / `el-popover` from `@tailwindplus/elements` directly into their `sidebarTpl` / `headerTpl`. End-user apps must load the package once.
+
+## Usage Example
+
+```html
+<ng-template #sidebar>
+  <div class="smart:flex smart:flex-col smart:gap-y-5 smart:px-6 smart:py-4">
+    <span class="smart:text-base smart:font-semibold smart:text-white"
+      >Acme</span
+    >
+    <a class="smart:text-sm smart:text-gray-300">Dashboard</a>
+    <a class="smart:text-sm smart:text-gray-300">Team</a>
+  </div>
+</ng-template>
+
+<ng-template #header>
+  <input type="search" placeholder="Search..." class="smart:flex-1" />
+</ng-template>
+
+<!-- Default light theme -->
+<smartpro-sidebar-layout
+  [options]="{ title: 'Dashboard', sidebarTpl: sidebar, headerTpl: header }"
+>
+  <div>Page content</div>
+</smartpro-sidebar-layout>
+
+<!-- Brand sidebar -->
+<smartpro-sidebar-layout
+  [options]="{ title: 'Dashboard', sidebarTpl: sidebar, theme: 'brand' }"
+>
+  <div>Page content</div>
+</smartpro-sidebar-layout>
+
+<!-- Dark sidebar with header -->
+<smartpro-sidebar-layout
+  variant="with-header"
+  [options]="{ title: 'Dashboard', sidebarTpl: sidebar, headerTpl: header, theme: 'dark' }"
+>
+  <div>Page content</div>
+</smartpro-sidebar-layout>
+
+<!-- Constrained content -->
+<smartpro-sidebar-layout
+  variant="constrained-content"
+  [options]="{ title: 'Settings', sidebarTpl: sidebar, headerTpl: header }"
+>
+  <div>Narrow content</div>
+</smartpro-sidebar-layout>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/sidebar-layout/sidebar-layout.component.ts`
+- Types: `packages/shared/angular/src/lib/components/sidebar-layout/sidebar-layout.types.ts`
+- Layouts: `packages/shared/angular/src/lib/components/sidebar-layout/{simple,with-header,constrained-content,off-white-background}/<name>.component.ts`
+- Shared utilities: `packages/shared/angular/src/lib/components/sidebar-layout/sidebar-layout-classes.util.ts`
+- Stories: `packages/shared/angular/src/lib/components/sidebar-layout/sidebar-layout.component.stories.ts`

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

@@ -0,0 +1,80 @@
+---
+name: angular-components-sidebar-navigation
+description: Sidebar navigation component for @smartsoft001/pro-angular. Three layouts (default, with-expandable-sections, with-secondary-navigation). The default layout accepts `theme: 'light' | 'brand' | 'dark'` for sidebar coloring.
+user-invocable: false
+---
+
+# Sidebar Navigation Component (Pro)
+
+Use `<smartpro-sidebar-navigation>` and pick a layout via `options.layout`. The component renders a full sidebar with logo, item groups, optional badges/initials per item, and an optional profile footer. Use `options.items` for a flat list or `options.groups[]` for multi-section navigation.
+
+## Layouts
+
+| `options.layout` (default `'default'`) | Selector                                                | Description                                                                                                                                                                                                                                           |
+| -------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'default'`                            | `smartpro-sidebar-navigation-default`                   | Standard sidebar with theme variants. `theme: 'light'` (default) — white sidebar with right border. `theme: 'dark'` — gray-900 sidebar (replaces the legacy `dark` variant). `theme: 'brand'` — indigo sidebar (replaces the legacy `brand` variant). |
+| `'with-expandable-sections'`           | `smartpro-sidebar-navigation-with-expandable-sections`  | Sidebar with collapsible/expandable item sections.                                                                                                                                                                                                    |
+| `'with-secondary-navigation'`          | `smartpro-sidebar-navigation-with-secondary-navigation` | Sidebar with a secondary navigation column.                                                                                                                                                                                                           |
+
+## API
+
+### ISidebarNavOptionsPro (`sidebar-navigation.types.ts`, omits + redefines `layout`)
+
+```typescript
+type SmartSidebarNavigationLayoutPro =
+  | 'default'
+  | 'with-expandable-sections'
+  | 'with-secondary-navigation';
+
+type SmartSidebarNavigationTheme = 'light' | 'brand' | 'dark';
+
+interface ISidebarNavOptionsPro {
+  layout?: SmartSidebarNavigationLayoutPro;
+  ariaLabel?: string;
+  logo?: ISidebarNavLogo;
+  items?: ISidebarNavItem[];
+  groups?: ISidebarNavGroup[];
+  profile?: ISidebarNavProfile;
+  theme?: SmartSidebarNavigationTheme;
+}
+```
+
+### Wrapper Inputs
+
+| Input     | Type                                 | Default     | Description             |
+| --------- | ------------------------------------ | ----------- | ----------------------- |
+| `options` | `ISidebarNavOptionsPro \| undefined` | `undefined` | Layout + items + theme. |
+| `class`   | `string`                             | `''`        | Extra CSS classes.      |
+
+Outputs: `itemClick: ISidebarNavItemClick` (`{ itemId }`), `itemToggle: ISidebarNavItemToggle` (`{ itemId, expanded }`).
+
+## Usage Example
+
+```html
+<!-- Default light -->
+<smartpro-sidebar-navigation
+  [options]="{ logo, items, profile }"
+></smartpro-sidebar-navigation>
+
+<!-- Dark theme -->
+<smartpro-sidebar-navigation
+  [options]="{ logo, items, profile, theme: 'dark' }"
+></smartpro-sidebar-navigation>
+
+<!-- Brand theme -->
+<smartpro-sidebar-navigation
+  [options]="{ logo, items, profile, theme: 'brand' }"
+></smartpro-sidebar-navigation>
+
+<!-- With expandable sections -->
+<smartpro-sidebar-navigation
+  [options]="{ layout: 'with-expandable-sections', logo, groups, profile }"
+></smartpro-sidebar-navigation>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/sidebar-navigation/sidebar-navigation.component.ts`
+- Types: `packages/shared/angular/src/lib/components/sidebar-navigation/sidebar-navigation.types.ts`
+- Variants: `packages/shared/angular/src/lib/components/sidebar-navigation/{default,with-expandable-sections,with-secondary-navigation}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/sidebar-navigation/sidebar-navigation.component.stories.ts`

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

@@ -0,0 +1,91 @@
+---
+name: angular-components-sign-in-form
+description: Sign-in / registration form component for @smartsoft001/pro-angular. Two layouts (`simple`, `split-screen`) with optional `hideLabels?` and `cardStyle?` flags on simple. Dual sign-in / sign-up modes via the `mode` input.
+user-invocable: false
+---
+
+# Sign-In Form Component (Pro)
+
+Use `<smartpro-sign-in-form>` and pick a layout via `options.layout`. The component renders a centered email/password form with optional remember-me checkbox, forgot-password link, social providers, and "not a member?" prompt. Toggle between sign-in and sign-up via the `mode` input. Submission emits a `(submit)` event; clicking a social provider emits `(socialClick)`.
+
+## Layouts
+
+| `options.layout` (default `'simple'`) | Selector                             | Description                                                                                                                                                                                                                                                                              |
+| ------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'simple'`                            | `smartpro-sign-in-form-simple`       | Centered email/password form. Default uses labeled inputs in a `max-w-sm` column. `hideLabels: true` switches to a stacked input group with placeholder-only inputs and a remember-me row. `cardStyle: true` wraps the form in a rounded white card and adds a social-providers section. |
+| `'split-screen'`                      | `smartpro-sign-in-form-split-screen` | Two-column layout with a tall hero image on one side and the form on the other.                                                                                                                                                                                                          |
+
+## API
+
+### ISignInFormOptionsPro (`sign-in-form.types.ts`, omits + redefines `layout`)
+
+```typescript
+type SmartSignInFormLayoutPro = 'simple' | 'split-screen';
+
+interface ISignInFormOptionsPro {
+  layout?: SmartSignInFormLayoutPro;
+  ariaLabel?: string;
+  emailPlaceholder?: string;
+  passwordPlaceholder?: string;
+  submitLabel?: string;
+  forgotPasswordHref?: string;
+  signUpHref?: string;
+  signInHref?: string;
+  heroImageUrl?: string;
+  socialProviders?: ISocialProvider[];
+  extraTpl?: TemplateRef<unknown>;
+  hideLabels?: boolean;
+  cardStyle?: boolean;
+}
+```
+
+### Wrapper Inputs
+
+| Input      | Type                                 | Default     | Description                            |
+| ---------- | ------------------------------------ | ----------- | -------------------------------------- |
+| `mode`     | `'sign-in' \| 'sign-up'`             | `'sign-in'` | Switches the form copy + submit label. |
+| `disabled` | `boolean`                            | `false`     | Disables inputs + submit.              |
+| `options`  | `ISignInFormOptionsPro \| undefined` | `undefined` | Layout, slots, flags.                  |
+| `class`    | `string`                             | `''`        | Extra CSS classes.                     |
+
+Outputs: `submit: ISignInFormSubmit` (`{ email, password, mode }`), `socialClick: ISignInFormSocialClick` (`{ providerId, mode }`).
+
+## Usage Example
+
+```html
+<!-- Default labeled simple form -->
+<smartpro-sign-in-form
+  [options]="{ forgotPasswordHref: '#', signUpHref: '#' }"
+  (submit)="onSubmit($event)"
+></smartpro-sign-in-form>
+
+<!-- Stacked no-labels form -->
+<smartpro-sign-in-form
+  [options]="{ hideLabels: true, forgotPasswordHref: '#' }"
+  (submit)="onSubmit($event)"
+></smartpro-sign-in-form>
+
+<!-- Card with social providers -->
+<smartpro-sign-in-form
+  [options]="{
+    cardStyle: true,
+    forgotPasswordHref: '#',
+    socialProviders: [{ id: 'google', label: 'Google' }, { id: 'github', label: 'GitHub' }]
+  }"
+  (submit)="onSubmit($event)"
+  (socialClick)="onSocialClick($event)"
+></smartpro-sign-in-form>
+
+<!-- Split-screen with hero image -->
+<smartpro-sign-in-form
+  [options]="{ layout: 'split-screen', heroImageUrl: '...' }"
+  (submit)="onSubmit($event)"
+></smartpro-sign-in-form>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/sign-in-form/sign-in-form.component.ts`
+- Types: `packages/shared/angular/src/lib/components/sign-in-form/sign-in-form.types.ts`
+- Variants: `packages/shared/angular/src/lib/components/sign-in-form/{simple,split-screen}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/sign-in-form/sign-in-form.component.stories.ts`

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

@@ -0,0 +1,114 @@
+---
+name: angular-components-stacked-layout
+description: Stacked layout component for @smartsoft001/pro-angular. Four variants (default, lighter, branded, two-row-navigation-with-overlap) for the page-shell chrome (nav + optional header + main); navigation, header, and content slot in via TemplateRef and `<ng-content>`.
+user-invocable: false
+---
+
+# Stacked Layout Component (Pro)
+
+Use `<smartpro-stacked-layout>` and pick a variant via `variant`. The component renders the **outer chrome** (page wrapper, nav frame, optional header section, main content area). The actual nav contents (logo, links, profile dropdown, mobile menu) and any header contents are supplied by the consumer via `IStackedLayoutOptions.navTpl` / `headerTpl`. Page body goes via `<ng-content>`.
+
+## Variants
+
+| `variant` (default `'default'`)     | Selector                                                  | Description                                                                                                                                                                                                                                                                   |
+| ----------------------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'default'`                         | `smartpro-stacked-layout-default`                         | Adaptive page-shell. `headerStyle: 'overlap'` (default) — dark gray banded header with main content overlapping via `-mt-32`. `headerStyle: 'bottom-border'` — white nav with bottom border. `headerStyle: 'subtle-bg'` — white nav with bottom border on a subtle gray page. |
+| `'lighter'`                         | `smartpro-stacked-layout-lighter`                         | Dark gray nav with a lighter (white-shadow) page header section. `compact: true` switches the header to its compact form (`py-4` instead of `py-8`).                                                                                                                          |
+| `'branded'`                         | `smartpro-stacked-layout-branded`                         | Indigo branded nav. `headerStyle: 'lighter'` (default) — lighter page header. `headerStyle: 'compact-lighter'` — compact lighter header. `headerStyle: 'overlap'` — banded header with `-mt-32` overlap.                                                                      |
+| `'two-row-navigation-with-overlap'` | `smartpro-stacked-layout-two-row-navigation-with-overlap` | Indigo two-row navigation band with `pb-24`; main content overlaps via negative `-mt-24`.                                                                                                                                                                                     |
+
+## API
+
+### IStackedLayoutOptionsPro (`stacked-layout.types.ts`, extends `IStackedLayoutOptions`)
+
+```typescript
+type SmartStackedLayoutVariantPro =
+  | 'default'
+  | 'lighter'
+  | 'branded'
+  | 'two-row-navigation-with-overlap';
+
+type SmartStackedLayoutDefaultHeaderStyle =
+  | 'overlap'
+  | 'bottom-border'
+  | 'subtle-bg';
+
+type SmartStackedLayoutBrandedHeaderStyle =
+  | 'lighter'
+  | 'compact-lighter'
+  | 'overlap';
+
+interface IStackedLayoutOptionsPro {
+  title?: string;
+  navTpl?: TemplateRef<unknown>;
+  headerTpl?: TemplateRef<unknown>;
+  containerWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  /** default + branded — selects the header treatment. */
+  headerStyle?:
+    | SmartStackedLayoutDefaultHeaderStyle
+    | SmartStackedLayoutBrandedHeaderStyle;
+  /** lighter only — switches to compact header padding. */
+  compact?: boolean;
+}
+```
+
+### Wrapper Inputs
+
+| Input     | Type                                                                       | Default     | Description          |
+| --------- | -------------------------------------------------------------------------- | ----------- | -------------------- |
+| `variant` | `'default' \| 'lighter' \| 'branded' \| 'two-row-navigation-with-overlap'` | `'default'` | Variant family.      |
+| `options` | `IStackedLayoutOptionsPro \| undefined`                                    | `undefined` | Title, slots, flags. |
+| `class`   | `string`                                                                   | `''`        | Extra CSS classes.   |
+
+## Tailwind Plus Elements
+
+The Tailwind UI templates rely on custom HTML elements `el-dropdown`, `el-menu`, `el-popover` from [`@tailwindplus/elements`](https://www.npmjs.com/package/@tailwindplus/elements). Each variant is declared with `CUSTOM_ELEMENTS_SCHEMA`, so consumers can drop those tags into their `navTpl` / `headerTpl` directly. End-user apps must load the package, e.g. via a script tag in `index.html`:
+
+```html
+<script
+  src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1"
+  type="module"
+></script>
+```
+
+`@tailwindplus/elements` is declared as an **optional** peer dependency on `@smartsoft001/pro-angular`.
+
+## Usage Example
+
+```html
+<ng-template #nav>
+  <span class="smart:text-base smart:font-semibold smart:text-white">Acme</span>
+  <a class="smart:text-sm">Dashboard</a>
+  <a class="smart:text-sm">Team</a>
+</ng-template>
+
+<!-- Default with overlap -->
+<smartpro-stacked-layout [options]="{ title: 'Dashboard', navTpl: nav }">
+  <div class="smart:rounded-lg smart:bg-white smart:p-6 smart:shadow">
+    Page content goes here.
+  </div>
+</smartpro-stacked-layout>
+
+<!-- Bottom-border variant -->
+<smartpro-stacked-layout
+  [options]="{ title: 'Dashboard', navTpl: nav, headerStyle: 'bottom-border' }"
+>
+  <div>Page content</div>
+</smartpro-stacked-layout>
+
+<!-- Branded compact-lighter -->
+<smartpro-stacked-layout
+  variant="branded"
+  [options]="{ title: 'Dashboard', navTpl: nav, headerStyle: 'compact-lighter' }"
+>
+  <div>Page content</div>
+</smartpro-stacked-layout>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/stacked-layout/stacked-layout.component.ts`
+- Types: `packages/shared/angular/src/lib/components/stacked-layout/stacked-layout.types.ts`
+- Variants: `packages/shared/angular/src/lib/components/stacked-layout/{default,lighter,branded,two-row-navigation-with-overlap}/<name>.component.ts`
+- Shared utilities: `packages/shared/angular/src/lib/components/stacked-layout/stacked-layout-classes.util.ts`
+- Stories: `packages/shared/angular/src/lib/components/stacked-layout/stacked-layout.component.stories.ts`

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

@@ -0,0 +1,93 @@
+---
+name: angular-components-stacked-list
+description: Stacked list component for @smartsoft001/pro-angular. Three variants (simple, with-links, complex) for vertical lists of items. Width, columns, sticky-letter grouping, and per-item slots all driven by `IStackedListOptionsPro`.
+user-invocable: false
+---
+
+# Stacked List Component (Pro)
+
+Use `<smartpro-stacked-list>` and pick a variant via `variant`. Each variant iterates `IStackedListOptionsPro.items` and renders a row per item using the per-item slots (`avatarUrl`, `iconTpl`, `title`, `description`, `meta`, `href`, `actionTpl`, `badgeTpl`).
+
+## Variants
+
+| `variant` (default `'simple'`) | Selector                           | Description                                                                                                                                                                                                                                                                                                                                 |
+| ------------------------------ | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'simple'`                     | `smartpro-stacked-list-simple`     | Adaptive narrow / full / constrained-full row layout. Per-item content drives the right column (meta + badge + action). `options.width: 'narrow' \| 'full' \| 'constrained-full'`. `options.stickyHeadings: true` groups items by first letter and renders in a `<nav>` with sticky group rows. `item.href` makes the entire row clickable. |
+| `'with-links'`                 | `smartpro-stacked-list-with-links` | Linked-row list with explicit hover state. `options.width: 'full' \| 'card'` switches between full-width and a rounded `bg-white` card. `options.columns: 2` switches to a multi-column grid where each item renders as an icon block + title + description + action.                                                                       |
+| `'complex'`                    | `smartpro-stacked-list-complex`    | Title with optional inline badge, description below, action area on the right. `options.inlineMeta: true` renders an inline meta dot+separator after the description (composes `description · meta`).                                                                                                                                       |
+
+## API
+
+### IStackedListOptionsPro (`stacked-list.types.ts`, extends `IStackedListOptions`)
+
+```typescript
+type SmartStackedListVariantPro = 'simple' | 'with-links' | 'complex';
+
+interface IStackedListOptionsPro {
+  items?: IStackedListItem[];
+  width?: 'narrow' | 'full' | 'constrained-full' | 'card';
+  stickyHeadings?: boolean;
+  columns?: 1 | 2;
+  inlineMeta?: boolean;
+}
+
+interface IStackedListItem {
+  id?: string;
+  title: string;
+  description?: string;
+  meta?: string;
+  href?: string;
+  avatarUrl?: string;
+  iconTpl?: TemplateRef<unknown>;
+  actionTpl?: TemplateRef<unknown>;
+  badgeTpl?: TemplateRef<unknown>;
+}
+```
+
+### Wrapper Inputs
+
+| Input     | Type                                    | Default     | Description        |
+| --------- | --------------------------------------- | ----------- | ------------------ |
+| `variant` | `'simple' \| 'with-links' \| 'complex'` | `'simple'`  | Variant family.    |
+| `options` | `IStackedListOptionsPro \| undefined`   | `undefined` | Items + flags.     |
+| `class`   | `string`                                | `''`        | Extra CSS classes. |
+
+## Usage Example
+
+```html
+<smartpro-stacked-list
+  [options]="{
+    items: [
+      { id: '1', title: 'Leslie Alexander', description: 'leslie@acme.com', avatarUrl: '...' },
+      { id: '2', title: 'Michael Foster', description: 'michael@acme.com', avatarUrl: '...' }
+    ]
+  }"
+></smartpro-stacked-list>
+
+<smartpro-stacked-list
+  variant="with-links"
+  [options]="{ items, width: 'full' }"
+></smartpro-stacked-list>
+
+<smartpro-stacked-list
+  variant="with-links"
+  [options]="{ items, columns: 2 }"
+></smartpro-stacked-list>
+
+<smartpro-stacked-list
+  [options]="{ items, stickyHeadings: true }"
+></smartpro-stacked-list>
+
+<smartpro-stacked-list
+  variant="complex"
+  [options]="{ items, inlineMeta: true }"
+></smartpro-stacked-list>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/stacked-list/stacked-list.component.ts`
+- Types: `packages/shared/angular/src/lib/components/stacked-list/stacked-list.types.ts`
+- Variants: `packages/shared/angular/src/lib/components/stacked-list/{simple,with-links,complex}/<name>.component.ts`
+- Shared utilities: `packages/shared/angular/src/lib/components/stacked-list/stacked-list-classes.util.ts`
+- Stories: `packages/shared/angular/src/lib/components/stacked-list/stacked-list.component.stories.ts`

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

@@ -0,0 +1,87 @@
+---
+name: angular-components-stats
+description: Stats component for @smartsoft001/pro-angular. Two variants — `default` (composable flags `cardStyle`, `brandIcon`, `trending`) and `with-shared-borders`. Renders key-figure tiles from `IStatsOptionsPro.items`.
+user-invocable: false
+---
+
+# Stats Component (Pro)
+
+Use `<smartpro-stats>` and pick a variant via `variant`. The component reads `IStatsOptionsPro.items` (each with `label`, `value`, optional `change`, `trend`, `previousValue`, `iconTpl`, `actionTpl`) and `columns` to render a responsive grid of stat tiles.
+
+## Variants
+
+| `variant` (default `'default'`) | Selector                             | Description                                                                                                                                                                                                                                                                                                                                     |
+| ------------------------------- | ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'default'`                     | `smartpro-stats-default`             | Adaptive layout. Default renders a divider-grid of label + large value tiles. `cardStyle: true` switches to a section-titled grid of rounded shadow cards. `brandIcon: true` renders cards with an indigo brand-icon overlay and an optional footer action. `trending: true` switches to the trending grid (label + change pill + large value). |
+| `'with-shared-borders'`         | `smartpro-stats-with-shared-borders` | Tile grid with a shared border treatment between cells (legacy "with-shared-borders" pattern).                                                                                                                                                                                                                                                  |
+
+## API
+
+### IStatsOptionsPro (`stats.types.ts`, extends `IStatsOptions`)
+
+```typescript
+type SmartStatsVariantPro = 'default' | 'with-shared-borders';
+
+interface IStatsOptionsPro {
+  title?: string;
+  columns?: 1 | 2 | 3 | 4;
+  items?: IStatsItem[];
+  cardStyle?: boolean;
+  brandIcon?: boolean;
+  trending?: boolean;
+}
+
+interface IStatsItem {
+  label: string;
+  value: string | number;
+  previousValue?: string | number;
+  change?: string;
+  trend?: 'up' | 'down' | 'neutral';
+  iconTpl?: TemplateRef<unknown>;
+  actionTpl?: TemplateRef<unknown>;
+}
+```
+
+### Wrapper Inputs
+
+| Input     | Type                                 | Default     | Description            |
+| --------- | ------------------------------------ | ----------- | ---------------------- |
+| `variant` | `'default' \| 'with-shared-borders'` | `'default'` | Variant family.        |
+| `options` | `IStatsOptionsPro \| undefined`      | `undefined` | Title + items + flags. |
+| `class`   | `string`                             | `''`        | Extra CSS classes.     |
+
+## Usage Example
+
+```html
+<!-- Default divider grid -->
+<smartpro-stats [options]="{ items, columns: 4 }"></smartpro-stats>
+
+<!-- Cards -->
+<smartpro-stats
+  [options]="{ items, cardStyle: true, columns: 3 }"
+></smartpro-stats>
+
+<!-- Brand icon overlay -->
+<smartpro-stats
+  [options]="{ items, brandIcon: true, columns: 3 }"
+></smartpro-stats>
+
+<!-- Trending -->
+<smartpro-stats
+  [options]="{ items, trending: true, columns: 4 }"
+></smartpro-stats>
+
+<!-- Shared borders -->
+<smartpro-stats
+  variant="with-shared-borders"
+  [options]="{ items }"
+></smartpro-stats>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/stats/stats.component.ts`
+- Types: `packages/shared/angular/src/lib/components/stats/stats.types.ts`
+- Variants: `packages/shared/angular/src/lib/components/stats/{default,with-shared-borders}/<name>.component.ts`
+- Shared utilities: `packages/shared/angular/src/lib/components/stats/stats-classes.util.ts`
+- Stories: `packages/shared/angular/src/lib/components/stats/stats.component.stories.ts`