@smartsoft001/pro-claude-plugins 0.2.0

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

@@ -0,0 +1,98 @@
+---
+name: angular-components-table
+description: Table component for @smartsoft001/pro-angular. Four variants (default, with-grouped-rows, with-summary-rows, responsive) driven by `ITableOptionsPro.columns` / `rows` plus feature flags (`inCard`, `border`, `selectable`, `sortable`, `stickyHeader`, `hideHeadings`, `withAvatars`, `width`, `mobileStrategy`).
+user-invocable: false
+---
+
+# Table Component (Pro)
+
+Use `<smartpro-table>` and pick a variant via `variant`. The component reads `ITableOptionsPro.columns` / `rows` and a set of feature flags that combine cleanly. Each column declares `key`, optional `label`, optional `align`, optional `sortable`, and optional `headerTpl` / `cellTpl` template overrides.
+
+## Variants
+
+| `variant` (default `'default'`) | Selector                           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| ------------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `'default'`                     | `smartpro-table-default`           | Adaptive table with composable feature flags. `inCard: true` wraps in a rounded `bg-white shadow-sm` card; `border: true` wraps in a `rounded-lg ring-1` border; `selectable: true` adds a checkbox column; `sortable: true` shows sort affordances on `column.sortable: true`; `stickyHeader: true` makes the thead sticky; `hideHeadings: true` visually hides headers; `withAvatars: true` renders the first column as `avatar + email`; `width: 'constrained-full'` wraps cell content in `mx-auto max-w-7xl`. |
+| `'with-grouped-rows'`           | `smartpro-table-with-grouped-rows` | Table with extra group-row sections (rows grouped by `row.group`).                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `'with-summary-rows'`           | `smartpro-table-with-summary-rows` | Table with summary rows interleaved with the data rows.                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `'responsive'`                  | `smartpro-table-responsive`        | Mobile-first table. `mobileStrategy: 'hide'` hides all but the first column on mobile; `mobileStrategy: 'stack'` stacks columns vertically on mobile.                                                                                                                                                                                                                                                                                                                                                              |
+
+## API
+
+### ITableOptionsPro (`table.types.ts`, extends `ITableOptions`)
+
+```typescript
+type SmartTableVariantPro =
+  | 'default'
+  | 'with-grouped-rows'
+  | 'with-summary-rows'
+  | 'responsive';
+
+interface ITableOptionsPro {
+  title?: string;
+  columns?: ITableColumn[];
+  rows?: Record<string, unknown>[];
+  striped?: boolean;
+  inCard?: boolean;
+  border?: boolean;
+  selectable?: boolean;
+  sortable?: boolean;
+  stickyHeader?: boolean;
+  hideHeadings?: boolean;
+  withAvatars?: boolean;
+  width?: 'normal' | 'constrained-full';
+  mobileStrategy?: 'hide' | 'stack';
+}
+
+interface ITableColumn {
+  key: string;
+  label?: string;
+  align?: 'left' | 'center' | 'right';
+  sortable?: boolean;
+  headerTpl?: TemplateRef<unknown>;
+  cellTpl?: TemplateRef<{ $implicit: Record<string, unknown>; key: string }>;
+}
+```
+
+### Wrapper Inputs
+
+| Input     | Type                                                                      | Default     | Description             |
+| --------- | ------------------------------------------------------------------------- | ----------- | ----------------------- |
+| `variant` | `'default' \| 'with-grouped-rows' \| 'with-summary-rows' \| 'responsive'` | `'default'` | Variant family.         |
+| `options` | `ITableOptionsPro \| undefined`                                           | `undefined` | Columns + rows + flags. |
+| `class`   | `string`                                                                  | `''`        | Extra CSS classes.      |
+
+## Usage Example
+
+```html
+<!-- Default simple -->
+<smartpro-table [options]="{ columns, rows }"></smartpro-table>
+
+<!-- In card with border -->
+<smartpro-table [options]="{ columns, rows, inCard: true }"></smartpro-table>
+
+<!-- Selectable + sortable + sticky header -->
+<smartpro-table
+  [options]="{ columns, rows, selectable: true, sortable: true, stickyHeader: true }"
+></smartpro-table>
+
+<!-- Responsive: hide all but first column on mobile -->
+<smartpro-table
+  variant="responsive"
+  [options]="{ columns, rows, mobileStrategy: 'hide' }"
+></smartpro-table>
+
+<!-- Responsive: stack columns vertically on mobile -->
+<smartpro-table
+  variant="responsive"
+  [options]="{ columns, rows, mobileStrategy: 'stack' }"
+></smartpro-table>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/table/table.component.ts`
+- Types: `packages/shared/angular/src/lib/components/table/table.types.ts`
+- Variants: `packages/shared/angular/src/lib/components/table/{default,responsive,with-grouped-rows,with-summary-rows}/<name>.component.ts`
+- Shared utilities: `packages/shared/angular/src/lib/components/table/table-classes.util.ts`
+- Stories: `packages/shared/angular/src/lib/components/table/table.component.stories.ts`

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

