@pega/sdk 0.0.4 → 0.0.5

package/templates/react-sdk-reference/.claude/prompts/generate-all-components.md

@@ -1,158 +0,0 @@
-## Step 0 — Resolve inputs
-
-Read the user's message carefully. Extract:
-
-- **Design system** — the UI library to use (e.g. `Ant Design`, `Chakra UI`, `Carbon`, `Radix UI`)
-- **Base components folder** — the root folder that contains (or will contain) the component type subfolders (e.g. `src/components/`)
-- **Component types in scope** — which types to generate (default: all four if not specified)
-
-Both **design system** and **base components folder** are required. If either is missing or ambiguous, ask both unresolved items in one numbered list. Do not assume or default the base folder — the client's folder structure may differ.
-
-Example questions (ask only the ones that are actually missing):
-
-1. Which design system should I use? (e.g. Ant Design, Chakra UI, Carbon, Radix UI)
-2. What is your base components folder? (e.g. `src/components/`) — subfolders `field/`, `template/`, `widget/`, and `designSystemExtension/` will be used under it.
-
-### Component type scope
-
-Extract which types the user wants from the message:
-
-| User says                                  | Types in scope                                    |
-| ------------------------------------------ | ------------------------------------------------- |
-| "generate all components"                  | field + template + widget + designSystemExtension |
-| "generate field and widget components"     | field + widget                                    |
-| "generate widget, template components"     | widget + template                                 |
-| "generate all components except templates" | field + widget + designSystemExtension            |
-| "replace everything"                       | field + template + widget + designSystemExtension |
-
-Default to **all four types** if the message does not restrict the scope.
-
-### Derived output paths
-
-Once the base folder is known, derive the output path for each type in scope:
-
-| Type                  | Derived path                    |
-| --------------------- | ------------------------------- |
-| field                 | `<base>/field/`                 |
-| template              | `<base>/template/`              |
-| widget                | `<base>/widget/`                |
-| designSystemExtension | `<base>/designSystemExtension/` |
-
-Once design system, base folder, and type scope are resolved, continue to Step 1.
-
----
-
-## Step 1 — Read general skill files (once, for each type in scope)
-
-Read the general skill file for every type in scope. Do this upfront — do not re-read per component.
-
-| Type                  | Skill file to read                          |
-| --------------------- | ------------------------------------------- |
-| field                 | `.claude/skills/field-components.md`        |
-| template              | `.claude/skills/template-components.md`     |
-| widget                | `.claude/skills/widget-components.md`       |
-| designSystemExtension | `.claude/skills/design-system-extension.md` |
-
-Keep all loaded skill files active throughout the entire session.
-
----
-
-## Step 2 — Install and discover the design system (once)
-
-Execute **Step 3** from `.claude/prompts/add-component.md` exactly as written:
-
-- Check `package.json` for the DS package
-- Install if missing, including any peer dependencies
-- Report what was installed
-
-Then execute **Step 4** from `.claude/prompts/add-component.md` exactly as written:
-
-- Read the DS README from `node_modules`
-- Discover all exported components from `dist/index.d.ts`
-- Read prop interfaces for primitives needed across **all types in scope**:
-  - **field**: form input controls (Input, Select, Checkbox, DatePicker, etc.)
-  - **template**: grid/layout primitives (Grid, Flex, Columns, SimpleGrid, etc.)
-  - **widget**: card/list/table/button/badge primitives
-  - **designSystemExtension**: alert/notification/avatar primitives
-- Note form layout wrappers, size/variant conventions, icon packages, and design tokens
-
-Build a unified **DS API reference map** covering all types in scope. Reuse it throughout — do not repeat discovery commands per component.
-
----
-
-## Step 3 — Overwrite check (all types, all at once)
-
-For every type in scope, check whether each component's `<outputPath>/<ComponentName>/<ComponentName>.tsx` already exists.
-
-Collect all existing components across all types and report them in one consolidated list:
-
-> "The following N components already exist across [types]: [list grouped by type]. How should I proceed?
->
-> - **Overwrite all** — replace all existing implementations
-> - **Skip existing** — only generate components that don't exist yet
-> - **Cancel** — stop without generating anything"
-
-Wait for the user's answer before proceeding. If none exist, continue immediately.
-
----
-
-## Step 4 — Generate field components (skip if field not in scope)
-
-If `field` is in scope, execute **Step 4** from `.claude/prompts/generate-field-components.md` in full:
-
-- Use the derived field output path: `<base>/field/`
-- The general skill (`field-components.md`) is already loaded from Step 1 — do not re-read it
-- The DS API reference map is already built from Step 2 — do not repeat discovery commands
-- For each of the 27 field components: read skill file → generate → register in `component-map.ts`
-- Report progress after each component
-
----
-
-## Step 5 — Generate template components (skip if template not in scope)
-
-If `template` is in scope, execute **Step 4** from `.claude/prompts/generate-template-components.md` in full:
-
-- Use the derived template output path: `<base>/template/`
-- The general skill (`template-components.md`) is already loaded from Step 1 — do not re-read it
-- The DS layout API is already discovered from Step 2 — do not repeat discovery commands
-- For each of the 32 template components: read skill file → generate → register in `component-map.ts`
-- Report progress after each component
-
----
-
-## Step 6 — Generate widget components (skip if widget not in scope)
-
-If `widget` is in scope, execute **Step 4** from `.claude/prompts/generate-widget-components.md` in full:
-
-- Use the derived widget output path: `<base>/widget/`
-- The general skill (`widget-components.md`) is already loaded from Step 1 — do not re-read it
-- The DS UI primitive map is already built from Step 2 — do not repeat discovery commands
-- For each of the 9 widget components: read skill file → generate → register in `component-map.ts`
-- If no skill file exists for a component (e.g., `SummaryList`), use the general pattern from `widget-components.md`
-- Report progress after each component
-
----
-
-## Step 7 — Generate design system extension components (skip if DSE not in scope)
-
-If `designSystemExtension` is in scope, execute **Step 4** from `.claude/prompts/generate-dse-components.md` in full:
-
-- Use the derived DSE output path: `<base>/designSystemExtension/`
-- The general skill (`design-system-extension.md`) is already loaded from Step 1 — do not re-read it
-- The DS display primitive map is already built from Step 2 — do not repeat discovery commands
-- For each of the 11 DSE components: read skill file → generate → register in `component-map.ts`
-- Apply the Pattern B/A/C branching as specified in the skill file and `design-system-extension.md`
-- Report progress after each component
-
----
-
-## Step 8 — Verify the build
-
-Execute **Step 7** from `.claude/prompts/add-component.md` exactly as written:
-
-- Run `npm run build`
-- Fix any TypeScript or build errors before reporting completion
-- Report a final summary:
-  - Total components generated, grouped by type
-  - All entries added to `component-map.ts`
-  - Any components skipped (if "skip existing" was chosen in Step 3)

