@smartsoft001/pro-claude-plugins 0.2.0

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

@@ -0,0 +1,91 @@
+---
+name: angular-components-breadcrumbs
+description: Breadcrumbs component for @smartsoft001/pro-angular. Two layouts (bar, simple) with options for contained card style or chevron/slash/arrow separator.
+user-invocable: false
+---
+
+# Breadcrumbs Component (Pro)
+
+Renders an `<ol>` of breadcrumb items as links and emits `itemClick`. Use the main wrapper `<smartpro-breadcrumbs>` and pick a layout via `options.layout`.
+
+## Layouts
+
+| `options.layout`     | Selector                      | Description                                                                                                  |
+| -------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| `'simple'` (default) | `smartpro-breadcrumbs-simple` | Inline trail with a separator icon between items. Separator is configurable: `chevron` (default) or `slash`. |
+| `'bar'`              | `smartpro-breadcrumbs-bar`    | Horizontal bar layout. Set `contained: true` for a card-style box; otherwise the bar spans the page width.   |
+
+The first item renders as an icon-only home link (use `iconTpl` + `srOnlyLabel`). Subsequent items render as text links separated by the layout's separator.
+
+## API
+
+### IBreadcrumbsOptionsPro (`breadcrumbs.types.ts`)
+
+```typescript
+type SmartBreadcrumbsLayoutPro = 'bar' | 'simple';
+
+interface IBreadcrumbsOptionsPro {
+  layout?: SmartBreadcrumbsLayoutPro; // 'simple' (default) | 'bar'
+  contained?: boolean; // bar: true => contained card, false => full-width
+  separator?: SmartBreadcrumbsSeparator; // simple: 'chevron' (default) | 'slash' | 'arrow'
+  ariaLabel?: string;
+  items: IBreadcrumbItem[];
+}
+
+interface IBreadcrumbItem {
+  id: string;
+  label?: string;
+  href?: string;
+  iconTpl?: TemplateRef<unknown>;
+  srOnlyLabel?: string;
+  current?: boolean;
+}
+```
+
+### Outputs
+
+- `itemClick: { itemId: string }` — emitted on link click. The wrapper calls `event.preventDefault()` automatically when an item has no `href`.
+
+## Usage
+
+### Simple with chevrons (default)
+
+```html
+<smartpro-breadcrumbs
+  [options]="{
+    items: [
+      { id: 'home', srOnlyLabel: 'Home', href: '/', iconTpl: homeIcon },
+      { id: 'projects', label: 'Projects', href: '/projects' },
+      { id: 'nero', label: 'Project Nero', href: '/projects/nero', current: true }
+    ]
+  }"
+  (itemClick)="onItem($event)"
+/>
+```
+
+### Simple with slashes
+
+```html
+<smartpro-breadcrumbs
+  [options]="{ layout: 'simple', separator: 'slash', items }"
+/>
+```
+
+### Full-width bar
+
+```html
+<smartpro-breadcrumbs [options]="{ layout: 'bar', items }" />
+```
+
+### Contained (card-style bar)
+
+```html
+<smartpro-breadcrumbs [options]="{ layout: 'bar', contained: true, items }" />
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/breadcrumbs/breadcrumbs.component.ts`
+- Types: `packages/shared/angular/src/lib/components/breadcrumbs/breadcrumbs.types.ts`
+- Layouts: `packages/shared/angular/src/lib/components/breadcrumbs/{bar,simple}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/breadcrumbs/breadcrumbs.component.stories.ts`

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