@@ -0,0 +1,99 @@
+---
+name: angular-components-tabs
+description: Tabs components for @smartsoft001/pro-angular. Two layouts (underline, pills) with adaptive styling for full-width, in-bar, bare-text, per-item icons/badges, and pill background variants.
+user-invocable: false
+---
+
+# Tabs Components (Pro)
+
+Use `<smartpro-tabs>` and pick a layout via `options.layout: 'underline' | 'pills'`. Both adapt to optional flags on the options object. Each renders a horizontal tab list with a mobile `<select>` fallback (disable via `options.showMobileSelect = false`), plus `[(selectedId)]` model binding and a `tabChange` output (`{ tabId }`).
+
+## Layouts
+
+| `layout` (default `'underline'`) | Selector                  | Description                                                                                                                         |
+| -------------------------------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `'underline'`                    | `smartpro-tabs-underline` | Horizontal nav with a per-tab underline indicator. Adapts via `fullWidth?`, `inBar?`, `bare?`, plus per-item `iconTpl?` / `badge?`. |
+| `'pills'`                        | `smartpro-tabs-pills`     | Pill-shaped tabs. Active background controlled by `background?: 'transparent' \| 'gray' \| 'brand'`.                                |
+
+### Underline modifiers
+
+`options.fullWidth: true` — anchors stretch to fill the nav row (`flex-1`).
+`options.inBar: true` — boxed bar with dividers, shadow, and a per-tab underline indicator.
+`options.bare: true` — wraps the nav in a bg-white container with `max-w-7xl` and renders minimal text tabs without the underline indicator.
+Per-item: set `item.iconTpl` to render an icon before the label; set `item.badge` to render a count pill after the label.
+
+### Pills modifiers
+
+`options.background: 'transparent'` (default) — gray-100 active pill.
+`options.background: 'gray'` — gray-200 active pill, intended for use on lighter gray surfaces.
+`options.background: 'brand'` — indigo-100 active pill.
+
+## API
+
+### ITabsOptionsPro (`tabs.types.ts`, extends `ITabsOptions`)
+
+```typescript
+type SmartTabsLayoutPro = 'underline' | 'pills';
+type SmartTabsPillsBackground = 'transparent' | 'gray' | 'brand';
+
+interface ITabsOptionsPro {
+  layout?: SmartTabsLayoutPro;
+  items?: ITabItem[];
+  ariaLabel?: string;
+  showMobileSelect?: boolean;
+  fullWidth?: boolean;
+  inBar?: boolean;
+  bare?: boolean;
+  background?: SmartTabsPillsBackground;
+}
+
+interface ITabItem {
+  id: string;
+  label?: string;
+  href?: string;
+  badge?: string | number;
+  iconTpl?: TemplateRef<unknown>;
+}
+```
+
+### Wrapper Inputs
+
+| Input        | Type                           | Default     | Description               |
+| ------------ | ------------------------------ | ----------- | ------------------------- |
+| `options`    | `ITabsOptionsPro \| undefined` | `undefined` | Items, layout, modifiers. |
+| `selectedId` | `string \| null` (model)       | `null`      | Two-way bound active tab. |
+| `class`      | `string`                       | `''`        | Extra CSS classes.        |
+
+Output: `tabChange: ITabChange` (`{ tabId }`).
+
+## Usage Example
+
+```html
+<!-- Default underline -->
+<smartpro-tabs
+  [options]="{
+    items: [
+      { id: 'account', label: 'My Account' },
+      { id: 'team', label: 'Team Members', badge: 4 }
+    ]
+  }"
+  [(selectedId)]="active"
+  (tabChange)="onChange($event)"
+/>
+
+<!-- Bar with underline -->
+<smartpro-tabs [options]="{ items, inBar: true }" [(selectedId)]="active" />
+
+<!-- Brand pills -->
+<smartpro-tabs
+  [options]="{ items, layout: 'pills', background: 'brand' }"
+  [(selectedId)]="active"
+/>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/tabs/tabs.component.ts`
+- Types: `packages/shared/angular/src/lib/components/tabs/tabs.types.ts`
+- Layouts: `packages/shared/angular/src/lib/components/tabs/{underline,pills}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/tabs/tabs.component.stories.ts`

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