package/templates/react-sdk-reference/.claude/prompts/generate-dse-components.md

@@ -1,140 +0,0 @@
-## Step 0 — Resolve inputs
-
-Read the user's message carefully. Extract:
-
-- **Design system** — the UI library to use (e.g. `Ant Design`, `Chakra UI`, `Carbon`, `Radix UI`)
-- **Output base path** — the folder where DSE components should be generated (e.g. `src/components/designSystemExtension/`)
-- **Component list** — which components to generate (default: all 11 listed below)
-
-Both **design system** and **output base path** are required. If either is missing or ambiguous, ask both unresolved items in one numbered list. Do not assume or default the output path — the client's folder structure may differ from the reference app.
-
-Example questions (ask only the ones that are actually missing):
-
-1. Which design system should I use? (e.g. Ant Design, Chakra UI, Carbon, Radix UI)
-2. Where should the DSE components be generated? (e.g. `src/components/designSystemExtension/`)
-
-If the user specified a subset (e.g., "just AlertBanner and FieldValueList"), restrict the list accordingly.
-
-Once both are known, continue to Step 1.
-
-### Full component list (default — 11 DSE components)
-
-| Component         | Pattern              | DS needed?    |
-| ----------------- | -------------------- | ------------- |
-| AlertBanner       | B — Pure display     | Yes           |
-| Banner            | B — Pure display     | Yes           |
-| CaseSummaryFields | A — PConnect display | Minimal       |
-| DetailsFields     | A — PConnect display | Minimal       |
-| FieldGroup        | C — Complex display  | No            |
-| FieldGroupList    | C — Complex display  | No            |
-| FieldValueList    | A — PConnect display | No (CSS only) |
-| Operator          | B — Pure display     | Yes           |
-| Pulse             | C — Complex display  | No            |
-| RichTextEditor    | C — Complex display  | No            |
-| WssQuickCreate    | B — Pure display     | Yes           |
-
----
-
-## Step 1 — Read `design-system-extension.md` (once, for the entire session)
-
-Read the full contents of `.claude/skills/design-system-extension.md`.
-
-This gives you:
-
-- All three implementation patterns (Pure display, Field value display, Complex display with PConnect)
-- The `// [DS RENDER]` placeholder approach for Pattern B components
-- The Design System Adaptation section — pattern categorisation, variant mapping table, DS discovery guidance
-- Styling patterns — when to use CSS files vs DS style props
-- Registration conventions
-
-Keep this context active throughout the entire generation session. Do not re-read it per component.
-
----
-
-## Step 2 — Install and discover the design system (once)
-
-Execute **Step 3** from `.claude/prompts/add-component.md` exactly as written:
-
-- Check `package.json` for the DS package
-- Install if missing, including any peer dependencies
-- Report what was installed
-
-Then execute **Step 4** from `.claude/prompts/add-component.md` exactly as written:
-
-- Read the DS README from `node_modules`
-- Discover exported components from `dist/index.d.ts`
-- Focus on display primitives used by Pattern B components: Alert, Card, Avatar, Badge, Tag, Notification
-- Read prop interfaces for these components from `.d.ts` files
-
-> Pattern A/C components (FieldValueList, FieldGroup, Pulse, etc.) use PConnect bridge or plain CSS — they do not use the DS API. Only Pattern B components consume DS primitives.
-
-Build a **DS display primitive reference map** from this discovery. Reuse it for every Pattern B component — do not repeat these commands per component.
-
----
-
-## Step 3 — Overwrite check (all at once)
-
-For each component in the list, check whether `<outputPath>/<ComponentName>/<ComponentName>.tsx` already exists.
-
-If **any** exist, report them all at once and ask:
-
-> "The following N components already exist: [list]. How should I proceed?
->
-> - **Overwrite all** — replace all existing implementations
-> - **Skip existing** — only generate components that don't exist yet
-> - **Cancel** — stop without generating anything"
-
-Wait for the user's answer before proceeding. If none exist, continue immediately.
-
----
-
-## Step 4 — Generate each component (loop)
-
-For each component in the resolved list (in the order listed in Step 0):
-
-### 4a — Read the component-specific skill file
-
-Execute **Step 2** from `.claude/prompts/add-component.md` for this component:
-
-- Read `.claude/skills/design-system-extension-skills/<ComponentName>.md` fully
-- Identify the component's pattern (B / A / C) from the skill file
-- Pay attention to:
-  - **Behavioral Contract** — prop handling, variant mapping, rendering logic, edge cases
-  - **Design System Mapping** table — the recommended DS primitive for Pattern B components
-
-### 4b — Generate the component files
-
-Execute **Step 5** from `.claude/prompts/add-component.md` for this component:
-
-- Create `<outputPath>/<ComponentName>/` directory
-- Create `<ComponentName>.tsx` using:
-  - **Pattern B** (Pure display — AlertBanner, Banner, Operator, WssQuickCreate): use DS alert/card/avatar primitive from Step 2 API map in the `// [DS RENDER]` section; apply variant mapping from the skill file
-  - **Pattern A** (PConnect display — CaseSummaryFields, DetailsFields, FieldValueList): use CSS classes or DS typography props; no DS component primitives
-  - **Pattern C** (Complex display — FieldGroup, FieldGroupList, Pulse, RichTextEditor): use PConnect bridge (`createElement(createPConnectComponent(), ...)`); no DS primitives
-- Create `index.tsx` if required by the skill file:
-  ```typescript
-  export { default } from './<ComponentName>';
-  ```
-- Create any CSS file required by the skill file
-
-### 4c — Register the component
-
-Execute **Step 6** from `.claude/prompts/add-component.md` for this component:
-
-- Add the import to `src/components/component-map.ts` in the Design System Extension section
-- Add the entry to `getSampleComponentMap()` under the DSE comment
-- Do not reorder or restructure any existing entries
-
-### 4d — Report progress
-
-After each component: "`<ComponentName>` ✓ — Pattern `<B/A/C>`<`, using <DS primitive>` if Pattern B>"
-
----
-
-## Step 5 — Verify the build
-
-Execute **Step 7** from `.claude/prompts/add-component.md` exactly as written:
-
-- Run `npm run build`
-- Fix any TypeScript or build errors before reporting completion
-- Report a summary: list of all files created and all entries added to `component-map.ts`