@@ -0,0 +1,146 @@
+---
+name: angular-components-button
+description: Button component for @smartsoft001/pro-angular. Three shapes (standard, rounded, circular) with optional leading/trailing icon position, configurable variant/color (primary/secondary/soft × 22 Tailwind colors), dark/light mode, loading and confirm states.
+user-invocable: false
+---
+
+# Button Component (Pro)
+
+Use the wrapper `<smartpro-button>` and pick a shape via the `shape` input. Color style (primary / secondary / soft), color palette (22 Tailwind colors), icon position, and confirm/loading states are driven by `IButtonOptions`. All shapes extend `ButtonBaseComponent` from `@smartsoft001/angular` and support dark/light mode.
+
+## Shapes
+
+| `shape` value (default `standard`) | Selector                   | Description                                                                                                                                      |
+| ---------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `'standard'`                       | `smartpro-button-standard` | Rectangular button. Optional icon slot via `<span icon>...</span>`; position controlled by `options.iconPosition` (`'leading'` or `'trailing'`). |
+| `'rounded'`                        | `smartpro-button-rounded`  | Pill shape (`rounded-full`).                                                                                                                     |
+| `'circular'`                       | `smartpro-button-circular` | Circular icon-only button (no text, no confirm mode).                                                                                            |
+
+## Color & Variant Configuration
+
+`options.variant` picks the color style:
+
+- **`primary`** — colored background (`smart:bg-{color}-600`), white text — default
+- **`secondary`** — white background, gray border (`smart:inset-ring`), gray text
+- **`soft`** — light colored background (`smart:bg-{color}-50`), colored text
+
+`options.color` picks one of 22 Tailwind palettes (default: `indigo`): `slate`, `gray`, `zinc`, `neutral`, `stone`, `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`.
+
+Color resolution uses `COMPONENT_COLORS` from `@smartsoft001/angular`.
+
+## Icon Position
+
+For shape `'standard'`, project an icon via the `[icon]` content attribute and set `options.iconPosition`:
+
+```html
+<smartpro-button [options]="{ click: onClick, iconPosition: 'leading' }">
+  <span icon><svg>...</svg></span>
+  Button text
+</smartpro-button>
+
+<smartpro-button [options]="{ click: onClick, iconPosition: 'trailing' }">
+  Button text
+  <span icon><svg>...</svg></span>
+</smartpro-button>
+```
+
+When `iconPosition` is unset, `<smartpro-button>` renders text only and ignores any `[icon]` slot. Icon position is not used by `'rounded'` or `'circular'`.
+
+## Confirm Mode
+
+When `options.confirm === true`, clicking the button swaps in a `cancel`/`confirm` button pair. Both respect `options.color`: confirm uses `COMPONENT_COLORS[color].primary`, cancel uses `.secondary`. Available for `standard` and `rounded`. `circular` has no confirm mode.
+
+## Loading
+
+Pass a `Signal<boolean>` as `options.loading`. When true, the button content is replaced by a spinner and the button becomes disabled.
+
+## API
+
+### IButtonOptions (re-exported from `@smartsoft001/angular`)
+
+```typescript
+interface IButtonOptions {
+  click: () => void;
+  type?: 'submit' | 'button';
+  confirm?: boolean;
+  loading?: Signal<boolean>;
+  variant?: 'primary' | 'secondary' | 'soft';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  color?: SmartColor; // 22 Tailwind colors, default 'indigo'
+  iconPosition?: 'leading' | 'trailing'; // standard shape only
+}
+```
+
+### Wrapper Inputs
+
+| Input      | Type                                    | Default      | Description          |
+| ---------- | --------------------------------------- | ------------ | -------------------- |
+| `shape`    | `'standard' \| 'rounded' \| 'circular'` | `'standard'` | Visual shape         |
+| `options`  | `IButtonOptions`                        | required     | Button configuration |
+| `disabled` | `boolean`                               | `false`      | Disabled state       |
+| `class`    | `string`                                | `''`         | External CSS classes |
+
+## Usage Examples
+
+```html
+<!-- Standard primary -->
+<smartpro-button [options]="{ click: onClick, variant: 'primary', size: 'md' }">
+  Save
+</smartpro-button>
+
+<!-- Standard secondary -->
+<smartpro-button [options]="{ click: onClick, variant: 'secondary' }">
+  Cancel
+</smartpro-button>
+
+<!-- Standard soft with custom color -->
+<smartpro-button
+  [options]="{ click: onClick, variant: 'soft', color: 'green' }"
+>
+  Active
+</smartpro-button>
+
+<!-- Rounded -->
+<smartpro-button
+  shape="rounded"
+  [options]="{ click: onClick, variant: 'soft', color: 'purple' }"
+>
+  Rounded Soft
+</smartpro-button>
+
+<!-- Circular icon-only -->
+<smartpro-button shape="circular" [options]="{ click: onClick }">
+  <svg>...</svg>
+</smartpro-button>
+
+<!-- Leading icon -->
+<smartpro-button [options]="{ click: onClick, iconPosition: 'leading' }">
+  <span icon><svg>...</svg></span>
+  Button text
+</smartpro-button>
+
+<!-- Trailing icon -->
+<smartpro-button [options]="{ click: onClick, iconPosition: 'trailing' }">
+  Button text
+  <span icon><svg>...</svg></span>
+</smartpro-button>
+
+<!-- Confirm mode — confirm button respects options.color -->
+<smartpro-button [options]="{ click: onDelete, confirm: true, color: 'red' }">
+  Delete
+</smartpro-button>
+
+<!-- Loading -->
+<smartpro-button [options]="{ click: onClick, loading: loadingSignal }">
+  Save
+</smartpro-button>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/button/button.component.ts`
+- Standard: `packages/shared/angular/src/lib/components/button/standard/standard.component.ts`
+- Rounded: `packages/shared/angular/src/lib/components/button/rounded/rounded.component.ts`
+- Circular: `packages/shared/angular/src/lib/components/button/circular/circular.component.ts`
+- Shared class utilities: `packages/shared/angular/src/lib/components/button/button-classes.util.ts`
+- Stories: `packages/shared/angular/src/lib/components/button/button.component.stories.ts`

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