@@ -0,0 +1,111 @@
+---
+name: angular-components-textarea
+description: Textarea component for @smartsoft001/pro-angular. Two variants — `simple` (with `borderStyle?` and `withPreview?` flags) and `with-actions` (with `actionStyle: 'avatar' | 'pill'`). Renders a labeled textarea with optional toolbar / actions / preview.
+user-invocable: false
+---
+
+# Textarea Component (Pro)
+
+Use `<smartpro-textarea>` and pick a variant via `options.variant`. The component reads `ITextareaOptionsPro` for label, name, rows, max-length, actions list, optional `avatarTpl` / `toolbarTpl` / `previewTpl`. Two-way `[(value)]` binding tracks the textarea content; `actionClick` fires when an action button is pressed.
+
+## Variants
+
+| `options.variant` (default `'simple'`) | Selector                         | Description                                                                                                                                                                                                                                                 |
+| -------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'simple'`                             | `smartpro-textarea-simple`       | Single textarea with optional label. `options.borderStyle: 'underline'` switches to a bottom-border-on-focus look with avatar + actions row. `options.withPreview: true` adds Write / Preview tabs above the textarea (plus a primary submit action below). |
+| `'with-actions'`                       | `smartpro-textarea-with-actions` | Textarea with action bar. `options.actionStyle: 'avatar'` (default) shows avatar + textarea + inline action row. `options.actionStyle: 'pill'` shows a title input + textarea + pill-style secondary actions and a primary submit action with a divider.    |
+
+## API
+
+### ITextareaOptionsPro (`textarea.types.ts`, omits + redefines `variant`)
+
+```typescript
+type SmartTextareaVariantPro = 'simple' | 'with-actions';
+
+interface ITextareaOptionsPro {
+  variant?: SmartTextareaVariantPro;
+  label?: string;
+  name?: string;
+  rows?: number;
+  maxLength?: number;
+  required?: boolean;
+  ariaLabel?: string;
+  avatarTpl?: TemplateRef<unknown>;
+  toolbarTpl?: TemplateRef<unknown>;
+  previewTpl?: TemplateRef<unknown>;
+  actions?: ITextareaAction[];
+  borderStyle?: 'box' | 'underline';
+  withPreview?: boolean;
+  actionStyle?: 'avatar' | 'pill';
+}
+
+interface ITextareaAction {
+  id: string;
+  label: string;
+  variant?: 'primary' | 'secondary' | 'ghost';
+  iconTpl?: TemplateRef<unknown>;
+}
+```
+
+### Wrapper Inputs
+
+| Input         | Type                               | Default     | Description                        |
+| ------------- | ---------------------------------- | ----------- | ---------------------------------- |
+| `options`     | `ITextareaOptionsPro \| undefined` | `undefined` | Variant + label + actions + flags. |
+| `value`       | `string` (model)                   | `''`        | Two-way bound textarea content.    |
+| `placeholder` | `string`                           | `''`        | Native placeholder.                |
+| `disabled`    | `boolean`                          | `false`     | Disable textarea + actions.        |
+| `class`       | `string`                           | `''`        | Extra CSS classes.                 |
+
+Output: `actionClick: ITextareaActionClick` (`{ actionId, value }`).
+
+## Usage Example
+
+```html
+<!-- Simple textarea -->
+<smartpro-textarea
+  [options]="{ label: 'Comment', name: 'comment' }"
+  [(value)]="comment"
+></smartpro-textarea>
+
+<!-- With underline border + avatar + actions -->
+<smartpro-textarea
+  [options]="{
+    variant: 'simple',
+    borderStyle: 'underline',
+    avatarTpl: avatar,
+    actions: [{ id: 'post', label: 'Post', variant: 'primary' }]
+  }"
+  [(value)]="comment"
+  (actionClick)="onAction($event)"
+></smartpro-textarea>
+
+<!-- With write / preview tabs -->
+<smartpro-textarea
+  [options]="{
+    variant: 'simple',
+    withPreview: true,
+    actions: [{ id: 'post', label: 'Post', variant: 'primary' }]
+  }"
+  [(value)]="comment"
+></smartpro-textarea>
+
+<!-- With avatar + actions row -->
+<smartpro-textarea
+  [options]="{ variant: 'with-actions', avatarTpl: avatar, actions }"
+  [(value)]="comment"
+></smartpro-textarea>
+
+<!-- With pill actions -->
+<smartpro-textarea
+  [options]="{ variant: 'with-actions', actionStyle: 'pill', actions }"
+  [(value)]="comment"
+></smartpro-textarea>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/textarea/textarea.component.ts`
+- Types: `packages/shared/angular/src/lib/components/textarea/textarea.types.ts`
+- Variants: `packages/shared/angular/src/lib/components/textarea/{simple,with-actions}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/textarea/textarea.component.stories.ts`

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

@@ -0,0 +1,109 @@
+---
+name: angular-components-toggle
+description: Toggle component for @smartsoft001/pro-angular. Two layouts (simple, with-labels), optional `size` (standard/short) and built-in `withIcon`, configurable label position, dark/light mode.
+user-invocable: false
+---
+
+# Toggle Component (Pro)
+
+Use `<smartpro-toggle>`. The wrapper picks one of two child layouts based on whether labels are provided in `options`. Within either layout, the toggle's appearance is shaped by `options.size` and `options.withIcon`.
+
+## Layouts
+
+| `variant` (auto-detected) | Selector                      | Description                                                                                                             |
+| ------------------------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `'simple'`                | `smartpro-toggle-simple`      | Bare switch, no label or description rendered. Use when the toggle stands alone (e.g., next to its own external label). |
+| `'with-labels'`           | `smartpro-toggle-with-labels` | Switch + label + optional description, with `labelPosition` honored.                                                    |
+
+The wrapper auto-selects `'with-labels'` when `options.label` or `options.description` is set; otherwise `'simple'`. Pass an explicit `variant` input to override the auto-detection.
+
+## Sizes & Icons
+
+`options.size` selects the geometry, available in both layouts:
+
+- `'standard'` (default) — full-width pill (`w-11`) with a white knob.
+- `'short'` — compact rail (`h-5 w-10`) with a knob that rides over the track.
+
+`options.withIcon: true` renders the built-in X / ✓ icons inside the knob (only meaningful for `size: 'standard'`).
+
+## API
+
+### IToggleOptionsPro (`toggle.types.ts`, extends `IToggleOptions`)
+
+```typescript
+type SmartTogglePro = 'simple' | 'with-labels';
+type SmartToggleSize = 'standard' | 'short';
+
+interface IToggleOptionsPro {
+  size?: SmartToggleSize; // 'standard' (default) | 'short'
+  withIcon?: boolean; // default false
+  label?: string;
+  description?: string;
+  labelPosition?: 'left' | 'right'; // 'left' (default) — used by with-labels
+  ariaLabel?: string;
+}
+```
+
+### Wrapper Inputs
+
+| Input      | Type                                     | Default     | Description                                                                         |
+| ---------- | ---------------------------------------- | ----------- | ----------------------------------------------------------------------------------- |
+| `value`    | `boolean` (model — two-way)              | `false`     | Toggle state. Bind with `[(value)]`.                                                |
+| `variant`  | `'simple' \| 'with-labels' \| undefined` | `undefined` | Forces a layout; when `undefined`, auto-detects from `options.label`/`description`. |
+| `disabled` | `boolean`                                | `false`     | Disables the toggle.                                                                |
+| `options`  | `IToggleOptionsPro \| undefined`         | `undefined` | Size, icon, label, description, label position, aria-label.                         |
+| `class`    | `string`                                 | `''`        | Extra CSS classes appended to the toggle wrapper.                                   |
+
+## Usage Examples
+
+```html
+<!-- Bare toggle -->
+<smartpro-toggle [(value)]="enabled" [options]="{ ariaLabel: 'Use setting' }" />
+
+<!-- Short toggle -->
+<smartpro-toggle
+  [(value)]="compact"
+  [options]="{ size: 'short', ariaLabel: 'Compact' }"
+/>
+
+<!-- With X / ✓ icons inside the knob -->
+<smartpro-toggle
+  [(value)]="active"
+  [options]="{ withIcon: true, ariaLabel: 'Active' }"
+/>
+
+<!-- Left label + description -->
+<smartpro-toggle
+  [(value)]="available"
+  [options]="{
+    label: 'Available to hire',
+    description: 'Nulla amet tempus sit accumsan.',
+    labelPosition: 'left'
+  }"
+/>
+
+<!-- Right label + description -->
+<smartpro-toggle
+  [(value)]="annual"
+  [options]="{
+    label: 'Annual billing',
+    description: '(Save 10%)',
+    labelPosition: 'right'
+  }"
+/>
+
+<!-- Disabled -->
+<smartpro-toggle
+  [(value)]="locked"
+  [options]="{ ariaLabel: 'Locked' }"
+  [disabled]="true"
+/>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/toggle/toggle.component.ts`
+- Types: `packages/shared/angular/src/lib/components/toggle/toggle.types.ts`
+- Layouts: `packages/shared/angular/src/lib/components/toggle/{simple,with-labels}/<name>.component.ts`
+- Shared class utilities: `packages/shared/angular/src/lib/components/toggle/toggle-classes.util.ts`
+- Stories: `packages/shared/angular/src/lib/components/toggle/toggle.component.stories.ts`

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

@@ -0,0 +1,139 @@
+---
+name: angular-components-vertical-navigation
+description: Vertical navigation component for @smartsoft001/pro-angular. Three layouts (flat, on-gray, with-secondary-navigation). Flat iterates `options.items` and renders optional per-item `iconTpl` / `badge`. The other two iterate `options.groups` for multi-section navigation.
+user-invocable: false
+---
+
+# Vertical Navigation Component (Pro)
+
+Use `<smartpro-vertical-navigation>`. Pick a layout via `options.layout`. The component reads either `options.items` (flat) or `options.groups` (grouped) depending on the layout, and emits `itemClick` when a link is clicked.
+
+## Layouts
+
+| `options.layout` (default `'flat'`) | Selector                                                 | Data                    | Description                                                                                                                                                                                                                                         |
+| ----------------------------------- | -------------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'flat'`                            | `smartpro-vertical-navigation-flat`                      | `items[]`               | Flat link list. Per-item `iconTpl` and `badge` are optional — render only when set on the item. Item padding tightens to `p-2` when `iconTpl` is present and expands to `p-2 pl-3` when not, so icon-less and icon-bearing rows align consistently. |
+| `'on-gray'`                         | `smartpro-vertical-navigation-on-gray`                   | `groups[]` or `items[]` | Multi-section navigation styled for a gray background. Each group can have a `title` and a list of items. Items support `initial` (single-letter chip) when no `iconTpl` is given.                                                                  |
+| `'with-secondary-navigation'`       | `smartpro-vertical-navigation-with-secondary-navigation` | `groups[]` or `items[]` | Like `on-gray` but tuned for the standard light sidebar shell. Same group/item shape.                                                                                                                                                               |
+
+## API
+
+### IVerticalNavOptionsPro (`vertical-navigation.types.ts`, extends `IVerticalNavOptions`)
+
+```typescript
+type SmartVerticalNavLayoutPro =
+  | 'flat'
+  | 'on-gray'
+  | 'with-secondary-navigation';
+
+interface IVerticalNavOptionsPro {
+  layout?: SmartVerticalNavLayoutPro;
+  ariaLabel?: string;
+  items?: IVerticalNavItem[]; // used by 'flat'
+  groups?: IVerticalNavGroup[]; // used by 'on-gray' and 'with-secondary-navigation'
+}
+
+interface IVerticalNavGroup {
+  id?: string;
+  title?: string;
+  items: IVerticalNavItem[];
+}
+
+interface IVerticalNavItem {
+  id: string;
+  label?: string;
+  href?: string;
+  current?: boolean;
+  badge?: string | number;
+  iconTpl?: TemplateRef<unknown>;
+  initial?: string;
+}
+```
+
+### Wrapper Inputs / Outputs
+
+| Input / Output | Type                                  | Description                                      |
+| -------------- | ------------------------------------- | ------------------------------------------------ |
+| `options`      | `IVerticalNavOptionsPro \| undefined` | Layout, items or groups, ARIA label.             |
+| `class`        | `string`                              | Extra CSS classes appended to the outer `<nav>`. |
+| `itemClick`    | `{ itemId: string }`                  | Emitted when an item link is clicked.            |
+
+## Usage
+
+### Flat list
+
+```html
+<smartpro-vertical-navigation
+  [options]="{
+    items: [
+      { id: 'dashboard', label: 'Dashboard', href: '/', current: true },
+      { id: 'team', label: 'Team', href: '/team' }
+    ]
+  }"
+  (itemClick)="onItem($event)"
+/>
+```
+
+### Flat list with badges
+
+```html
+<smartpro-vertical-navigation
+  [options]="{
+    items: [
+      { id: 'dashboard', label: 'Dashboard', href: '/', current: true, badge: 5 },
+      { id: 'projects', label: 'Projects', href: '/projects', badge: 12 }
+    ]
+  }"
+/>
+```
+
+### Flat list with icons
+
+```html
+<smartpro-vertical-navigation
+  [options]="{
+    items: [
+      { id: 'dashboard', label: 'Dashboard', href: '/', current: true, iconTpl: dashboardIcon },
+      { id: 'team', label: 'Team', href: '/team', iconTpl: teamIcon }
+    ]
+  }"
+/>
+```
+
+### Grouped (on-gray)
+
+```html
+<smartpro-vertical-navigation
+  [options]="{
+    layout: 'on-gray',
+    groups: [
+      { items: [{ id: 'dashboard', label: 'Dashboard', href: '/', current: true }] },
+      {
+        title: 'Projects',
+        items: [
+          { id: 'web', label: 'Website redesign', href: '/web', initial: 'W' },
+          { id: 'graphql', label: 'GraphQL API', href: '/graphql', initial: 'G' }
+        ]
+      }
+    ]
+  }"
+/>
+```
+
+### Grouped (with secondary navigation)
+
+```html
+<smartpro-vertical-navigation
+  [options]="{
+    layout: 'with-secondary-navigation',
+    groups: [...]
+  }"
+/>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/vertical-navigation/vertical-navigation.component.ts`
+- Types: `packages/shared/angular/src/lib/components/vertical-navigation/vertical-navigation.types.ts`
+- Layouts: `packages/shared/angular/src/lib/components/vertical-navigation/{flat,on-gray,with-secondary-navigation}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/vertical-navigation/vertical-navigation.component.stories.ts`