package/templates/react-sdk-reference/.claude/prompts/generate-field-components.md

@@ -1,153 +0,0 @@
-## Step 0 — Resolve inputs
-
-Read the user's message carefully. Extract:
-
-- **Design system** — the UI library to use (e.g. `Ant Design`, `Chakra UI`, `Carbon`, `Radix UI`)
-- **Output base path** — the folder where field components should be generated (e.g. `src/components/field/`, `app/ui/fields/`)
-- **Component list** — which components to generate (default: all 27 listed below)
-
-Both **design system** and **output base path** are required. If either is missing or ambiguous, ask both unresolved items in one numbered list. Do not assume or default the output path — the client's folder structure may differ from the reference app.
-
-Example questions (ask only the ones that are actually missing):
-
-1. Which design system should I use? (e.g. Ant Design, Chakra UI, Carbon, Radix UI)
-2. Where should the field components be generated? (e.g. `src/components/field/`)
-
-If the user specified a subset (e.g., "just TextInput and Dropdown"), restrict the list accordingly.
-
-Once both are known, continue to Step 1.
-
-### Full component list (default)
-
-| Component       | Pega Name       |
-| --------------- | --------------- |
-| AutoComplete    | AutoComplete    |
-| CancelAlert     | CancelAlert     |
-| Checkbox        | Checkbox        |
-| Currency        | Currency        |
-| Date            | Date            |
-| DateTime        | DateTime        |
-| Decimal         | Decimal         |
-| Dropdown        | Dropdown        |
-| Email           | Email           |
-| Group           | Group           |
-| Integer         | Integer         |
-| Location        | Location        |
-| Multiselect     | Multiselect     |
-| ObjectReference | ObjectReference |
-| Percentage      | Percentage      |
-| Phone           | Phone           |
-| RadioButtons    | RadioButtons    |
-| RichText        | RichText        |
-| ScalarList      | ScalarList      |
-| SelectableCard  | SelectableCard  |
-| SemanticLink    | SemanticLink    |
-| TextArea        | TextArea        |
-| TextContent     | TextContent     |
-| TextInput       | TextInput       |
-| Time            | Time            |
-| URL             | URL             |
-| UserReference   | UserReference   |
-
----
-
-## Step 1 — Read `field-components.md` (once, for the entire session)
-
-Read the full contents of `.claude/skills/field-components.md`.
-
-This gives you:
-
-- The behavioral skeleton every field component must follow (state, effects, event handling, display modes)
-- The Design System Adaptation guide (prop mapping conventions, form layout wrappers)
-- The abstract template to use as a base for all components
-
-Keep this context active throughout the entire generation session. Do not re-read it per component.
-
----
-
-## Step 2 — Install and discover the design system (once)
-
-Execute **Step 3** from `.claude/prompts/add-component.md` exactly as written:
-
-- Check `package.json` for the DS package
-- Install if missing, including any peer dependencies
-- Report what was installed
-
-Then execute **Step 4** from `.claude/prompts/add-component.md` exactly as written:
-
-- Read the DS README from `node_modules`
-- Discover all exported components from `dist/index.d.ts`
-- Read prop interfaces for the control types needed across the component list
-- Note form layout wrappers, size/variant conventions, icon packages, and design tokens
-
-Build a **DS API reference map** from this discovery. You will reuse it for every component — do not repeat these commands per component.
-
----
-
-## Step 3 — Overwrite check (all at once)
-
-For each component in the list, check whether `<outputPath>/<ComponentName>/<ComponentName>.tsx` already exists.
-
-If **any** exist, report them all at once and ask:
-
-> "The following N components already exist: [list]. How should I proceed?
->
-> - **Overwrite all** — replace all existing implementations
-> - **Skip existing** — only generate components that don't exist yet
-> - **Cancel** — stop without generating anything"
-
-Wait for the user's answer before proceeding. If none exist, continue immediately.
-
----
-
-## Step 4 — Generate each component (loop)
-
-For each component in the resolved list (in the order listed in Step 0):
-
-### 4a — Read the component-specific skill file
-
-Execute **Step 2** from `.claude/prompts/add-component.md` for this component:
-
-- Read `.claude/skills/field-skills/<ComponentName>.md` fully
-- Pay attention to:
-  - **Behavioral Contract** — state management, option loading, edge cases specific to this component
-  - **Design System Mapping** table — the recommended DS component for the chosen design system
-  - **UI control type** — use this to select the closest DS primitive if the chosen DS is not in the mapping table
-
-### 4b — Generate the component files
-
-Execute **Step 5** from `.claude/prompts/add-component.md` for this component:
-
-- Create `<outputPath>/<ComponentName>/` directory
-- Create `<ComponentName>.tsx` using:
-  - The abstract behavioral skeleton from `field-components.md` (read in Step 1)
-  - The Behavioral Contract from the component skill file
-  - The DS API confirmed in Step 2 (from the DS API reference map — no new terminal commands needed)
-  - Display mode guards (`DISPLAY_ONLY`, `STACKED_LARGE_VAL`) via `getComponentFromRegistry('FieldValueList')`
-  - `data-test-id={testId}` on the underlying interactive element
-- Create `index.tsx`:
-  ```typescript
-  export { default } from './<ComponentName>';
-  ```
-
-### 4c — Register the component
-
-Execute **Step 6** from `.claude/prompts/add-component.md` for this component:
-
-- Add the import to `src/components/component-map.ts` in the Fields section
-- Add the entry to `getSampleComponentMap()` under the fields comment
-- Do not reorder or restructure any existing entries
-
-### 4d — Report progress
-
-After each component: "`<ComponentName>` ✓ — using `<DS component name>`"
-
----
-
-## Step 5 — Verify the build
-
-Execute **Step 7** from `.claude/prompts/add-component.md` exactly as written:
-
-- Run `npm run build`
-- Fix any TypeScript or build errors before reporting completion
-- Report a summary: list of all files created and all entries added to `component-map.ts`