@@ -0,0 +1,121 @@
+---
+name: angular-components-button-group
+description: Segmented button group for @smartsoft001/pro-angular. Two layouts (default, with-stat), 5 source variants via composable options (iconOnly, withDropdown, selectionMode). Single + multi-select.
+user-invocable: false
+---
+
+# Button Group Component (Pro)
+
+Use `<smartpro-button-group>`. Buttons render side-by-side with shared borders. The wrapper picks one of two child layouts based on `layout` input or whether any button has a `count`.
+
+## Layouts
+
+| `layout` (auto-detected) | Selector                          | Description                                                                                                    |
+| ------------------------ | --------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `'default'` (default)    | `smartpro-button-group-default`   | Flat segmented buttons. Covers Basic / Icon-only / With dropdown / With checkbox select.                       |
+| `'with-stat'`            | `smartpro-button-group-with-stat` | Same as default plus a count pill inside each button. Triggered automatically when any `button.count != null`. |
+
+## Source variant mapping
+
+| Tailwind UI variant  | Pro options                                                                          |
+| -------------------- | ------------------------------------------------------------------------------------ |
+| Basic                | (defaults)                                                                           |
+| Icon-only            | `iconOnly: true` + `button.icon` (SVG path d)                                        |
+| With stat            | `button.count: number` (auto-selects `with-stat` layout)                             |
+| With dropdown        | `withDropdown: true` (trailing chevron emits `buttonClick` with id `'__dropdown__'`) |
+| With checkbox select | `selectionMode: 'multi'` (toggles internal Set per click)                            |
+
+## API
+
+### Types (`button-group.types.ts`)
+
+```typescript
+type SmartButtonGroupLayoutPro = 'default' | 'with-stat';
+type SmartButtonGroupSelectionMode = 'single' | 'multi';
+
+interface IButtonGroupOptionsPro extends IButtonGroupOptions {
+  layout?: SmartButtonGroupLayoutPro;
+  iconOnly?: boolean;
+  withDropdown?: boolean;
+  selectionMode?: SmartButtonGroupSelectionMode;
+}
+
+const DROPDOWN_BUTTON_ID = '__dropdown__';
+```
+
+`IButtonGroupButton` (re-exported from `@smartsoft001/angular`): `{ id, label?, icon?, disabled?, count? }`.
+
+### Wrapper inputs
+
+| Input      | Type                                     | Default     | Description                                                      |
+| ---------- | ---------------------------------------- | ----------- | ---------------------------------------------------------------- |
+| `buttons`  | `IButtonGroupButton[]`                   | `[]`        | Segments to render.                                              |
+| `selected` | `string \| undefined` (model — two-way)  | `undefined` | Bind with `[(selected)]`. Drives single-select state.            |
+| `layout`   | `SmartButtonGroupLayoutPro \| undefined` | `undefined` | Force a layout; otherwise auto-detected from `buttons[*].count`. |
+| `options`  | `IButtonGroupOptionsPro \| undefined`    | `undefined` | Icon-only, dropdown chevron, selection mode.                     |
+| `class`    | `string`                                 | `''`        | Forwarded to the host `[role="group"]` element.                  |
+
+### Outputs
+
+| Output        | Payload                | When                                                                                       |
+| ------------- | ---------------------- | ------------------------------------------------------------------------------------------ |
+| `buttonClick` | `{ buttonId: string }` | Multi-select: every click. Single-select: only the dropdown chevron (id `'__dropdown__'`). |
+
+## Usage examples
+
+```html
+<!-- Basic single-select -->
+<smartpro-button-group [buttons]="periods" [(selected)]="period" />
+
+<!-- Icon-only -->
+<smartpro-button-group
+  [buttons]="alignButtons"
+  [(selected)]="alignment"
+  [options]="{ iconOnly: true }"
+/>
+
+<!-- With stat (counts) -->
+<smartpro-button-group
+  [buttons]="[
+  { id: 'open', label: 'Open', count: 12 },
+  { id: 'resolved', label: 'Resolved', count: 3 }
+]"
+  [(selected)]="status"
+/>
+
+<!-- With dropdown chevron -->
+<smartpro-button-group
+  [buttons]="periods"
+  [(selected)]="period"
+  [options]="{ withDropdown: true }"
+  (buttonClick)="$event.buttonId === '__dropdown__' && openMenu()"
+/>
+
+<!-- Multi-select -->
+<smartpro-button-group
+  [buttons]="filters"
+  [options]="{ selectionMode: 'multi' }"
+  (buttonClick)="toggleFilter($event.buttonId)"
+/>
+```
+
+## Accessibility
+
+- Outer container uses `role="group"`.
+- Each button has `aria-pressed` bound to its selection state.
+- Disabled buttons are skipped on click and visually muted (opacity 50).
+- Dropdown chevron button has `aria-label="More options"`.
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/button-group/button-group.component.ts`
+- Types: `packages/shared/angular/src/lib/components/button-group/button-group.types.ts`
+- Classes utility: `packages/shared/angular/src/lib/components/button-group/button-group-classes.util.ts`
+- Layouts: `packages/shared/angular/src/lib/components/button-group/{default,with-stat}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/button-group/button-group.component.stories.ts`
+- Module entry: `packages/shared/angular/src/lib/components/components.module.ts` (`BUTTON_GROUP_COMPONENTS`)
+
+## Peer dependency
+
+- `@smartsoft001/angular@^2.123.0` — provides `ButtonGroupBaseComponent`, `IButtonGroupButton`, `IButtonGroupOptions`.
+- No `@tailwindplus/elements` dep required.

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

@@ -0,0 +1,78 @@
+---
+name: angular-components-calendar
+description: Calendar components — 8 Tailwind UI calendar variants for @smartsoft001/pro-angular extending CalendarBaseComponent. Bind `referenceDate`, `events`, `value` to render month/week/day/year/sidebar/double/borderless views.
+user-invocable: false
+---
+
+# Calendar Components (Pro)
+
+Eight standalone calendar variants extending `CalendarBaseComponent` from `@smartsoft001/angular`. Each binds the same input surface (`referenceDate`, `events`, `value`, optional `options`) and renders a different layout. `CUSTOM_ELEMENTS_SCHEMA` is set on each so `el-dropdown` / `el-menu` from `@tailwindplus/elements` work verbatim.
+
+## Variants
+
+| Component                               | Selector                                    | Layout                                                                |
+| --------------------------------------- | ------------------------------------------- | --------------------------------------------------------------------- |
+| `CalendarSmallWithMeetingsComponent`    | `smartpro-calendar-small-with-meetings`     | Compact month grid + sidebar list of upcoming meetings                |
+| `CalendarMonthViewComponent`            | `smartpro-calendar-month-view`              | Full month grid (7×N) with events per day                             |
+| `CalendarWeekViewComponent`             | `smartpro-calendar-week-view`               | 7-day × 24-hour grid with absolutely positioned events                |
+| `CalendarDayViewComponent`              | `smartpro-calendar-day-view`                | Single-day hour list with event details                               |
+| `CalendarYearViewComponent`             | `smartpro-calendar-year-view`               | 12 mini-month grids                                                   |
+| `CalendarDoubleComponent`               | `smartpro-calendar-double`                  | Two adjacent month grids side-by-side + upcoming events list          |
+| `CalendarBorderlessStackedComponent`    | `smartpro-calendar-borderless-stacked`      | Borderless single month + schedule list stacked below                 |
+| `CalendarBorderlessSideBySideComponent` | `smartpro-calendar-borderless-side-by-side` | Borderless single month + schedule list side-by-side (md:grid-cols-2) |
+
+## API
+
+### CalendarBaseComponent inputs (re-exported from `@smartsoft001/angular`)
+
+| Input           | Type                            | Notes                                                                |
+| --------------- | ------------------------------- | -------------------------------------------------------------------- |
+| `referenceDate` | `Date \| undefined`             | The visible month/week/day/year anchor                               |
+| `value`         | `Date \| null` (model)          | Currently-selected day, two-way bindable via `[(value)]`             |
+| `events`        | `ICalendarEvent[]`              | All events; the base provides `eventsForDay(d)`                      |
+| `options`       | `ICalendarOptions \| undefined` | `view`, `monthsCount`, `weekStart`, `showToolbar`, content templates |
+| `class`         | `string`                        | Extra css classes via `[class]`                                      |
+
+### ICalendarEvent
+
+```typescript
+interface ICalendarEvent {
+  id: string | number;
+  start: Date;
+  end?: Date;
+  title?: string;
+  meta?: Record<string, unknown>;
+}
+```
+
+### ICalendarOptions
+
+```typescript
+interface ICalendarOptions {
+  view?: 'month' | 'week' | 'day' | 'year';
+  monthsCount?: 1 | 2 | 12;
+  weekStart?: 0 | 1;
+  showToolbar?: boolean;
+  toolbarActionsTpl?: TemplateRef<unknown>;
+  eventListTpl?: TemplateRef<unknown>;
+  sidePanelTpl?: TemplateRef<unknown>;
+  dayCellTpl?: TemplateRef<unknown>;
+  eventTpl?: TemplateRef<unknown>;
+}
+```
+
+## Usage
+
+```html
+<smartpro-calendar-month-view
+  [referenceDate]="reference"
+  [events]="events"
+  [(value)]="selected"
+/>
+```
+
+## File Locations
+
+- Variants: `packages/shared/angular/src/lib/components/calendar/<variant>/<variant>.component.ts`
+- Helpers: `calendar-classes.util.ts`, `calendar-grid.util.ts`
+- Stories: `packages/shared/angular/src/lib/components/calendar/calendar.component.stories.ts`

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

@@ -0,0 +1,110 @@
+---
+name: angular-components-card
+description: Card component for @smartsoft001/pro-angular. Two layouts (basic, well) with optional `edgeToEdge` (drop mobile rounding) and `onGray` (well only, darker background). Header / body / footer sections via template refs and `hasHeader` / `hasFooter` flags; gray section tints via `ICardOptions.grayBody` / `grayFooter`.
+user-invocable: false
+---
+
+# Card Component (Pro)
+
+Use `<smartpro-card>` and pick a layout via the `variant` input (`'basic'` default, or `'well'`). Surface tweaks are driven by `ICardOptionsPro` flags (`edgeToEdge`, `onGray`); section visibility is controlled by `hasHeader` / `hasFooter` plus the `headerTpl` / `bodyTpl` / `footerTpl` template inputs. Section tinting (`grayBody`, `grayFooter`) is driven by the peer `ICardOptions`.
+
+## Layouts
+
+| `variant` (default `'basic'`) | Selector              | Description                                                                                                                                                                                       |
+| ----------------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'basic'`                     | `smartpro-card-basic` | White card with rounded corners and a subtle shadow. Set `options.edgeToEdge: true` to drop the rounding on mobile (`sm:rounded-lg` only).                                                        |
+| `'well'`                      | `smartpro-card-well`  | Soft gray card without shadow. Set `options.onGray: true` to switch the body to `bg-gray-200` (use against a gray app background). Set `options.edgeToEdge: true` to drop the rounding on mobile. |
+
+## Section Behaviors
+
+| Desired behavior             | How to achieve it                                                                                                                          |
+| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| Show optional header section | `[hasHeader]="true"` + `[headerTpl]="..."`                                                                                                 |
+| Show optional footer section | `[hasFooter]="true"` + `[footerTpl]="..."`                                                                                                 |
+| Tint body gray               | `[options]="{ grayBody: true }"`                                                                                                           |
+| Tint footer gray             | `[options]="{ grayFooter: true }"` (combine with `hasFooter=true`)                                                                         |
+| `divide-y` between sections  | Automatic whenever `hasHeader` or `hasFooter` is true AND neither gray tint is set (handled by `CardBaseComponent.sharedContainerClasses`) |
+
+## API
+
+### ICardOptionsPro (`card.types.ts`, extends `ICardOptions`)
+
+```typescript
+type SmartCardLayoutPro = 'basic' | 'well';
+
+interface ICardOptionsPro {
+  title?: string;
+  buttons?: Array<IIconButtonOptions>;
+  grayBody?: boolean;
+  grayFooter?: boolean;
+  /** Drop rounded corners on mobile (only `sm:rounded-lg`). Applies to both layouts. */
+  edgeToEdge?: boolean;
+  /** Well layout only — switch body bg from `gray-50` to `gray-200`. */
+  onGray?: boolean;
+}
+```
+
+### Wrapper Inputs
+
+| Input       | Type                   | Required | Description                                |
+| ----------- | ---------------------- | -------- | ------------------------------------------ |
+| `variant`   | `'basic' \| 'well'`    | no       | Card layout. Default `'basic'`.            |
+| `options`   | `ICardOptionsPro`      | no       | Title, gray tints, `edgeToEdge`, `onGray`. |
+| `hasHeader` | `boolean`              | no       | Toggle optional header slot.               |
+| `hasFooter` | `boolean`              | no       | Toggle optional footer slot.               |
+| `class`     | `string`               | no       | Extra CSS classes on the container.        |
+| `headerTpl` | `TemplateRef<unknown>` | no       | Header template.                           |
+| `bodyTpl`   | `TemplateRef<unknown>` | yes      | Body template.                             |
+| `footerTpl` | `TemplateRef<unknown>` | no       | Footer template.                           |
+
+## Usage Examples
+
+```html
+<ng-template #header>...</ng-template>
+<ng-template #body>...</ng-template>
+<ng-template #footer>...</ng-template>
+
+<!-- Basic card -->
+<smartpro-card [bodyTpl]="body" />
+
+<!-- Edge-to-edge basic on mobile -->
+<smartpro-card [options]="{ edgeToEdge: true }" [bodyTpl]="body" />
+
+<!-- Basic with header -->
+<smartpro-card [hasHeader]="true" [headerTpl]="header" [bodyTpl]="body" />
+
+<!-- Basic with header + footer + gray footer -->
+<smartpro-card
+  [options]="{ grayFooter: true }"
+  [hasHeader]="true"
+  [hasFooter]="true"
+  [headerTpl]="header"
+  [bodyTpl]="body"
+  [footerTpl]="footer"
+/>
+
+<!-- Well -->
+<smartpro-card variant="well" [bodyTpl]="body" />
+
+<!-- Well on darker gray (use against a gray app background) -->
+<smartpro-card variant="well" [options]="{ onGray: true }" [bodyTpl]="body" />
+
+<!-- Well edge-to-edge -->
+<smartpro-card
+  variant="well"
+  [options]="{ edgeToEdge: true }"
+  [bodyTpl]="body"
+/>
+```
+
+## Dark/Light Mode
+
+Every layout uses the `smart:` Tailwind prefix with paired `smart:dark:*` classes. Storybook exposes a global theme toolbar (`light` / `dark`) defined in `.storybook/preview.ts`.
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/card/card.component.ts`
+- Types: `packages/shared/angular/src/lib/components/card/card.types.ts`
+- Layouts: `packages/shared/angular/src/lib/components/card/{basic,well}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/card/card.component.stories.ts`
+- Module registration: `packages/shared/angular/src/lib/components/components.module.ts` (`CARD_COMPONENTS`)

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

@@ -0,0 +1,105 @@
+---
+name: angular-components-card-heading
+description: Card heading component for @smartsoft001/pro-angular. One default variant whose layout adapts to the slots provided in `options` (title, description, avatar, meta, actions) plus an optional `compact` flag for the dropdown-style header.
+user-invocable: false
+---
+
+# Card Heading Component (Pro)
+
+Use `<smartpro-card-heading>`. The component reads `ICardHeadingOptionsPro` and chooses one of three layout shapes automatically based on which template slots are provided:
+
+| Provided options                                            | Resulting layout                                                                                                                                                                                       |
+| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `title` (no description, actions, or avatar)                | Simple bordered header — just the title.                                                                                                                                                               |
+| `title` + `description` (no actions)                        | Title + description stacked under each other inside a bordered header.                                                                                                                                 |
+| `title` + `actionsTpl` (with or without `description`)      | Bordered row — title (and optional description) on the left, action button(s) on the right.                                                                                                            |
+| `title` + `avatarTpl` (with or without `actionsTpl`)        | Bordered row — avatar + title + optional `metaTpl` block on the left, optional actions on the right.                                                                                                   |
+| `compact: true` (with `avatarTpl`, `metaTpl`, `actionsTpl`) | Borderless flat row — avatar + title (`text-sm`) + meta on the left, actions on the right. Used for cards where the heading sits above lighter content (e.g., the “avatar + meta + dropdown” pattern). |
+
+`CUSTOM_ELEMENTS_SCHEMA` is set on the default variant so consumers can drop `el-dropdown` / `el-menu` from `@tailwindplus/elements` directly into `actionsTpl`.
+
+## API
+
+### ICardHeadingOptionsPro (`card-heading.types.ts`, extends `ICardHeadingOptions`)
+
+```typescript
+interface ICardHeadingOptionsPro {
+  title?: string;
+  description?: string;
+  avatarTpl?: TemplateRef<unknown>;
+  actionsTpl?: TemplateRef<unknown>;
+  metaTpl?: TemplateRef<unknown>;
+  /**
+   * Compact header — no border-bottom, smaller title, flat `flex space-x-3`
+   * row. Use when the heading sits inside a card without its own bordered
+   * top section (e.g., dropdown-style avatar + meta header).
+   */
+  compact?: boolean;
+}
+```
+
+### Wrapper Inputs
+
+| Input     | Type                                  | Default     | Description                                        |
+| --------- | ------------------------------------- | ----------- | -------------------------------------------------- |
+| `options` | `ICardHeadingOptionsPro \| undefined` | `undefined` | Title, description, slot template refs, `compact`. |
+| `class`   | `string`                              | `''`        | Extra CSS classes appended to the outer container. |
+
+## Usage Examples
+
+```html
+<ng-template #avatar>
+  <div class="smart:size-12 smart:rounded-full smart:bg-gray-200"></div>
+</ng-template>
+<ng-template #meta>
+  <span class="smart:text-sm smart:text-gray-500">Updated 3 days ago</span>
+</ng-template>
+<ng-template #actions>
+  <button
+    class="smart:rounded-md smart:bg-indigo-600 smart:px-3 smart:py-2 smart:text-white"
+  >
+    Create new job
+  </button>
+</ng-template>
+
+<!-- Just a title -->
+<smartpro-card-heading [options]="{ title: 'Job Postings' }" />
+
+<!-- Title + description -->
+<smartpro-card-heading
+  [options]="{ title: 'Job Postings', description: 'Lorem ipsum...' }"
+/>
+
+<!-- Title + description + action -->
+<smartpro-card-heading
+  [options]="{
+    title: 'Job Postings',
+    description: 'Lorem ipsum...',
+    actionsTpl: actions
+  }"
+/>
+
+<!-- Avatar + title + actions -->
+<smartpro-card-heading
+  [options]="{ title: 'Project Nero', avatarTpl: avatar, actionsTpl: actions }"
+/>
+
+<!-- Compact dropdown-style header -->
+<smartpro-card-heading
+  [options]="{
+    title: 'Project Nero',
+    avatarTpl: avatar,
+    metaTpl: meta,
+    actionsTpl: actions,
+    compact: true
+  }"
+/>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/card-heading/card-heading.component.ts`
+- Types: `packages/shared/angular/src/lib/components/card-heading/card-heading.types.ts`
+- Layout: `packages/shared/angular/src/lib/components/card-heading/default/default.component.ts`
+- Shared class utilities: `packages/shared/angular/src/lib/components/card-heading/card-heading-classes.util.ts`
+- Stories: `packages/shared/angular/src/lib/components/card-heading/card-heading.component.stories.ts`