package/plugins/smart-pro/skills/audit-log/SKILL.md

@@ -0,0 +1,82 @@
+---
+name: audit-log
+description: Query and analyze Claude Code audit logs
+user-invocable: true
+allowed-tools: Bash, Read, Grep, Glob
+---
+
+# Audit Log
+
+Query and analyze the Claude Code audit trail stored in `.claude/audit_logs/`.
+
+## Purpose
+
+Provide easy access to audit logs that track all Claude Code actions, including tool usage, prompt submissions, and session activity.
+
+## When to Use
+
+Use `/smart:audit-log` when you need to:
+
+- Review what actions Claude took during a session
+- Debug unexpected behavior by checking the audit trail
+- Verify that safety validators blocked dangerous commands
+- Analyze tool usage patterns
+
+## Arguments
+
+```
+/smart:audit-log [today|yesterday|YYYYMMDD]
+```
+
+- **today** (default) — Show today's audit log
+- **yesterday** — Show yesterday's audit log
+- **YYYYMMDD** — Show log for a specific date (e.g., `20260210`)
+
+## Log Location
+
+```
+.claude/audit_logs/YYYYMMDD_audit.jsonl
+```
+
+Each line is a JSON object with:
+
+- `timestamp` — ISO 8601 UTC timestamp
+- `event_type` — Hook event (PreToolUse, PostToolUse, UserPromptSubmit, Stop)
+- `session_id` — Unique session identifier
+- `event_data` — Full event payload
+
+## Instructions
+
+1. Determine the target date from the argument (default: today)
+2. Construct the log file path: `.claude/audit_logs/YYYYMMDD_audit.jsonl`
+3. Check if the file exists using Glob
+4. Read the file and parse JSONL entries
+5. Present a summary:
+   - Total events count
+   - Breakdown by event type
+   - Any blocked actions (exit code 2)
+   - Timeline of key actions
+
+### Filtering Examples
+
+To filter by tool name:
+
+```bash
+grep '"tool_name":"Bash"' .claude/audit_logs/YYYYMMDD_audit.jsonl
+```
+
+To filter by event type:
+
+```bash
+grep '"event_type":"PreToolUse"' .claude/audit_logs/YYYYMMDD_audit.jsonl
+```
+
+To show only blocked actions:
+
+```bash
+grep 'BLOCKED' .claude/audit_logs/YYYYMMDD_audit.jsonl
+```
+
+## Output Format
+
+Present results as a readable summary table, not raw JSON. Group events chronologically and highlight any safety blocks or errors.