package/templates/react-sdk-reference/.claude/prompts/generate-template-components.md

@@ -1,165 +0,0 @@
-## Step 0 — Resolve inputs
-
-Read the user's message carefully. Extract:
-
-- **Design system** — the UI library to use (e.g. `Ant Design`, `Chakra UI`, `Carbon`, `Radix UI`)
-- **Output base path** — the folder where template components should be generated (e.g. `src/components/template/`)
-- **Component list** — which templates to generate (default: all 32 listed below)
-
-Both **design system** and **output base path** are required. If either is missing or ambiguous, ask both unresolved items in one numbered list. Do not assume or default the output path — the client's folder structure may differ from the reference app.
-
-Example questions (ask only the ones that are actually missing):
-
-1. Which design system should I use? (e.g. Ant Design, Chakra UI, Carbon, Radix UI)
-2. Where should the template components be generated? (e.g. `src/components/template/`)
-
-> **Note:** The design system applies only to **layout templates** (TwoColumn, OneColumn, NarrowWide, WideNarrow, and their sub-variants). Form templates and page templates use the PConnect bridge pattern and are design-system agnostic — they will be generated without DS primitives regardless of your choice.
-
-If the user specified a subset (e.g., "just TwoColumn and OneColumn"), restrict the list accordingly.
-
-Once both are known, continue to Step 1.
-
-### Full component list (default — 32 templates)
-
-| Component               | Category   |
-| ----------------------- | ---------- |
-| AdvancedSearch          | Page       |
-| AppShell                | Page       |
-| BannerPage              | Page       |
-| CaseSummary             | Page       |
-| CaseView                | Page       |
-| CaseViewActionsMenu     | Widget     |
-| Confirmation            | Page       |
-| DataReference           | Form       |
-| DefaultForm             | Form       |
-| DefaultPage             | Page       |
-| Details                 | Layout     |
-| DetailsSubTabs          | Layout     |
-| DetailsThreeColumn      | Layout     |
-| DetailsTwoColumn        | Layout     |
-| DynamicTabs             | Navigation |
-| FieldGroupTemplate      | Form       |
-| HierarchicalForm        | Form       |
-| InlineDashboard         | Page       |
-| InlineDashboardPage     | Page       |
-| ListPage                | Page       |
-| ListView                | Page       |
-| MultiReferenceReadOnly  | Display    |
-| NarrowWide              | Layout     |
-| OneColumn               | Layout     |
-| PromotedFilters         | Widget     |
-| SelfServiceCaseView     | Page       |
-| SimpleTable             | Table      |
-| SingleReferenceReadOnly | Display    |
-| SubTabs                 | Navigation |
-| TwoColumn               | Layout     |
-| WideNarrow              | Layout     |
-| WssNavBar               | Navigation |
-
----
-
-## Step 1 — Read `template-components.md` (once, for the entire session)
-
-Read the full contents of `.claude/skills/template-components.md`.
-
-This gives you:
-
-- **Layout template pattern** — DS-agnostic grid skeleton with `// [DS GRID]` placeholder; `templateCol` parsing logic; responsive behavior rules
-- **Design System Adaptation section** — how to map the chosen DS's grid/flex primitive to the computed column ratios
-- **Form template pattern** — PConnect bridge via `createElement(createPConnectComponent(), ...)` and `connectToState`; no DS involved
-- **Page template pattern** — region extraction via `getRawMetadata()` and PConnect bridge; no DS involved
-- Registration conventions and helper utilities
-
-Keep this context active throughout the entire generation session. Do not re-read it per component.
-
----
-
-## Step 2 — Install and discover the design system (once)
-
-Execute **Step 3** from `.claude/prompts/add-component.md` exactly as written:
-
-- Check `package.json` for the DS package
-- Install if missing, including any peer dependencies
-- Report what was installed
-
-Then execute **Step 4** from `.claude/prompts/add-component.md` exactly as written:
-
-- Read the DS README from `node_modules`
-- Discover exported layout components (Grid, Columns, Flex, SimpleGrid, etc.) from `dist/index.d.ts`
-- Read prop interfaces for the grid/layout components needed by layout templates
-- Note responsive breakpoint APIs and column sizing conventions
-
-> You only need layout-related DS components. Form and page templates do not use the DS.
-
-Build a **DS layout API reference** from this discovery. Reuse it for every layout template — do not repeat these commands per component.
-
----
-
-## Step 3 — Overwrite check (all at once)
-
-For each component in the list, check whether `<outputPath>/<ComponentName>/<ComponentName>.tsx` already exists.
-
-If **any** exist, report them all at once and ask:
-
-> "The following N components already exist: [list]. How should I proceed?
->
-> - **Overwrite all** — replace all existing implementations
-> - **Skip existing** — only generate components that don't exist yet
-> - **Cancel** — stop without generating anything"
-
-Wait for the user's answer before proceeding. If none exist, continue immediately.
-
----
-
-## Step 4 — Generate each component (loop)
-
-For each component in the resolved list (in the order listed in Step 0):
-
-### 4a — Read the component-specific skill file
-
-Execute **Step 2** from `.claude/prompts/add-component.md` for this component:
-
-- Read `.claude/skills/template-skills/<ComponentName>.md` fully
-- Identify the template category from the skill file:
-  - **Layout** — uses DS grid primitives from Step 2's API reference
-  - **Form** — uses PConnect bridge + CSS classes; ignore DS
-  - **Page** — uses region extraction + PConnect bridge; ignore DS
-- Pay attention to Behavioral Contract, sub-variants, and any Design System Mapping table
-
-### 4b — Generate the component files
-
-Execute **Step 5** from `.claude/prompts/add-component.md` for this component:
-
-- Create `<outputPath>/<ComponentName>/` directory
-- Create `<ComponentName>.tsx` using:
-  - **Layout templates**: DS-agnostic skeleton from `template-components.md` with the `// [DS GRID]` section filled in using DS layout API confirmed in Step 2
-  - **Form/Page templates**: PConnect bridge pattern from `template-components.md`; no DS primitives
-  - Behavioral Contract from the component skill file
-- Create `index.tsx` if required by the skill file:
-  ```typescript
-  export { default } from './<ComponentName>';
-  ```
-- Create any CSS file required by the skill file (e.g., `DefaultForm.css` with grid classes)
-
-### 4c — Register the component
-
-Execute **Step 6** from `.claude/prompts/add-component.md` for this component:
-
-- Add the import to `src/components/component-map.ts` in the Templates section
-- Add the entry to `getSampleComponentMap()` under the templates comment
-- For sub-variants (e.g., TwoColumnPage, TwoColumnTab), register each key separately pointing to its own file or a shared implementation as specified in the skill file
-- Do not reorder or restructure any existing entries
-
-### 4d — Report progress
-
-After each component: "`<ComponentName>` ✓ — `<Layout | Form | Page>` template`<, using <DS component name> for grid>` if layout"
-
----
-
-## Step 5 — Verify the build
-
-Execute **Step 7** from `.claude/prompts/add-component.md` exactly as written:
-
-- Run `npm run build`
-- Fix any TypeScript or build errors before reporting completion
-- Report a summary: list of all files created and all entries added to `component-map.ts`